Merge pull request #1191 from dacadeorg/fix/referral-number-user-profile

feat: update shown user referral count

Author: musayann

src/components/cards/profile/Request.tsx

@@ -1,9 +1,16 @@
-import { useSelector } from "@/hooks/useTypedSelector";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
 import Avatar from "@/components/ui/Avatar";
 import { ReactElement } from "react";
 import { useRouter } from "next/router";
 import Right from "@/icons/angle-right.svg";
 import Link from "next/link";
+import { Referral } from "@/types/community";
+import { IRootState } from "@/store";
+
+interface ReferralsMultiSelector {
+  referrals: Referral[];
+  count: number;
+}
 
 /**
  * Request component
@@ -13,7 +20,10 @@ import Link from "next/link";
  * @returns {}
  */
 export default function Request(): ReactElement {
-  const referrals = useSelector((state) => state.userReferrals.userReferralList);
+  const { referrals, count } = useMultiSelector<unknown, ReferralsMultiSelector>({
+    referrals: (state: IRootState) => state.userReferrals.userReferralList,
+    count: (state: IRootState) => state.userReferrals.count,
+  });
   const previewList = referrals.slice(0, 3);
   const router = useRouter();
 
@@ -31,14 +41,13 @@ export default function Request(): ReactElement {
             ))}
           </div>
           <div className="relative pl-3  font-normal cursor-pointer md:flex md:font-medium" onClick={onClick}>
-            <span className="md:inline-block">{referrals?.length} Friends have used your invite code</span>
+            <span className="md:inline-block">{count} Friends have used your invite code</span>
           </div>
         </div>
 
         <div className="md:pl-4 py-4 md:py-0">4 Pending invitations</div>
       </div>
       <Link href={`/profile/referrals`} className="text-primary flex items-center justify-between gap-4 cursor-pointer">
-        {" "}
         <span>See all</span>
         <Right />
       </Link>

src/store/feature/user/referrals.slice.ts

@@ -9,12 +9,14 @@ interface UserReferralsState {
   userReferralList: Referral[];
   current: Referral | null;
   hasMore: boolean;
+  count: number;
 }
 
 const initialState: UserReferralsState = {
   userReferralList: [],
   current: null,
   hasMore: true,
+  count: 0,
 };
 
 /**
@@ -38,9 +40,12 @@ const userReferralsSlice = createSlice({
     setHasMoreReferrals: (state, action) => {
       state.hasMore = action.payload;
     },
+    setCount: (state, action) => {
+      state.count = action.payload;
+    },
   },
 });
 
-export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals } = userReferralsSlice.actions;
+export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals, setCount } = userReferralsSlice.actions;
 
 export default userReferralsSlice;

src/store/services/referrals.service.ts

@@ -1,7 +1,7 @@
 import baseQuery from "@/config/baseQuery";
 import { createApi } from "@reduxjs/toolkit/dist/query";
 import { setReferralsList } from "../feature/referrals.slice";
-import { clear, setUserReferralsList, setHasMoreReferrals } from "../feature/user/referrals.slice";
+import { clear, setUserReferralsList, setHasMoreReferrals, setCount } from "../feature/user/referrals.slice";
 import { Referral } from "@/types/community";
 
 /**
@@ -43,9 +43,10 @@ const referralsService = createApi({
             dispatch(clear());
           }
 
-          list.push(...(data || []));
+          list.push(...(data?.list || []));
           dispatch(setUserReferralsList(list));
-          dispatch(setHasMoreReferrals(data?.length > 0 ? true : false));
+          dispatch(setCount(data?.count));
+          dispatch(setHasMoreReferrals(data?.list?.length > 0 ? true : false));
         } catch (error) {
           console.log("error in fetching the userFetchReferrals ", error);
         }