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 {