From 71fa3edc9034c3cd91e936a4f55cc4144b644bf8 Mon Sep 17 00:00:00 2001
From: zuies <zurabichkhikvadze66@gmail.com>
Date: Fri, 8 Sep 2023 15:21:02 +0300
Subject: [PATCH] fix issue on loading breakdown

---
 .../activeMembers/ActiveMemberBreakdown.tsx   |  6 +++--
 .../DisengagedMembersCompositionBreakdown.tsx |  7 +++---
 .../OnboardingMembersBreakdown.tsx            |  7 +++---
 src/store/slices/breakdownsSlice.ts           | 24 +++----------------
 4 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
index 510d11bb..fd3e9b9e 100644
--- 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/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
index 24cdd503..e2545e77 100644
--- a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
+++ b/src/components/pages/statistics/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/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
index e42ad76e..bb18c42e 100644
--- a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
+++ b/src/components/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
index 4c37ca5a..c9b416de 100644
--- 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 {