SynapseApp · Aditya81016 · Aug 3, 2023 · Aug 3, 2023 · Aug 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -1,15 +1,15 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
   },
-}
+};
diff --git a/client/index.html b/client/index.html
@@ -1,10 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0"
+    />
     <title>Synapse</title>
   </head>
   <body>

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,9 +1,9 @@
-import { Route, BrowserRouter, Routes, Navigate } from 'react-router-dom';
-import AuthPage from './pages/Auth';
-import RootPage from './pages/Root';
-import Home from './pages/Home';
-import { useEffect, useState } from 'react';
-import UserContext from './Contexts/userContext';
+import { Route, BrowserRouter, Routes, Navigate } from "react-router-dom";
+import AuthPage from "./pages/Auth";
+import RootPage from "./pages/Root";
+import Home from "./pages/Home";
+import { useEffect, useState } from "react";
+import UserContext from "./Contexts/userContext";
 
 function App() {
   const [authenticated, setAuthenticated] = useState(false);
@@ -22,8 +22,8 @@ function App() {
    */
   const checkAuth = async () => {
     try {
-      const response = await fetch('http://localhost:3000/auth/check', {
-        credentials: 'include',
+      const response = await fetch("http://localhost:3000/auth/check", {
+        credentials: "include",
       });
       const data = await response.json();
       setUser(data.user);
@@ -37,7 +37,7 @@ function App() {
 
   // Render a loading state until authentication check is complete
   if (!authChecked) {
-          return <div>Loading...</div>;
+    return <div>Loading...</div>;
   }
 
   return (
@@ -46,8 +46,14 @@ function App() {
         <Routes>
           <Route path="/" element={<RootPage />} />
           {/* Protected route: If authenticated, render the Home component. Otherwise, navigate to the Auth page */}
-          <Route path="/home" element={authenticated ? <Home /> : <Navigate to="/auth" replace />} />
-          <Route path="/auth" element={<AuthPage setAuthenticated={setAuthenticated} />} />
+          <Route
+            path="/home"
+            element={authenticated ? <Home /> : <Navigate to="/auth" replace />}
+          />
+          <Route
+            path="/auth"
+            element={<AuthPage setAuthenticated={setAuthenticated} />}
+          />
         </Routes>
       </UserContext.Provider>
     </BrowserRouter>

diff --git a/client/src/Contexts/IsSearchingContext.jsx b/client/src/Contexts/IsSearchingContext.jsx
@@ -1,12 +1,16 @@
-import { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import { createContext, useState } from "react";
+import PropTypes from "prop-types";
 
 const IsSearchingContext = createContext();
 
 export const IsSearchingProvider = ({ children }) => {
   const [isSearching, setIsSearching] = useState(false);
 
-  return <IsSearchingContext.Provider value={{ isSearching, setIsSearching }}>{children}</IsSearchingContext.Provider>;
+  return (
+    <IsSearchingContext.Provider value={{ isSearching, setIsSearching }}>
+      {children}
+    </IsSearchingContext.Provider>
+  );
 };
 IsSearchingProvider.propTypes = {
   children: PropTypes.node.isRequired,

diff --git a/client/src/Contexts/userContext.js b/client/src/Contexts/userContext.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const UserContext = React.createContext();
 

diff --git a/client/src/SmallComponents/FatButtons.jsx b/client/src/SmallComponents/FatButtons.jsx
@@ -1,6 +1,6 @@
-import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import UserContext from '../Contexts/userContext';
+import PropTypes from "prop-types";
+import { useContext } from "react";
+import UserContext from "../Contexts/userContext";
 
 const FatButtons = (props) => {
   const user = useContext(UserContext);
@@ -10,10 +10,10 @@ const FatButtons = (props) => {
       const _id = user._id; // Replace with the userOne ID
       const _id2 = props._id2; // Replace with the userTwo ID
 
-      const response = await fetch('http://localhost:3000/connection', {
-        method: 'POST',
+      const response = await fetch("http://localhost:3000/connection", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           id: _id,
@@ -22,17 +22,17 @@ const FatButtons = (props) => {
       });
 
       if (response.ok) {
-        props.setConnectionStatus('connected'); // Update the connection status
+        props.setConnectionStatus("connected"); // Update the connection status
         props.setDummyState((prevState) => prevState + 1); // Increment the dummy state variable
         const data = await response.json();
         // Handle the response data here
         console.log(data);
       } else {
-        throw new Error('Failed to create connection');
+        throw new Error("Failed to create connection");
       }
     } catch (error) {
       // Handle any errors that occur during the request
-      console.error('Error creating connection:', error);
+      console.error("Error creating connection:", error);
     }
     console.log(user);
   }
@@ -42,29 +42,37 @@ const FatButtons = (props) => {
       const _id = user._id; // Replace with the userOne ID
       const _id2 = props._id2; // Replace with the userTwo ID
 
-      const response = await fetch(`http://localhost:3000/connection/${_id}/${_id2}`, {
-        method: 'DELETE',
-      });
+      const response = await fetch(
+        `http://localhost:3000/connection/${_id}/${_id2}`,
+        {
+          method: "DELETE",
+        },
+      );
 
       if (response.ok) {
         const data = await response.json();
-        props.setConnectionStatus('disconnected'); // Update the connection status
+        props.setConnectionStatus("disconnected"); // Update the connection status
         props.setDummyState((prevState) => prevState + 1); // Increment the dummy state variable
         // Handle the response data here
         console.log(data);
         // Perform any necessary actions after successful disconnection
       } else {
-        throw new Error('Failed to delete connection');
+        throw new Error("Failed to delete connection");
       }
     } catch (error) {
       // Handle any errors that occur during the request
-      console.error('Error deleting connection:', error);
+      console.error("Error deleting connection:", error);
     }
   }
 
   return (
     <div className="fat-btn-div">
-      <button className="fat-btn" onClick={props.status === 'connected' ? handleDisconnect : handleConnect}>
+      <button
+        className="fat-btn"
+        onClick={
+          props.status === "connected" ? handleDisconnect : handleConnect
+        }
+      >
         {props.text}
       </button>
     </div>

diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -6,5 +6,5 @@ import "./index.scss";
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/client/src/pages/Auth/Auth.jsx b/client/src/pages/Auth/Auth.jsx
@@ -1,49 +1,81 @@
-import { useState } from 'react';
-import Local from './Local';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFacebook, faGoogle, faTwitter } from '@fortawesome/free-brands-svg-icons';
-import PropTypes from 'prop-types';
+import { useState } from "react";
+import Local from "./Local";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFacebook,
+  faGoogle,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import PropTypes from "prop-types";
 
 export default function Auth({ setAuthenticated }) {
-  const [activePage, setActivePage] = useState(['Auth', '']);
+  const [activePage, setActivePage] = useState(["Auth", ""]);
 
   function fade_to_Local(passed_page) {
-    document.getElementById('Auth')?.classList.add('fade-out-r-l');
+    document.getElementById("Auth")?.classList.add("fade-out-r-l");
 
     setTimeout(() => {
       setActivePage(passed_page);
-      document.getElementById('Auth')?.classList.remove('fade-out-r-l');
+      document.getElementById("Auth")?.classList.remove("fade-out-r-l");
     }, 475 /*fade-out-r-l*/);
   }
 
   return (
     <>
-      <div id="Auth-Local" className={activePage[0] === 'Local' ? 'flex' : 'hidden'}>
-        <Local setAuthenticated={setAuthenticated} setActivePage={setActivePage} method={activePage[1]} />
+      <div
+        id="Auth-Local"
+        className={activePage[0] === "Local" ? "flex" : "hidden"}
+      >
+        <Local
+          setAuthenticated={setAuthenticated}
+          setActivePage={setActivePage}
+          method={activePage[1]}
+        />
       </div>
-      <div id="Auth" className={`${activePage[0] === 'Auth' ? 'flex' : 'hidden'}`}>
+      <div
+        id="Auth"
+        className={`${activePage[0] === "Auth" ? "flex" : "hidden"}`}
+      >
         <div className="row">
           <div className="Local-Auths">
-            <button className="gradient-box glow-effect-border" onClick={() => fade_to_Local(['Local', 'Login'])}>
+            <button
+              className="gradient-box glow-effect-border"
+              onClick={() => fade_to_Local(["Local", "Login"])}
+            >
               Login
             </button>
-            <button className="gradient-box glow-effect-border" onClick={() => fade_to_Local(['Local', 'Sign Up'])}>
+            <button
+              className="gradient-box glow-effect-border"
+              onClick={() => fade_to_Local(["Local", "Sign Up"])}
+            >
               Sign Up
             </button>
           </div>
 
           <div className="Provided-Auths">
-            <a className="w-full" href="http://localhost:3000/login/federated/google">
-              <button id="Google-Auth-Button" className="gradient-box glow-effect-border">
+            <a
+              className="w-full"
+              href="http://localhost:3000/login/federated/google"
+            >
+              <button
+                id="Google-Auth-Button"
+                className="gradient-box glow-effect-border"
+              >
                 <FontAwesomeIcon icon={faGoogle} size="xl" />
                 Continue with Google
               </button>
             </a>
-            <button id="Google-Auth-Button" className="gradient-box glow-effect-border">
+            <button
+              id="Google-Auth-Button"
+              className="gradient-box glow-effect-border"
+            >
               <FontAwesomeIcon icon={faFacebook} size="xl" />
               Continue with Facebook
             </button>
-            <button id="Google-Auth-Button" className="gradient-box glow-effect-border">
+            <button
+              id="Google-Auth-Button"
+              className="gradient-box glow-effect-border"
+            >
               <FontAwesomeIcon icon={faTwitter} size="xl" />
               Continue with Twitter
             </button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ export default { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    };