diff --git a/src/App.js b/src/App.js index 9947727..f290ce3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,4 @@ +// Import required components and modules from Firebase and Firebase Config import firebaseConfig from "./config/Config.js" import { getApp, initializeApp } from "firebase/app" import { useState, useEffect } from "react" @@ -9,17 +10,26 @@ import { getDocs, addDoc } 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 Button from 'react-bootstrap/Button'; import 'bootstrap/dist/css/bootstrap.min.css'; import Col from 'react-bootstrap/Col'; import './App.css' +// Import custom contexts + import { FSContext } from ".//contexts/FSContext.js" -import { useContext } from "react"; +// declare variables + export function MyForm(props) { const db = useContext(FSContext) const [submitter, setSubmitter] = useState(''); @@ -27,6 +37,7 @@ export function MyForm(props) { const [context, setContext] = useState(''); const [selectedOptions, setSelectedOptions] = useState([]); + // Create a function to handle the checkbox changes and update the state accordingly. const handleCheckboxChange = (event) => { const { value, checked } = event.target; 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) => { event.preventDefault() const incident = { submitter, date, context, selectedOptions } @@ -44,6 +58,7 @@ export function MyForm(props) { console.log(ref) } + // Create form for user to imput data return (
@@ -106,10 +121,13 @@ export function MyForm(props) { checked={selectedOptions.includes('fart')} onChange={handleCheckboxChange} /> +
+ // Create a button to submit the form data to Firebase ); } -export default MyForm; \ No newline at end of file +export default MyForm; +