GraphQL React
TopicSubArea.tsx
import { ApolloClient, gql, InMemoryCache, useQuery } from "@apollo/client";
import { Delete, Edit } from "@mui/icons-material";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, Grid, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
import { AgGridReact } from "ag-grid-react";
import React, { useEffect, useState } from "react";
import apolloClient from "../../helpers/apolloclient.interceptor";
import { useFormik } from "formik";
const GET_TOPICSUBAREAS =
gql`
query {
topicSubArea
{
topicSubAreaId,
topicSubAreaName,
topicSubAreaDescription,
abbreviation
}
}
`;
const GET_EVENTLIST =
gql`
query {
event {
eventId
eventName
}
}
`;
const TopicSubArea = () => {
const [rowData, setRowData] = useState([]); // Set rowData to Array of Objects, one Object per Row
const [open, setOpen] = React.useState(false);
const [eventData, setEventData] = useState([]);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSave = () => {
// console.log(props)
setOpen(false);
}
const [columnDefs, setColumnDefs] = useState([
{ field: 'topicSubAreaId', headerName: 'Id', filter: true, width: 100 },
{ field: 'topicSubAreaName', filter: true },
{ field: 'topicSubAreaDescription', headerName: 'Description', filter: true },
{ field: 'abbreviation', filter: true },
{
headerName: "", maxWidth: 70, cellRendererParams: { edit: 'editButton' }, filter: false, cellRenderer: (data: any) => {
return <><Edit color="primary" /></>
}
},
{
headerName: "", maxWidth: 70, cellRendererParams: { delete: 'deleteButton' }, filter: false, cellRenderer: (data: any) => {
return <><Delete color="error" /></>
}
}
]);
// const client = new ApolloClient({
// uri: process.env.REACT_APP_MAGIC_API,
// cache: new InMemoryCache(),
// });
const client = apolloClient;
useEffect(() => {
client
.query({
query: GET_TOPICSUBAREAS
})
.then((response) => setRowData(response.data));
}, []);
useEffect(() => {
client
.query({
query: GET_EVENTLIST
})
.then((response) => setEventData(response.data.event));
}, []);
const formik = useFormik({
initialValues: {
eventId: 0,
topicSubAreaName: '',
topicSubAreaDescription: '',
abbreviation: '',
dateCreated: "2022-10-20 05:25:39.339985+00",
dateModified: "2022-10-20 05:25:39.339985+00",
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));//save
handleClose();
},
});
var results: any = rowData;
console.log(results.topicSubArea);
const [eventId, setEventId] = useState(0);
//this event is onChange event
const handleChange = (event: any) => {
setEventId(event.target.value);
}
return (
<>
<Grid container spacing={3}>
<Grid item xs={4}>
<Button variant="contained" onClick={handleClickOpen}>Add TopicSubArea</Button>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={formik.handleSubmit}>
<DialogTitle>Add TopicSubArea</DialogTitle>
<DialogContent>
<Select
autoFocus
value={eventId}
fullWidth
id="Event"
label="Event"
variant="standard"
margin="dense"
onChange={handleChange}
>
{
eventData.map((event: any) => {
return (
<MenuItem key={event.eventId} value={event.eventId}>{event.eventName}</MenuItem>
)
})
}
</Select>
<TextField
margin="dense"
id="topicSubAreaName"
label="topicSubAreaName"
type="text"
fullWidth
variant="standard"
value={formik.values.topicSubAreaName}
onChange={formik.handleChange}
/>
<TextField
margin="dense"
id="topicSubAreaDescription"
label="topicSubAreaDescription"
type="text"
fullWidth
variant="standard"
value={formik.values.topicSubAreaDescription}
onChange={formik.handleChange}
/>
<TextField
margin="dense"
id="abbreviation"
label="abbreviation"
type="text"
fullWidth
variant="standard"
value={formik.values.abbreviation}
onChange={formik.handleChange}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit" >Add</Button>
</DialogActions>
</form>
</Dialog>
</Grid>
<Grid item xs={12}>
<Typography>TopicSubArea List</Typography>
<div className="ag-theme-alpine" style={{ height: 400, width: 850 }}>
<AgGridReact
rowData={results.topicSubArea}
columnDefs={columnDefs}>
</AgGridReact>
</div>
</Grid>
</Grid>
</>
)
}
export default TopicSubArea
function learn()
{
}
const learn=function (){
}
const learn = () => {
//arrow function
}
learn = () => {
//arrow function
}
const learn = () => "Hellow";
Comments
Post a Comment