Merge pull request #1187 from dacadeorg/ft/extend-user-referral-view

feat: extend the referral view on the user profile

Author: musayann

public/locales/bg/common.json

@@ -323,8 +323,13 @@
   "referrals.empty-state.title": "No referrals yet",
   "referrals.empty-state.subtitle": "Once someone uses your referral code to signup, they will showup here",
   "referrals.joined": "Joined",
-  "referrals.challenge-participation": "Participated in a challenge in",
-  "referrals.submission.evaluation": "Submission evaluated",
+  "referrals.challenge-participation": "Participated in a challenge",
+  "referrals.challenge.evaluation.status.passed": "Успешно преминал",
+  "referrals.challenge.evaluation.status.failed": "Не премина",
+  "referrals.challenge.evaluation..status.pending": "Участвал в",
+  "referrals.challenge.evaluation.pending": "Изчаква оценка ...",
+  "referrals.submission.evaluation": "Прегледан принос",
+  "referrals.submission.challenge": "предизвикателство",
   "referrals.submission.points": "points",
   "referrals.reward.text": "You earned the referral reward",
   "submissions.empty-state.title": "No submissions yet.",

public/locales/en/common.json

@@ -353,7 +353,12 @@
   "referrals.empty-state.subtitle": "Once someone uses your referral code to signup, they will showup here",
   "referrals.joined": "Joined",
   "referrals.challenge-participation": "Participated in a challenge in",
+  "referrals.challenge.evaluation.status.passed": "Successfully passed",
+  "referrals.challenge.evaluation.status.failed": "Did not pass",
+  "referrals.challenge.evaluation.status.pending": "Participated in",
+  "referrals.challenge.evaluation.pending": "Pending evaluation ...",
   "referrals.submission.evaluation": "Submission evaluated",
+  "referrals.submission.challenge": "challenge",
   "referrals.submission.points": "points",
   "referrals.reward.text": "You earned the referral reward",
   "submissions.empty-state.title": "No submissions yet.",

public/locales/es/common.json

@@ -324,7 +324,12 @@
   "referrals.empty-state.title": "No hay recomendaciones",
   "referrals.joined": "Registro completo",
   "referrals.challenge-participation": "Participó en un reto en",
+  "referrals.challenge.evaluation.status.passed": "Successfully passed",
+  "referrals.challenge.evaluation.status.failed": "No pasó",
+  "referrals.challenge.evaluation.status.pending": "Participó en",
+  "referrals.challenge.evaluation.pending": "Pendiente de evaluación ...",
   "referrals.submission.evaluation": "Propuestas evaluadas",
+  "referrals.submission.challenge": "desafío",
   "referrals.submission.points": "puntos",
   "referrals.reward.text": "Ha ganado una recompensa por recomendación",
   "submissions.empty-state.title": "No hay propuestas todavía.",

public/locales/hr/common.json

@@ -324,7 +324,12 @@
   "referrals.empty-state.subtitle": "Once someone uses your referral code to signup, they will showup here",
   "referrals.joined": "Joined",
   "referrals.challenge-participation": "Participated in a challenge in",
-  "referrals.submission.evaluation": "Submission evaluated",
+  "referrals.challenge.evaluation.status.passed": "Successfully passed",
+  "referrals.challenge.evaluation.status.failed": "Nije prošao",
+  "referrals.challenge.evaluation.status.pending": "Sudjelovao u",
+  "referrals.challenge.evaluation.pending": "Na čekanju evaluacije ...",
+  "referrals.submission.evaluation": "Ocijenjen prilog",
+  "referrals.submission.challenge": "izazov",
   "referrals.submission.points": "points",
   "referrals.reward.text": "You earned the referral reward",
   "submissions.empty-state.title": "No submissions yet.",

src/components/cards/Referral.tsx

@@ -1,6 +1,5 @@
 import Avatar from "@/components/ui/Avatar";
-import { Reward as IReward } from "@/types/course";
-import { Community } from "@/types/community";
+import { Referral as TReferral } from "@/types/community";
 import RewardBadge from "../badges/RewardBadge";
 import { useTranslation } from "next-i18next";
 import { ReactElement } from "react";
@@ -16,11 +15,7 @@ import { useDispatch } from "@/hooks/useTypedDispatch";
  */
 
 interface ReferralProps {
-  referral: {
-    title?: string;
-    community: Community;
-    reward: IReward;
-  };
+  referral: TReferral;
 }
 
 /**

src/components/cards/profile/Referral.tsx

@@ -1,10 +1,13 @@
 import { ReactElement, useMemo } from "react";
 import Avatar from "@/components/ui/Avatar";
-import RewardBadge from "@/components/badges/RewardBadge";
 import DateManager from "@/utilities/DateManager";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import { Referral as ReferralType } from "@/types/community";
+import Link from "next/link";
+import TimeIcon from "@/icons/time.svg";
+import RewardBadge from "@/components/badges/RewardBadge";
+import { Evaluation, Submission } from "@/types/bounty";
 
 interface ReferralProps {
   referral: ReferralType;
@@ -25,54 +28,58 @@ export default function Referral({ referral }: ReferralProps): ReactElement {
   const { t } = useTranslation();
   const { locale } = useRouter();
   const joinedAt = useMemo(() => DateManager.fromNow(referral.created_at, locale), [locale, referral.created_at]);
-  const participatedAt = useMemo(() => (referral.submission ? DateManager.fromNow(referral.submission.created_at, locale) : null), [locale, referral.submission]);
   const rewardAt = useMemo(() => (referral.rewarded ? DateManager.fromNow(referral.updated_at, locale) : null), [locale, referral.rewarded, referral.updated_at]);
+  const challengeLink = (submission: Submission) => `/communities/${submission.community.slug}/challenges/${submission.challenge.id}/submissions/${submission.id}`
+  const status = (evaluation: Evaluation) => {
+    if (!evaluation) return t("referrals.challenge.evaluation.status.pending")
+    return t(evaluation?.reward ? "referrals.challenge.evaluation.status.passed" : "referrals.challenge.evaluation.status.failed")
+  }
 
+  const formatDate = (date: Date) => {
+    return date ? DateManager.fromNow(date, locale) : null
+  }
   return (
-    <div className="text-sm text-gray-700 bg-gray-50 md:mb-0">
-      <div className="flex p-7">
-        <div className="">
+    <div className="text-sm text-gray-700 bg-gray-50 md:mb-0 p-7">
+      <div className="w-full">
+        <div className="flex gap-4 ">
           <Avatar size="large" user={referral.user} hideVerificationBadge />
-        </div>
-        <div className="ml-5">
-          <span className="pb-1 text-lg font-medium leading-loose text-gray-900">{referral.user?.displayName}</span>
-          <p>
-            {t("referrals.joined")} {joinedAt}
+          <p className="grid">
+            <span className="pb-1 text-lg font-medium leading-loose text-gray-900">{referral.user?.displayName}</span>
+            <span className="text-gray-500">{t("referrals.joined")} {joinedAt}</span>
           </p>
+        </div>
+        <div className="flex-grow md:ml-19">
           <div className="pt-1">
-            <ul className="pb-1 text-sm font-light leading-loose text-gray-700 list">
-              {referral.challenge && referral.community && (
-                <li>
-                  <span className="ml-5">{t("referrals.challenge-participation")}</span>
-                  <span className="font-bold">{referral.community.name}</span>
-                  <span className="hidden md:inline-block">{participatedAt}</span>
-                </li>
-              )}
-
-              {referral.submission && referral.submission.metadata && referral.submission.metadata.evaluation && (
-                <li>
-                  <span className="ml-5">{t("referrals.submission.evaluation")}</span>
-                  <span className="font-bold">
-                    {referral.submission.metadata.evaluation.points}/{referral.submission.metadata.evaluation.totalPoints}
+            <ul className="pb-1 font-light leading-loose text-gray-700 grid divide-y-2 space-y-4 divide-gray-200">
+              {referral?.submissions?.length ? referral.submissions.map((submission) => (
+                <li key={submission.id} className="grid md:flex justify-between pt-4 gap-2 md:gap-0">
+                  <span className="grid gap-2">
+                    <span>
+                      {status(submission.metadata.evaluation)} <Link href={challengeLink(submission)} className="font-bold underline text-base- underline-offset-2">{submission.challenge.name} {t("referrals.submission.challenge")}</Link>
+                    </span>
+                    {!submission?.metadata?.evaluation && <span className="mr-0 flex items-center gap-2.5 leading-none "> <TimeIcon />{t("referrals.challenge.evaluation.pending")}</span>}
                   </span>
-                  {t("referrals.submission.points")}
-                  <span className="hidden md:inline-block">{rewardAt}</span>
+                  <span className="text-gray-500">{formatDate(submission.updated_at)}</span>
                 </li>
-              )}
+              )
+              ) : <></>}
 
-              {referral.rewarded && referral.metadata && referral.metadata.reward && (
-                <li>
-                  <span className="ml-5">{t("referrals.reward.text")}</span>
-                  <span className="font-bold">
-                    <RewardBadge type="gray" reward={referral.metadata.reward} />
+              {referral?.rewarded && referral.metadata && referral.metadata.reward && (
+                <li className="pt-4 grid gap-2 md:gap-0 md:flex md:justify-between">
+                  <span className="grid md:gap-2 md:flex items-center">
+                    <span>{t("referrals.reward.text")}</span>
+                    <span className="font-bold flex justify-start">
+                      <RewardBadge type="gray" reward={referral.metadata.reward} />
+                    </span>
                   </span>
-                  <span className="hidden md:inline-block">{rewardAt}</span>
+
+                  <span className="text-gray-500">{rewardAt}</span>
                 </li>
               )}
             </ul>
           </div>
-        </div>
-      </div>
-    </div>
+        </div >
+      </div >
+    </div >
   );
 }

src/components/sections/profile/Navigation.tsx

@@ -98,7 +98,7 @@ export default function ProfileNagivation(): ReactElement {
   const isCurrentMenuItem = (item: MenuItem) => item.link === router.asPath || (router.asPath === "/profile" && item.label.toLocaleLowerCase() === "overview");
 
   return (
-    <ul className="relative hidden lg:block xl:block">
+    <ul className="relative block ml-5 md:ml-0">
       {menus.map((menu, i) => (
         <li key={`profile-menu-${i}`} className="mb-2 relative">
           <ProfileOverviewSection title={menu.title}>

src/pages/profile/referrals.tsx

@@ -8,13 +8,16 @@ import ProfileLayout from "@/layouts/ProfileLayout";
 import { userFetchReferrals } from "@/store/services/referrals.service";
 
 import Referral from "@/components/cards/profile/Referral";
-import EmptyState from "@/components/ui/EmptyState";
 import InfiniteScroll from "react-infinite-scroll-component";
 import AuthObserver from "@/contexts/AuthObserver";
 import { User } from "@/types/bounty";
 import { Referral as ReferralType } from "@/types/community";
 import { IRootState } from "@/store";
 import Loader from "@/components/ui/button/Loader";
+import ProfileOverviewSection from "@/components/sections/profile/overview/Section";
+import ReferralsList from "@/components/list/ReferralsList";
+import Spinner from "@/components/ui/Loader";
+
 
 /**
  * interface for UserReferrals multiSelector
@@ -27,6 +30,7 @@ interface UserReferralsMultiSelector {
   user: User | null;
   referrals: ReferralType[];
   hasMore: boolean;
+  loading: boolean
 }
 
 /**
@@ -38,11 +42,12 @@ interface UserReferralsMultiSelector {
 export default function UserReferrals(): ReactElement {
   const { t } = useTranslation();
   const [page, setPage] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const { user, referrals, hasMore } = useMultiSelector<unknown, UserReferralsMultiSelector>({
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const { user, referrals, hasMore, loading } = useMultiSelector<unknown, UserReferralsMultiSelector>({
     user: (state: IRootState) => state.user.data,
     referrals: (state: IRootState) => state.userReferrals.userReferralList,
     hasMore: (state: IRootState) => state.userReferrals.hasMore,
+    loading: (state: IRootState) => state.userReferrals.loading
   });
   const dispatch = useDispatch();
   const showLoadMore = useMemo(() => hasMore && referrals?.length >= 10, [referrals?.length, hasMore]);
@@ -54,35 +59,41 @@ export default function UserReferrals(): ReactElement {
   }, [dispatch, user?.referrals]);
 
   const nextPage = async () => {
-    if (loading || !hasMore) return;
-    setLoading(true);
+    if (isLoadingMore || !hasMore) return;
+    setIsLoadingMore(true);
     const referralId = referrals[referrals.length - 1]?.id || null;
     await dispatch(userFetchReferrals({ startAfter: referralId || null }));
     setPage(page + 1);
-    setLoading(false);
+    setIsLoadingMore(false);
   };
+  if (loading && !referrals.length) return <Spinner className="py-32" />;
 
   return (
-    <div className="w-full">
-      {referrals.length ? (
+    <div className="grid gap-7.5">
+      <ReferralsList text="Invite your friends to Dacade" />
+      <ProfileOverviewSection title="people that have used your invite code">
         <div className="relative w-full">
-          <InfiniteScroll
-            className="flex flex-col w-full overflow-hidden border border-gray-200 border-solid divide-y divide-gray-200 rounded-3xl divide-solid"
-            dataLength={referrals.length}
-            next={nextPage}
-            hasMore={showLoadMore}
-            // loader is required for InfiniteScroll to work
-            loader={<></>}
-          >
-            {referrals.map((referral, i) => (
-              <Referral key={`user-referral-${i}`} referral={referral} />
-            ))}
-          </InfiniteScroll>
-          {loading && <Loader loading={loading} className="sm:absolute sm:left-6 sm:-bottom-7.5" onClick={() => nextPage()} />}
+          {referrals.length ? (
+            <div className="w-full">
+              <InfiniteScroll
+                className="flex flex-col w-full overflow-hidden border border-gray-200 border-solid divide-y divide-gray-200 rounded-3xl divide-solid"
+                dataLength={referrals.length}
+                next={nextPage}
+                hasMore={showLoadMore}
+                // loader is required for InfiniteScroll to work
+                loader={<></>}
+              >
+                {referrals.map((referral, i) => (
+                  <Referral key={`user-referral-${i}`} referral={referral} />
+                ))}
+              </InfiniteScroll>
+              {isLoadingMore && <Loader loading={isLoadingMore} className="absolute left-6 -bottom-7.5" onClick={() => nextPage()} />}
+            </div>
+          ) : (
+            <div className="w-full border bg-gray-50 border-gray-200 border-solid rounded-3xl text-gray-500 p-6.5 font-semibold">{t('referrals.empty-state.subtitle')}</div>
+          )}
         </div>
-      ) : (
-        <EmptyState title={t("referrals.empty-state.title")} subtitle={t("referrals.empty-state.subtitle")} />
-      )}
+      </ProfileOverviewSection>
     </div>
   );
 }

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

@@ -10,13 +10,15 @@ interface UserReferralsState {
   current: Referral | null;
   hasMore: boolean;
   count: number;
+  loading: boolean;
 }
 
 const initialState: UserReferralsState = {
   userReferralList: [],
   current: null,
   hasMore: true,
   count: 0,
+  loading: false,
 };
 
 /**
@@ -40,12 +42,16 @@ const userReferralsSlice = createSlice({
     setHasMoreReferrals: (state, action) => {
       state.hasMore = action.payload;
     },
+
     setCount: (state, action) => {
       state.count = action.payload;
     },
+    setLoading: (state, action) => {
+      state.loading = action.payload;
+    },
   },
 });
 
-export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals, setCount } = userReferralsSlice.actions;
+export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals, setCount, setLoading } = 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, setCount } from "../feature/user/referrals.slice";
+import { clear, setUserReferralsList, setHasMoreReferrals, setCount, setLoading } from "../feature/user/referrals.slice";
 import { Referral } from "@/types/community";
 
 /**
@@ -35,6 +35,7 @@ const referralsService = createApi({
       onQueryStarted: async ({ startAfter }, { dispatch, queryFulfilled, getState }) => {
         const state = getState() as any;
         try {
+          dispatch(setLoading(true))
           const { data } = await queryFulfilled;
           const list: Referral[] = [];
           if (startAfter) {
@@ -47,6 +48,8 @@ const referralsService = createApi({
           dispatch(setUserReferralsList(list));
           dispatch(setCount(data?.count));
           dispatch(setHasMoreReferrals(data?.list?.length > 0 ? true : false));
+          dispatch(setLoading(false))
+
         } catch (error) {
           console.log("error in fetching the userFetchReferrals ", error);
         }