link period names to Schoology page

GunnWATT · Aug 21, 2024 · a513e36 · a513e36
1 parent 4927342
commit a513e36
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/client/src/components/schedule/Period.tsx b/client/src/components/schedule/Period.tsx
@@ -16,11 +16,12 @@ import clubs from '@watt/shared/data/clubs';
 
 
 type PeriodProps = {
+    id?: string,
     start: DateTime, end: DateTime,
     name: string, color: string, format: string, room?: string, note?: string, grades?: number[]
 };
 export default function Period(props: PeriodProps) {
-    const {start, end, name, color, format, room, note, grades} = props;
+    const {id, start, end, name, color, format, room, note, grades} = props;
     const duration = start.until(end); // Duration representing the period
 
     const now = useContext(CurrentTimeContext);
@@ -50,7 +51,13 @@ export default function Period(props: PeriodProps) {
 
     const header = (
         <>
-            <h2 className="text-xl break-words min-w-0">{name}</h2>
+            <h2 className="text-xl break-words min-w-0">
+                {id ? (
+                    <a href={`https://pausd.schoology.com/course/${id}`} className="text-white" target="__blank">
+                        {name}
+                    </a>
+                ) : name}
+            </h2>
             <span className="flex gap-1">
                 {room && (
                     <span className="rounded-full px-2 py-1 text-xs h-max bg-black/10 dark:bg-black/20">

diff --git a/client/src/components/schedule/Periods.tsx b/client/src/components/schedule/Periods.tsx
@@ -50,6 +50,7 @@ export default function Periods(props: PeriodsProps) {
                 {displayIndicator && <PeriodIndicator startTime={periods![0].s}/>}
                 {periods!.map(({n, s, e, note, grades}) => (
                     <Period
+                        id={getPeriodId(n, userData)}
                         name={parsePeriodName(n, userData)}
                         color={parsePeriodColor(n, userData)}
                         key={n + s + e + note + grades}
@@ -112,6 +113,11 @@ export const darkPerColors = [
     '#d22d51', '#ed7621', '#eeb82f', '#373739'
 ];
 
+function getPeriodId(name: string, userData?: UserData) {
+    const classes = userData?.classes as {[key: string]: SgyPeriodData} | undefined;
+    return classes?.[name]?.s;
+}
+
 // Turns an object key into human-readable period name.
 export function parsePeriodName(name: string, userData?: UserData) {
     const classes = userData?.classes as {[key: string]: SgyPeriodData} | undefined;