hashing by session parent id (#263)

Author: adescoteaux1

frontend/src/components/SessionPreviewModal.tsx

@@ -128,7 +128,7 @@ export default function SessionPreviewModal({
                 {session.session_name}
               </h2>
               <p className="text-sm text-gray-600">
-                {session.location || 'School 3'}
+                {session.location}
               </p>
             </div>
 

frontend/src/components/calendar/calendarView.tsx

@@ -16,7 +16,7 @@ const colorMap = {
   yellow: '#F4B860',
 }
 
-// Hash function to consistently map session ID to a color
+// Hash function to consistently map parent session ID to a color
 function hashIdToColor(id: string | number): keyof typeof colorMap {
   const colors: Array<keyof typeof colorMap> = ['blue', 'yellow', 'pink']
 
@@ -84,7 +84,6 @@ export default function CalendarView({
   const maxTime = new Date()
   maxTime.setHours(19, 0, 0)
 
-
   return (
     <Calendar
       localizer={localizer}
@@ -104,7 +103,8 @@ export default function CalendarView({
       min={minTime}
       max={maxTime}
       eventPropGetter={(event) => {
-        const colorKey = hashIdToColor(event.id)
+        // Use parentId for consistent coloring across recurring sessions
+        const colorKey = hashIdToColor(event.parentId)
         const backgroundColor = colorMap[colorKey]
 
         return {

frontend/src/components/schedule/StudentSchedule.tsx

@@ -11,8 +11,25 @@ import '@/app/calendar/override-calendar.css'
 const localizer = momentLocalizer(moment)
 
 // Color palette for events - using disabled variants from global styling
-const eventColors = ['#f9aeda', '#bac0ff', '#ffdfb1', '#bac0ff', '#ffdfb1']
-const getEventColor = (index: number) => eventColors[index % eventColors.length]
+const colorMap = {
+  pink: '#F9AEDA',
+  blue: '#BAC0FF',
+  yellow: '#F4B860',
+}
+
+// Hash function to consistently map parent session ID to a color
+function hashIdToColor(id: string | number): keyof typeof colorMap {
+  const colors: Array<keyof typeof colorMap> = ['blue', 'yellow', 'pink']
+  
+  let hash = 0
+  const idStr = String(id)
+  for (let i = 0; i < idStr.length; i++) {
+    hash = ((hash << 5) - hash) + idStr.charCodeAt(i)
+    hash = hash & hash
+  }
+  
+  return colors[Math.abs(hash) % colors.length]
+}
 
 interface StudentScheduleProps {
   studentId?: string
@@ -33,17 +50,22 @@ export default function StudentSchedule({ studentId, initialView = 'day', classN
   // Always build events array (empty if error or no data)
   const events = error
     ? []
-    : sessions.map((s, idx) => {
+    : sessions.map((s) => {
         // Check if this is from studentHook (nested) or allHook (flat)
         const sessionData = studentHook ? (s as any).session : s
+        const parentId = sessionData.session_parent_id || sessionData.id
+        const colorKey = hashIdToColor(parentId)
+        const backgroundColor = colorMap[colorKey]
+        
         return {
           id: sessionData.id,
+          parentId,
           title: sessionData.session_name ? sessionData.session_name : 'Session',
           start: new Date(sessionData.start_datetime),
           end: new Date(sessionData.end_datetime),
           allDay: false,
           resource: {
-            color: getEventColor(idx),
+            color: backgroundColor,
             school: (sessionData as any).school || 'School',
           },
         }

frontend/src/hooks/useCalendar.ts

@@ -1,3 +1,5 @@
+// hooks/useCalendar.ts - UPDATED WITH PARENT ID
+
 import type { View } from 'react-big-calendar'
 import type { Session } from '@/lib/api/theSpecialStandardAPI.schemas'
 import moment from 'moment'
@@ -34,6 +36,7 @@ export function useCalendarState() {
 
 export interface CalendarEvent {
   id: string
+  parentId: string // Add parent ID for color hashing
   title: string
   start: Date
   end: Date
@@ -62,6 +65,7 @@ export function useCalendarData(date: Date, view: View) {
     () =>
       sessions.map(session => ({
         id: session.id,
+        parentId: session.session_parent_id || session.id, // Use parent ID if available, else fall back to session ID
         title: session.session_name,
         location: session.location,
         start: new Date(session.start_datetime),
@@ -80,4 +84,4 @@ export function useCalendarData(date: Date, view: View) {
     addSession,
     viewRange,
   }
-}
+}