Add support for external links in sidebars

frontend/src/components/molecules/SideBarTabGroup/index.tsx

@@ -11,8 +11,9 @@ export interface SideBarTabGroupProp {
   buttons: {
     title: string;
     icon?: IconDefinition;
-		active?: boolean;
-		activeURL?: string;
+    active?: boolean;
+    activeURL?: string;
+    externalURL?: string;
   }[];
 }
 
@@ -20,38 +21,54 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
   title,
   buttons,
 }: SideBarTabGroupProp) => {
-  let displayButtons = buttons.map(({ title, icon, active, activeURL }) => {
-    let FAicon;
-    if (icon) {
-      FAicon = (
-        <FontAwesomeIcon className={styles.tabGroupButtonSvg} icon={icon} />
-      );
-		}
-		if (activeURL !== undefined){
-			return (
-				<Button
-					as={NavLink} 
-					to={activeURL}
-					activeClassName={"active"}
-					className={styles.tabGroupButton}
-					key={title}
-				>
-					{title}
-					{FAicon}
-				</Button>
-			);
-		}
+  let displayButtons = buttons.map(
+    ({ title, icon, active, activeURL, externalURL }) => {
+      let FAicon;
+      if (icon) {
+        FAicon = (
+          <FontAwesomeIcon className={styles.tabGroupButtonSvg} icon={icon} />
+        );
+      }
+      if (activeURL !== undefined) {
+        return (
+          <Button
+            as={NavLink}
+            to={activeURL}
+            activeClassName={"active"}
+            className={styles.tabGroupButton}
+            key={title}
+          >
+            {title}
+            {FAicon}
+          </Button>
+        );
+      }
 
-    return (
-      <Button
-        className={classNames({ active: active }, styles.tabGroupButton)}
-        key={title}
-      >
-        {title}
-        {FAicon}
-      </Button>
-    );
-  });
+      if (externalURL !== undefined) {
+        return (
+          <Button
+            href={externalURL}
+            target="_blank"
+            className={styles.tabGroupButton}
+            key={title}
+          >
+            {title}
+            {FAicon}
+          </Button>
+        );
+      }
+
+      return (
+        <Button
+          className={classNames({ active: active }, styles.tabGroupButton)}
+          key={title}
+        >
+          {title}
+          {FAicon}
+        </Button>
+      );
+    }
+  );
 
   return (
     <>

frontend/src/components/organisms/LeftBarHome/index.tsx

@@ -2,25 +2,34 @@ import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faGitlab } from "@fortawesome/free-brands-svg-icons";
-import { faFlask, faAward, faDatabase } from "@fortawesome/free-solid-svg-icons";
+import { faFlask, faAward, faDatabase, faEnvelopeOpen } from "@fortawesome/free-solid-svg-icons";
 
 const LeftBarHome: React.FC = () => {
   let linkButtons = [
     {
 			title: "GitLab",
 			icon: faGitlab,
+			externalURL: "https://gitlab.doc.ic.ac.uk/",
     },
     {
-			title: "LabTS",
-			icon: faFlask,
+			title: "Outlook",
+			icon: faEnvelopeOpen,
+			externalURL: "https://outlook.office.com/",
     },
     {
 			title: "DocPA",
 			icon: faAward,
+			externalURL: "https://docpa.doc.ic.ac.uk/",
+		},
+		{
+			title: "LabTS",
+			icon: faFlask,
+			externalURL: "https://teaching.doc.ic.ac.uk/labts",
     },
     {
 			title: "teachDB",
 			icon: faDatabase,
+			externalURL: "https://teachdb.doc.ic.ac.uk/db/",
     },
 	];
 

frontend/src/components/organisms/LeftBarModule/index.tsx

@@ -2,31 +2,49 @@ import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faDiscourse } from "@fortawesome/free-brands-svg-icons";
+import { useParams } from "react-router-dom";
 
 const LeftBarModule: React.FC = () => {
-	let outlineButtons = [
+  let { id } = useParams();
+
+  let piazzaClasses: {
+    [index: string]: string;
+  } = {
+    CO140: "k0r3c04qwhj3e",
+    CO142: "k0r3c156mj35b",
+    CO112: "k0r3by316kp6",
+    CO145: "k0r3c1h4zik5y",
+  };
+
+  let piazzaLink = "https://piazza.com/class/";
+  if (piazzaClasses[id] !== undefined && piazzaClasses[id]) {
+    piazzaLink += piazzaClasses[id];
+  }
+
+  let outlineButtons = [
     {
-			title: "Overview",
+      title: "Overview",
       activeURL: "overview",
     },
     {
-			title: "Coursework",
+      title: "Coursework",
       activeURL: "coursework",
     },
     {
-			title: "Materials",
+      title: "Materials",
       activeURL: "materials",
     },
     {
-			title: "Piazza",
+      title: "Piazza",
 			icon: faDiscourse,
-		},
+			externalURL: piazzaLink,
+    },
   ];
 
   return (
     <LeftBar>
-			<SideBarTabGroup title="Outline" buttons={outlineButtons} />
-		</LeftBar>
+      <SideBarTabGroup title="Outline" buttons={outlineButtons} />
+    </LeftBar>
   );
 };