From d7e51ff3042c2cdfb3154ceb6dda1ea8d1849715 Mon Sep 17 00:00:00 2001 From: Rei Date: Fri, 29 Dec 2023 10:40:01 +0000 Subject: [PATCH] add option for "bruh" and formatted document --- src/App.css | 3 ++- src/App.js | 55 +++++++++++++++++++++++++++++------------------------ 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..dcf6d74 100644 --- a/src/App.css +++ b/src/App.css @@ -32,7 +32,8 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 44bfa88..d398654 100644 --- a/src/App.js +++ b/src/App.js @@ -19,7 +19,7 @@ import './App.css' if (!getApps().length) { initializeApp(firebaseConfig); - } +} // declare variables @@ -31,21 +31,21 @@ export function MyForm(props) { const [incidents, setIncidents] = useState([]); // Declare incidents as an empty array // Fetch incidents from Firestore when the component mounts - useEffect(() => { - const incidentsRef = collection(db, "incidents"); - getDocs(incidentsRef).then((snapshot) => { - const incidentsArray = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })); - setIncidents(incidentsArray); - }); - }, []); + useEffect(() => { + const incidentsRef = collection(db, "incidents"); + getDocs(incidentsRef).then((snapshot) => { + const incidentsArray = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })); + setIncidents(incidentsArray); + }); + }, []); // Ensure Firebase is initialized before using it -if (!getApp().length) { - initializeApp(firebaseConfig); + if (!getApp().length) { + initializeApp(firebaseConfig); -} + } -const db = getFirestore(getApp()); + const db = getFirestore(getApp()); // Create a function to handle the checkbox changes and update the state accordingly. @@ -61,13 +61,13 @@ const db = getFirestore(getApp()); // Create a function to handle the form submission and add data to Firebase. NOT WORKING - const submitHandler = async (event) => { - event.preventDefault() - const incidentsData = { submitter, date, context, selectedOptions } // Use the state variables directly - const col = collection(db, `incidents`) - const ref = await addDoc(col, incidentsData) - console.log(ref) - } + const submitHandler = async (event) => { + event.preventDefault() + const incidentsData = { submitter, date, context, selectedOptions } // Use the state variables directly + const col = collection(db, `incidents`) + const ref = await addDoc(col, incidentsData) + console.log(ref) + } // Create form for user to imput data return ( @@ -134,7 +134,7 @@ const db = getFirestore(getApp()); onChange={handleCheckboxChange} /> - - - - + -

Refresh once submitted to see result added below.

+

Refresh once submitted to see result added below.

Existing incidents in the database:

@@ -183,7 +188,7 @@ const db = getFirestore(getApp());
-// Create a form group to display the existing entries in the database. + // Create a form group to display the existing entries in the database. ); } export default MyForm;