Merge pull request #52 from UoaWDCC/fix/bug

Refactor/FE-web
UoaWDCC · Jun 6, 2024 · 02817ed · 02817ed
2 parents 4616bd7 + 07ec762
commit 02817ed
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 142 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,21 +1,19 @@
-import { Outlet } from 'react-router-dom';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import Exec from './components/ExecInfo';
+import { Outlet } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
 
 const App = () => {
   return (
-      <>
-        <Header />
-        <main className="py-3">
-          <div className="max-w-6xl mx-auto px-4">
-            <Outlet />
-            <Exec/>
-          </div>
-        </main>
-        <Footer />
-      </>
+    <>
+      <Header />
+      <main className="py-3">
+        <div className="max-w-6xl mx-auto px-4">
+          <Outlet />
+        </div>
+      </main>
+      <Footer />
+    </>
   );
-}
+};
 
 export default App;
diff --git a/web/src/components/ExecInfo.tsx b/web/src/components/ExecInfo.tsx
@@ -1,64 +1,12 @@
-import ExecCard from '../screens/ExecScreen'
-
-interface Exec {
-    id: number; 
-    image: string;
-    position: string;
-    name: string;
-    bio: string;
-}
-
-const execs: Exec[] = [
-    {
-        id: 1,
-        image: 'exec.png',
-        position: 'President',
-        name: 'Manas Sonar',
-        bio: 'Consectetur adipiscing elit',
-    },
-    {
-        id: 2,
-        image: 'exec.png',
-        position: 'Vice-President',
-        name: 'Sanchani Brabhaharan',
-        bio: 'Consectetur adipiscing elit...',
-    },
-    {
-        id: 3,
-        image: 'exec.png',
-        position: 'Secretary',
-        name: 'Diya Chottera',
-        bio: 'Consectetur adipiscing elit...',
-    },
-    {
-        id: 4,
-        image: 'exec.png',
-        position: 'Treasurer',
-        name: 'Krish Kumar',
-        bio: 'Consectetur adipiscing elit...',
-    },
-    {
-        id: 5,
-        image: 'exec.png',
-        position: 'Secretary',
-        name: 'Diya Chottera',
-        bio: 'Consectetur adipiscing elit...',
-    },
-    {
-        id: 6,
-        image: 'exec.png',
-        position: 'Treasurer',
-        name: 'Krish Kumar',
-        bio: 'Consectetur adipiscing elit...',
-    },
-];
+import { execs } from "../data/data";
+import ExecCard from "../screens/ExecScreen";
 
 function ExecScreen() {
-    return (
-        <div>
-            <ExecCard execs= {execs}/>
-        </div>
-    );
+  return (
+    <div>
+      <ExecCard execs={execs} />
+    </div>
+  );
 }
 
 export default ExecScreen;
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
@@ -1,10 +1,10 @@
 function Footer() {
-    const currentTime = new Date().getFullYear();
-    return (
-        <footer>
-            <h1>Footer | {currentTime}</h1>
-        </footer>
-    )
+  const currentTime = new Date().getFullYear();
+  return (
+    <footer>
+      <h1>Footer | {currentTime}</h1>
+    </footer>
+  );
 }
 
-export default Footer
+export default Footer;
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -1,11 +1,9 @@
-
 function Header() {
-
-    return (
-        <header>
-            <h1>Header</h1>
-        </header>
-    )
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
 }
 
-export default Header
+export default Header;
diff --git a/web/src/components/LoadingSpinner.tsx b/web/src/components/LoadingSpinner.tsx
@@ -0,0 +1,9 @@
+const LoadingSpinner = () => {
+  return (
+    <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-200 bg-opacity-50 z-50">
+      <div className="border-gray-300 h-32 w-32 animate-spin rounded-full border-8 border-t-[#0B7EF5]" />
+    </div>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/web/src/data/data.ts b/web/src/data/data.ts
@@ -3,9 +3,44 @@ import { Exec } from "../types/types";
 export const execs: Exec[] = [
   {
     id: 1,
-    image: "Gury",
-    position: "Gury is the best",
-    name: "Guryash Da Goat",
-    bio: "This guy is too good to be true",
+    image: "exec.png",
+    position: "President",
+    name: "Manas Sonar",
+    bio: "Consectetur adipiscing elit",
+  },
+  {
+    id: 2,
+    image: "exec.png",
+    position: "Vice-President",
+    name: "Sanchani Brabhaharan",
+    bio: "Consectetur adipiscing elit...",
+  },
+  {
+    id: 3,
+    image: "exec.png",
+    position: "Secretary",
+    name: "Diya Chottera",
+    bio: "Consectetur adipiscing elit...",
+  },
+  {
+    id: 4,
+    image: "exec.png",
+    position: "Treasurer",
+    name: "Krish Kumar",
+    bio: "Consectetur adipiscing elit...",
+  },
+  {
+    id: 5,
+    image: "exec.png",
+    position: "Secretary",
+    name: "Diya Chottera",
+    bio: "Consectetur adipiscing elit...",
+  },
+  {
+    id: 6,
+    image: "exec.png",
+    position: "Treasurer",
+    name: "Krish Kumar",
+    bio: "Consectetur adipiscing elit...",
   },
 ];
diff --git a/web/src/index.css b/web/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:wdth,[email protected],300..800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:wdth,[email protected],300..800&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/web/src/layouts/Layout.tsx b/web/src/layouts/Layout.tsx
@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
 
 interface LayoutProps {
   children?: React.ReactNode;
@@ -7,7 +7,7 @@ interface LayoutProps {
 
 export default function Layout({ children, className }: LayoutProps) {
   const mergedClassName = twMerge(
-    'w-screen h-screen flex flex-col justify-center items-center bg-base-100',
+    "w-screen h-screen flex flex-col justify-center items-center bg-base-100",
     className
   );
   return <div className={mergedClassName}>{children}</div>;

diff --git a/web/src/screens/CreditsScreen.tsx b/web/src/screens/CreditsScreen.tsx
@@ -1,9 +1,9 @@
 function CreditsScreen() {
-    return (
-        <div>
-            <h2> Credits Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> Credits Screen</h2>
+    </div>
+  );
 }
 
-export default CreditsScreen
+export default CreditsScreen;
diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx
@@ -1,8 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
-import QueryKeys from '@utils/queryKeys';
-import axios from 'axios';
-import { useParams } from 'react-router';
-import urls from '@utils/urls';
+import { useQuery } from "@tanstack/react-query";
+import QueryKeys from "@utils/queryKeys";
+import axios from "axios";
+import { useParams } from "react-router";
+import urls from "@utils/urls";
+import LoadingSpinner from "@components/LoadingSpinner";
 
 export default function HomeScreen() {
   const { name } = useParams();
@@ -11,15 +12,15 @@ export default function HomeScreen() {
     queryKey: [QueryKeys.GetIntro, name],
     queryFn: async () => {
       const { data } = await axios(`/hello/${name}`, {
-        method: 'get',
+        method: "get",
         baseURL: urls.apiUrl,
       });
       return data;
     },
   });
 
   if (isLoading) {
-    return <div className="loading loading-spinner" />;
+    return <LoadingSpinner />;
   }
   if (isError) {
     return <div>Error: {error.name}</div>;

diff --git a/web/src/screens/LoginScreen.tsx b/web/src/screens/LoginScreen.tsx
@@ -1,9 +1,9 @@
 function LoginScreen() {
-    return (
-        <div>
-            <h2> Login Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> Login Screen</h2>
+    </div>
+  );
 }
 
-export default LoginScreen
+export default LoginScreen;
diff --git a/web/src/screens/PPVScreen.tsx b/web/src/screens/PPVScreen.tsx
@@ -1,9 +1,9 @@
 function PPVScreen() {
-    return (
-        <div>
-            <h2> PPV Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> PPV Screen</h2>
+    </div>
+  );
 }
 
-export default PPVScreen
+export default PPVScreen;
diff --git a/web/src/screens/PhotosScreen.tsx b/web/src/screens/PhotosScreen.tsx
@@ -1,9 +1,9 @@
 function PhotosScreen() {
-    return (
-        <div>
-            <h2> PhotosScreen Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> PhotosScreen Screen</h2>
+    </div>
+  );
 }
 
-export default PhotosScreen
+export default PhotosScreen;
diff --git a/web/src/screens/SignUpScreen.tsx b/web/src/screens/SignUpScreen.tsx
@@ -1,9 +1,9 @@
 function SignUpScreen() {
-    return (
-        <div>
-            <h2> Sign Up Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> Sign Up Screen</h2>
+    </div>
+  );
 }
 
-export default SignUpScreen
+export default SignUpScreen;
diff --git a/web/src/screens/Test.tsx b/web/src/screens/Test.tsx
@@ -1,9 +1,9 @@
 function TestScreen() {
-    return (
-        <div>
-            <h2> Test Screen</h2>
-        </div>
-    )
+  return (
+    <div>
+      <h2> Test Screen</h2>
+    </div>
+  );
 }
 
-export default TestScreen
+export default TestScreen;
diff --git a/web/src/utils/queryKeys.ts b/web/src/utils/queryKeys.ts
@@ -1,5 +1,5 @@
 enum QueryKeys {
-  GetIntro = 'get-intro',
+  GetIntro = "get-intro",
 }
 
 export default QueryKeys;
diff --git a/web/src/utils/urls.ts b/web/src/utils/urls.ts
@@ -1,6 +1,6 @@
-let apiUrl: string = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+let apiUrl: string = import.meta.env.VITE_API_URL || "http://localhost:3000";
 
-if (apiUrl.endsWith('/')) {
+if (apiUrl.endsWith("/")) {
   apiUrl = apiUrl.slice(0, -1);
 }