Daniel 060523

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+
 .DS_Store
 .env.local
 .env.development.local
@@ -21,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env

package.json

@@ -3,8 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.4.0",
+    "dotenv": "^16.0.3",
+    "firebase": "^9.21.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

src/App.css

@@ -1,19 +1,59 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Nippo", sans-serif;
+}
+
+html,
+body,
+body #root {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-y: hidden;
+}
+
 .App {
+  height: 100%;
   text-align: center;
+  background-color: #282c34;
+  padding: 20px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h1 {
+  font-size: 45px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+h2 {
+  font-size: 36px;
+}
+
+.contents {
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+button {
+  padding: 5px;
+  height: fit-content;
+  width: fit-content;
+}
+
+form input {
+  padding: 10px;
+  border: none;
+  border-radius: 20px;
+}

src/App.js

@@ -1,20 +1,186 @@
-import React from "react";
-import logo from "./logo.png";
-import "./App.css";
-
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
-      </div>
-    );
-  }
-}
+//--------- Firebase ---------//
+
+import { database, auth } from "./firebase";
+import { onAuthStateChanged } from "firebase/auth";
+import { ref, onValue, onChildAdded } from "firebase/database";
+
+//----------- React -----------//
+
+import React, { useEffect, useState } from "react";
+
+//-------- React Router --------//
+
+import { Routes, Route, useNavigate, Navigate } from "react-router-dom";
+
+//---------- Screens  ----------//
+
+import SplashScreen from "./Screens/SplashScreen/SplashScreen";
+import LoginScreen from "./Screens/LoginScreen";
+import SignUpScreen from "./Screens/SignUpScreen/SignUpScreen";
+import ProfileScreen from "./Screens/ProfileScreen/ProfileScreen";
+import PokeStatsScreen from "./Screens/PokeStatsScreen/PokeStatsScreen";
+import ExploreScreen from "./Screens/ExploreScreen/ExploreScreen";
+import SearchPokeScreen from "./Screens/SearchPokeScreen/SearchPokeScreen";
+import SearchUserScreen from "./Screens/SearchUserScreen/SearchUserScreen";
+
+//--------- Variables  ---------//
+
+const DB_USERS_KEY = "users";
+// const DB_IMAGES_KEY = "images";
+const UserContext = React.createContext(null);
+const NavContext = React.createContext(null);
+const userObj = {
+  uid: null,
+  email: null,
+  name: null,
+  pic: null,
+};
+
+//------------------------------//
+
+const App = () => {
+  const [user, setUser] = useState(userObj);
+  const [userList, setUserList] = useState([]);
+  const [topten, setTopten] = useState(null);
+  const [toptenorder, setToptenorder] = useState([]);
+  const [wishlist, setWishlist] = useState(null);
+  const [wishlistorder, setWishlistorder] = useState(null);
+
+  const navigate = useNavigate();
+  const handleNavigate = (e) => {
+    navigate(`/${e.target.id}`);
+  };
+
+  useEffect(() => {
+    const usersRef = ref(database, DB_USERS_KEY);
+
+    onChildAdded(usersRef, (data) => {
+      setUserList((prevUsers) => [...prevUsers, data.key]);
+    });
+
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        setUser({
+          uid: user.uid,
+          email: user.email,
+          name: user.displayName,
+          pic: user.photoURL,
+        });
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (user.uid && user.name) {
+      const CURRENT_USER_KEY = DB_USERS_KEY + "/" + user.name.toLowerCase();
+      const toptenRef = ref(database, CURRENT_USER_KEY + "/topten");
+      const toptenorderRef = ref(database, CURRENT_USER_KEY + "/toptenorder");
+      const wishlistRef = ref(database, CURRENT_USER_KEY + "/wishlist");
+      const wishlistorderRef = ref(
+        database,
+        CURRENT_USER_KEY + "/wishlistorder"
+      );
+      onValue(toptenRef, (snapshot) => {
+        const data = snapshot.val();
+        setTopten(data);
+      });
+      onValue(toptenorderRef, (snapshot) => {
+        const data = snapshot.val();
+        setToptenorder(data);
+      });
+      onValue(wishlistRef, (snapshot) => {
+        const data = snapshot.val();
+        setWishlist(data);
+      });
+      onValue(wishlistorderRef, (snapshot) => {
+        const data = snapshot.val();
+        setWishlistorder(data);
+      });
+    }
+  }, [user]);
+
+  return (
+    <NavContext.Provider value={{ navigate, handleNavigate }}>
+      <UserContext.Provider value={{ user, setUser, DB_USERS_KEY }}>
+        <div className="App">
+          <Routes>
+            <Route
+              path="/"
+              element={user.uid ? <Navigate to="/profile" /> : <SplashScreen />}
+            />
+            <Route path="/login" element={<LoginScreen />} />
+            <Route path="/signup" element={<SignUpScreen />} />
+            <Route
+              path="/explore"
+              element={
+                user.uid ? (
+                  <ExploreScreen userList={userList} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route path="/profile">
+              <Route
+                index
+                element={
+                  user.uid ? (
+                    <ProfileScreen
+                      topten={topten}
+                      toptenorder={toptenorder}
+                      setToptenorder={setToptenorder}
+                      wishlist={wishlist}
+                      wishlistorder={wishlistorder}
+                      setWishlistorder={setWishlistorder}
+                    />
+                  ) : (
+                    <Navigate to="/" />
+                  )
+                }
+              />
+              <Route
+                path=":link"
+                element={
+                  user.uid ? (
+                    <PokeStatsScreen topten={topten} wishlist={wishlist} />
+                  ) : (
+                    <Navigate to="/" />
+                  )
+                }
+              />
+            </Route>
+            <Route
+              path="/search-poke"
+              element={
+                user.uid ? (
+                  <SearchPokeScreen DB_USERS_KEY={DB_USERS_KEY} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route path="/search">
+              <Route
+                index
+                element={
+                  user.uid ? (
+                    <SearchUserScreen userList={userList} />
+                  ) : (
+                    <Navigate to="/" />
+                  )
+                }
+              />
+              <Route
+                path=":link"
+                element={user.uid ? <ProfileScreen /> : <Navigate to="/" />}
+              />
+            </Route>
+          </Routes>
+        </div>
+      </UserContext.Provider>
+    </NavContext.Provider>
+  );
+};
 
 export default App;
+export { UserContext, NavContext };

src/Components/HeaderBar/HeaderBar.css

@@ -0,0 +1,13 @@
+#header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+#header #header-user {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}

src/Components/HeaderBar/HeaderBar.js

@@ -0,0 +1,41 @@
+import { useContext } from "react";
+import { NavContext, UserContext } from "../../App";
+import "./HeaderBar.css";
+import { signOut } from "firebase/auth";
+import { auth } from "../../firebase";
+
+const userObj = {
+  uid: null,
+  email: null,
+  name: null,
+  pic: null,
+};
+
+const HeaderBar = ({ title }) => {
+  const { user, setUser } = useContext(UserContext);
+  const { navigate } = useContext(NavContext);
+
+  const handleLogOut = async () => {
+    await setUser(userObj);
+    signOut(auth);
+  };
+
+  const handleClick = () => {
+    handleLogOut();
+    navigate("/");
+  };
+
+  return (
+    <div id="header">
+      <div id="header-user">
+        {title === user.name && <img src={user.pic} alt={user.name} />}
+        <h1>{title}</h1>
+      </div>
+      <button onClick={handleClick} id="/">
+        Log Out
+      </button>
+    </div>
+  );
+};
+
+export default HeaderBar;