Add various comments for future reference.
This commit is contained in:
parent
a99df888ca
commit
dbd3134bbb
22
src/App.js
22
src/App.js
|
@ -1,3 +1,4 @@
|
||||||
|
// Import required components and modules from Firebase and Firebase Config
|
||||||
import firebaseConfig from "./config/Config.js"
|
import firebaseConfig from "./config/Config.js"
|
||||||
import { getApp, initializeApp } from "firebase/app"
|
import { getApp, initializeApp } from "firebase/app"
|
||||||
import { useState, useEffect } from "react"
|
import { useState, useEffect } from "react"
|
||||||
|
@ -9,17 +10,26 @@ import {
|
||||||
getDocs,
|
getDocs,
|
||||||
addDoc
|
addDoc
|
||||||
} from "firebase/firestore";
|
} from "firebase/firestore";
|
||||||
|
|
||||||
|
// import components from React.js
|
||||||
|
|
||||||
|
import { useContext } from "react";
|
||||||
|
|
||||||
|
// Import required compenets from Bootstrap and React-Boostrap
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
import Button from 'react-bootstrap/Button';
|
import Button from 'react-bootstrap/Button';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import Col from 'react-bootstrap/Col';
|
import Col from 'react-bootstrap/Col';
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
|
// Import custom contexts
|
||||||
|
|
||||||
import { FSContext } from ".//contexts/FSContext.js"
|
import { FSContext } from ".//contexts/FSContext.js"
|
||||||
|
|
||||||
import { useContext } from "react";
|
|
||||||
|
|
||||||
|
|
||||||
|
// declare variables
|
||||||
|
|
||||||
export function MyForm(props) {
|
export function MyForm(props) {
|
||||||
const db = useContext(FSContext)
|
const db = useContext(FSContext)
|
||||||
const [submitter, setSubmitter] = useState('');
|
const [submitter, setSubmitter] = useState('');
|
||||||
|
@ -27,6 +37,7 @@ export function MyForm(props) {
|
||||||
const [context, setContext] = useState('');
|
const [context, setContext] = useState('');
|
||||||
const [selectedOptions, setSelectedOptions] = useState([]);
|
const [selectedOptions, setSelectedOptions] = useState([]);
|
||||||
|
|
||||||
|
// Create a function to handle the checkbox changes and update the state accordingly.
|
||||||
const handleCheckboxChange = (event) => {
|
const handleCheckboxChange = (event) => {
|
||||||
const { value, checked } = event.target;
|
const { value, checked } = event.target;
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
@ -36,6 +47,9 @@ export function MyForm(props) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Create a function to handle the form submission and add data to Firebase.
|
||||||
|
|
||||||
const submitHandler = async (event) => {
|
const submitHandler = async (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
const incident = { submitter, date, context, selectedOptions }
|
const incident = { submitter, date, context, selectedOptions }
|
||||||
|
@ -44,6 +58,7 @@ export function MyForm(props) {
|
||||||
console.log(ref)
|
console.log(ref)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Create form for user to imput data
|
||||||
return (
|
return (
|
||||||
<Form onSubmit={submitHandler}>
|
<Form onSubmit={submitHandler}>
|
||||||
<Form.Group>
|
<Form.Group>
|
||||||
|
@ -106,10 +121,13 @@ export function MyForm(props) {
|
||||||
checked={selectedOptions.includes('fart')}
|
checked={selectedOptions.includes('fart')}
|
||||||
onChange={handleCheckboxChange}
|
onChange={handleCheckboxChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button type="submit">Submit</Button>
|
<Button type="submit">Submit</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
</Form>
|
</Form>
|
||||||
|
// Create a button to submit the form data to Firebase
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export default MyForm;
|
export default MyForm;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue