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";

VB.Net

 Imports System.Data.SqlClient

Imports System.Configuration

Public Class Form1

    Private Sub btnInsert_Click(sender As Object, e As EventArgs) Handles btnInsert.Click

        Dim connectionString As String = ConfigurationManager.ConnectionStrings("MyConnectionString").ConnectionString

        Dim name As String = txtName.Text ' Assuming you have a TextBox named txtName for the name input

        Dim email As String = txtEmail.Text ' Assuming you have a TextBox named txtEmail for the email input

        Using connection As New SqlConnection(connectionString)

            connection.Open()

            Dim insertQuery As String = "INSERT INTO YourTable (Name, Email) VALUES (@Name, @Email)" ' Replace with your table and column names

            Using cmd As New SqlCommand(insertQuery, connection)

                cmd.Parameters.AddWithValue("@Name", name)

                cmd.Parameters.AddWithValue("@Email", email)

                Dim rowsAffected As Integer = cmd.ExecuteNonQuery()

                If rowsAffected > 0 Then

                    MessageBox.Show("Data inserted successfully.")

                    ' Optionally, clear the input fields or perform other actions after successful insertion.

                Else

                    MessageBox.Show("Data insertion failed.")

                End If

            End Using

        End Using

    End Sub

End Class