[Cleaned] cleared unnecessary comments and cleaned up code

.env

@@ -1 +1,8 @@
-API_KEY = AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8
+API_KEY = AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8
+apiKey = "AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8"
+AUTH_DOMAIN = "anime-match-a5f94.firebaseapp.com"
+projectId = "anime-match-a5f94"
+storageBucket = "anime-match-a5f94.appspot.com"
+messagingSenderId = "561233950151"
+appId = "1:561233950151:web:84b1c7e0e5684b410a95e2"
+measurementId = "G-WMRL0G5JYF"

.firebase/hosting.YnVpbGQ.cache

@@ -3,12 +3,12 @@ logo192.png,1665354843807,3ee59515172ee198f3be375979df15ac5345183e656720a381b887
 logo512.png,1665354843808,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,1665354843808,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840
 robots.txt,1665354843809,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
-asset-manifest.json,1696029337553,b0cfe3069cadc3edf749a6ca7544a7b2f0eeab7676ccfb3fb97ed18d075efb35
-index.html,1696029337553,c73241101b06e169aa2e86ea8e70abc34530db13e401dc4923d28d2165b6c476
-static/css/main.3440859c.css.map,1696029337567,6269843dfac2b300e3a220e67da18007fd3fb4dec8f4ae3c23163db053dda323
-static/js/787.1583e544.chunk.js,1696029337567,8af2baeb24f579297dedfea57ed17f2c85f6bd0a1fda19f030e80031c0bf3bb0
-static/css/main.3440859c.css,1696029337567,a62d0965c9a7034cf8e308c1ac189001a360b61afa7199c99e9c723c580ed06a
-static/js/787.1583e544.chunk.js.map,1696029337567,f81d2b4464179ec15df3380d732b71d987e624b5fc91e23e43c0be1fd21819a7
-static/js/main.17db98ae.js.LICENSE.txt,1696029337567,4f35a1289934fb45d3feae9333f9dbeaa8ec67f3f9f16633535ee89c6a60a3b9
-static/js/main.17db98ae.js,1696029337568,beb64fe8b47cf9de95bba0e2073c2bd7c8b0be06ca9c52a3f11c31ae4efd53c2
-static/js/main.17db98ae.js.map,1696029337569,85f698501509c8aac5483eee6282fb0f3fe4a8eee244883abed69522e39838ba
+asset-manifest.json,1696031328026,c70e515cad6fafd1160729c2384f6ba03e4e7b0cbbe0448af0caae105ba2bcd6
+index.html,1696031328026,500808d602638fb5bc6414d51e84d3e1f2667a2de1c827736be7a127145c6003
+static/css/main.3440859c.css,1696031328043,a62d0965c9a7034cf8e308c1ac189001a360b61afa7199c99e9c723c580ed06a
+static/css/main.3440859c.css.map,1696031328043,6269843dfac2b300e3a220e67da18007fd3fb4dec8f4ae3c23163db053dda323
+static/js/787.1583e544.chunk.js,1696031328043,8af2baeb24f579297dedfea57ed17f2c85f6bd0a1fda19f030e80031c0bf3bb0
+static/js/787.1583e544.chunk.js.map,1696031328043,f81d2b4464179ec15df3380d732b71d987e624b5fc91e23e43c0be1fd21819a7
+static/js/main.66354cb4.js.LICENSE.txt,1696031328043,4f35a1289934fb45d3feae9333f9dbeaa8ec67f3f9f16633535ee89c6a60a3b9
+static/js/main.66354cb4.js,1696031328044,2c6bef14d8c8a9c3695a4bf1b7eedb32346a1f6fb58d590ef16495a9b7247824
+static/js/main.66354cb4.js.map,1696031328046,9693a8eb82291388ee8f2ddb27a9edca47192d4f64878e02e0a1adcabedef8a8

src/Components/App.css

@@ -23,96 +23,3 @@ body {
     top: 50%;
     transform: translate(-50%, -50%);
 }
-
-
-/* html, body {
-    width: 100%;
-    height:100%;
-  }
-  
-  body {
-      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-      background-size: 400% 400%;
-      animation: gradient 15s ease infinite;
-  }
-  
-  @keyframes gradient {
-      0% {
-          background-position: 0% 50%;
-      }
-      50% {
-          background-position: 100% 50%;
-      }
-      100% {
-          background-position: 0% 50%;
-      }
-  }
-
-
-
-
-
-
-<div class="bg"></div>
-<div class="bg bg2"></div>
-<div class="bg bg3"></div>
-<div class="content">
-  <h1>Sliding Diagonals Background Effect</h1>
-</div>
-
-html {
-    height:100%;
-  }
-  
-  body {
-    margin:0;
-  }
-  
-  .bg {
-    animation:slide 3s ease-in-out infinite alternate;
-    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
-    bottom:0;
-    left:-50%;
-    opacity:.5;
-    position:fixed;
-    right:-50%;
-    top:0;
-    z-index:-1;
-  }
-  
-  .bg2 {
-    animation-direction:alternate-reverse;
-    animation-duration:4s;
-  }
-  
-  .bg3 {
-    animation-duration:5s;
-  }
-  
-  .content {
-    background-color:rgba(255,255,255,.8);
-    border-radius:.25em;
-    box-shadow:0 0 .25em rgba(0,0,0,.25);
-    box-sizing:border-box;
-    left:50%;
-    padding:10vmin;
-    position:fixed;
-    text-align:center;
-    top:50%;
-    transform:translate(-50%, -50%);
-  }
-  
-  h1 {
-    font-family:monospace;
-  }
-  
-  @keyframes slide {
-    0% {
-      transform:translateX(-25%);
-    }
-    100% {
-      transform:translateX(25%);
-    }
-  }
-
-*/

src/Components/App.js

@@ -2,28 +2,23 @@
 import Cards from "./Cards.js";
 import Chat from "./Chat.js";
 import Header from "./Header";
-import LoadingScreen from "./Loading";
 import History from "./History";
+import LoadingScreen from "./Loading";
 import { SignIn } from "./SignIn";
 
-import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
-import React, { useState, useEffect } from 'react';
-import "./App.css";
-import { onAuthStateChanged } from "firebase/auth";
-
+import React, { useEffect, useState } from 'react';
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { auth } from "../firebase";
-import { useAuthState } from 'react-firebase-hooks/auth';
+import "./App.css";
 
 function App() {
-  // add lock to check for api response before showing data
   const [loading, setLoading] = useState(true)
+  const [user, setUser] = useState(null);
 
   useEffect(() => {
     setTimeout(() => setLoading(false), 1600)
   }, [])
 
-  const [user, setUser] = useState(null);
-
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((authUser) => {
       if (authUser) {

src/Components/Cards.js

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
-import { makeStyles } from "@material-ui/styles";
 import { Typography } from "@material-ui/core";
-import TinderCard from "react-tinder-card";
+import { makeStyles } from "@material-ui/styles";
+import 'firebase/compat/analytics';
 import firebase from 'firebase/compat/app';
-import { auth, firestore } from "../firebase";
 import 'firebase/compat/auth';
 import 'firebase/compat/firestore';
-import 'firebase/compat/analytics';
-import { getDoc, where, query, collection, getDocs, doc, setDoc, Timestamp, addDoc } from "firebase/firestore"; 
+import { addDoc, collection, getDocs } from "firebase/firestore";
+import React from "react";
+import TinderCard from "react-tinder-card";
 import { getTopAnime } from "../Api/animeapi";
+import { auth, firestore } from "../firebase";
 
 const useStyles = makeStyles({
   card: {
@@ -56,10 +56,6 @@ const anime_set = new Set()
 const anime_map = []
 async function getAllAnimeTitleFromDb() {
   try {
-    // Create a query to get documents where the age field is greater than the threshold
-    //const q = query(usersCollectionRef, where('animeTitle'));
-
-
     const querySnapshot = await getDocs(collection(firestore, 'users'))
     querySnapshot.forEach(doc => {
       console.log(doc.data().animeTitle)
@@ -76,7 +72,6 @@ async function getAllAnimeTitleFromDb() {
 
 // if title in history/database, remove from the available list
 const anime_array = []
-const anime_titles = []
 getTopAnime()
   .then(responseData => {
     for (var i=0; i<responseData.data.length; i++) {
@@ -89,24 +84,16 @@ getTopAnime()
 
  getAllAnimeTitleFromDb()
 const myArray = Array.from(anime_set)
-console.log(myArray)
-// make sure to update the rules on firebase from false to true, based on timeframe to open
-// Need to find a way to add to firebase
 async function onSwipe(direction, anime) {
   if (direction == 'left') {
     direction = false
   } else {
     direction = true
   }
   const { uid, photoURL } = auth.currentUser;
-  console.log("anime title", anime)
-  console.log("anime title", direction)
-  console.log("uid", uid)
-  console.log("PhotoURL", photoURL)
-// new way to add document to firestore database
-  await addDoc(collection(firestore, 'users'), { // Always needs even number of 'user', 'user' arguments, what you are extracting from firestore db
-      //text: direction,
-      //date: Timestamp,
+
+  await addDoc(collection(firestore, 'users'), {
+
       animeTitle: anime,
       like: direction,
       createdAt: firebase.firestore.FieldValue.serverTimestamp(),

src/Components/Chat.js

@@ -1,11 +1,10 @@
-import React, { useRef, useState } from 'react';
-import './Chat.css';
 import firebase from 'firebase/compat/app';
-import 'firebase/compat/firestore'
+import 'firebase/compat/firestore';
+import { addDoc, collection, getDocs, limit, orderBy, query } from "firebase/firestore";
+import React, { useRef, useState } from 'react';
 import { useCollectionData } from 'react-firebase-hooks/firestore';
 import { auth, firestore } from "../firebase";
-import { useAuthState } from 'react-firebase-hooks/auth';
-import { collection, orderBy, query, limit, addDoc, getDocs } from "firebase/firestore"; 
+import './Chat.css';
 
 function Chat() {
   return (

src/Components/Header.js

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import BlenderIcon from '@mui/icons-material/Blender';
+import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
+import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
 import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import BlenderIcon from '@mui/icons-material/Blender';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import React, { useState } from 'react';
 import { Link } from "react-router-dom";
 
 import { auth } from "../firebase";
@@ -58,14 +58,11 @@ function Header() {
   const [anchorElUser, setAnchorElUser] = useState(null);
 
   function handleOpenNavMenu(event) {
-    console.log(event.currentTarget)
-    console.log("This opens the menu")
     setAnchorElNav(event.currentTarget);
   };
 
   function handleOpenUserMenu(event) {
     setAnchorElUser(event.currentTarget);
-    console.log(anchorElUser)
   };
 
   const handleCloseNavMenu = () => {
@@ -86,12 +83,12 @@ function Header() {
         <Toolbar disableGutters>
           <BlenderIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
           <Typography
-            variant="h6"
+            variant="h8"
             noWrap
             component="a"
             href="/"
             sx={{
-              mr: 2,
+              mr: 0,
               display: { xs: 'none', md: 'flex' },
               fontFamily: 'monospace',
               fontWeight: 700,
@@ -143,7 +140,7 @@ function Header() {
           </Box>
           <BlenderIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
           <Typography
-            variant="h5"
+            variant="h8"
             noWrap
             component="a"
             href=""
@@ -204,7 +201,7 @@ function Header() {
                 </Link>
               ))}
                 <MenuItem key="SignOut" onClick={SignOut}>
-                    <Typography color="black" textAlign="center">Signout</Typography>
+                    <Typography color="black" textAlign="center">Sign Out</Typography>
                 </MenuItem>
             </Menu>
           </Box>
@@ -215,4 +212,3 @@ function Header() {
 };
 
 export default Header;
-

src/Components/History.css

@@ -60,7 +60,7 @@ div {
 .button-popup {
   float: center;
   border: 0;
-  background: #78f89f;
+  background: #05da44;
   border-radius: 5px;
   padding: 0.5rem 1rem;
   font-size: 0.8rem;