Lift Shift Up
(Child to parent data transfer)
// Child Component
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { useEffect, useState } from "react";
export default function Selectbox({ sendDataToParent }) {
const [data, setData] = useState(['']);
const [showuser, setShowUser] = useState('');
const GetApiData = window.apiGetData;
useEffect(() => {
const handleFetchCharacter = async () => {
try {
// const jsonData = await fetApi();
const jsonData = await GetApiData(`http://-----/api/-------`);
const result = jsonData['result'];
console.log("Result :-", result);
setData(result);
} catch (error) {
// Handle error, e.g., show an error message
console.error('Error fetching character:', error);
}
};
handleFetchCharacter();
}, [GetApiData]);
const handleChange = (event) => {
// console.log("data :" , jsonvalue);
const selectedValue = event.target.value;
console.log("Target Value :- ", event.target.value);
setShowUser(event.target.value);
sendDataToParent(selectedValue);
};
// console.log("All types data", data)
return (
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">User Type</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={showuser}
label="Show User Type"
onChange={handleChange}
>
{
data.map((item, index) =>
index !== 0 && (
<MenuItem key={item.id} value={item.id}>{item.usertype}</MenuItem>
)
)
}
</Select>
</FormControl>
);
}
// Parent Component
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';
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 [usertype, setUsertype] = useState('')
const handleSelectData = (dataFromChild) => {
setUsertype(dataFromChild);
}
const signupUser = () => {
console.warn(email, password, mobileno, usertype)
createUserWithEmailAndPassword(
auth,
email, //'avisingh@gmail.com',
password //"Avi123"
).then((value) => { console.log(value) });
// navigate('/signin');
}
const signupWithGoogle = () => {
signInWithPopup(auth, googleProvider)
.then((user) => console.log("User Created :", user))
.catch((err) => console.error("User Not Created :", err));
}
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
sx={{
position: 'absolute',
zIndex: 0,
top: "220px",
backgroundColor: MYCOLOR.whitetext,
width: '500px',
}}
>
<Box sx={{ marginX: '10px' }}>
<Box paddingY={1}>
<SelectBox sendDataToParent={handleSelectData} />
</Box>
<h6>Data from Child: {usertype}</h6>
<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)} />
<Titletext name={"Or "} whiteColor={false} pX={10} lineHeight={1} />
<Box sx={{ marginBottom: '10px' }} >
<Button variant='contained' onClick={signupWithGoogle} sx={{
backgroundColor: MYCOLOR.blacktext,
'&:hover': {
backgroundColor: MYCOLOR.primary,
},
}}>Sign Up Google</Button>
</Box>
<Box>
<Button variant='contained' onClick={signupUser} fullWidth sx={{
backgroundColor: MYCOLOR.blacktext,
'&:hover': {
backgroundColor: MYCOLOR.primary,
},
}} >Create User</Button>
</Box>
<Box sx={{ marginY: '10px', display: 'flex', alignItems: 'baseline' }}>
<Titletext name={"Already have a member? "} whiteColor={false} lineHeight={1} />
<Button onClick={() => navigate('/signin')} sx={{
color: 'blue',
fontWeight: 'bold'
}} >LogIn</Button>
</Box>
</Box>
</Box>
</Stack>
</>
);
}
