Feat/creator tokens invite system

packages/app/components/creator-token/hooks/use-invite-creator-token.ts

@@ -0,0 +1,43 @@
+import useSWR from "swr";
+
+import { fetcher } from "app/hooks/use-infinite-list-query";
+
+export type AvailableCreatorTokensInviteCodes = {
+  code: string;
+}[];
+
+export type RedeemedCreatorTokensInviteCodes = {
+  invitee: {
+    username: string;
+    id: number;
+  };
+  redeemed_at: string;
+}[];
+
+export const useAvailableCreatorTokensInvites = () => {
+  const queryState = useSWR<AvailableCreatorTokensInviteCodes>(
+    "/v1/creator-token/invitations/available?limit=3&page=1",
+    fetcher,
+    {
+      focusThrottleInterval: 5000,
+      dedupingInterval: 5000,
+      revalidateIfStale: false,
+    }
+  );
+
+  return queryState;
+};
+
+export const useRedeemedCreatorTokensInvites = () => {
+  const queryState = useSWR<RedeemedCreatorTokensInviteCodes>(
+    "/v1/creator-token/invitations/redeemed?limit=10&page=1",
+    fetcher,
+    {
+      focusThrottleInterval: 5000,
+      dedupingInterval: 5000,
+      revalidateIfStale: false,
+    }
+  );
+
+  return queryState;
+};

packages/app/components/creator-token/invite-creator-token.tsx

@@ -18,38 +18,13 @@
 import { toast } from "design-system/toast";
 
 import InviteCreatorTokenHeader from "./assets/invite";
-
-const data = [
-  {
-    id: 1,
-    code: "AFD43A",
-  },
-  {
-    id: 2,
-    code: "DAA43A",
-  },
-];
-
-const claimedData = [
-  {
-    id: 1,
-    date: "2021-09-01",
-    username: "am",
-  },
-  {
-    id: 2,
-    date: "2021-09-01",
-    username: "hirbod",
-  },
-  {
-    id: 3,
-    date: "2021-09-01",
-    username: "maxiricha",
-  },
-];
+import {
+  useAvailableCreatorTokensInvites,
+  useRedeemedCreatorTokensInvites,
+} from "./hooks/use-invite-creator-token";
 
 const InviteCreatorTokenItem = ({ code }: { code: string }) => {
   const isDark = useIsDarkMode();
   const copyCode = useCallback(async () => {
     await Clipboard.setStringAsync(code);
     toast.success("Copied to clipboard");
@@ -129,6 +104,11 @@
 
 export const InviteCreatorToken = () => {
   const { top, bottom } = useSafeAreaInsets();
+  const { data: invitesData = [] } = useAvailableCreatorTokensInvites();
+  const { data: redeemedData = [] } = useRedeemedCreatorTokensInvites();
+
+  const inviteText = invitesData.length === 1 ? "invite" : "invites";
+
   return (
     <ScrollView
       contentContainerStyle={{
@@ -146,25 +126,28 @@
           </Text>
           <View tw="h-4" />
           <Text tw="text-black dark:text-white">
-            You have{" "}
-            <Text tw="font-bold">
-              {data.length} {data.length > 1 ? "invites" : "invite"}
-            </Text>{" "}
-            left. Share or email invites below to earn your friends' creator
+            You have <Text tw="font-bold">{invitesData.length}</Text>{" "}
+            {inviteText} left. Share invites below to earn your friends' creator
             tokens.
           </Text>
           <View tw="mt-2">
-            {data.map((item) => (
-              <InviteCreatorTokenItem key={item.id} code={item.code} />
+            {invitesData.map((item) => (
+              <InviteCreatorTokenItem key={item.code} code={item.code} />
             ))}
           </View>
           <View tw="mt-8">
-            <Text tw="font-bold text-black dark:text-white">Claimed</Text>
-            {claimedData.map((item) => (
+            {redeemedData.length ? (
+              <Text tw="font-bold text-black dark:text-white">Claimed</Text>
+            ) : (
+              <Text tw="font-bold text-black dark:text-white">
+                No invites claimed yet.
+              </Text>
+            )}
+            {redeemedData.map((item) => (
               <InviteCreatorTokenClaimedItem
-                key={item.id}
-                date={item.date}
-                username={item.username}
+                key={item.invitee.id}
+                date={item.redeemed_at}
+                username={item.invitee.username}
               />
             ))}
           </View>

packages/app/components/profile/profile.tsx

@@ -258,7 +258,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
               withBackground
               user={profileData?.data?.profile}
             />
-            {/* {isSelf && (
+            {isSelf && (
               <Pressable
                 tw={[
                   "ml-2 w-8 items-center justify-center rounded-full bg-black/60",
@@ -271,7 +271,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
                 <ButtonGoldLinearGradient />
                 <GiftSolid width={26} height={26} color={colors.gray[900]} />
               </Pressable>
-            )} */}
+            )}
 
             <Button
               tw="ml-2"

packages/app/components/profile/profile.web.tsx

@@ -247,37 +247,33 @@ const Profile = ({ username }: ProfileScreenProps) => {
                   tw="overflow-hidden rounded-b-3xl"
                   uri={getFullSizeCover(profileData?.data?.profile)}
                 />
-                {/* <Pressable
-                    tw={[
-                      "absolute right-5 top-2 ml-2 h-8 w-8 items-center justify-center rounded-full bg-black/60",
-                    ]}
-                    onPress={() => {
-                      const as = "/creator-token/invite-creator-token";
-                      router.push(
-                        Platform.select({
-                          native: as,
-                          web: {
-                            pathname: router.pathname,
-                            query: {
-                              ...router.query,
-                              inviteCreatorTokenModal: true,
-                            },
-                          } as any,
-                        }),
-                        Platform.select({ native: as, web: router.asPath }),
-                        {
-                          shallow: true,
-                        }
-                      );
-                    }}
-                  >
-                    <ButtonGoldLinearGradient />
-                    <GiftSolid
-                      width={26}
-                      height={26}
-                      color={colors.gray[900]}
-                    />
-                  </Pressable> */}
+                <Pressable
+                  tw={[
+                    "absolute right-5 top-2 ml-2 h-8 w-8 items-center justify-center rounded-full bg-black/60",
+                  ]}
+                  onPress={() => {
+                    const as = "/creator-token/invite-creator-token";
+                    router.push(
+                      Platform.select({
+                        native: as,
+                        web: {
+                          pathname: router.pathname,
+                          query: {
+                            ...router.query,
+                            inviteCreatorTokenModal: true,
+                          },
+                        } as any,
+                      }),
+                      Platform.select({ native: as, web: router.asPath }),
+                      {
+                        shallow: true,
+                      }
+                    );
+                  }}
+                >
+                  <ButtonGoldLinearGradient />
+                  <GiftSolid width={26} height={26} color={colors.gray[900]} />
+                </Pressable>
               </>
             ) : null}
             <View tw="w-full flex-row">
@@ -353,7 +349,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
         {isSelf ? (
           <View tw={["fixed right-4 top-2 z-50 flex flex-row md:hidden"]}>
             <HeaderRightSm withBackground />
-            {/* <Pressable
+            <Pressable
               tw={[
                 "ml-2 h-8 w-8 items-center justify-center rounded-full bg-black/60",
               ]}
@@ -379,7 +375,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
             >
               <ButtonGoldLinearGradient />
               <GiftSolid width={26} height={26} color={colors.gray[900]} />
-            </Pressable> */}
+            </Pressable>
           </View>
         ) : (
           <View tw={["fixed left-4 top-2 z-50 flex md:hidden"]}>