From 7883d45caacad800bd9e3d5f05f1164f7f2b8d8c Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 27 Sep 2023 20:36:40 +0200
Subject: [PATCH] fix: plenty of issues with channels

---
 .../components/audio-player/audio-player.tsx  | 43 +++++++------
 .../creator-channels/channels.web.tsx         |  4 +-
 .../components/creator-badge.tsx              | 12 ++--
 .../creator-channels/components/lean-text.tsx |  2 +-
 .../components/lean-text.web.tsx              | 10 +---
 .../components/message-input-toolbar.tsx      |  8 +--
 .../components/message-input.tsx              | 25 ++++----
 .../components/message-item.tsx               | 60 +++++++++----------
 .../components/messages-header.tsx            | 22 +++----
 .../app/components/creator-channels/list.tsx  |  3 +-
 packages/app/utilities.ts                     | 35 +++++++----
 11 files changed, 115 insertions(+), 109 deletions(-)

diff --git a/packages/app/components/audio-player/audio-player.tsx b/packages/app/components/audio-player/audio-player.tsx
index 543851dd8b..b0ab1db023 100644
--- a/packages/app/components/audio-player/audio-player.tsx
+++ b/packages/app/components/audio-player/audio-player.tsx
@@ -7,11 +7,10 @@ import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { PauseOutline, Play } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
 import Spinner from "@showtime-xyz/universal.spinner";
-import { Text } from "@showtime-xyz/universal.text";
-import { View } from "@showtime-xyz/universal.view";
 
 import TrackPlayer, { State } from "design-system/track-player";
 
+import { LeanText, LeanView } from "../creator-channels/components/lean-text";
 import { useTrackProgress } from "./hooks/use-track-progress";
 import { setupPlayer } from "./service";
 import {
@@ -122,10 +121,10 @@ export const AudioPlayer = memo(
     }, [id, prepare, url]);
 
     return (
-      <View tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
-        <View tw="flex-row items-center">
-          <View tw="mr-4 items-center justify-center">
-            <View tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">
+      <LeanView tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
+        <LeanView tw="flex-row items-center">
+          <LeanView tw="mr-4 items-center justify-center">
+            <LeanView tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">
               <Pressable
                 onPress={togglePlay}
                 tw="w-full flex-1 items-center justify-center text-black dark:text-white"
@@ -144,28 +143,28 @@ export const AudioPlayer = memo(
                     width={30}
                   />
                 ) : (
-                  <View tw="ml-0.5">
+                  <LeanView tw="ml-0.5">
                     <Play
                       color={isDark ? "white" : "black"}
                       stroke={isDark ? "white" : "black"}
                       strokeWidth={3}
                       width={40}
                     />
-                  </View>
+                  </LeanView>
                 )}
               </Pressable>
-            </View>
-          </View>
-          <View tw="mr-2 w-8 items-center justify-center text-center">
-            <Text tw="text-[#959595] dark:text-[#707070]">
+            </LeanView>
+          </LeanView>
+          <LeanView tw="mr-2 w-8 items-center justify-center text-center">
+            <LeanText tw="text-[#959595] dark:text-[#707070]">
               {formatTime(
                 tempScrubPosition !== null
                   ? tempScrubPosition
                   : localScrubPosition || trackInfo.position || 0
               )}
-            </Text>
-          </View>
-          <View tw="flex-1">
+            </LeanText>
+          </LeanView>
+          <LeanView tw="flex-1">
             <Slider
               minimumValue={0}
               maximumValue={trackInfo.duration || duration || 60} // 60 is fallback
@@ -228,16 +227,16 @@ export const AudioPlayer = memo(
                 );
               }}
             />
-          </View>
-          <View tw="ml-2 w-8 items-center justify-center text-center">
-            <Text tw="text-[#959595] dark:text-[#707070]">
+          </LeanView>
+          <LeanView tw="ml-2 w-8 items-center justify-center text-center">
+            <LeanText tw="text-[#959595] dark:text-[#707070]">
               {duration || trackInfo.duration
                 ? formatTime(duration || trackInfo.duration || 0)
                 : "-:--"}
-            </Text>
-          </View>
-        </View>
-      </View>
+            </LeanText>
+          </LeanView>
+        </LeanView>
+      </LeanView>
     );
   }
 );
diff --git a/packages/app/components/creator-channels/channels.web.tsx b/packages/app/components/creator-channels/channels.web.tsx
index 0ab0f47010..ee657c5561 100644
--- a/packages/app/components/creator-channels/channels.web.tsx
+++ b/packages/app/components/creator-channels/channels.web.tsx
@@ -229,12 +229,14 @@ const CreatorChannelsListItem = memo(
 
 CreatorChannelsListItem.displayName = "CreatorChannelsListItem";
 
+const timeFormatter = new Intl.NumberFormat();
+
 const CreatorChannelsListCreator = memo(
   ({ item }: { item: CreatorChannelsListItemProps }) => {
     const joinChannel = useJoinChannel();
     const router = useRouter();
 
-    const memberCount = new Intl.NumberFormat().format(item.member_count);
+    const memberCount = timeFormatter.format(item.member_count);
     return (
       <View tw="flex-1 px-4 py-3">
         <View tw="flex-row items-start">
diff --git a/packages/app/components/creator-channels/components/creator-badge.tsx b/packages/app/components/creator-channels/components/creator-badge.tsx
index 53d28f914b..963f6fa43d 100644
--- a/packages/app/components/creator-channels/components/creator-badge.tsx
+++ b/packages/app/components/creator-channels/components/creator-badge.tsx
@@ -1,18 +1,16 @@
-import { View } from "@showtime-xyz/universal.view";
-
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 export const CreatorBadge = () => {
   return (
-    <View tw="rounded-md bg-[#CE8903] px-2 py-1.5">
-      <View tw="flex-row items-center justify-center">
+    <LeanView tw="rounded-md bg-[#CE8903] px-2 py-1.5">
+      <LeanView tw="flex-row items-center justify-center">
         <LeanText
           tw="text-xs font-medium text-white"
           style={{ lineHeight: 14 }}
         >
           Creator
         </LeanText>
-      </View>
-    </View>
+      </LeanView>
+    </LeanView>
   );
 };
diff --git a/packages/app/components/creator-channels/components/lean-text.tsx b/packages/app/components/creator-channels/components/lean-text.tsx
index d795ee46eb..6f314a94d8 100644
--- a/packages/app/components/creator-channels/components/lean-text.tsx
+++ b/packages/app/components/creator-channels/components/lean-text.tsx
@@ -17,7 +17,7 @@ const ComponentView = forwardRef((props, ref) => {
 
 ComponentView.displayName = "RCTView";
 
-export const LeanView = styled(Component);
+export const LeanView = styled(ComponentView);
 
 /*
 export const LeanText = ({ tw, ...rest }) => {
diff --git a/packages/app/components/creator-channels/components/lean-text.web.tsx b/packages/app/components/creator-channels/components/lean-text.web.tsx
index fe6669190f..3ade18c975 100644
--- a/packages/app/components/creator-channels/components/lean-text.web.tsx
+++ b/packages/app/components/creator-channels/components/lean-text.web.tsx
@@ -1,11 +1,5 @@
 import { Text } from "@showtime-xyz/universal.text";
+import { View } from "@showtime-xyz/universal.view";
 
 export const LeanText = Text;
-
-/*
-export const LeanText = ({ tw, ...rest }) => {
-  const style = useMemo(() => (Array.isArray(tw) ? tw.join(" ") : tw), [tw]);
-
-  return <BasicText tw={style} {...rest} />;
-};
-*/
+export const LeanView = View;
diff --git a/packages/app/components/creator-channels/components/message-input-toolbar.tsx b/packages/app/components/creator-channels/components/message-input-toolbar.tsx
index 58a588a8dd..3e71b9e7b1 100644
--- a/packages/app/components/creator-channels/components/message-input-toolbar.tsx
+++ b/packages/app/components/creator-channels/components/message-input-toolbar.tsx
@@ -6,15 +6,13 @@ import * as ImagePicker from "expo-image-picker";
 
 import { Gallery, MusicBadge, Photo } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
-import { Text } from "@showtime-xyz/universal.text";
-import { View } from "@showtime-xyz/universal.view";
 
 import { Logger } from "app/lib/logger";
 
 import { toast } from "design-system/toast";
 
 import { useSendChannelMessage } from "../hooks/use-send-channel-message";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 export const MessageInputToolbar = memo(
   ({
@@ -143,7 +141,7 @@ export const MessageInputToolbar = memo(
     }, [uploadFile]);
 
     return (
-      <View tw="web:justify-start web:gap-4 flex-row items-center justify-around px-8 pt-2">
+      <LeanView tw="web:justify-start web:gap-4 flex-row items-center justify-around px-8 pt-2">
         <Pressable
           tw="web:py-1 flex-row items-center justify-center rounded-full bg-gray-100 px-4 py-2"
           onPress={pickAudio}
@@ -165,7 +163,7 @@ export const MessageInputToolbar = memo(
           <Photo height={20} width={20} color={"black"} />
           <LeanText tw="pl-1">Camera</LeanText>
         </Pressable>
-      </View>
+      </LeanView>
     );
   }
 );
diff --git a/packages/app/components/creator-channels/components/message-input.tsx b/packages/app/components/creator-channels/components/message-input.tsx
index 3c316af8cd..1ac0c60489 100644
--- a/packages/app/components/creator-channels/components/message-input.tsx
+++ b/packages/app/components/creator-channels/components/message-input.tsx
@@ -36,7 +36,7 @@ import { useEditChannelMessage } from "../hooks/use-edit-channel-message";
 import { useSendChannelMessage } from "../hooks/use-send-channel-message";
 import { MissingStarDropModal } from "../missing-star-drop-modal";
 import { ChannelById } from "../types";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 import { MessageInputToolbar } from "./message-input-toolbar";
 
 export const ScrollToBottomButton = ({ onPress }: { onPress: any }) => {
@@ -207,20 +207,20 @@ export const MessageInput = memo(
 
     if (!isUserAdmin && edition && !hasUnlockedMessages) {
       return (
-        <View
+        <LeanView
           tw="justify-center px-3"
           style={{
             paddingBottom: bottom,
           }}
         >
           <ClaimPaidNFTButton edition={edition} type="messageInput" />
-          <View tw="mt-3 pb-4">
+          <LeanView tw="mt-3 pb-4">
             <LeanText tw="text-center text-xs text-gray-500 dark:text-gray-300">
               Collecting a Star Drop unlocks privileges with this artist like
               exclusive channel content, a Star Badge, and more
             </LeanText>
-          </View>
-        </View>
+          </LeanView>
+        </LeanView>
       );
     }
 
@@ -229,10 +229,13 @@ export const MessageInput = memo(
         <Animated.View style={style}>
           {permissions?.can_send_messages ? (
             <>
-              <MessageInputToolbar
-                channelId={channelId}
-                isUserAdmin={isUserAdmin}
-              />
+              {permissions?.can_upload_media ? (
+                <MessageInputToolbar
+                  channelId={channelId}
+                  isUserAdmin={isUserAdmin}
+                />
+              ) : null}
+
               <MessageBox
                 ref={inputRef}
                 placeholder="Send an update..."
@@ -253,7 +256,7 @@ export const MessageInput = memo(
                 submitButton={
                   editMessage ? (
                     <Animated.View entering={FadeIn} exiting={FadeOut}>
-                      <View tw="flex-row" style={{ gap: 8 }}>
+                      <LeanView tw="flex-row" style={{ gap: 8 }}>
                         <Button
                           variant="secondary"
                           style={{ backgroundColor: colors.red[500] }}
@@ -272,7 +275,7 @@ export const MessageInput = memo(
                         >
                           <Check width={20} height={20} />
                         </Button>
-                      </View>
+                      </LeanView>
                     </Animated.View>
                   ) : null
                 }
diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index c12c59e367..d5bd6d5f84 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -55,7 +55,7 @@ import { useReactOnMessage } from "../hooks/use-react-on-message";
 import { ChannelMessageItem, MessageItemProps } from "../types";
 import { generateLoremIpsum } from "../utils";
 import { CreatorBadge } from "./creator-badge";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 const width = Dimensions.get("window").width;
 const height = Dimensions.get("window").height;
@@ -217,20 +217,20 @@ export const MessageItem = memo(
 
     return (
       <AnimatedView tw="my-2 px-3" style={style} ref={animatedViewRef}>
-        <View tw="flex-row" style={{ columnGap: 8 }}>
+        <LeanView tw="flex-row" style={{ columnGap: 8 }}>
           <Link
             href={`/@${
               item.channel_message.sent_by.profile.username ??
               item.channel_message.sent_by.profile.wallet_addresses
             }`}
           >
-            <View tw="h-6 w-6">
+            <LeanView tw="h-6 w-6">
               <Avatar size={24} url={channel_message.sent_by.profile.img_url} />
               <View tw="absolute h-full w-full rounded-full border-[1.4px] border-white/60 dark:border-black/60" />
-            </View>
+            </LeanView>
           </Link>
-          <View tw="flex-1" style={{ rowGap: 8 }}>
-            <View tw="flex-row items-center" style={{ columnGap: 8 }}>
+          <LeanView tw="flex-1" style={{ rowGap: 8 }}>
+            <LeanView tw="flex-row items-center" style={{ columnGap: 8 }}>
               <Link
                 href={`/@${
                   item.channel_message.sent_by.profile.username ??
@@ -244,7 +244,7 @@ export const MessageItem = memo(
                 </LeanText>
               </Link>
 
-              <View tw="flex-row items-center">
+              <LeanView tw="flex-row items-center">
                 <LeanText tw={"text-xs text-gray-700 dark:text-gray-200"}>
                   {formatDateRelativeWithIntl(channel_message.created_at)}
                 </LeanText>
@@ -253,9 +253,9 @@ export const MessageItem = memo(
                     <CreatorBadge />
                   </View>
                 ) : null}
-              </View>
+              </LeanView>
 
-              <View
+              <LeanView
                 tw="mr-2 flex-1 flex-row items-center justify-end"
                 style={{
                   gap: 12,
@@ -411,18 +411,18 @@ export const MessageItem = memo(
                     ) : null}
                   </DropdownMenuContent>
                 </DropdownMenuRoot>
-              </View>
-            </View>
+              </LeanView>
+            </LeanView>
 
             {messageNotViewable && !isUserAdmin ? (
-              <View tw="-mb-0.5 -ml-2 -mt-0.5 select-none overflow-hidden px-2 py-0.5">
+              <LeanView tw="-mb-0.5 -ml-2 -mt-0.5 select-none overflow-hidden px-2 py-0.5">
                 {Platform.OS === "web" ? (
                   // INFO: I had to do it like that because blur-sm would crash for no reason even with web prefix
-                  <View tw="blur-sm">
+                  <LeanView tw="blur-sm">
                     <LeanText tw="text-sm text-gray-900 dark:text-gray-100">
                       {loremText}
                     </LeanText>
-                  </View>
+                  </LeanView>
                 ) : (
                   <>
                     <LeanText tw="text-sm text-gray-900  dark:text-gray-100">
@@ -439,7 +439,7 @@ export const MessageItem = memo(
                     />
                   </>
                 )}
-              </View>
+              </LeanView>
             ) : (
               <>
                 {item.channel_message.body_text_length > 0 ? (
@@ -484,7 +484,7 @@ export const MessageItem = memo(
 
             {item.channel_message?.attachments?.length > 0 &&
             item.channel_message?.attachments[0].mime.includes("image") ? (
-              <View
+              <LeanView
                 tw="overflow-hidden rounded-xl"
                 style={{
                   width: imageAttachmentWidth,
@@ -543,7 +543,7 @@ export const MessageItem = memo(
                     }}
                   />
                 </LightBox>
-              </View>
+              </LeanView>
             ) : null}
 
             {item.channel_message?.attachments?.length > 0 &&
@@ -570,8 +570,8 @@ export const MessageItem = memo(
                 </AnimatedView>
               ) : null}
             </PlatformAnimateHeight>
-          </View>
-        </View>
+          </LeanView>
+        </LeanView>
       </AnimatedView>
     );
   }
@@ -581,23 +581,23 @@ MessageItem.displayName = "MessageItem";
 
 export const MessageSkeleton = () => {
   return (
-    <View tw="web:pb-4 h-full w-full flex-1 pb-14">
-      <View tw="h-full flex-1 justify-end px-4">
+    <LeanView tw="web:pb-4 h-full w-full flex-1 pb-14">
+      <LeanView tw="h-full flex-1 justify-end px-4">
         {new Array(8).fill(0).map((_, i) => {
           return (
-            <View tw="flex-row pt-4" key={`${i}`}>
-              <View tw="mr-2 overflow-hidden rounded-full">
+            <LeanView tw="flex-row pt-4" key={`${i}`}>
+              <LeanView tw="mr-2 overflow-hidden rounded-full">
                 <Skeleton width={28} height={28} show />
-              </View>
-              <View>
+              </LeanView>
+              <LeanView>
                 <Skeleton width={140} height={10} show />
-                <View tw="h-1" />
+                <LeanView tw="h-1" />
                 <Skeleton width={90} height={10} show />
-              </View>
-            </View>
+              </LeanView>
+            </LeanView>
           );
         })}
-      </View>
-    </View>
+      </LeanView>
+    </LeanView>
   );
 };
diff --git a/packages/app/components/creator-channels/components/messages-header.tsx b/packages/app/components/creator-channels/components/messages-header.tsx
index 5f0ebfa367..ef36fd19bc 100644
--- a/packages/app/components/creator-channels/components/messages-header.tsx
+++ b/packages/app/components/creator-channels/components/messages-header.tsx
@@ -12,7 +12,7 @@ import { View } from "@showtime-xyz/universal.view";
 import { AvatarHoverCard } from "app/components/card/avatar-hover-card";
 
 import { HeaderProps } from "../types";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 export const MessagesHeader = (props: HeaderProps) => {
   const router = useRouter();
@@ -41,11 +41,11 @@ export const MessagesHeader = (props: HeaderProps) => {
   }, [props.channelId, router]);
 
   return (
-    <View
+    <LeanView
       tw="web:pt-2 web:md:py-5 android:pt-4 flex-row items-center border-gray-200 px-2.5 pb-2 dark:border-gray-800 md:border-b"
       style={{ columnGap: 8 }}
     >
-      <View tw="flex-row items-center" style={{ columnGap: 10 }}>
+      <LeanView tw="flex-row items-center" style={{ columnGap: 10 }}>
         <Pressable
           onPress={() => {
             router.back();
@@ -59,18 +59,18 @@ export const MessagesHeader = (props: HeaderProps) => {
             color={isDark ? "white" : "black"}
           />
         </Pressable>
-        <View>
+        <LeanView>
           <AvatarHoverCard
             username={props.username}
             url={props.picture}
             size={34}
             alt="Channels Avatar"
           />
-        </View>
-      </View>
+        </LeanView>
+      </LeanView>
       {props.channelId ? (
         <>
-          <View tw="flex-1" style={{ rowGap: 8 }}>
+          <LeanView tw="flex-1" style={{ rowGap: 8 }}>
             <Text
               onPress={() => router.push(`/@${props.username}`)}
               tw="text-sm font-bold text-gray-900 dark:text-gray-100"
@@ -83,8 +83,8 @@ export const MessagesHeader = (props: HeaderProps) => {
             >
               {props.members ?? 0} members
             </Text>
-          </View>
-          <View tw="flex-row items-center justify-center gap-3">
+          </LeanView>
+          <LeanView tw="flex-row items-center justify-center gap-3">
             {!props.isCurrentUserOwner ? (
               <Pressable onPress={props.onPressSettings}>
                 <Settings
@@ -101,9 +101,9 @@ export const MessagesHeader = (props: HeaderProps) => {
                 </LeanText>
               </View>
             </Pressable>
-          </View>
+          </LeanView>
         </>
       ) : null}
-    </View>
+    </LeanView>
   );
 };
diff --git a/packages/app/components/creator-channels/list.tsx b/packages/app/components/creator-channels/list.tsx
index 4df13dbce5..1c8137d001 100644
--- a/packages/app/components/creator-channels/list.tsx
+++ b/packages/app/components/creator-channels/list.tsx
@@ -254,6 +254,7 @@ const CreatorChannelsListItem = memo(
 
 CreatorChannelsListItem.displayName = "CreatorChannelsListItem";
 
+const timeFormatter = new Intl.NumberFormat();
 const CreatorChannelsListCreator = memo(
   ({
     item,
@@ -265,7 +266,7 @@ const CreatorChannelsListCreator = memo(
     const joinChannel = useJoinChannel();
     const router = useRouter();
     const time = formatDateRelativeWithIntl(item.updated_at);
-    const memberCount = new Intl.NumberFormat().format(item.member_count);
+    const memberCount = timeFormatter.format(item.member_count);
     return (
       <View tw="flex-1 px-4 py-2.5">
         <View tw="flex-row items-center">
diff --git a/packages/app/utilities.ts b/packages/app/utilities.ts
index 4bdc961829..2bad177a36 100644
--- a/packages/app/utilities.ts
+++ b/packages/app/utilities.ts
@@ -953,6 +953,12 @@ export const generateFakeData = (
   }));
 };
 
+const timeFormatter = new Intl.DateTimeFormat("en-US", {
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: true,
+});
+
 export function formatDateRelativeWithIntl(
   isoDateString: string | number | Date,
   isDisplayCompleteUnit = false
@@ -967,11 +973,6 @@ export function formatDateRelativeWithIntl(
   if (diffInMinutes < 1) {
     return "now";
   } else if (diffInDays < 1) {
-    const timeFormatter = new Intl.DateTimeFormat("en-US", {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: true,
-    });
     return timeFormatter.format(date);
   } else if (diffInDays >= 1 && diffInDays < 7) {
     return `${diffInDays}${isDisplayCompleteUnit ? " days ago" : "d"}`;
@@ -1094,9 +1095,10 @@ export const getCurrencySymbol = (currency: string | null | undefined) => {
   return "$";
 };
 
+const formattersCache: Record<string, Record<string, Intl.NumberFormat>> = {};
+
 export const getCurrencyPrice = (
   currency: string | null | undefined,
-  // TODO: Fix price type, ensure safetey of this function (CC @alan, @jorge, @maxime)
   price: number | null | undefined | string
 ): string => {
   // Handle null, undefined, or non-numeric strings
@@ -1105,13 +1107,22 @@ export const getCurrencyPrice = (
   }
 
   const numberValue = typeof price === "string" ? parseFloat(price) : price;
+  const currentCurrency = currency ?? "USD";
+
+  if (!formattersCache[locale]) {
+    formattersCache[locale] = {};
+  }
+
+  if (!formattersCache[locale][currentCurrency]) {
+    formattersCache[locale][currentCurrency] = new Intl.NumberFormat(locale, {
+      style: "currency",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+      currency: currentCurrency,
+    });
+  }
 
-  return new Intl.NumberFormat(locale ?? "en-US", {
-    style: "currency",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    currency: currency ?? "USD",
-  }).format(numberValue);
+  return formattersCache[locale][currentCurrency].format(numberValue);
 };
 
 export const getCreatorEarnedMoney = (