From 4a91b8e9dc6036ab2918e7c6b68d816f6b31300a Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Mon, 30 Oct 2023 12:56:21 +0100
Subject: [PATCH 1/4] feat(wip): connect invite apis

---
 .../hooks/use-invite-creator-token.ts         | 43 +++++++++++++
 .../creator-token/invite-creator-token.tsx    |  5 ++
 packages/app/components/profile/profile.tsx   |  4 +-
 .../app/components/profile/profile.web.tsx    | 62 +++++++++----------
 4 files changed, 79 insertions(+), 35 deletions(-)
 create mode 100644 packages/app/components/creator-token/hooks/use-invite-creator-token.ts

diff --git a/packages/app/components/creator-token/hooks/use-invite-creator-token.ts b/packages/app/components/creator-token/hooks/use-invite-creator-token.ts
new file mode 100644
index 000000000..1573a135e
--- /dev/null
+++ b/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<AvailableCreatorTokensInviteCodes>(
+    "/v1/creator-token/invitations/redeemed?limit=10&page=1",
+    fetcher,
+    {
+      focusThrottleInterval: 5000,
+      dedupingInterval: 5000,
+      revalidateIfStale: false,
+    }
+  );
+
+  return queryState;
+};
diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
index fac350724..e296fce4e 100644
--- a/packages/app/components/creator-token/invite-creator-token.tsx
+++ b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -18,6 +18,7 @@ import { View } from "@showtime-xyz/universal.view";
 import { toast } from "design-system/toast";
 
 import InviteCreatorTokenHeader from "./assets/invite";
+import { useAvailableCreatorTokensInvites } from "./hooks/use-invite-creator-token";
 
 const data = [
   {
@@ -129,6 +130,10 @@ const InviteCreatorTokenClaimedItem = ({
 
 export const InviteCreatorToken = () => {
   const { top, bottom } = useSafeAreaInsets();
+  const { data } = useAvailableCreatorTokensInvites();
+
+  if (!data) return null;
+
   return (
     <ScrollView
       contentContainerStyle={{
diff --git a/packages/app/components/profile/profile.tsx b/packages/app/components/profile/profile.tsx
index b7756a6c0..35ab6e904 100644
--- a/packages/app/components/profile/profile.tsx
+++ b/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"
diff --git a/packages/app/components/profile/profile.web.tsx b/packages/app/components/profile/profile.web.tsx
index 3385ebd29..7b4b80437 100644
--- a/packages/app/components/profile/profile.web.tsx
+++ b/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"]}>

From b864f7f4f31f1da7ce55e1866f192203171ed785 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Mon, 30 Oct 2023 13:10:36 +0100
Subject: [PATCH 2/4] fix: optimize screen

---
 .../hooks/use-invite-creator-token.ts         |  2 +-
 .../creator-token/invite-creator-token.tsx    | 39 ++++++++++++-------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/app/components/creator-token/hooks/use-invite-creator-token.ts b/packages/app/components/creator-token/hooks/use-invite-creator-token.ts
index 1573a135e..8560a5e40 100644
--- a/packages/app/components/creator-token/hooks/use-invite-creator-token.ts
+++ b/packages/app/components/creator-token/hooks/use-invite-creator-token.ts
@@ -29,7 +29,7 @@ export const useAvailableCreatorTokensInvites = () => {
 };
 
 export const useRedeemedCreatorTokensInvites = () => {
-  const queryState = useSWR<AvailableCreatorTokensInviteCodes>(
+  const queryState = useSWR<RedeemedCreatorTokensInviteCodes>(
     "/v1/creator-token/invitations/redeemed?limit=10&page=1",
     fetcher,
     {
diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
index e296fce4e..649978a82 100644
--- a/packages/app/components/creator-token/invite-creator-token.tsx
+++ b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -18,7 +18,10 @@ import { View } from "@showtime-xyz/universal.view";
 import { toast } from "design-system/toast";
 
 import InviteCreatorTokenHeader from "./assets/invite";
-import { useAvailableCreatorTokensInvites } from "./hooks/use-invite-creator-token";
+import {
+  useAvailableCreatorTokensInvites,
+  useRedeemedCreatorTokensInvites,
+} from "./hooks/use-invite-creator-token";
 
 const data = [
   {
@@ -130,7 +133,10 @@ const InviteCreatorTokenClaimedItem = ({
 
 export const InviteCreatorToken = () => {
   const { top, bottom } = useSafeAreaInsets();
-  const { data } = useAvailableCreatorTokensInvites();
+  const { data: invitesData = [] } = useAvailableCreatorTokensInvites();
+  const { data: redeemedData = [] } = useRedeemedCreatorTokensInvites();
+
+  const inviteText = invitesData.length === 1 ? "invite" : "invites";
 
   if (!data) return null;
 
@@ -151,25 +157,28 @@ export const InviteCreatorToken = () => {
           </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
-            tokens.
+            You have <Text tw="font-bold">{invitesData.length}</Text>{" "}
+            {inviteText} left. Share or email 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>

From d6b94d1843f98fb77d88280eab7be87d328f4c9e Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Mon, 30 Oct 2023 13:11:11 +0100
Subject: [PATCH 3/4] fix: remove wrong null check

---
 .../creator-token/invite-creator-token.tsx    | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
index 649978a82..2030509ef 100644
--- a/packages/app/components/creator-token/invite-creator-token.tsx
+++ b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -23,35 +23,6 @@ import {
   useRedeemedCreatorTokensInvites,
 } from "./hooks/use-invite-creator-token";
 
-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",
-  },
-];
-
 const InviteCreatorTokenItem = ({ code }: { code: string }) => {
   const isDark = useIsDarkMode();
   const copyCode = useCallback(async () => {
@@ -138,8 +109,6 @@ export const InviteCreatorToken = () => {
 
   const inviteText = invitesData.length === 1 ? "invite" : "invites";
 
-  if (!data) return null;
-
   return (
     <ScrollView
       contentContainerStyle={{

From d150dece8112cc34986289ae91c6fb1614bfcc98 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Mon, 30 Oct 2023 14:11:55 +0100
Subject: [PATCH 4/4] fix: copy of share screen

---
 .../app/components/creator-token/invite-creator-token.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
index 2030509ef..5f185529c 100644
--- a/packages/app/components/creator-token/invite-creator-token.tsx
+++ b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -127,8 +127,8 @@ export const InviteCreatorToken = () => {
           <View tw="h-4" />
           <Text tw="text-black dark:text-white">
             You have <Text tw="font-bold">{invitesData.length}</Text>{" "}
-            {inviteText} left. Share or email invites below to earn your
-            friends' creator tokens.
+            {inviteText} left. Share invites below to earn your friends' creator
+            tokens.
           </Text>
           <View tw="mt-2">
             {invitesData.map((item) => (