From ff64c54c6e5773768834bfb178017d331ab3d9a1 Mon Sep 17 00:00:00 2001 From: reiyua Date: Tue, 2 Jan 2024 04:08:44 +0000 Subject: [PATCH] Fix up Firebase issues and rename variables with comment typos fixed --- firestore.rules | 2 +- src/App.js | 63 ++++++++++++------------------------------------- 2 files changed, 16 insertions(+), 49 deletions(-) diff --git a/firestore.rules b/firestore.rules index cd1a434..01cd397 100644 --- a/firestore.rules +++ b/firestore.rules @@ -3,7 +3,7 @@ rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { - allow read, write: if false; + allow read, write: if true; } } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5d57536..38ca2fd 100644 --- a/src/App.js +++ b/src/App.js @@ -17,6 +17,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import Col from 'react-bootstrap/Col'; import './App.css' +// Initialize Firebase + if (!getApps().length) { initializeApp(firebaseConfig); } @@ -27,42 +29,27 @@ export function MyForm(props) { const [submitter, setSubmitter] = useState(''); const [date, setDate] = useState(''); const [context, setContext] = useState(''); + const [unbasedTakes, setUnbasedTakes] = useState([]); // Fetch incidents from Firestore when the component mounts + if (!getApps().length) { + initializeApp(firebaseConfig); + } + useEffect(() => { - const incidentsRef = collection(db, "incidents"); - getDocs(incidentsRef).then((snapshot) => { - const incidentsArray = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })); - setIncidents(incidentsArray); + const unbasedRef = collection(db, "unbasedtakes"); + getDocs(unbasedRef).then((snapshot) => { + const unbasedtakesArray = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })); + setUnbasedTakes(unbasedtakesArray); }); }, []); - // Ensure Firebase is initialized before using it - if (!getApp().length) { - initializeApp(firebaseConfig); - - } - const db = getFirestore(getApp()); - - // Create a function to handle the checkbox changes and update the state accordingly. - const handleCheckboxChange = (event) => { - const { value, checked } = event.target; - if (checked) { - setSelectedOptions([...selectedOptions, value]); - } else { - setSelectedOptions(selectedOptions.filter((option) => option !== value)); - } - }; - - // Create a function to handle the form submission and add data to Firebase. - // Once user presses submit, a popup will appearstating the data was sent. + // Once user presses submit, a popup will appear stating the data was sent. // When user acknowledges popup and closes it, the page will reload, // clearing the form and adding the new data to the database. - - const submitHandler = async (event) => { event.preventDefault() const unbasedData = { submitter, date, context} @@ -73,7 +60,7 @@ export function MyForm(props) { window.location.reload(); } - // Create form for user to imput data + // Create form for user to input data return (
@@ -89,7 +76,7 @@ export function MyForm(props) { value={submitter} onChange={(e) => setSubmitter(e.target.value)} /> - Enter the date the shennanigans occurred (dd-mm-yyyy): + What date did Ray admit this cursed, unbased opinion? (dd-mm-yyyy): setDate(e.target.value)} /> - Enter context for this unbased take of Ray: + Enter context and item for this unbased take of Ray: Submit - - -

Existing incidents in the database:

- {unbasedtakes.map((unbasee, index) => ( -
-

Incident ID:

-

{incident.id}

-

What date did this shennanigans occur?:

-

{incident.date}

-

Who submitted this:

-

{incident.submitter}

-

What caused Ray's moment?:

-

{incident.context}

-

What word's did Ray use this time?:

-

{incident.selectedOptions.join(', ')}

- {index !== incidents.length - 1 &&
} -
- ))} -
- // Create a form group to display the existing entries in the database. ); } export default MyForm; \ No newline at end of file