Merge pull request #30 from mon-b/fña-v2

Added GenerationToggle

Author: estardacs

src/components/GenerationToggle/GenerationToggle.tsx

@@ -0,0 +1,61 @@
+import { useState, useRef, useEffect } from 'react';
+import { useCoursePlanner, GENERATIONS } from '../../context/CoursePlannerContext';
+import styles from './GenerationToggle.module.css';
+
+export default function GenerationToggle() {
+  const { currentGeneration, switchGeneration } = useCoursePlanner();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  
+  const selectedGen = GENERATIONS.find(g => g.id === currentGeneration) || GENERATIONS[0];
+
+  const handleGenChange = (genId: string) => {
+    switchGeneration(genId);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={styles.paletteContainer} ref={dropdownRef} title="Seleccionar Generación">
+      <div className={styles.customSelect}>
+        <button 
+          className={styles.selectButton}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span className={styles.selectedText}>
+            {selectedGen.name}
+          </span>
+          <span className={`${styles.arrow} ${isOpen ? styles.arrowUp : ''}`}>
+            ▼
+          </span>
+        </button>
+        
+        {isOpen && (
+          <div className={styles.optionsContainer}>
+            {GENERATIONS.map(gen => (
+              <button
+                key={gen.id}
+                className={`${styles.option} ${gen.id === currentGeneration ? styles.optionSelected : ''}`}
+                onClick={() => handleGenChange(gen.id)}
+              >
+                <span className={styles.optionText}>
+                  {gen.name}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/context/CoursePlannerContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useEffect, ReactNode, useRef, useMemo, useCallback } from 'react';
+import React, { createContext, useContext, useReducer, useEffect, ReactNode, useRef, useMemo, useCallback, useState } from 'react';
 import { Course, AppState, PaletteConfig } from '../types/course';
 import { defaultData } from '../data/defaultData';
 import { optData } from '../data/optData';
@@ -51,21 +51,29 @@ const PALETTES: Record<string, PaletteConfig> = {
   }
 };
 
+// Define available generations
+export const GENERATIONS = [
+  { id: 'genLegacy', name: 'Malla 2023-2024' },
+  { id: 'genNew', name: 'Malla 2025' }
+];
+
 interface CoursePlannerContextType {
   state: AppState;
   dispatch: React.Dispatch<CoursePlannerAction>;
   allCourses: Course[];
   findCourseData: (courseId: string) => Course | undefined;
   getCurrentPalette: () => PaletteConfig;
   getAvailablePalettes: () => PaletteConfig[];
+  currentGeneration: string;
+  switchGeneration: (genId: string) => void;
 }
 
 type CoursePlannerAction =
   | { type: 'MOVE_COURSE'; payload: { courseId: string; fromContainer: string; toContainer: string; toIndex?: number } }
   | { type: 'TOGGLE_COURSE_TAKEN'; payload: { courseId: string } }
   | { type: 'ADD_SEMESTER' }
   | { type: 'DELETE_SEMESTER'; payload: { semesterNumber: number } }
-  | { type: 'RESET_PLANNER' }
+  | { type: 'RESET_PLANNER'; payload: { genId: string } }
   | { type: 'TOGGLE_COURSE_POOL' }
   | { type: 'CREATE_CUSTOM_COURSE'; payload: Course }
   | { type: 'UPDATE_COURSE'; payload: { originalId: string; course: Course } }
@@ -74,8 +82,9 @@ type CoursePlannerAction =
 
 const CoursePlannerContext = createContext<CoursePlannerContextType | undefined>(undefined);
 
-const STORAGE_KEY = 'coursePlannerState';
-const DATA_VERSION = 1;
+const STORAGE_KEY_PREFIX = 'coursePlannerState';
+const CURRENT_GEN_KEY = 'coursePlannerCurrentGen';
+const DATA_VERSION = 2;
 
 const initialState: AppState = {
   semesters: [],
@@ -186,7 +195,7 @@ function coursePlannerReducer(state: AppState, action: CoursePlannerAction): App
     }
 
     case 'RESET_PLANNER': {
-      return initializeDefaultState();
+      return initializeDefaultState(action.payload.genId);
     }
 
     case 'TOGGLE_COURSE_POOL': {
@@ -244,10 +253,68 @@ function findCourseState(courseId: string, state: AppState) {
   return state.coursePool.find(c => c.id === courseId);
 }
 
-function initializeDefaultState(): AppState {
-  const semesters = defaultData.map(sem => ({
+function initializeDefaultState(genId: string = 'genLegacy'): AppState {
+  // Deep copy default data
+  let semestersData = JSON.parse(JSON.stringify(defaultData));
+
+  // Modify for 2025 Generation
+  if (genId === 'genNew') {
+    const courseMoves = [
+      { id: 'IIC2343', toSem: 4 }, // Arqui: Sem 2 -> Sem 4
+      { id: 'IIC2333', toSem: 5 }, // SO: Sem 4 -> Sem 5
+      { id: 'OPTC1',   toSem: 2 }  // Opt Ciencia: Sem 5 -> Sem 2
+    ];
+
+    // Helper to find and remove course from any semester
+    const extractCourse = (id: string) => {
+      for (const sem of semestersData) {
+        const idx = sem.courses.findIndex((c: any) => c.id === id);
+        if (idx !== -1) {
+          return sem.courses.splice(idx, 1)[0];
+        }
+      }
+      return null;
+    };
+
+    // Store extracted courses
+    const extractedCourses: Record<string, any> = {};
+    courseMoves.forEach(move => {
+      extractedCourses[move.id] = extractCourse(move.id);
+    });
+
+    // Insert into new locations maintaining order (before OFG/Teo)
+    courseMoves.forEach(move => {
+      const course = extractedCourses[move.id];
+      if (course) {
+        const targetSem = semestersData.find((s: any) => s.sem === move.toSem);
+        if (targetSem) {
+          // Find index of OFG or Teologico to insert before
+          // Usually they are the last ones or have specific IDs like TEO123, OFG2, OFG3
+          const lastCourseIndex = targetSem.courses.length > 0 ? targetSem.courses.length - 1 : 0;
+          const lastCourse = targetSem.courses[lastCourseIndex];
+          
+          if (lastCourse && (lastCourse.type === 'ofg' || lastCourse.id.startsWith('OFG') || lastCourse.id === 'TEO123')) {
+             targetSem.courses.splice(lastCourseIndex, 0, course);
+          } else {
+             targetSem.courses.push(course);
+          }
+        }
+      }
+    });
+
+    // Update Practice Credits (IIC2002)
+    // Find IIC2002 and update cred to 10
+    semestersData.forEach((sem: any) => {
+      const practice = sem.courses.find((c: any) => c.id === 'IIC2002');
+      if (practice) {
+        practice.cred = "10";
+      }
+    });
+  }
+
+  const semesters = semestersData.map((sem: any) => ({
     number: sem.sem,
-    courses: sem.courses.map(course => ({
+    courses: sem.courses.map((course: any) => ({
       id: course.id,
       type: course.type,
       taken: false
@@ -275,9 +342,15 @@ function initializeDefaultState(): AppState {
   };
 }
 
-function loadStateFromStorage(): AppState | null {
+function getStorageKey(genId: string) {
+  if (genId === 'genLegacy') return STORAGE_KEY_PREFIX;
+  return `${STORAGE_KEY_PREFIX}_${genId}`;
+}
+
+function loadStateFromStorage(genId: string): AppState | null {
   try {
-    const savedState = localStorage.getItem(STORAGE_KEY);
+    const key = getStorageKey(genId);
+    const savedState = localStorage.getItem(key);
     if (!savedState) return null;
 
     const parsedState = JSON.parse(savedState);
@@ -292,7 +365,7 @@ function loadStateFromStorage(): AppState | null {
       typeof parsedState.coursePoolVisible === 'boolean'
     ) {
       if (parsedState.version !== DATA_VERSION) {
-        console.warn('State version mismatch (expected ' + DATA_VERSION + '), resetting state to apply updates.');
+        console.warn('State version mismatch (expected ' + DATA_VERSION + '), resetting state.');
         return null;
       }
 
@@ -313,44 +386,77 @@ function loadStateFromStorage(): AppState | null {
   }
 }
 
-function saveStateToStorage(state: AppState): void {
+function saveStateToStorage(state: AppState, genId: string): void {
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    const key = getStorageKey(genId);
+    localStorage.setItem(key, JSON.stringify(state));
   } catch (error) {
     console.error('Failed to save state to localStorage:', error);
   }
 }
 
 export function CoursePlannerProvider({ children }: { children: ReactNode }) {
   const hasLoadedFromStorage = useRef(false);
+  const [currentGeneration, setCurrentGeneration] = useState(() => {
+     return localStorage.getItem(CURRENT_GEN_KEY) || 'genLegacy';
+  });
 
   const [state, dispatch] = useReducer(
     coursePlannerReducer, 
     initialState, 
     (_initial) => {
-      const savedState = loadStateFromStorage();
+      const initialGen = localStorage.getItem(CURRENT_GEN_KEY) || 'genLegacy';
+      const savedState = loadStateFromStorage(initialGen);
       if (savedState) {
         hasLoadedFromStorage.current = true;
         return savedState;
       }
-      return initializeDefaultState();
+      return initializeDefaultState(initialGen);
     }
   );
 
   const allCourses = useMemo((): Course[] => {
+    // Determine base data based on current generation?
+    // Ideally we should reflect the changes in allCourses too if we want tooltips to be correct regarding semesters/credits?
+    // However, defaultData is static.
+    // For now, modifiedCourses will handle overrides if we treated them as such, but here we are moving them in semesters.
+    // The "allCourses" is mainly used for palette and looking up static info. 
+    // The Credits change for IIC2002 needs to be reflected here too.
+    
+    let baseCourses = [...defaultData.flatMap(sem => sem.courses)];
+    
+    if (currentGeneration === 'genNew') {
+       // Update IIC2002 credits in this view as well
+       baseCourses = baseCourses.map(c => {
+         if (c.id === 'IIC2002') return { ...c, cred: "10" };
+         return c;
+       });
+    }
+
     return [
-      ...defaultData.flatMap(sem => sem.courses),
+      ...baseCourses,
       ...optData[0].courses,
       ...engData[0].courses,
       ...state.customCourses
     ];
-  }, [state.customCourses]);
+  }, [state.customCourses, currentGeneration]);
 
   const findCourseData = useCallback((courseId: string): Course | undefined => {
-    if (state.modifiedCourses[courseId]) {
-      return state.modifiedCourses[courseId];
+    const defaultCourse = allCourses.find(course => course.id === courseId);
+    const modifiedCourse = state.modifiedCourses[courseId];
+
+    if (modifiedCourse) {
+      if (defaultCourse) {
+         return {
+             ...modifiedCourse,
+             parity: defaultCourse.parity,
+             prereq: defaultCourse.prereq,
+             cred: defaultCourse.cred // Ensure credit updates propagate if they are static updates
+         };
+      }
+      return modifiedCourse;
     }
-    return allCourses.find(course => course.id === courseId);
+    return defaultCourse;
   }, [allCourses, state.modifiedCourses]);
 
   const getCurrentPalette = useCallback((): PaletteConfig => {
@@ -360,23 +466,37 @@ export function CoursePlannerProvider({ children }: { children: ReactNode }) {
   const getAvailablePalettes = useCallback((): PaletteConfig[] => {
     return Object.values(PALETTES);
   }, []);
+
+  const switchGeneration = useCallback((newGenId: string) => {
+    if (newGenId === currentGeneration) return;
+
+    saveStateToStorage(state, currentGeneration);
+
+    const newState = loadStateFromStorage(newGenId) || initializeDefaultState(newGenId);
+    dispatch({ type: 'LOAD_STATE', payload: newState });
+    
+    setCurrentGeneration(newGenId);
+    localStorage.setItem(CURRENT_GEN_KEY, newGenId);
+  }, [currentGeneration, state]);
 
   useEffect(() => {
     if (hasLoadedFromStorage.current) {
-      saveStateToStorage(state);
+      saveStateToStorage(state, currentGeneration);
     } else {
       hasLoadedFromStorage.current = true;
     }
-  }, [state]);
+  }, [state, currentGeneration]);
 
   const value = useMemo(() => ({
     state,
     dispatch,
     allCourses,
     findCourseData,
     getCurrentPalette,
-    getAvailablePalettes
-  }), [state, allCourses, findCourseData, getCurrentPalette, getAvailablePalettes]);
+    getAvailablePalettes,
+    currentGeneration,
+    switchGeneration
+  }), [state, allCourses, findCourseData, getCurrentPalette, getAvailablePalettes, currentGeneration, switchGeneration]);
 
   return (
     <CoursePlannerContext.Provider value={value}>

src/pages/PlannerPage/PlannerPage.module.css

@@ -476,4 +476,28 @@
   .sidePanel.open {
     width: 100%;
   }
-}
+}
+
+.generationSelect {
+  background: rgba(139, 69, 255, 0.1);
+  border: 1px solid rgba(139, 69, 255, 0.3);
+  border-radius: 6px;
+  padding: 0.4rem 0.8rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  margin-left: 1rem;
+}
+
+.generationSelect:hover {
+  background: rgba(139, 69, 255, 0.2);
+  border-color: rgba(139, 69, 255, 0.5);
+  color: white;
+}
+
+.generationSelect option {
+  background: #1a1a2e;
+  color: white;
+}