Redo all auth stuff and now it works all nicely yay :D

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.firebase/hosting.YnVpbGQ.cache

@@ -1 +1,24 @@
-index.html,1628188527660,02828c56e22803a0aad0d95f9b1c9682792fc49df06a764555ee50a1d611b62d
+asset-manifest.json,1629072757797,5a5ed725c815d61b4bbfaebcd0745e6c0ff9a8929d07680fab98bbe3d98a9b52
+404.html,1629072744928,6bb325f7151ad625b7490b40deb6ac02a3c00d5486c13f712371f58ac5a978b0
+icon.svg,1629072744937,b2a56077c3dcf6396ac9adbdb8be98282c3a860b5d0e0588d21dca5dd1b821a0
+index.html,1629072757797,09ea282c2d75ab395bbafe8e2ffbd6268c3afeed12453ba9b3d2c8a21b529cb4
+favicon.ico,1629072744930,c599b7a91ab3627e3538125d9f40adc2d4bf949046984262670545dc7738af06
+icon.png,1629072744933,f04e091ed775d4e1ce345ff32b6e23a8092f04d6cdc3ef0e9a17e432f0f87bad
+logo.svg,1629072744941,bf51f3b4aa45d1224ca7c6438145743beb6996bbd274bd14a503f6535ac9928b
+logo192.png,1629072744942,76c449ccb9cd117c2f2338f091b18f7050f3210e249b2228f5c81b23f34377cd
+logo.png,1629072744938,c0586b8713f24220670d2e6e762da62f9153da9458410f37d70dcf7e3522dadf
+manifest.json,1629072744949,9ad958a90fd44be9927fbca95a7cf583f8abacb882ea66fd5917933ff268097e
+service-worker.js,1629072757797,f9186c767078b450194327e0145ffe4ac433807d8571eecd1f2d46a7585bbdd1
+static/css/main.f076a06b.chunk.css,1629072757822,dc1876f107759446f090d9542dbe83181fa96c9a87a01a2770278bc777664410
+logo512.png,1629072744946,7779210d56c1f3741e2e487799fe3092def4fa6ac450a60532b807c3a8971205
+robots.txt,1629072744950,8a427bb19eab72df81f29521ee16bf7975d54c7a2e39b23f85f970a30740abed
+precache-manifest.18e103e09540c0d0f8c61819e3b28b82.js,1629072757797,22fc4ea24ccb508e142396e7ebbca7fd7c8342246a01010601b1e1c8f6ea8d6c
+static/css/main.f076a06b.chunk.css.map,1629072757843,ce6d67921fd8341455e34b7bb1317ef1626b07c704634ee38fade046650a87f0
+static/js/runtime~main.a8a9905a.js,1629072757843,5b0313db8c475761662a933e703f2a6bd16847cdfc34b81915f5dd56862e4e77
+static/js/runtime~main.a8a9905a.js.map,1629072757851,2510643041ce395196dfc3f9ae31cd72d7127dbd8457479959c6e22dd1b1eaeb
+static/media/icon.70b99655.svg,1629072757818,7fd2fed041c5c3db60440ea8b0303514c9c0b2345d69fe29b4c48909519bd39a
+static/media/logo.1682d4af.svg,1629072757843,f98287bdf183a9c2e4e267ba5892eca41ce3d4db797cfcb4a7c2f2330aa6047e
+static/js/main.b302a8dc.chunk.js,1629072757851,5c9b1a6fffc4d45bd1a47dca61bd18eca73595c290afe706c4945b4cb326a0f7
+static/js/main.b302a8dc.chunk.js.map,1629072757851,3f4f41c896e3dccbf4acd33f0773a40f623d609bccd3df265e5b177414bf5e4e
+static/js/2.1d313329.chunk.js,1629072757851,8524d16383f5730c234478d33a2f34ef32397211f32ea549f24e43ade4900bc4
+static/js/2.1d313329.chunk.js.map,1629072757853,2ae0059c1af32222ef7402dde8c839ac149a40f3854e570dde44e7c8bd56f579

.firebase/hosting.cHVibGlj.cache

@@ -0,0 +1,11 @@
+404.html,1629069947635,b7bab6b83fa074653ff28c8d2a64135d3434575f70a12ab3d3ba8080461b9537
+favicon.ico,1622496863009,c599b7a91ab3627e3538125d9f40adc2d4bf949046984262670545dc7738af06
+icon.png,1622496863009,f04e091ed775d4e1ce345ff32b6e23a8092f04d6cdc3ef0e9a17e432f0f87bad
+icon.svg,1622496863009,b2a56077c3dcf6396ac9adbdb8be98282c3a860b5d0e0588d21dca5dd1b821a0
+index.html,1622496863009,0a8e37720db2fa28187d6f9a6534633338edf046b902af57abc8ab572d554428
+logo.png,1622496863009,c0586b8713f24220670d2e6e762da62f9153da9458410f37d70dcf7e3522dadf
+logo.svg,1622496863009,bf51f3b4aa45d1224ca7c6438145743beb6996bbd274bd14a503f6535ac9928b
+logo192.png,1622496863010,76c449ccb9cd117c2f2338f091b18f7050f3210e249b2228f5c81b23f34377cd
+logo512.png,1622496863010,7779210d56c1f3741e2e487799fe3092def4fa6ac450a60532b807c3a8971205
+manifest.json,1622496863010,9ad958a90fd44be9927fbca95a7cf583f8abacb882ea66fd5917933ff268097e
+robots.txt,1622496863010,8a427bb19eab72df81f29521ee16bf7975d54c7a2e39b23f85f970a30740abed

.firebaserc

@@ -1,5 +1,6 @@
 {
   "projects": {
-    "default": "cp-317"
+    "muspace": "muspace",
+    "default": "muspace"
   }
 }

firebase.json

@@ -9,12 +9,26 @@
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
     ]
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "hosting": {
+      "port": 5000
+    },
+    "storage": {
+      "port": 9199
+    },
+    "ui": {
+      "enabled": true
+    }
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
 }

package.json

@@ -16,12 +16,13 @@
         "firebase-admin": "^9.8.0",
         "query-string": "^7.0.1",
         "react": "^17.0.2",
+        "react-async": "^10.0.1",
         "react-dom": "^17.0.2",
         "react-firebase-hooks": "^3.0.4",
         "react-icons": "^4.2.0",
         "react-rounded-image": "^2.0.13",
         "react-router-dom": "^5.2.0",
-        "react-scripts": "^1.1.5",
+        "react-scripts": "2.1.8",
         "spotify-web-api-node": "^5.0.2",
         "styled-components": "^5.3.0",
         "validator": "^13.6.0",

public/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

src/App.jsx

@@ -1,8 +1,7 @@
 import React from "react";
-import { BrowserRouter } from "react-router-dom";
 import { Theme, PageRouter } from "@misc";
 
-import { TextButton } from "@atoms";
+//import { TextButton } from "@atoms";
 import { Firebase } from "@functions";
 
 function App() {

src/components/organisms/LeaderBoard.jsx

@@ -45,7 +45,7 @@ function LeaderBoard({ friends }){
     //     setProfilePic(x);
 
     // }
-    let profile_picture = "https://firebasestorage.googleapis.com/v0/b/cp-317.appspot.com/o/default_profile.jpg?alt=media&token=4ed26d80-388b-4814-95b3-01740138285a";
+    let profile_picture = "https://firebasestorage.googleapis.com/v0/b/muspace.appspot.com/o/default_profile.jpg?alt=media&token=03e7bd33-eb4c-4299-b07c-5ec5102bdb3b";
 
     return (
         <Card>

src/components/organisms/Sidebar.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Styled from "styled-components";
 import { SidebarButton, MuspaceLogo } from "@atoms";
 import { UserButton } from "@atoms";
-import { Firebase } from "@functions";
+import { Spotify, Firebase } from "@functions";
 import { SpaceFillerDiv } from "@misc";
 
 import { AiFillHome, AiFillHeart } from "react-icons/ai"; // home and friend button icon outline and fill
@@ -43,13 +43,17 @@ function Sidebar() {
     const [profilePicture, setProfilePicture] = React.useState(null);
     const [userName, setUserName] = React.useState(null);
 
+    const [likedArtists, setLikedAritsts] = React.useState(null);
     React.useEffect(async () => {
         if(!userName)
             setUserName(await Firebase.getUsername());
 
         if(!profilePicture)
             setProfilePicture(await Firebase.getProfilePicture());
 
+        if(!likedArtists)
+            setLikedAritsts(await Spotify.getLikedArtists());
+
     }, []);
 
     return (
@@ -73,19 +77,14 @@ function Sidebar() {
             <SpaceFillerDiv />
 
             <StyledText>Total Listening Time</StyledText>
-            <StatNumber>120,560</StatNumber>
+            <StatNumber>69</StatNumber>
+            <StyledText>Artists Liked</StyledText>
+            <StatNumber>69</StatNumber>
             <StyledText>Artists Liked</StyledText>
-            <StatNumber>69,420</StatNumber>
-            <StyledText>Albums Liked</StyledText>
-            <StatNumber>1,560</StatNumber>
+            <StatNumber>{likedArtists}</StatNumber>
 
             <SpaceFillerDiv />
-
-            <UserButton
-                text={userName}
-                location="/settings"
-                profileImage={profilePicture}
-            />
+            <UserButton text={userName} location="/settings" profileImage={profilePicture}/>
         </StyledDiv>
     );
 }

src/functions/Firebase.js

@@ -11,6 +11,10 @@ const auth = firebase.auth();
 const db = firebase.firestore();
 const storage = firebase.storage();
 
+// auth.useEmulator("http://localhost:9099");
+// db.useEmulator("http://localhost:8088");
+// storage.useEmulator("http://localhost:9199");
+
 /**
  * 
  * Takes in the input from the form to login with
@@ -97,7 +101,7 @@ async function registerWithEmail(event) {
         // if error has not been thrown, then create the account
         const userCredentials = await auth.createUserWithEmailAndPassword(email, pass);
         await storeNewUserData(userCredentials.user.uid, email, firstName, lastName, username, dob);
-        auth.currentUser.sendEmailVerification();
+        await auth.currentUser.sendEmailVerification();
 
     } catch (err) {
         alert(err.message);
@@ -122,7 +126,7 @@ async function storeNewUserData(id, email, firstName, lastName, username, dob, p
         lastName: lastName,
         username: username,
         dob: dob,
-        profile_picture: profile_picture ? profile_picture : "https://firebasestorage.googleapis.com/v0/b/cp-317.appspot.com/o/default_profile.jpg?alt=media&token=4ed26d80-388b-4814-95b3-01740138285a"
+        profile_picture: profile_picture ? profile_picture : "https://firebasestorage.googleapis.com/v0/b/muspace.appspot.com/o/default_profile.jpg?alt=media&token=03e7bd33-eb4c-4299-b07c-5ec5102bdb3b"
     };
 
     // Create a new user entry in the users collection.
@@ -194,7 +198,6 @@ async function deleteAccount(email, password) {
     );
 
     const authResponse = await auth.currentUser.reauthenticateWithCredential({ credential });
-    console.log(authResponse);
 
     const doc = await db.collection("users").doc(auth.currentUser.uid).get();
     const user = doc.data();
@@ -226,13 +229,9 @@ async function resetPassword(email, password) {
         password
     );
 
-    console.log(credential);
     // Now you can use that to reauthenticate
     const response = await auth.currentUser.reauthenticateWithCredential({ credential });
-    console.log(response);
-
     const response2 = await auth.sendPasswordResetEmail(auth.currentUser.email);
-    console.log(response2);
 
 }
 
@@ -444,10 +443,23 @@ async function getUser(uid) {
     return user;
 }
 
+async function isSpotifyVerified() {
+    if (!auth.currentUser)
+        return false;
+
+    const doc = await db.collection("users").doc(auth.currentUser.uid).get();
+    return doc.data().spotifyVerified;
+}
+
+function isLoggedIn() {
+    return auth.currentUser != null;
+
+}
+
 export default {
     firebase, auth, db, storage,
     loginWithEmail, loginWithGoogle, registerWithEmail,
     logout, deleteAccount, resetPassword, updateProfilePicture,
     addFriend, removeFriend, createNewChatRoom, sendChat, searchUsernames,
-    getProfilePicture, getUsername, getFullName, getFriends, getUser
+    getProfilePicture, getUsername, getFullName, getFriends, getUser, isSpotifyVerified, isLoggedIn
 };

src/functions/Spotify.js

@@ -1,13 +1,13 @@
+import config from "@src/config.json";
 import SpotifyWebApi from "spotify-web-api-node";
 import { Firebase } from "@functions";
 
 let api = null;
-
 async function startCompile() {
     api = new SpotifyWebApi(
         {
-            clientId: "1e4ee4e30b23405d8643d058642dffaf",
-            clientSecret: "8ab0151237234a22877c4e644fa1b433",
+            clientId: config.spotify.id,
+            clientSecret: config.spotify.secret,
             redirectUri: "https://muspace.me/spotify-redirect"
         }
     );
@@ -58,7 +58,6 @@ async function loadTopSongs(api) {
 async function loadTopArtists(api) {
     const data = await api.getMyTopArtists();
     const artists = Object.values(data.body.items);
-
     const arr = [];
     for (let i = 0; i < Math.min(10, artists.length); i++) {
         const element = artists[i];
@@ -120,7 +119,28 @@ async function getRecentSongs() {
 
 async function getCurrentSong() {
 
+}
+
+async function getLikedArtists() {
+    // const data = await api.getFollowedArtists();
+    // const artists = Object.values(data.body.items);
+
+    const arr = [];
+    // for (const artist of artists) {
+    //     const data = {};
+    //     data.name = artist.name;
+    //     data.image = artist.images[0].url;
+    //     data.score = artist.popularity;
+    //     data.link = artist.external_urls.spotify;
+    //     arr.push(data);
+    // }
+
+    return arr;
+}
+
+async function getLikedTracks() {
+
 
 }
 
-export default { startCompile, getUser, getTopSongs, getTopArtists, getRecentSongs };
+export default { startCompile, getUser, getTopSongs, getTopArtists, getRecentSongs, getLikedArtists };