Storing data in Firestore (Broken) (In Progress)

src/App.js

@@ -1,4 +1,4 @@
-import { firebaseConfig } from "./config/Config.js"
+import firebaseConfig from "./config/Config.js"
 import { getApp, initializeApp } from "firebase/app"
 import { useState, useEffect } from "react"
 import {
@@ -6,29 +6,44 @@ import {
   collection,
   getDoc,
   doc,
-  getDocs
+  getDocs,
+  addDoc
 } from "firebase/firestore";
-import { getStorage } from "firebase/storage"
 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 { FSContext } from ".//contexts/FSContext.js"
+
+import { useContext } from "react";
 
 
-function MyForm() {
+ export function MyForm(props) {
+  const db = useContext(FSContext)
+  const [submitter, setSubmitter] = useState('');
+  const [date, setDate] = useState('');
+  const [context, setContext] = useState('');
   const [selectedOptions, setSelectedOptions] = useState([]);
 
   const handleCheckboxChange = (event) => {
     const { value, checked } = event.target;
     if (checked) {
-      setSelectedOptions([...selectedOptions, value]);
+      setSelectedOptions([selectedOptions, value]);
     } else {
       setSelectedOptions(selectedOptions.filter((option) => option !== value));
     }
   };
 
+  const submitHandler = async (event) => {
+    event.preventDefault()
+    const incident = {setSubmitter: submitter, setDate: date, setContext: context, setSelectedOptions: selectedOptions }
+    const col = collection(db, `incidents/`)
+    const ref = await addDoc(col, incident )
+    console.log( ref )
+    }
+
   return (
     <Form>
       <Form.Group>
@@ -36,14 +51,25 @@ function MyForm() {
         <Col sm={2}></Col>
         <Col sm={8}>
           <Form.Label style={{ fontSize: '30px' }}>Enter submitter name:</Form.Label>
-          <Form.Control type="text"
+          <Form.Control
-            placeholder="Name" />
+          name="submitter"
+          type="text"
+          placeholder="Name" />
           <Form.Label style={{ fontSize: '30px' }}>Enter the date the shennanigans occurred (dd-mm-yyyy):</Form.Label>
-          <Form.Control type="text" placeholder="Date" />
+          <Form.Control
+          name="date"
+          type="text"
+          placeholder="Date"
+           />
           <Form.Label style={{ fontSize: '30px' }}>Enter context for this tamper tantrum:</Form.Label>
-          <Form.Control type="text"
+          <Form.Control
-            placeholder="Enter context here" />
+          type="text"
-          <Form.Label style={{ fontSize: '30px' }}>Select the words used by Ray during his little tamper tantrum:</Form.Label>
+          name="context"
+          placeholder="Enter context here" />
+          <Form.Label
+          name="selectedoptions"
+          style={{ fontSize: '30px' }}>Select the words used by Ray during his little tamper tantrum:
+          </Form.Label>
           <Form.Check
             type="checkbox"
             label="poop"

src/contexts/FSContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const FSContext = createContext()