linting

Tony Qiu · Tony Qiu · commit 12e2f05b7022 · 2025-07-18T10:20:23.000-04:00
diff --git a/frontend/src/components/common/Pagination.tsx b/frontend/src/components/common/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import {
   Flex,
@@ -24,86 +24,90 @@ const Pagination: FC<PaginationProps> = ({
   itemsPerPage,
   className = "",
 }) => {
-  const [curPageNumber, setCurPageNumber] = useState(value);
   const MAX_NUM_OF_PAGES = ceil(numberOfItems / itemsPerPage);
   const theme = useTheme();
 
-  const onPageChange = (newPageNumber: number) => {
-    if (newPageNumber < 1) {
-      setCurPageNumber(1);
-    } else if (newPageNumber > MAX_NUM_OF_PAGES) {
-      setCurPageNumber(MAX_NUM_OF_PAGES);
+  const handlePrevClick = () => {
+    if (value > 1) {
+      onChange(value - 1);
     } else {
-      setCurPageNumber(newPageNumber);
-      onChange(newPageNumber);
+      onChange(1);
     }
   };
 
-  const onInputChange = (newPageNumber: number) => {
-    setCurPageNumber(newPageNumber);
+  const handleNextClick = () => {
+    if (value < MAX_NUM_OF_PAGES) {
+      onChange(value + 1);
+    } else {
+      onChange(MAX_NUM_OF_PAGES);
+    }
+  };
+
+  const handleInputChange = (val: string) => {
+    const newPageNumber = Number(val);
     onChange(newPageNumber);
   };
 
   return (
     <Flex
+      width="100%"
+      maxWidth="25rem"
       alignItems="center"
-      gap="1.5rem"
       justifyContent="space-between"
-      width="25rem"
       alignSelf="center"
       className={className}
     >
       <ChevronLeft
         size={30}
-        color={
-          curPageNumber <= 1 ? theme.colors.gray[300] : theme.colors.gray[700]
-        }
-        onClick={() => onPageChange(curPageNumber - 1)}
+        color={value <= 1 ? theme.colors.gray[300] : theme.colors.gray[700]}
+        onClick={handlePrevClick}
       />
-      <Text
-        m={0}
-        fontSize="18px"
-        color={theme.colors.gray[700]}
-        fontWeight="400"
-      >
-        Page
-      </Text>
-      <NumberInput
-        onChange={(val) => onInputChange(Number(val))}
-        inputMode="numeric"
-        value={curPageNumber}
-        max={MAX_NUM_OF_PAGES}
-        min={1}
-        clampValueOnBlur={true}
-        defaultValue={1}
-        size="sm"
-        focusBorderColor={theme.colors.gray[500]}
-        textColor="gray.700"
-        fontWeight="400"
-      >
-        <NumberInputField
-          height="2.5rem"
-          padding="0.35rem"
-          maxW="3rem"
-          alignContent="center"
-          borderColor={theme.colors.gray[500]}
-          borderRadius="0.35rem"
-          textAlign="center"
-        />
-      </NumberInput>
-      <Text
-        m={0}
-        fontSize="18px"
-        color={theme.colors.gray[700]}
-        fontWeight="400"
-      >
-        of {MAX_NUM_OF_PAGES}
-      </Text>
+      <Flex gap="1.25rem" alignItems="center">
+        <Text
+          m={0}
+          fontSize="18px"
+          color={theme.colors.gray[700]}
+          fontWeight="400"
+        >
+          Page
+        </Text>
+        <NumberInput
+          onChange={handleInputChange}
+          inputMode="numeric"
+          value={value}
+          max={MAX_NUM_OF_PAGES}
+          min={1}
+          clampValueOnBlur
+          defaultValue={1}
+          size="sm"
+          focusBorderColor={theme.colors.gray[500]}
+          textColor="gray.700"
+          fontWeight="400"
+        >
+          <NumberInputField
+            height="2.5rem"
+            padding="0.35rem"
+            maxW="3rem"
+            alignContent="center"
+            borderColor={theme.colors.gray[500]}
+            borderRadius="0.35rem"
+            textAlign="center"
+          />
+        </NumberInput>
+        <Text
+          m={0}
+          fontSize="18px"
+          color={theme.colors.gray[700]}
+          fontWeight="400"
+        >
+          of {MAX_NUM_OF_PAGES}
+        </Text>
+      </Flex>
       <ChevronRight
         size={30}
-        onClick={() => onPageChange(curPageNumber + 1)}
+        onClick={handleNextClick}
         color={
-          curPageNumber >= MAX_NUM_OF_PAGES
+          value >= MAX_NUM_OF_PAGES
             ? theme.colors.gray[300]
             : theme.colors.gray[700]
         }
diff --git a/frontend/src/pages/UserManagementPage.tsx b/frontend/src/pages/UserManagementPage.tsx
@@ -1,59 +1,19 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Alert, AlertIcon, CloseButton, Flex, Box } from "@chakra-ui/react";
+import { Alert, AlertIcon, CloseButton, Flex } from "@chakra-ui/react";
 import UserAPIClient from "../APIClients/UserAPIClient";
 import { User } from "../types/UserTypes";
 
 import Filter from "../components/common/Filter";
 import Search from "../components/common/Search";
-import SingleSelect from "../components/common/SingleSelect";
-import MultiSelect from "../components/common/MultiSelect";
 import UserManagementTable from "../components/user-management/UserManagementTable";
-import { AnimalTag, ColorLevel } from "../types/TaskTypes";
 
-// Import star icon for color levels
-import { ReactComponent as StarIcon } from "../assets/icons/star.svg";
 import Pagination from "../components/common/Pagination";
 
-// const handleUserSubmit = async (formData: AddUserRequest) => {
-// eslint-disable-next-line no-useless-catch
-// try {
-//   await UserAPIClient.create({
-//     firstName: formData.firstName,
-//     lastName: formData.lastName,
-//     phoneNumber: formData.phoneNumber,
-//     email: formData.email,
-//     colorLevel: formData.colorLevel as unknown as string,
-//     role: formData.role as
-//       | "Administrator"
-//       | "Animal Behaviourist"
-//       | "Staff"
-//       | "Volunteer",
-//   });
-//   await UserAPIClient.invite(formData.email);
-// } catch (error) {
-//   throw error;
-// }
-// };
-
 const UserManagementPage = (): React.ReactElement => {
   const [users, setUsers] = useState<User[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [filters, setFilters] = useState<Record<string, string[]>>({});
   const [search, setSearch] = useState<string>("");
-
-  // Testing for the Select Component Filters
-  const [selectedColorLevel, setSelectedColorLevel] = useState<string | null>(
-    null,
-  );
-  const [selectedAnimalTags, setSelectedAnimalTags] = useState<string[]>([]);
-
-  const handleClearFilters = () => {
-    setFilters({});
-    setSearch("");
-    // Testing for the Select Component Filters
-    setSelectedColorLevel(null);
-    setSelectedAnimalTags([]);
-  };
   const [page, setPage] = useState<number>(1);
 
   const numUsersPerPage = 10; // You can adjust this value as needed
@@ -65,6 +25,12 @@ const UserManagementPage = (): React.ReactElement => {
   const handleSearchChange = (value: string) => {
     setSearch(value);
   };
+
+  const handleClearFilters = () => {
+    setFilters({});
+    setSearch("");
+  };
+
   const filteredUsers = useMemo(() => {
     return users
       .filter((user) => {
@@ -83,31 +49,8 @@ const UserManagementPage = (): React.ReactElement => {
           return filterVals.includes(value as string);
         });
       })
-      .filter((user) => user.name.toLowerCase().includes(search.toLowerCase()))
-      .filter((user) => {
-        // Apply SingleSelect Color Level filter
-        if (selectedColorLevel) {
-          const colorLevelMap: Record<string, number> = {
-            Green: 1,
-            Yellow: 2,
-            Orange: 3,
-            Red: 4,
-            Blue: 5,
-          };
-          return user.colorLevel === colorLevelMap[selectedColorLevel];
-        }
-        return true;
-      })
-      .filter((user) => {
-        // Apply MultiSelect Animal Tags filter
-        if (selectedAnimalTags.length > 0) {
-          return selectedAnimalTags.some((tag) =>
-            user.animalTags.includes(tag as AnimalTag),
-          );
-        }
-        return true;
-      });
-  }, [filters, search, users, selectedColorLevel, selectedAnimalTags, page]);
+      .filter((user) => user.name.toLowerCase().includes(search.toLowerCase()));
+  }, [filters, search, users]);
 
   const filteredUsersLength = filteredUsers.length;
 
@@ -127,12 +70,6 @@ const UserManagementPage = (): React.ReactElement => {
     getUsers();
   }, []);
 
-  // Testing for the Select Component Filters
-  const colorLevelOptions = Object.values(ColorLevel); // ["Green", "Yellow", "Orange", "Red", "Blue"]
-  const animalTagOptions = Object.values(AnimalTag); // ["Bird", "Bunny", "Cat", "Dog", "Small Animal"]
-  const animalTagColors = ["blue", "orange", "yellow", "green", "purple"]; // Colors for each animal tag
-  const colorLevelIcons = [StarIcon, StarIcon, StarIcon, StarIcon, StarIcon]; // Star icons for each color level
-
   return (
     <Flex direction="column" gap="2rem" width="100%" pt="2rem">
       {errorMessage && (
@@ -164,43 +101,10 @@ const UserManagementPage = (): React.ReactElement => {
           search={search}
         />
       </Flex>
-
-      {/* Testing for the Select Component Filters */}
-      <Flex
-        padding="0 2.5rem"
-        gap="1.5rem"
-        wrap="wrap"
-        align="stretch"
-        maxWidth="100%"
-      >
-        <Box minWidth="250px" maxWidth="350px" flex="1">
-          <SingleSelect
-            values={colorLevelOptions}
-            onSelect={setSelectedColorLevel}
-            selected={selectedColorLevel}
-            placeholder="Any level"
-            icons={colorLevelIcons}
-            label="Color Level"
-            required
-            maxHeight="160px"
-          />
-        </Box>
-        <Box minWidth="250px" maxWidth="350px" flex="1">
-          <MultiSelect
-            values={animalTagOptions}
-            onSelect={setSelectedAnimalTags}
-            selected={selectedAnimalTags}
-            placeholder="Any tags"
-            colours={animalTagColors}
-            label="Animal Tags"
-            maxHeight="180px"
-          />
-        </Box>
-      </Flex>
       <UserManagementTable
-        users={filteredUsers.splice(
+        users={filteredUsers.slice(
           (page - 1) * numUsersPerPage,
-          numUsersPerPage,
+          page * numUsersPerPage,
         )}
         clearFilters={handleClearFilters}
       />
