add loading for autocomplete user and role

TogetherCrew · Jan 25, 2024 · 2dfe3d9 · 2dfe3d9
1 parent 1e3bc87
commit 2dfe3d9
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx
@@ -4,7 +4,7 @@ import useAppStore from '../../../../store/useStore';
 import { FetchedData, IRoles } from '../../../../utils/interfaces';
 import { debounce } from '../../../../helpers/helper';
 import TcAutocomplete from '../../../shared/TcAutocomplete';
-import { Chip } from '@mui/material';
+import { Chip, CircularProgress } from '@mui/material';
 
 interface ITcRolesAutoCompleteProps {
   isEdit?: boolean;
@@ -29,14 +29,15 @@ function TcRolesAutoComplete({
   const [selectedRoles, setSelectedRoles] = useState<IRoles[]>([]);
 
   const [fetchedRoles, setFetchedRoles] = useState<FetchedData>({
-    limit: 100,
+    limit: 8,
     page: 1,
     results: [],
     totalPages: 0,
     totalResults: 0,
   });
   const [filteredRolesByName, setFilteredRolesByName] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fetchDiscordRoles = async (
     platformId: string,
@@ -45,6 +46,8 @@ function TcRolesAutoComplete({
     name?: string
   ) => {
     try {
+      setIsLoading(true);
+
       const fetchedRoles = await retrievePlatformProperties({
         platformId,
         name: name,
@@ -73,7 +76,10 @@ function TcRolesAutoComplete({
           };
         });
       }
-    } catch (error) {}
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   useEffect(() => {
@@ -92,7 +98,7 @@ function TcRolesAutoComplete({
     if (inputValue === '') {
       setFilteredRolesByName('');
       setFetchedRoles({
-        limit: 100,
+        limit: 8,
         page: 1,
         results: [],
         totalPages: 0,
@@ -149,6 +155,12 @@ function TcRolesAutoComplete({
       getOptionLabel={(option) => option.name}
       label={'Select Role(s)'}
       multiple={true}
+      loading={isLoading}
+      loadingText={
+        <div className="text-center">
+          <CircularProgress size={24} />
+        </div>
+      }
       disabled={isDisabled}
       value={selectedRoles}
       onChange={handleChange}

diff --git a/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx
@@ -4,7 +4,7 @@ import useAppStore from '../../../../store/useStore';
 import { FetchedData, IUser } from '../../../../utils/interfaces';
 import { debounce } from '../../../../helpers/helper';
 import TcAutocomplete from '../../../shared/TcAutocomplete';
-import { Chip } from '@mui/material';
+import { Chip, CircularProgress } from '@mui/material';
 
 interface ITcUsersAutoCompleteProps {
   isEdit?: boolean;
@@ -29,14 +29,15 @@ function TcUsersAutoComplete({
   const [selectedUsers, setSelectedUsers] = useState<IUser[]>([]);
 
   const [fetchedUsers, setFetchedUsers] = useState<FetchedData>({
-    limit: 100,
+    limit: 8,
     page: 1,
     results: [],
     totalPages: 0,
     totalResults: 0,
   });
   const [filteredUsersByName, setFilteredUsersByName] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fetchDiscordUsers = async (
     platformId: string,
@@ -45,6 +46,8 @@ function TcUsersAutoComplete({
     ngu?: string
   ) => {
     try {
+      setIsLoading(true);
+
       const fetchedUsers = await retrievePlatformProperties({
         platformId,
         ngu: ngu,
@@ -73,7 +76,10 @@ function TcUsersAutoComplete({
           };
         });
       }
-    } catch (error) {}
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   useEffect(() => {
@@ -83,6 +89,11 @@ function TcUsersAutoComplete({
 
   const debouncedFetchDiscordUsers = debounce(fetchDiscordUsers, 700);
 
+  const handleClearAll = () => {
+    if (!platformId) return;
+    fetchDiscordUsers(platformId, fetchedUsers.page, fetchedUsers.limit);
+  };
+
   const handleSearchChange = (event: React.SyntheticEvent<Element, Event>) => {
     const target = event.target as HTMLInputElement;
     const inputValue = target.value;
@@ -92,16 +103,16 @@ function TcUsersAutoComplete({
     if (inputValue === '') {
       setFilteredUsersByName('');
       setFetchedUsers({
-        limit: 100,
+        limit: 8,
         page: 1,
         results: [],
         totalPages: 0,
         totalResults: 0,
       });
 
-      debouncedFetchDiscordUsers(platformId, 1, 100);
+      debouncedFetchDiscordUsers(platformId, 1, 8);
     } else {
-      debouncedFetchDiscordUsers(platformId, 1, 100, inputValue);
+      debouncedFetchDiscordUsers(platformId, 1, 8, inputValue);
     }
   };
 
@@ -149,10 +160,22 @@ function TcUsersAutoComplete({
       getOptionLabel={(option) => option.ngu}
       label={'Select User(s)'}
       multiple={true}
+      loading={isLoading}
+      loadingText={
+        <div className="text-center">
+          <CircularProgress size={24} />
+        </div>
+      }
       disabled={isDisabled}
       value={selectedUsers}
       onChange={handleChange}
-      onInputChange={handleSearchChange}
+      onInputChange={(event, value, reason) => {
+        if (reason === 'clear') {
+          handleClearAll();
+        } else {
+          handleSearchChange(event);
+        }
+      }}
       isOptionEqualToValue={(option, value) =>
         option.discordId === value.discordId
       }