fix issue on loading breakdown

TogetherCrew · Sep 8, 2023 · 71fa3ed · 71fa3ed
1 parent 9fba19b
commit 71fa3ed
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 29 deletions.
diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -41,6 +41,7 @@ export default function ActiveMemberBreakdown() {
 
   const [isExpanded, toggleExpanded] = useState<boolean>(false);
   const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState<boolean>(false);
   const [roles, setRoles] = useState<string[]>([]);
   const [activityComposition, setActivityComposition] = useState<string[]>(
     options.map((option) => option.value)
@@ -72,7 +73,7 @@ export default function ActiveMemberBreakdown() {
     if (!guild) {
       return;
     }
-
+    setLoading(true);
     const fetchData = async () => {
       const res = await getActiveMemberCompositionTable(
         guild.guildId,
@@ -82,6 +83,7 @@ export default function ActiveMemberBreakdown() {
         sortBy,
         page
       );
+      setLoading(false);
       setFetchedData(res);
     };
 
@@ -184,7 +186,7 @@ export default function ActiveMemberBreakdown() {
             }
             handleJoinedAtChange={handleJoinedAtChange}
             handleUsernameChange={handleUsernameChange}
-            isLoading={isActiveMembersBreakdownLoading}
+            isLoading={loading}
             activityCompositionOptions={options}
           />
         </div>

diff --git a/...s/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/...s/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
@@ -54,6 +54,7 @@ export default function DisengagedMembersCompositionBreakdown() {
 
   const [isExpanded, toggleExpanded] = useState<boolean>(false);
   const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState<boolean>(false);
   const [roles, setRoles] = useState<string[]>([]);
   const [disengagedComposition, setDisengagedComposition] = useState<string[]>(
     options.map((option) => option.value)
@@ -85,7 +86,7 @@ export default function DisengagedMembersCompositionBreakdown() {
     if (!guild) {
       return;
     }
-
+    setLoading(true);
     const fetchData = async () => {
       const res = await getDisengagedMembersCompositionTable(
         guild.guildId,
@@ -95,7 +96,7 @@ export default function DisengagedMembersCompositionBreakdown() {
         sortBy,
         page
       );
-
+      setLoading(false);
       setFetchedData(res);
     };
 
@@ -198,7 +199,7 @@ export default function DisengagedMembersCompositionBreakdown() {
             }
             handleJoinedAtChange={handleJoinedAtChange}
             handleUsernameChange={handleUsernameChange}
-            isLoading={isDisengagedMembersCompositionBreakdownLoading}
+            isLoading={loading}
             activityCompositionOptions={options}
           />
         </div>

diff --git a/...onents/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/...onents/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
@@ -42,6 +42,7 @@ export default function OnboardingMembersBreakdown() {
 
   const [isExpanded, toggleExpanded] = useState<boolean>(false);
   const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState<boolean>(false);
   const [roles, setRoles] = useState<string[]>([]);
   const [onboardingComposition, setOnboardingComposition] = useState<string[]>(
     options.map((option) => option.value)
@@ -73,7 +74,7 @@ export default function OnboardingMembersBreakdown() {
     if (!guild) {
       return;
     }
-
+    setLoading(true);
     const fetchData = async () => {
       const res = await getOnboardingMemberCompositionTable(
         guild.guildId,
@@ -83,7 +84,7 @@ export default function OnboardingMembersBreakdown() {
         sortBy,
         page
       );
-
+      setLoading(false);
       setFetchedData(res);
     };
 
@@ -186,7 +187,7 @@ export default function OnboardingMembersBreakdown() {
             }
             handleJoinedAtChange={handleJoinedAtChange}
             handleUsernameChange={handleUsernameChange}
-            isLoading={isOnboardingMembersBreakdownLoading}
+            isLoading={loading}
             activityCompositionOptions={options}
           />
         </div>

diff --git a/src/store/slices/breakdownsSlice.ts b/src/store/slices/breakdownsSlice.ts
@@ -18,8 +18,6 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
     limit?: number
   ) => {
     try {
-      set(() => ({ isActiveMembersBreakdownLoading: true }));
-
       const requestData = {
         activityComposition: activityComposition || [],
         roles: roles || [],
@@ -53,12 +51,8 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
 
       const { data } = await axiosInstance.get(url);
 
-      set(() => ({ isActiveMembersBreakdownLoading: false }));
       return data;
-    } catch (error) {
-      set(() => ({ isActiveMembersBreakdownLoading: false }));
-      // Handle the error
-    }
+    } catch (error) {}
   },
   getOnboardingMemberCompositionTable: async (
     guild_id: string,
@@ -70,8 +64,6 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
     limit?: number
   ) => {
     try {
-      set(() => ({ isOnboardingMembersBreakdownLoading: true }));
-
       const requestData = {
         activityComposition: activityComposition || [],
         roles: roles || [],
@@ -105,12 +97,8 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
 
       const { data } = await axiosInstance.get(url);
 
-      set(() => ({ isOnboardingMembersBreakdownLoading: false }));
       return data;
-    } catch (error) {
-      set(() => ({ isOnboardingMembersBreakdownLoading: false }));
-      // Handle the error
-    }
+    } catch (error) {}
   },
   getDisengagedMembersCompositionTable: async (
     guild_id: string,
@@ -122,8 +110,6 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
     limit?: number
   ) => {
     try {
-      set(() => ({ isDisengagedMembersCompositionBreakdownLoading: true }));
-
       const requestData = {
         activityComposition: activityComposition || [],
         roles: roles || [],
@@ -157,12 +143,8 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
 
       const { data } = await axiosInstance.get(url);
 
-      set(() => ({ isDisengagedMembersCompositionBreakdownLoading: false }));
       return data;
-    } catch (error) {
-      set(() => ({ isDisengagedMembersCompositionBreakdownLoading: false }));
-      // Handle the error
-    }
+    } catch (error) {}
   },
   getRoles: async (guild_id: string) => {
     try {