Create Profile Page (#84)

.github/workflows/eslint.yml

@@ -23,6 +23,6 @@ jobs:
       - name: Run EsLint
         uses: sibiraj-s/action-eslint@v3
         with:
-          eslint-args: "src/**/*.{js,jsx,ts,tsx} --max-warnings=0"
-          extensions: "js,jsx,ts,tsx"
+          eslint-args: "src/**/*.{ts,tsx} --max-warnings=0"
+          extensions: "ts,tsx"
           annotations: true

src/App.tsx

@@ -10,7 +10,7 @@ import StaffPage from "./staff/pages/Staff.tsx";
 import Department from "./staff/pages/Department.tsx";
 import CreatePost from "./staff/pages/CreatePost.tsx";
 import IndividualPost from "./opportunities/pages/IndividualPost.js";
-import ProfilePage from "./shared/pages/Profile.js";
+import ProfilePage from "./shared/pages/Profile.tsx";
 import LoginRedirection from "./auth/Login.tsx";
 import LogoutRedirection from "./auth/Logout.tsx";
 import StickyFooter from "./shared/components/Navigation/StickyFooter.tsx";

src/auth/Logout.tsx

@@ -32,7 +32,7 @@ export default function LogoutRedirection() {
             }
         }
         logoutUser();
-    }, [auth, logout]);
+    }, [logout, auth.token]);
 
     return null; // Since this component doesn't need to render anything
 };

src/auth/Token.tsx

@@ -1,4 +1,5 @@
 import { useAuth } from "../context/AuthContext.tsx";
+import { useEffect } from "react";
 
 export default function Token() {
 
@@ -7,26 +8,30 @@ export default function Token() {
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get("code");
 
-    if (code) {
-        fetch(`${process.env.REACT_APP_BACKEND_SERVER}/token`, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ code }),
-        })
-            .then((response) => response.json())
-            .then((data) => {
-                const token = data.token;
-                if (token) {
-                    login(token);
-                    return null;
-                }
+    useEffect(() => {
+        async function fetchToken(code: string) {
+            fetch(`${process.env.REACT_APP_BACKEND_SERVER}/token`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ code }),
             })
-            .catch((error) => console.error("Error fetching token:", error));
-    } else {
-        window.location.href = "/";
-    }
+                .then((response) => response.json())
+                .then((data) => {
+                    const token = data.token;
+                    if (token) {
+                        login(token);
+                        window.location.href = "/";
+                        return null;
+                    }
+                })
+                .catch((error) => console.error("Error fetching token:", error));
+        }
+        if (code) {
+            fetchToken(code);
+        }
+    }, [code, login]);
 
     return null;
 }

src/context/AuthContext.tsx

@@ -1,4 +1,6 @@
-import React, { createContext, useState, useContext } from 'react';
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { ReactNode } from 'react';
+
 
 const AuthContext = createContext<{
     auth: { isAuthenticated: boolean; token: string | null };
@@ -11,9 +13,6 @@ const AuthContext = createContext<{
     logout: () => { },
     loadToken: () => { }
 });
-
-import { ReactNode } from 'react';
-
 interface AuthProviderProps {
     children: ReactNode;
 }
@@ -43,6 +42,10 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
         }
     };
 
+    useEffect(() => {
+        loadToken();
+    }, []);
+
     return (
         <AuthContext.Provider value={{ auth, login, logout, loadToken }}>
             {children}

src/shared/components/Navigation/MainNavigation.tsx

@@ -2,11 +2,14 @@ import React from "react";
 import { Disclosure } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Link, NavLink, useLocation } from "react-router-dom";
+import { useAuth } from "../../../context/AuthContext.tsx";
 
-export default function MainNavigation(authenticated) {
+export default function MainNavigation() {
+
+  const { auth } = useAuth();
 
   const location = useLocation().pathname;
-  const routes = authenticated.authenticated[1]
+  const routes = auth.isAuthenticated
     ? [
       { name: "Jobs", href: "/jobs", current: true },
       { name: "Create", href: "/create", current: false },

src/shared/components/Navigation/StickyFooter.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import logo from "../../../images/LabConnect_Logo.webp";
+import { useAuth } from "../../../context/AuthContext.tsx";
 
-export default function StickyFooter(authenticated) {
+export default function StickyFooter() {
 
-  const routes = authenticated.authenticated[1]
+  const { auth } = useAuth();
+
+  const routes = auth.isAuthenticated
     ? [
       { name: "Jobs", href: "/jobs", current: true },
       { name: "Create", href: "/create", current: false },

src/shared/components/Profile/ProfileComponents.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import ProfileAvatar from "./ProfileAvatar.tsx";
+import ProfileDescription from "./ProfileDescription.tsx";
+import ProfileOpportunities from "./ProfileOpportunities.tsx";
+import SEO from "..//SEO.tsx";
+import Breadcrumb from "../UIElements/Breadcrumb.tsx";
+
+interface Profile {
+    name: string;
+    image: string;
+    department: string;
+    description: string;
+    website?: string;
+}
+
+const ProfileComponents = ({ profile, id, staff }: { profile: Profile, id: string, staff: boolean }) => {
+    return (
+        <>
+            <SEO title={`${profile.name} - Labconnect`} description={`${profile.department} page on labconnect`} />
+            {staff && <Breadcrumb
+                tree={[
+                    {
+                        link: "/staff",
+                        title: "Staff",
+                    },
+                    {
+                        link: `/staff/department/${profile.department}`,
+                        title: profile.department || "Unknown Department",
+                    }, {
+                        link: `/staff/${id}`,
+                        title: profile.name || "Unknown Staff",
+                    }
+                ]}
+            />}
+            <section className="mt-5">
+                <div className="flex gap-5">
+                    <ProfileAvatar name={profile.name} image={profile.image} />
+                    <ProfileDescription
+                        website={profile.website}
+                        {...profile}
+                    />
+                </div>
+                {id && <ProfileOpportunities id={id} staff={staff} />}
+            </section>
+        </>
+    );
+}
+
+export default ProfileComponents;

src/staff/components/ProfileDescription.tsx → src/shared/components/Profile/ProfileDescription.tsx

@@ -8,9 +8,11 @@ const ProfileDescription = ({ name, department, description, website }) => {
       <h2 className="font-extrabold text-5xl">{name}</h2>
       <h5 className="text-gray-700">{department}</h5>
       <p>{description}</p>
-      <Link to={website} target="_blank">
-        {website}
-      </Link>
+      {website && website.length && (
+        <Link to={website} target="_blank">
+          {website}
+        </Link>
+      )}
     </div>
   );
 };