POST API (Insert in Site User) Simple Way

 POST API (Insert in Site User)

 Simple Way

import { Box, Button, Divider, InputAdornment, Stack, TextField } from '@mui/material';

import SignPic from '../../asset/images/signin.jpg'

import { Bodytext, Headingtext, SubTitletext, Titletext } from '../../component/utils/Mytext';

import { MYCOLOR } from '../../component/utils/MyColor';

import { getAuth, createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth"

import { app } from "../../firebase"

import { useNavigate } from 'react-router-dom';

import { useState } from 'react';

import SelectBox from '../../component/Select';

import { useSelector } from 'react-redux';

import { selectUserTypeSlice } from '../../redux toolkit/reducer/UsertypeSlice';

const auth = getAuth(app);

const googleProvider = new GoogleAuthProvider();

export default function SignUp() {

    const navigate = useNavigate();

    const [email, setEmail] = useState('')

    const [password, setPassword] = useState('')

    const [mobileno, setMobileno] = useState('')

    const [status, setStatus] = useState('')

    const usertype_id = useSelector(selectUserTypeSlice)

    const signupUser = async () => {

        console.warn("Selected User Type : -", usertype_id)

        console.warn(email, password, mobileno, usertype_id)

        createUserWithEmailAndPassword(

            auth,

            email, //'avisingh@gmail.com',

            password //"Avi123"

        ).then((value) => { console.log(value) });

        // Simple Way

        let item = { usertype_id, email, password, mobileno, status }

        console.log("Item", item)

        let result = await fetch(`http://------/api/-----`, {

            method: 'POST',

            mode: "cors",

            headers: {

                "Content-Type": "application/json",

                "Accept": "application/json"

            },

            body: JSON.stringify(item)

        })

        result = await result.json()

       

        console.log("Post entry Data :", result)

        navigate('/signin');

    }

    return (

        <>

            <Box style={{ margin: "10px" }} >

                <img src={SignPic} alt='Sign In Pic' height="350px" width="100%" style={{ borderRadius: '16px', objectFit: 'fill' }} />

            </Box>

            <Stack alignItems="center">

                <Box                   

                >

                    <Box                       

                    >

                        <Headingtext name={"Join Us Todays"} whiteColor={true} fontFamily='bold' ptop={5} lineHeight={1} />

                        <Titletext name={"Enter your email and password to register "} whiteColor={true} pX={10} lineHeight={1} />

                    </Box>

                    <Box sx={{ marginX: '10px' }}>

                        <Box paddingY={1}>

                            <SelectBox />

                        </Box>

                     

                        <TextField label='Email' variant='standard' fullWidth sx={{ marginBottom: '10px' }} value={email} onChange={(e) => setEmail(e.target.value)} />

                        <TextField label='Password' variant='standard' fullWidth sx={{ marginBottom: '10px' }} value={password} onChange={(e) => setPassword(e.target.value)} />

                        <TextField label='Mobile No' variant='standard' fullWidth sx={{ marginBottom: '10px' }} value={mobileno} onChange={(e) => setMobileno(e.target.value)} />

                        <TextField label='Status' variant='standard' fullWidth sx={{ marginBottom: '10px' }} value={status} onChange={(e) => setStatus(e.target.value)} />

                        <Titletext name={"Or "} whiteColor={false} pX={10} lineHeight={1} />

                        <Box>

                            <Button variant='contained' onClick={signupUser} fullWidth sx={{

                                backgroundColor: MYCOLOR.blacktext,

                                '&:hover': {

                                    backgroundColor: MYCOLOR.primary,

                                },

                            }} >Create User</Button>

                        </Box>

                       

                    </Box>

                </Box>

            </Stack>

           

        </>

    );

}