fix: fixing bugs related to project select component

AmericanAirlines · Dec 13, 2023 · 9260000 · 9260000
1 parent 24622aa
commit 9260000
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/packages/web/src/components/ProjectsSelect/ProjectsSelect.tsx b/packages/web/src/components/ProjectsSelect/ProjectsSelect.tsx
@@ -21,8 +21,9 @@ export const ProjectsSelect: React.FC<ProjectsSelectProps> = ({ onChange, isInva
     [selectedProjects],
   );
 
-  // eslint-disable-next-line react/no-array-index-key
-  const skeletons = Array(10).map((val, i) => <Skeleton key={i} flexShrink={0} height={'50px'} />);
+  const skeletons = Array(10)
+    .fill('')
+    .map((val, i) => <Skeleton key={i} flexShrink={0} height={'30px'} />); // eslint-disable-line react/no-array-index-key
 
   React.useEffect(() => {
     const makeInitialFetch = async () => {
@@ -31,9 +32,10 @@ export const ProjectsSelect: React.FC<ProjectsSelectProps> = ({ onChange, isInva
     void makeInitialFetch();
   }, []);
 
-  React.useEffect(() => {
-    onChange(selectedProjects);
-  }, [onChange, selectedProjects]);
+  const updatedSelectedProjects = (updatedProjects: Project[]) => {
+    setSelectedProjects(updatedProjects);
+    onChange(updatedProjects);
+  };
 
   return (
     <ProjectsSelectStyleContext.Provider
@@ -50,12 +52,13 @@ export const ProjectsSelect: React.FC<ProjectsSelectProps> = ({ onChange, isInva
           projects={projects}
           selectedProjects={selectedProjects}
           onSelectAll={() => {
-            setSelectedProjects(projects ?? []);
+            updatedSelectedProjects(projects ?? []);
           }}
           onDeselectAll={() => {
-            setSelectedProjects([]);
+            updatedSelectedProjects([]);
           }}
         />
+
         <Flex direction="column" w="full" maxH={'300px'} overflow="scroll" gap={3} pb="5">
           {projects?.length
             ? projects.map((project) => (
@@ -65,9 +68,9 @@ export const ProjectsSelect: React.FC<ProjectsSelectProps> = ({ onChange, isInva
                   isSelected={selectedProjectIds.includes(project.id)}
                   onClick={() => {
                     if (selectedProjectIds.includes(project.id)) {
-                      setSelectedProjects(selectedProjects.filter((p) => p.id !== project.id));
+                      updatedSelectedProjects(selectedProjects.filter((p) => p.id !== project.id));
                     } else {
-                      setSelectedProjects([...selectedProjects, project]);
+                      updatedSelectedProjects([...selectedProjects, project]);
                     }
                   }}
                 />