Refactor And Fix Some Issue

- Refactor DotAnimation
- Fix Shuttle to sync with timetable
- Fix FullTime and Shuttle to account for simultaneous shuttle bus arrivals

Author: kcyoow

src/app/components/fulltime/FullTime.tsx

@@ -67,10 +67,6 @@ const MinuteContainer = styled.div`
   ${tw`self-center text-left ml-3 col-span-4`}
 `
 
-const DirectMinuteContainer = styled(MinuteContainer)`
-  ${tw`hm:leading-none`}
-`
-
 const FullTimeDocument = styled.div`
   ${tw`px-5 font-Ptd text-center mx-auto select-none bg-theme-main text-theme-text max-w-7xl`}
 `
@@ -182,16 +178,7 @@ const TimeBox = (props: OrganizedTimetables) => {
             >
               {t('direct')}
             </Chip>
-            <DirectMinuteContainer>
-              {props.direct.map((time, idx) => {
-                const isExist = props.directY.some((ytime) => time === ytime)
-                return isExist ? null : (
-                  <React.Fragment key={idx}>
-                    <span>{time} </span>
-                  </React.Fragment>
-                )
-              })}
-            </DirectMinuteContainer>
+            <MinuteContainer>{props.direct.join(' ')}</MinuteContainer>
           </TimeBoxBodyGrid>
         </TimeBoxBody>
       </TimeBoxInner>

src/app/components/routemap/DotAnimation.tsx

@@ -14,6 +14,18 @@ const PingDot = styled.div<{ $on: boolean }>`
   ${(props) => (props.$on ? tw`visible` : tw`invisible`)}
 `
 
+/**
+ * This function applies the animation flag to the flagArray based on the config.
+ * As a result, it controls the animation by passing the boolean values of the flagArray to each element accordingly.
+ * @param config is the configuration object containing the animation starting index (index) and route type (dotType)
+ * @param flagArray is the current animation flag array
+ * @returns RouteAnimationFlag : Updated animation flag array
+ *
+ * @example If flagArray is all false and config is {dotType: 'direct', index: 2},
+ * it should originally set true for indices 2 and 3 in the 'direct' array of flagArray,
+ * but since there is no index 3 in dotIndex in RouteVisual, it sets true for indices 2 and 4 and returns it.
+ */
+
 export const applyDotAnimationFlag = (
   config: DotAnimationConfig,
   flagArray: RouteAnimationFlag,
@@ -29,7 +41,7 @@ export const applyDotAnimationFlag = (
       newFlagArray.direct[i >= 3 ? i + 1 : i] = true
     if (config.dotType === 'cycle') newFlagArray.cycle[i] = true
     if (config.dotType === 'yesulin')
-      newFlagArray.yesulin[i === 2 ? i + 1 : i] = true
+      newFlagArray.yesulin[i === 2 ? 3 : i] = true
     if (config.dotType === 'jungang') newFlagArray.jungang[i] = true
   }
   return newFlagArray
@@ -43,18 +55,29 @@ const getDotAniTimetableConfig = (type: string, index: number) => {
   else return { dotType: 'direct', index: index }
 }
 
+/**
+ * This function determines which route type and starting position the animation should use based on the tab and timetable type
+ * @param tab is shuttle bus tabs such as 'shuttlecoke_o', 'subway'
+ * @param currTimetable is current shuttle bus type and departure time from the timetable
+ * @returns DotAnimationConfig[] : Array of configuration objects,
+ * each containing animation starting index (index) and route type (dotType)
+ *
+ * @example If the tab is 'shuttlecoke_o' and the current timetable is {type: 'C', time: '~~:~~'},
+ * then the function will return [{dotType: 'cycle', index: 1}]
+ */
+
 export const getDotAnimationConfig = (
   tab: string,
-  timetable: SingleShuttleSchedule,
+  currTimetable: SingleShuttleSchedule,
 ) => {
-  if (timetable?.time !== '') {
+  if (currTimetable !== undefined) {
     switch (tab) {
       case 'shuttlecoke_o':
-        return [getDotAniTimetableConfig(timetable.type, 1)]
+        return [getDotAniTimetableConfig(currTimetable.type, 1)]
       case 'subway':
-        return [getDotAniTimetableConfig(timetable.type, 2)]
+        return [getDotAniTimetableConfig(currTimetable.type, 2)]
       case 'yesulin':
-        return [getDotAniTimetableConfig(timetable.type, 3)]
+        return [getDotAniTimetableConfig(currTimetable.type, 3)]
       case 'jungang':
         return [
           {
@@ -63,7 +86,7 @@ export const getDotAnimationConfig = (
           },
         ]
       case 'shuttlecoke_i':
-        if (timetable.type === 'NA') return []
+        if (currTimetable.type === 'NA') return []
 
         return [
           {
@@ -80,50 +103,53 @@ export const getDotAnimationConfig = (
           },
           {
             dotType: 'yesulin',
-            index: 3,
+            index: 4,
           },
         ]
       default:
-        return [getDotAniTimetableConfig(timetable.type, 0)]
+        return [getDotAniTimetableConfig(currTimetable.type, 0)]
     }
   }
   return []
 }
 
 export const useDotAnimation = (tab: string) => {
   const [flagTable, setFlagTable] = React.useState<RouteAnimationFlag>({
-    direct: [false, false, false, false, false],
+    direct: [false, false, false, false, false, false],
     cycle: [false, false, false, false, false, false],
-    yesulin: [false, false, false, false, false],
+    yesulin: [false, false, false, false, false, false],
     jungang: [false, false, false, false, false, false],
   })
-  const timetable = useTimeTableContext().timetable
-  const checkTimetable = React.useRef<SingleShuttleSchedule>()
+  const currTimetableArray = useTimeTableContext().currTimetable
+  const checkCurrTimetable = React.useRef<SingleShuttleSchedule>()
 
   React.useEffect(() => {
-    checkTimetable.current = undefined
+    checkCurrTimetable.current = undefined
   }, [])
 
   useEffect(() => {
     let tempFlagTable = {
-      direct: [false, false, false, false, false],
+      direct: [false, false, false, false, false, false],
       cycle: [false, false, false, false, false, false],
-      yesulin: [false, false, false, false, false],
+      yesulin: [false, false, false, false, false, false],
       jungang: [false, false, false, false, false, false],
     }
     setFlagTable(tempFlagTable)
-    if (checkTimetable.current === timetable) return
 
-    checkTimetable.current = timetable
+    if (checkCurrTimetable.current === currTimetableArray[0]) return
+
+    checkCurrTimetable.current = currTimetableArray[0]
 
-    const dotAnimationConfig = getDotAnimationConfig(tab, timetable)
+    currTimetableArray.map((currTimetable: SingleShuttleSchedule) => {
+      const dotAnimationConfig = getDotAnimationConfig(tab, currTimetable)
 
-    dotAnimationConfig.forEach((config) => {
-      tempFlagTable = applyDotAnimationFlag(config, tempFlagTable)
+      dotAnimationConfig.forEach((config) => {
+        tempFlagTable = applyDotAnimationFlag(config, tempFlagTable)
+      })
     })
 
     setFlagTable(tempFlagTable)
-  }, [timetable, tab])
+  }, [currTimetableArray, tab])
 
   return flagTable
 }

src/app/components/routemap/RouteVisual.tsx

@@ -8,9 +8,9 @@ import DotAnimation, {
 } from '@/components/routemap/DotAnimation'
 import { RouteAnimationFlag } from '@/data'
 
-const RouteLine = styled.div<{ isHalfWidth: boolean }>`
+const RouteLine = styled.div<{ $ishalfwidth: boolean }>`
   ${tw`absolute transition duration-150 ease-in-out z-0 h-[0.2rem] top-1 rt1:top-[0.2rem] rt1:h-[0.16rem] left-[0.6rem] max-w-[13.125rem]`}
-  ${(props) => (props.isHalfWidth ? tw`w-[7.8vw]` : tw`w-[15.6vw]`)}
+  ${(props) => (props.$ishalfwidth ? tw`w-[7.8vw]` : tw`w-[15.6vw]`)}
 `
 
 const Dot = styled.span`
@@ -86,7 +86,7 @@ const AddLines = (props: {
   const index = lineIndex[props.rootStatus][props.index]
   return (
     <RouteLine
-      isHalfWidth={
+      $ishalfwidth={
         props.rootStatus !== 'direct' && (index === 2 || index === 3)
       }
       className={

src/app/components/shuttle/Shuttle.tsx

@@ -350,7 +350,7 @@ export const Shuttle = ({ location }: ShuttleStop) => {
     staleTime: 5 * 60 * 1000,
   })
 
-  const { setTimetable } = useTimeTableContext()
+  const { currTimetable, setCurrTimetable } = useTimeTableContext()
 
   const [season, week] =
     setting.data !== undefined ? getSeason(setting.data) : [null, null]
@@ -393,16 +393,13 @@ export const Shuttle = ({ location }: ShuttleStop) => {
     if (
       timetable.data?.length === 0 ||
       timetable.status !== 'success' ||
-      filtered === undefined ||
-      filtered.length === 0
+      filtered?.length === 0
     ) {
-      setTimetable({ time: '', type: 'NA' })
       setTimetableAlive(false)
     } else {
-      setTimetable(filtered[0])
       setTimetableAlive(true)
     }
-  }, [timetable.data, timetable.status, setTimetable, currentTime])
+  }, [timetable.data, timetable.status])
 
   // Set week and season to localStorage
   useEffect(() => {
@@ -485,6 +482,13 @@ export const Shuttle = ({ location }: ShuttleStop) => {
     }
 
     const filtered = timetable.data.filter((val) => isAfterCurrentTime(val))
+
+    if (filtered[0] !== currTimetable[0]) {
+      if (filtered.length >= 2 && filtered[0].time === filtered[1].time)
+        setCurrTimetable([filtered[0], filtered[1]])
+      else setCurrTimetable([filtered[0]])
+    }
+
     const reverted = filtered.map((val) => convertUnixToTime(val))
     if (filtered.length === 0) {
       // Buses are done for today. User should refresh after midnight.

src/app/context/TimeTableContext.tsx

@@ -3,8 +3,10 @@ import React, { useState } from 'react'
 import { SingleShuttleSchedule } from '@/data'
 
 interface TimeTableContextProps {
-  timetable: SingleShuttleSchedule
-  setTimetable: React.Dispatch<React.SetStateAction<SingleShuttleSchedule>>
+  currTimetable: Array<SingleShuttleSchedule>
+  setCurrTimetable: React.Dispatch<
+    React.SetStateAction<Array<SingleShuttleSchedule>>
+  >
 }
 
 const TimeTableContext = React.createContext<TimeTableContextProps | null>(null)
@@ -18,12 +20,14 @@ export const useTimeTableContext = () => {
 export const TimeTableContextProvider = ({
   children,
 }: React.PropsWithChildren) => {
-  const [timetable, setTimetable] = useState<SingleShuttleSchedule>({
-    time: '',
-    type: 'NA',
-  })
+  const [currTimetable, setCurrTimetable] = useState<
+    Array<SingleShuttleSchedule>
+  >([])
 
-  const value = React.useMemo(() => ({ timetable, setTimetable }), [timetable])
+  const value = React.useMemo(
+    () => ({ currTimetable, setCurrTimetable }),
+    [currTimetable],
+  )
 
   return (
     <TimeTableContext.Provider value={value}>