Merge branch 'main' into colin/email-subs-list

Author: ChinemeremChigbo

.eslintrc.json

@@ -17,7 +17,8 @@
 - If you intend to contribute to this project ensure you have been added to the [UW Blueprint Github Organization](https://github.com/uwblueprint/).
 - Install [Node.js](https://nodejs.org/en/download/) (v22 tested). It's recommended to use [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm) to manage your Node.js versions.
 - Install Docker Desktop ([MacOS](https://docs.docker.com/desktop/setup/install/mac-install/) | [Windows](https://docs.docker.com/desktop/install/windows-install/) | [Linux](https://docs.docker.com/desktop/setup/install/linux/)) and ensure that it is running.
-- 
+-
+
 ## Clone and Install
 
 - Clone the [Sistema Github Repository](https://github.com/uwblueprint/sistema) to your local machine and `cd` into the project folder:

README.md

@@ -1,6 +1,7 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
-import prettier from 'eslint-plugin-prettier';
+import tseslintPlugin from '@typescript-eslint/eslint-plugin';
+import tseslintParser from '@typescript-eslint/parser';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -9,17 +10,11 @@ const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
 });
 
 const eslintConfig = [
   ...compat.config({
     extends: ['next', 'next/core-web-vitals', 'plugin:prettier/recommended'],
-    settings: {
-      plugins: {
-        prettier,
-      },
-    },
     rules: {
       'prettier/prettier': [
         'error',
@@ -31,6 +26,22 @@ const eslintConfig = [
     },
     ignorePatterns: ['.next/'],
   }),
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tseslintParser,
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslintPlugin,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['error'],
+    },
+  },
 ];
 
 export default eslintConfig;

eslint.config.mjs

@@ -16,10 +16,9 @@ import { useCallback, useEffect, useState } from 'react';
 interface UseChangeManagementProps {
   subjects: SubjectAPI[];
   locations: Location[];
-  colorGroups: { id: number; name: string; colorCodes: string[] }[];
   absenceCap: number;
   onRefresh?: () => void;
-  toast?: any;
+  showToast?: any;
 }
 
 interface UseChangeManagementReturn {
@@ -41,10 +40,9 @@ interface UseChangeManagementReturn {
 export const useChangeManagement = ({
   subjects: initialSubjects,
   locations: initialLocations,
-  colorGroups,
   absenceCap: initialAbsenceCap,
   onRefresh,
-  toast,
+  showToast,
 }: UseChangeManagementProps): UseChangeManagementReturn => {
   // Store maps of pending entity changes
   const [pendingSubjects, setPendingSubjects] = useState<
@@ -183,7 +181,7 @@ export const useChangeManagement = ({
       setPendingSettings((prev) => {
         // If new absence cap equals original, remove it from pending settings
         if (newAbsenceCap === initialAbsenceCap) {
-          const { absenceCap, ...rest } = prev;
+          const { ...rest } = prev;
           return rest;
         }
 
@@ -398,12 +396,11 @@ export const useChangeManagement = ({
         }
 
         // Show success toast
-        if (toast) {
-          toast({
+        if (showToast) {
+          showToast({
             title: 'Changes saved',
             status: 'success',
             duration: 3000,
-            isClosable: true,
           });
         }
 
@@ -418,13 +415,11 @@ export const useChangeManagement = ({
     }
 
     // Show error toast if there was a problem
-    if (!success && toast) {
-      toast({
+    if (!success && showToast) {
+      showToast({
         title: 'Error',
         description: errorMessage || 'Failed to save changes',
         status: 'error',
-        duration: 5000,
-        isClosable: true,
       });
     }
 

hooks/useChangeManagement.ts

@@ -0,0 +1,97 @@
+import {
+  CheckCircleIcon,
+  CloseIcon,
+  InfoIcon,
+  WarningIcon,
+} from '@chakra-ui/icons';
+import { Box, Text, useTheme, useToast } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+const iconMap = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: CloseIcon,
+  info: InfoIcon,
+};
+
+const colorMap = (theme) => ({
+  success: theme.colors.positiveGreen[200],
+  warning: theme.colors.warningOrange[300],
+  error: theme.colors.errorRed[200],
+  info: theme.colors.primaryBlue[300],
+});
+
+interface CustomToastProps {
+  description?: string | ReactNode;
+  status?: 'success' | 'warning' | 'error' | 'info';
+}
+
+export const CustomToast: React.FC<CustomToastProps> = ({
+  description,
+  status = 'info',
+}) => {
+  const theme = useTheme();
+  const Icon = iconMap[status] || InfoIcon;
+  const color = colorMap(theme)[status];
+
+  return (
+    <Box
+      bg="white"
+      width="360px"
+      border="1px solid"
+      borderColor={color}
+      borderRadius="md"
+      px={3}
+      py={3}
+      display="flex"
+      alignItems="center"
+      boxShadow="md"
+    >
+      <Box mr={3} display="flex" alignItems="center">
+        <Icon boxSize="30px" color={color} />
+      </Box>
+      <Box>
+        {description &&
+          (typeof description === 'string' ? (
+            <Text fontSize="14px" color="black">
+              {description}
+            </Text>
+          ) : (
+            <Box fontSize="14px" color="black">
+              {description}
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+};
+
+const allowedStatuses = ['success', 'warning', 'error', 'info'] as const;
+type ToastStatus = (typeof allowedStatuses)[number];
+
+function isToastStatus(value: any): value is ToastStatus {
+  return allowedStatuses.includes(value);
+}
+
+export const useCustomToast = () => {
+  const toast = useToast();
+
+  return ({
+    description,
+    status = 'info',
+  }: {
+    title?: string;
+    description?: string | ReactNode;
+    status?: string;
+  }) => {
+    const safeStatus: ToastStatus = isToastStatus(status) ? status : 'info';
+
+    toast({
+      isClosable: true,
+      position: 'bottom-left',
+      render: () => (
+        <CustomToast description={description} status={safeStatus} />
+      ),
+    });
+  };
+};

src/components/CustomToast.tsx

@@ -1,6 +1,7 @@
-import { Box, Image, Input, Text, useToast } from '@chakra-ui/react';
+import { Box, Image, Input, Text } from '@chakra-ui/react';
 import { LessonPlanFile } from '@utils/types';
 import { useRef, useState } from 'react';
+import { useCustomToast } from '../CustomToast';
 
 interface FileUploadProps {
   lessonPlan: File | null;
@@ -17,18 +18,15 @@ export const FileUpload: React.FC<FileUploadProps> = ({
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const toast = useToast();
+  const showToast = useCustomToast();
 
   const validateAndSetFile = (file: File) => {
     if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
       setLessonPlan(file);
     } else {
-      toast({
-        title: 'Invalid File Type',
+      showToast({
         description: 'Please upload a valid PDF file.',
         status: 'error',
-        duration: 5000,
-        isClosable: true,
       });
     }
   };