Merge branch 'staging'

Author: sealexan

src/components/Carousel.css

@@ -1,9 +1,3 @@
-.slider {
-  width: 100%;
-  overflow: hidden;
-  height: 100%;
-}
-
 .slides {
   display: flex;
   overflow-x: auto;
@@ -38,3 +32,8 @@ body {
 body {
   display: flex;
 }
+
+.monaco-editor {
+  position: absolute !important;
+  inset: 0;
+}

src/components/Hooks.tsx

@@ -1,8 +1,6 @@
 import { useMonaco } from "@monaco-editor/react"
-import { useKeycloak } from "@react-keycloak/web"
 import { useMutation, useQuery, UseQueryOptions } from "@tanstack/react-query"
 import axios, { AxiosError } from "axios"
-import { EventSource } from "extended-eventsource"
 import { compact, concat, flatten } from "lodash"
 import { Uri } from "monaco-editor"
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react"
@@ -306,66 +304,39 @@ export const useCountdown = (start: number | null, end: number | null) => {
 }
 
 export const useTimeframeFromSSE = () => {
-  const { keycloak } = useKeycloak()
-  const { courseSlug } = useParams()
-  const token = keycloak.token
-
   const [timeFrameFromEvent, setTimeFrameFromEvent] = useState<
     [number, number] | null
   >(null)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    if (!token || !courseSlug) return
-    const eventSource = new EventSource(
-      `/api/courses/${courseSlug}/subscribe`,
-      {
-        headers: { Authorization: `Bearer ${token}` },
-        retry: 3000,
-      },
-    )
-
-    const onTimeEvent = (e: MessageEvent) => {
-      const [startTimeString, endTimeString] = (e.data as string).split("/")
-      setTimeFrameFromEvent([
-        Date.parse(startTimeString),
-        Date.parse(endTimeString),
-      ])
-    }
-
-    eventSource.addEventListener("timer-update", onTimeEvent)
-    eventSource.onerror = (error) => {
-      console.error("SSE error", error)
-      setError(new Error("SSE connection error"))
-    }
 
-    const cleanup = () => {
-      eventSource.removeEventListener("timer-update", onTimeEvent)
-      eventSource.close()
-    }
-    window.addEventListener("beforeunload", cleanup)
-    return () => {
-      window.removeEventListener("beforeunload", cleanup)
-      cleanup()
-    }
-  }, [courseSlug, token])
+  useSSE<string>("timer-update", (data) => {
+    const [startTimeString, endTimeString] = data.split("/")
+    setTimeFrameFromEvent([
+      Date.parse(startTimeString),
+      Date.parse(endTimeString),
+    ])
+  })
 
-  return { timeFrameFromEvent, error }
+  return { timeFrameFromEvent }
 }
 
-// properly define eventType
 export const useSSE = <T,>(eventType: string, handler: (data: T) => void) => {
   const { eventSource } = useEventSource()
 
+  const handlerRef = useRef(handler)
+
+  useEffect(() => {
+    handlerRef.current = handler
+  }, [handler])
+
   useEffect(() => {
     if (!eventSource) return
 
     const listener = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data)
-        handler(parsed as T)
+        handlerRef.current(parsed as T)
       } catch {
-        handler(event.data as unknown as T)
+        handlerRef.current(event.data as unknown as T)
       }
     }
 
@@ -374,7 +345,7 @@ export const useSSE = <T,>(eventType: string, handler: (data: T) => void) => {
     return () => {
       eventSource.removeEventListener(eventType, listener)
     }
-  }, [eventSource, eventType, handler])
+  }, [eventSource, eventType])
 }
 
 export const useInspect = () => {

src/components/SubmissionsCarousel.tsx

@@ -134,7 +134,7 @@ const Slide: React.FC<{
   }, [selectedFileName])
 
   return (
-    <Flex direction={"column"} borderRadius={"lg"}>
+    <Flex direction={"column"} borderRadius={"lg"} flexGrow={0}>
       <HStack
         justify={"space-between"}
         px={3}
@@ -168,16 +168,27 @@ const Slide: React.FC<{
         ></BookmarkToggle>
       </HStack>
       <Divider />
-      <Flex h={"full"} marginTop={4} direction={"column"} p={2}>
-        <Editor
-          value={submission.content[selectedFileName]}
-          options={{
-            readOnly: true,
-            minimap: { enabled: false },
-            scrollBeyondLastLine: false,
-          }}
-          language={derivedProgrammingLanguage}
-        ></Editor>
+      <Flex
+        h={"full"}
+        marginTop={4}
+        direction={"column"}
+        p={2}
+        minH={0}
+        flex={1}
+      >
+        <Box flex={1} minH={0} position={"relative"}>
+          <Editor
+            value={submission.content[selectedFileName]}
+            options={{
+              readOnly: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+            }}
+            height={"100%"}
+            language={derivedProgrammingLanguage}
+          ></Editor>
+        </Box>
         <Flex direction={"row-reverse"}>
           <Button
             position={"relative"}
@@ -326,10 +337,15 @@ export const SubmissionsCarousel: React.FC<{
       display={"flex"}
       p={0}
       background={"transparent"}
-      height={"full"}
+      flex={1}
     >
-      <Flex className="slider" width={"full"} borderRadius={"2xl"}>
-        <Flex className="slides" ref={sliderRef} gap={SLIDES_GAP}>
+      <Flex width={"full"} borderRadius={"2xl"} flex={1} flexGrow={0}>
+        <Flex
+          className="slides"
+          ref={sliderRef}
+          gap={SLIDES_GAP}
+          height={"auto"}
+        >
           {submissions.map((submission, i) => (
             <Slide
               submission={submission}

src/context/EventSourceContext.tsx

@@ -32,22 +32,26 @@ export const EventSourceProvider: React.FC<{ children: React.ReactNode }> = ({
       `/api/courses/${courseSlug}/subscribe`,
       {
         headers: {
-          Authorization: `Bearer ${keycloak.token}`,
+          Authorization: `Bearer ${token}`,
         },
         retry: 3000,
       },
     )
-    eventSource.addEventListener("emitter-id", (event: MessageEvent) => {
+
+    const emitterListener = (event: MessageEvent) => {
       setEmitterId(event.data)
-    })
+    }
 
+    eventSource.addEventListener("emitter-id", emitterListener)
     eventSourceRef.current = eventSource
     setTick((t) => t + 1) // force re-render so context provider updates value
 
     return () => {
+      eventSource.removeEventListener("emitter-id", emitterListener)
       eventSource.close()
+      eventSourceRef.current = null
     }
-  }, [courseSlug, keycloak.token, token])
+  }, [courseSlug, eventSourceRef, token])
 
   useEffect(() => {
     if (!emitterId || !courseSlug) return
@@ -63,11 +67,11 @@ export const EventSourceProvider: React.FC<{ children: React.ReactNode }> = ({
           })
         }
       },
-      60000, // 1 minute heartbeat
+      15000, // 15 sec heartbeat
     )
 
     return () => clearInterval(interval)
-  }, [emitterId, courseSlug, keycloak.token, sendHeartbeat, toast])
+  }, [courseSlug, emitterId, sendHeartbeat, toast])
 
   return (
     <EventSourceContext.Provider

src/pages/Layout.tsx

@@ -17,7 +17,7 @@ import {
 } from "@chakra-ui/react"
 import { useKeycloak } from "@react-keycloak/web"
 import { compact, join } from "lodash"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { AiOutlineLogout } from "react-icons/ai"
 import {
@@ -46,18 +46,10 @@ export default function Layout() {
   const { keycloak } = useKeycloak()
   const { courseSlug } = useParams()
   const { data: examples } = useExamples()
-  const [ongoingExamplePath, setOngoingExamplePath] = useState<string | null>(
-    null,
-  )
+
   const isSupervisor =
     !!courseSlug && keycloak.hasRealmRole(courseSlug + "-supervisor")
 
-  useEffect(() => {
-    if (ongoingExamplePath) {
-      navigate(ongoingExamplePath)
-    }
-  }, [navigate, ongoingExamplePath])
-
   useEffect(() => {
     if (!courseSlug || !examples || isSupervisor) return
 
@@ -77,7 +69,7 @@ export default function Layout() {
   }, [examples, courseSlug, navigate, isSupervisor, location.pathname])
 
   useSSE<string>("redirect", (data) => {
-    setOngoingExamplePath(data)
+    navigate(data)
     toast({
       title: t("redirect_toast"),
       status: "info",

src/pages/PrivateDashboard.tsx

@@ -11,7 +11,6 @@ import {
   Divider,
   Flex,
   Grid,
-  GridItem,
   Heading,
   HStack,
   Icon,
@@ -350,7 +349,7 @@ const SubmissionInspector: React.FC<{
   )
 
   return (
-    <Flex direction={"column"} h={"full"} gap={2}>
+    <Flex direction={"column"} h={"full"} gap={2} flex={1}>
       <Flex layerStyle={"segment"} direction="row" p={3}>
         {Object.entries(categories).map(([categoryKey, category], i) => {
           const bgColor = bgColors[i]
@@ -923,21 +922,14 @@ export function PrivateDashboard() {
     example?.information[currentLanguage]?.title ||
     example?.information["en"]?.title
   return (
-    <Grid
-      layerStyle={"container"}
-      templateColumns="1fr 1fr 1fr"
-      templateRows={"5fr 1fr"}
-      gap={2}
-      height={"full"}
-    >
-      <GridItem
+    <Flex layerStyle={"container"} gap={2} height={"full"}>
+      <Flex
+        direction={"column"}
         layerStyle={"segment"}
         gap={4}
-        rowStart={1}
-        rowEnd={5}
-        colStart={1}
-        colEnd={2}
         p={1}
+        minWidth={0}
+        flex={1}
       >
         <Tabs
           variant={"line"}
@@ -974,9 +966,9 @@ export function PrivateDashboard() {
             </TabPanel>
           </TabPanels>
         </Tabs>
-      </GridItem>
-      <GridItem gap={4} colStart={2} colEnd={4} rowStart={1} rowEnd={4}>
-        <Flex direction={"column"} h={"full"}>
+      </Flex>
+      <Flex gap={2} flexDirection={"column"} minWidth={0} flex={2}>
+        <Flex direction={"column"} flex={1}>
           {!submissions || submissions.length < 1 ? (
             <TaskDescription
               instructionContent={instructionsContent}
@@ -1001,37 +993,33 @@ export function PrivateDashboard() {
             />
           )}
         </Flex>
-      </GridItem>
-      <GridItem
-        rowStart={4}
-        rowEnd={5}
-        colStart={2}
-        colEnd={-1}
-        display={"flex"}
-        flexDirection={"row"}
-        gap={3}
-        layerStyle={"segment"}
-        alignContent={"space-between"}
-        p={2}
-      >
-        <GeneralInformation
-          exampleState={exampleState}
-          generalInformation={exampleInformation}
-        ></GeneralInformation>
-
-        <ExampleTimeController
-          handleTimeAdjustment={handleTimeAdjustment}
-          durationAsString={durationAsString} // will be some derived state once implemented properly
-          exampleState={exampleState}
-          handleStart={handleStart}
-          handleTermination={handleTermination}
-          handleReset={handleReset}
-          setDurationInSeconds={setDurationInSeconds}
-          startTime={derivedStartDate}
-          endTime={derivedEndDate}
-          setExampleState={setExampleState}
-        ></ExampleTimeController>
-      </GridItem>
-    </Grid>
+        <Flex
+          display={"flex"}
+          flexDirection={"row"}
+          gap={3}
+          layerStyle={"segment"}
+          alignContent={"space-between"}
+          p={2}
+        >
+          <GeneralInformation
+            exampleState={exampleState}
+            generalInformation={exampleInformation}
+          ></GeneralInformation>
+
+          <ExampleTimeController
+            handleTimeAdjustment={handleTimeAdjustment}
+            durationAsString={durationAsString}
+            exampleState={exampleState}
+            handleStart={handleStart}
+            handleTermination={handleTermination}
+            handleReset={handleReset}
+            setDurationInSeconds={setDurationInSeconds}
+            startTime={derivedStartDate}
+            endTime={derivedEndDate}
+            setExampleState={setExampleState}
+          ></ExampleTimeController>
+        </Flex>
+      </Flex>
+    </Flex>
   )
 }