From 0bb8049db344e9790a789986388971d68a4dc4a9 Mon Sep 17 00:00:00 2001 From: Amy Date: Tue, 31 Aug 2021 23:07:19 -0400 Subject: [PATCH 1/2] Fix navbar highlight for Organized Content sections (#182) Also fixes the navbar highlight for the different Advice sections. Closes #181 Co-authored-by: Amy Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/182 Reviewed-by: Aditya Thakral Co-authored-by: Amy Co-committed-by: Amy --- components/Navbar.tsx | 81 ++++++++++++++++--- components/ShapesBackground.tsx | 6 +- .../{coop-advice.mdx => co-op-advice.mdx} | 2 +- pages/resources/advice/academic.tsx | 2 +- .../{coop.module.css => co-op.module.css} | 0 .../resources/advice/{coop.tsx => co-op.tsx} | 10 +-- pages/resources/advice/index.tsx | 10 +++ pages/resources/advice/misc.tsx | 2 +- pages/resources/index.tsx | 2 +- 9 files changed, 96 insertions(+), 19 deletions(-) rename content/advice/{coop-advice.mdx => co-op-advice.mdx} (99%) rename pages/resources/advice/{coop.module.css => co-op.module.css} (100%) rename pages/resources/advice/{coop.tsx => co-op.tsx} (85%) create mode 100644 pages/resources/advice/index.tsx diff --git a/components/Navbar.tsx b/components/Navbar.tsx index ab3e1c1d..73f13bcc 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -9,16 +9,15 @@ import styles from "./Navbar.module.css"; type Menu = { name: string; route: string; - submenu?: { - name: string; - route: string; - }[]; + exact?: boolean; + submenu?: Menu; }[]; const menu: Menu = [ { name: "Home", route: "/", + exact: true, }, { name: "About", @@ -27,6 +26,7 @@ const menu: Menu = [ { name: "About Us", route: "/about", + exact: true, }, { name: "Meet the Team", @@ -76,7 +76,21 @@ const menu: Menu = [ }, { name: "Advice", - route: "/resources/advice/coop", + route: "/resources/advice/co-op", + submenu: [ + { + name: "Co-op Advice", + route: "/resources/advice/co-op", + }, + { + name: "Academic Advice", + route: "/resources/advice/academic", + }, + { + name: "Additional Resources", + route: "/resources/advice/misc", + }, + ], }, { name: "Internships", @@ -198,10 +212,11 @@ interface NavItemProps { function NavItem(props: NavItemProps) { const router = useRouter(); - const isCurrentPage = - router.pathname === props.route || - (props.submenu != null && - router.pathname.startsWith(getMainRoute(props.route))); + const isCurrentPage = shouldHighlight( + router.pathname, + props.name, + props.route + ); const isExternalLink = props.route.includes("http://") || props.route.includes("https://"); @@ -273,6 +288,54 @@ function NavItem(props: NavItemProps) { ); } +interface Leaf { + name: string; + route: string; + exact?: boolean; + ancestors: { name: string; route: string }[]; +} + +function collectLeaves( + accumulator: Leaf[], + entry: { + name: string; + route: string; + exact?: boolean; + submenu?: Menu; + } +): Leaf[] { + if (entry.submenu == null) { + return [...accumulator, { ...entry, ancestors: [] }]; + } + + const subleaves = entry.submenu.reduce(collectLeaves, [] as Leaf[]); + return [ + ...accumulator, + ...subleaves.map((leaf) => ({ + ...leaf, + ancestors: [...leaf.ancestors, { name: entry.name, route: entry.route }], + })), + ]; +} + +const leaves: Leaf[] = menu.reduce(collectLeaves, [] as Leaf[]); + +function shouldHighlight( + pathname: string, + name: string, + route: string +): boolean { + const match = leaves.find((leaf) => + leaf.exact ? leaf.route === pathname : pathname.startsWith(leaf.route) + ); + return match + ? (match.name === name && match.route === route) || + match.ancestors.find( + (ancestor) => ancestor.name === name && ancestor.route === route + ) != null + : false; +} + function getMainRoute(route: string) { if (route === "/") { return "/"; diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index a34a0316..0003c73d 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -45,7 +45,11 @@ export function ShapesBackground({ getConfig }: Props) { }, [getConfig, width, height, prevWidth, prevRoute, router.asPath]); return ( -
+
{Object.entries(config).map(([type, instances]) => instances.map((attributes, idx) => (
- + - Coop Advice + Co-op Advice diff --git a/pages/resources/advice/index.tsx b/pages/resources/advice/index.tsx new file mode 100644 index 00000000..bcd13fcb --- /dev/null +++ b/pages/resources/advice/index.tsx @@ -0,0 +1,10 @@ +import Head from "next/head"; +import React from "react"; + +export default function AdviceRedirect() { + return ( + + + + ); +} diff --git a/pages/resources/advice/misc.tsx b/pages/resources/advice/misc.tsx index 3e9774d6..21ffabaa 100644 --- a/pages/resources/advice/misc.tsx +++ b/pages/resources/advice/misc.tsx @@ -4,7 +4,7 @@ import { Title } from "@/components/Title"; import Content from "../../../content/advice/misc-advice.mdx"; -import { Advice } from "./coop"; +import { Advice } from "./co-op"; export default function MiscAdvice() { return ( diff --git a/pages/resources/index.tsx b/pages/resources/index.tsx index 9a436de6..a60f39b2 100644 --- a/pages/resources/index.tsx +++ b/pages/resources/index.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import React from "react"; -export default function Resources() { +export default function ResourcesRedirect() { return ( From a0d0b8e8438bdac904970feddb7bd19788eb13da Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Tue, 31 Aug 2021 23:07:50 -0400 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20Simplify=20getCurre?= =?UTF-8?q?ntTerm=20to=20fix=20builds=20around=20the=20end=20of=20terms=20?= =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20(#244)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Goodbye date comparison when you can just do string comparison 🙃 Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/244 Reviewed-by: j285he Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- lib/events.ts | 42 ++++++++++++++++++++++++------------------ 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/lib/events.ts b/lib/events.ts index 2007a89c..3cb7e621 100644 --- a/lib/events.ts +++ b/lib/events.ts @@ -179,28 +179,34 @@ export async function getEventsPageProps({ }; } -export function getCurrentTerm(): { year: string; term: string } { - const date = new Date(); - let term = ""; - const year = date.getUTCFullYear().toString(); +export function getCurrentTerm() { + const today = new Date().toLocaleDateString("en-CA", { + timeZone: "EST", + year: "numeric", + month: "numeric", + day: "numeric", + }); - if ( - new Date(`${year}-01-01 EST`).getTime() <= date.getTime() && - date.getTime() <= new Date(`${year}-04-30 EST`).getTime() - ) { + const [year] = today.split("-"); + + let term = ""; + + if (`${year}-01-01` <= today) { term = "winter"; - } else if ( - new Date(`${year}-05-01 EST`).getTime() <= date.getTime() && - date.getTime() <= new Date(`${year}-08-31 EST`).getTime() - ) { + } + + if (`${year}-05-01` <= today) { term = "spring"; - } else if ( - new Date(`${year}-09-01 EST`).getTime() <= date.getTime() && - date.getTime() <= new Date(`${year}-12-31 EST`).getTime() - ) { + } + + if (`${year}-09-01` <= today) { term = "fall"; } + if (term === "") { + throw new Error("Error setting the current term"); + } + return { year, term }; } @@ -211,7 +217,7 @@ function getPastTerm( const index = TERMS.indexOf(term); if (index === -1) { - throw new Error("Not a valid term"); + throw new Error(`[getPastTerm] Not a valid term: "${term}" "${year}"`); } return index === 0 @@ -232,7 +238,7 @@ function getFutureTerm( const index = TERMS.indexOf(term); if (index === -1) { - throw new Error("Not a valid term"); + throw new Error(`[getFutureTerm] Not a valid term: "${term}" "${year}"`); } return index === TERMS.length - 1