diff --git a/frontend/src/components/molecules/SideBarTabGroup/index.tsx b/frontend/src/components/molecules/SideBarTabGroup/index.tsx index 015525ef1461195e504adfffa5f8985d7ea2c1d0..af0996a1e93102455a02d4fedd5094cfa3307a62 100644 --- a/frontend/src/components/molecules/SideBarTabGroup/index.tsx +++ b/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 ( <> diff --git a/frontend/src/components/organisms/LeftBarHome/index.tsx b/frontend/src/components/organisms/LeftBarHome/index.tsx index 1ac068590fbbce0174543edcdefc0f8814f95097..39f09b37930ffa890e4df503714f65b874844e8e 100644 --- a/frontend/src/components/organisms/LeftBarHome/index.tsx +++ b/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/", }, ]; diff --git a/frontend/src/components/organisms/LeftBarModule/index.tsx b/frontend/src/components/organisms/LeftBarModule/index.tsx index 4d55f6fc80fc540dd3755976365b4724d7954342..1a93de8f74031dc5330e138c122df6ae6d025f5b 100644 --- a/frontend/src/components/organisms/LeftBarModule/index.tsx +++ b/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> ); };