Please I'm new to this and i have been stucked for 2 days now, i cant find any answer any where... And yes its a school project that will be submitted soon and i cant find my way around it... I'm trying to writeUserData to firebase, will appreciate if you can help me get the input from from firebase also when the page reloads after user submit the form, thanks in advance.
// ** React Imports
import { Fragment, useState, useEffect } from 'react'
// ** Utils
import { isObjEmpty, isUserLoggedIn } from '@utils'
import InputPasswordToggle from '@components/input-password-toggle'
import Flatpickr from 'react-flatpickr'
import '@styles/react/libs/flatpickr/flatpickr.scss'
// ** Third Party Components
import '@src/firebase'
import { getDatabase, ref, set } from "firebase/database"
import * as yup from 'yup'
import { useForm, Controller } from 'react-hook-form'
import { ArrowLeft, ArrowRight } from 'react-feather'
import { yupResolver } from '@hookform/resolvers/yup'
// ** Reactstrap Imports
import { Form, Label, Input, Row, Col, Button, FormFeedback } from 'reactstrap'
const defaultValues = {
fullName: '',
email: ''
}
const AccountDetails = ({ stepper }) => {
const SignupSchema = yup.object().shape({
fullName: yup.string().required(),
email: yup.string().email(),
})
// ** Hooks
const [userData, setUserData] = useState(null)
function writeUserData(userId, fullName, email) {
const db = getDatabase()
set(ref(db, `${'users/'}`, userId), {
fullName,
email
})
}
const {
control,
handleSubmit,
formState: { errors }
} = useForm({
defaultValues,
resolver: yupResolver(SignupSchema)
})
useEffect(() => {
if (isUserLoggedIn() !== null) {
setUserData(JSON.parse(localStorage.getItem('userData')))
}
}, [])
const onSubmit = () => {
if (isObjEmpty(errors)) {
stepper.next()
const {fullName, email} = defaultValues
writeUserData({fullName, email})
}
}
return (
<Fragment>
<div className='content-header'>
<h5 className='mb-0'>Account Details</h5>
<small className='text-muted'>Enter Your Account Details.</small>
</div>
<Form onSubmit={handleSubmit(onSubmit)}>
<Row>
<Col md='6' className='mb-1'>
<Label className='form-label' for='fullName'>
Full Name
</Label>
<Controller
id='fullName'
name='fullName'
control={control}
render={({ field }) => <Input invalid={errors.fullName && true} {...field}/>}
/>
{errors.fullName && <FormFeedback>{errors.fullName.message}</FormFeedback>}
</Col>
<Col md='6' className='mb-1'>
<Label className='form-label' for={`email`}>
Email
</Label>
<Controller
control={control}
id='email'
name='email'
render={() => (
<Input type='email' readOnly value={(userData && userData['email']) || ''} />
)}
/>
{errors.email && <FormFeedback>{errors.email.message}</FormFeedback>}
</Col>
</Row>
<div className='d-flex justify-content-between'>
<Button color='secondary' className='btn-prev' outline disabled>
<ArrowLeft size={14} className='align-middle me-sm-25 me-0'></ArrowLeft>
<span className='align-middle d-sm-inline-block d-none'>Previous</span>
</Button>
<Button type='submit' color='primary' className='btn-next' >
<span className='align-middle d-sm-inline-block d-none'>Next</span>
<ArrowRight size={14} className='align-middle ms-sm-25 ms-0'></ArrowRight>
</Button>
</div>
</Form>
</Fragment>
)
}
export default AccountDetails`