Merge remote-tracking branch 'upstream/main' into feat/39

frontend/components/navigation/NavBarDashboard.tsx

@@ -21,6 +21,7 @@ import getOrganization from "../../pages/api/organization/GetOrg";
 import getOrganizations from "../../pages/api/organization/getOrgs";
 import getUser from "../../pages/api/user/getUser";
 import guidGenerator from "../utilities/randomId";
+import logout from "~/pages/api/auth/Logout";
 /**
  * @param {(key: string) => string} t
  */
@@ -47,31 +48,48 @@ const supportOptions = (t) => [
   ],
 ];
 
-export default function Navbar({ onButtonPressed }) {
+export interface ICurrentOrg {
+  name: string;
+}
+
+export interface IUser {
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+/**
+ * This is the navigation bar in the main app.
+ * It has two main components: support options and user menu (inlcudes billing, logout, org/user settings)
+ * @returns NavBar
+ */
+export default function Navbar() {
   const router = useRouter();
-  const [user, setUser] = useState({});
+  const [user, setUser] = useState<IUser | undefined>();
   const [orgs, setOrgs] = useState([]);
-  const [currentOrg, setCurrentOrg] = useState([]);
+  const [currentOrg, setCurrentOrg] = useState<ICurrentOrg | undefined>();
 
   const { t } = useTranslation("");
 
   const supportOptionsList = useMemo(() => supportOptions(t), [t]);
 
-  useEffect(async () => {
-    const userData = await getUser();
-    setUser(userData);
-    const orgsData = await getOrganizations();
-    setOrgs(orgsData);
-    const currentOrg = await getOrganization({
-      orgId: localStorage.getItem("orgData.id"),
-    });
-    setCurrentOrg(currentOrg);
+  useEffect(() => {
+    (async () => {
+      const userData = await getUser();
+      setUser(userData);
+      const orgsData = await getOrganizations();
+      setOrgs(orgsData);
+      const currentOrg = await getOrganization({
+        orgId: String(localStorage.getItem("orgData.id")),
+      });
+      setCurrentOrg(currentOrg);
+    })();
   }, []);
 
   const closeApp = async () => {
     console.log("Logging out...");
     await logout();
-    router.push("/");
+    router.push("/login");
   };
 
   return (
@@ -110,8 +128,8 @@ export default function Navbar({ onButtonPressed }) {
                 <a
                   key={guidGenerator()}
                   target="_blank"
-                  rel="noopener noreferrer"
-                  href={url}
+                  rel="noopener"
+                  href={String(url)}
                   className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
                 >
                   <div className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full">
@@ -241,9 +259,10 @@ export default function Navbar({ onButtonPressed }) {
                   <div className="flex flex-col items-start px-1 mt-3 mb-2">
                     {orgs
                       .filter(
-                        (org) => org._id != localStorage.getItem("orgData.id")
+                        (org: { _id: string }) =>
+                          org._id != localStorage.getItem("orgData.id")
                       )
-                      .map((org) => (
+                      .map((org: { _id: string; name: string }) => (
                         <div
                           key={guidGenerator()}
                           onClick={() => {

frontend/components/navigation/NavHeader.tsx

@@ -1,29 +1,37 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import {
   faAngleRight,
-  faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getOrganization from "~/pages/api/organization/GetOrg";
-import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";
+import getProjectInfo from "~/pages/api/workspace/getProjectInfo";
 
-export default function NavHeader({ pageName, isProjectRelated }) {
+/**
+ * This is the component at the top of almost every page.
+ * It shows how to navigate to a certain page.
+ * It future these links should also be clickable and hoverable
+ * @param obj 
+ * @param obj.pageName - Name of the page
+ * @param obj.isProjectRelated - whether this page is related to project or now (determine if it's 2 or 3 navigation steps)
+ * @returns 
+ */
+export default function NavHeader({ pageName, isProjectRelated } : { pageName: string; isProjectRelated: boolean; }): JSX.Element {
   const [orgName, setOrgName] = useState("");
   const [workspaceName, setWorkspaceName] = useState("");
   const router = useRouter();
 
   useEffect(() => {
     (async () => {
-      let org = await getOrganization({
-        orgId: localStorage.getItem("orgData.id"),
+      const orgId = localStorage.getItem("orgData.id")
+      const org = await getOrganization({
+        orgId: orgId ? orgId : "",
       });
       setOrgName(org.name);
-      let workspace = await getWorkspaceInfo({
-        workspaceId: router.query.id,
+
+      const workspace = await getProjectInfo({
+        projectId: String(router.query.id),
       });
       setWorkspaceName(workspace.name);
     })();