Tranforming more components to typescript (#47)

frontend/components/navigation/NavBarDashboard.tsx

@@ -47,27 +47,44 @@ const supportOptions = [
   ],
 ];
 
-export default function Navbar({ onButtonPressed }) {
-  const router = useRouter();
-  const [user, setUser] = useState({});
-  const [orgs, setOrgs] = useState([]);
-  const [currentOrg, setCurrentOrg] = useState([]);
+export interface ICurrentOrg {
+  name: string;
+}
 
-  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);
+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<IUser | undefined>();
+  const [orgs, setOrgs] = useState([]);
+  const [currentOrg, setCurrentOrg] = useState<ICurrentOrg | undefined>();
+
+  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 (
@@ -108,7 +125,7 @@ export default function Navbar({ onButtonPressed }) {
                   key={guidGenerator()}
                   target="_blank"
                   rel="noopener"
-                  href={option[2]}
+                  href={String(option[2])}
                   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">
@@ -238,9 +255,9 @@ 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 () => {
+      const orgId = localStorage.getItem("orgData.id")
       let org = await getOrganization({
-        orgId: localStorage.getItem("orgData.id"),
+        orgId: orgId ? orgId : "",
       });
       setOrgName(org.name);
-      let workspace = await getWorkspaceInfo({
-        workspaceId: router.query.id,
+
+      let workspace = await getProjectInfo({
+        projectId: String(router.query.id),
       });
       setWorkspaceName(workspace.name);
     })();