Firebase

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env
 .env.local

package.json

@@ -3,15 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-google-maps/api": "^2.12.2",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "components": "^0.1.0",
-    "firebase": "^8.3.1",
+    "firebase": "^9.9.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "styled": "^1.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"

src/App.js

@@ -1,10 +1,30 @@
-import React from 'react';
-import Navbar from './components/Navbar';
+import React from "react";
+
+import Navbar from "./components/navbar";
+import About from "./components/about";
+import Orbital from "./components/orbital";
+import GiveMoney from "./components/givemoney";
+import Home from "./components/home";
+import NotFound from "./components/404";
+
+import { Routes, Route, Navigate } from "react-router-dom";
 
 function App() {
-  return(
+  return (
     <>
       <Navbar />
+
+      <div className="content">
+        <Routes>
+          <Route path="about" element={<About />} />
+          <Route path="orbital" element={<Orbital />} />
+          <Route path="givemoney" element={<GiveMoney />} />
+          <Route path="/not-found" element={<NotFound />} />
+          <Route path="/" exact element={<Home />} />
+          <Route path="*" element={<Navigate to="/not-found" replace />} />
+        </Routes>
+      </div>
+      {/* test firebase getDatabase */}
     </>
   );
 }

src/components/404.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import InputForm from "./form";
+
+const NotFound = () => {
+  return <>404 Not Found</>;
+};
+
+export default NotFound;

src/components/about.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+class About extends Component {
+  state = {
+    Image: "http://www.asc-csa.gc.ca/images/satellites/cubesat/cubesat-og.jpg",
+  };
+
+  render() {
+    return (
+      <div className="pagediv">
+        <img src={this.state.Image} alt="cubesat" />
+      </div>
+    );
+  }
+}
+
+export default About;

src/components/form.jsx

@@ -0,0 +1,102 @@
+import { React, useState, useEffect } from "react";
+import { db } from "../firebase-config";
+import { GoogleMap, LoadScript } from "@react-google-maps/api";
+
+import { collection, getDocs, addDoc } from "firebase/firestore";
+
+const containerStyle = {
+  width: "400px",
+  height: "400px",
+};
+
+const center = {
+  lat: -3.745,
+  lng: -38.523,
+};
+
+const InputForm = () => {
+  // ----- read data from database -----//
+  // const [users, setUsers] = useState([]);
+  const usersCollectionsRef = collection(db, "users");
+
+  useEffect(() => {
+    const getUsers = async () => {
+      const data = await getDocs(usersCollectionsRef);
+      console.log(data.docs);
+    };
+
+    getUsers();
+  }, []); //call the firestore database and get the information when the page is rendered
+  // ----------------------------------//
+
+  const [newCallSign, setCallSign] = useState("");
+  const [newName, setName] = useState("");
+  const [newPhoneNumber, setPhoneNumber] = useState("");
+  const [newEmail, setEmail] = useState("");
+
+  //to create user
+  const handleSubmit = async (event) => {
+    event.preventDefault(); //stay on the same form page and prevent refreshing the form
+
+    // console.log("hihihi");
+    try {
+      await addDoc(collection(db, "users"), {
+        callsign: newCallSign,
+        email: newEmail,
+        name: newName,
+        phonenumber: newPhoneNumber,
+      }).then((res) => {
+        console.log(res);
+      });
+
+      // onClose();
+    } catch (err) {
+      console.error("writeToDB failed. reason :", err);
+    }
+    document.getElementById("main-form").submit();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} id="main-form">
+      <label>Call Sign</label>
+      <input
+        required
+        type="text"
+        placeholder="Enter your call sign"
+        onChange={(event) => setCallSign(event.target.value)}
+      />
+      <label>Name</label>
+      <input
+        required
+        type="text"
+        placeholder="Enter your name"
+        onChange={(event) => setName(event.target.value)}
+      />
+      <label>Phone Number</label>
+      <input
+        required
+        type="text"
+        placeholder="Enter your phone number"
+        onChange={(event) => setPhoneNumber(event.target.value)}
+      />
+      <label>Email</label>
+      <input
+        required
+        type="email"
+        placeholder="Enter your email"
+        onChange={(event) => setEmail(event.target.value)}
+      />
+      <button type="submit">Submit</button>
+
+      {/* The map */}
+      <LoadScript googleMapsApiKey="YOUR_API_KEY">
+        <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}>
+          {/* Child components, such as markers, info windows, etc. */}
+          <></>
+        </GoogleMap>
+      </LoadScript>
+    </form>
+  );
+};
+
+export default InputForm;

src/components/givemoney.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+class GiveMoney extends Component {
+  state = {
+    Image: "https://c.tenor.com/oCxcur4d32wAAAAM/squidward-spare-change.gif",
+  };
+
+  render() {
+    return (
+      <div className="pagediv">
+        <img src={this.state.Image} alt="give money gif" />
+      </div>
+    );
+  }
+}
+
+export default GiveMoney;

src/components/home.jsx

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import InputForm from "./form";
+
+class Home extends Component {
+  state = {};
+
+  render() {
+    return (
+      <>
+        <InputForm />
+      </>
+    );
+  }
+}
+
+export default Home;