From 5f5fb1b2e532cb7df94031288bfc4c4ab48216f1 Mon Sep 17 00:00:00 2001
From: h0lybyte <5599058+h0lybyte@users.noreply.github.com>
Date: Thu, 14 Nov 2024 13:35:25 -0500
Subject: [PATCH] feat(expo-bbq): added a general user profile card with
 optimization tweaks.

---
 apps/expo-lcagents/src/app/_layout.tsx        |   2 +-
 apps/expo-lcagents/src/app/users.tsx          | 115 ++++++++++++++++++
 apps/kbve.com/src/content/journal/11-14.mdx   |   8 ++
 .../src/components/card/TamaProfileCard.tsx   |  66 ++++++++++
 .../container/TamaProfileContainer.tsx        |  50 ++++++++
 packages/expo-bbq/src/core/useMemory.tsx      |  10 +-
 packages/expo-bbq/src/index.ts                |   6 +
 packages/expo-bbq/src/type.ts                 |   7 ++
 8 files changed, 258 insertions(+), 6 deletions(-)
 create mode 100644 apps/expo-lcagents/src/app/users.tsx
 create mode 100644 packages/expo-bbq/src/components/card/TamaProfileCard.tsx
 create mode 100644 packages/expo-bbq/src/components/container/TamaProfileContainer.tsx
 create mode 100644 packages/expo-bbq/src/type.ts

diff --git a/apps/expo-lcagents/src/app/_layout.tsx b/apps/expo-lcagents/src/app/_layout.tsx
index f6dd1ce23..07c8a0cc8 100644
--- a/apps/expo-lcagents/src/app/_layout.tsx
+++ b/apps/expo-lcagents/src/app/_layout.tsx
@@ -63,7 +63,7 @@ function RootLayoutNav() {
           <Stack.Screen name="login"  options={{  animation: 'fade' }} />
           <Stack.Screen name="profile" options={{  animation: 'fade' }} />
           <Stack.Screen name="onboard" options={{  animation: 'fade' }} />
-
+          <Stack.Screen name="users" options={{ animation: 'fade'}} />
 
         </Stack>
        
diff --git a/apps/expo-lcagents/src/app/users.tsx b/apps/expo-lcagents/src/app/users.tsx
new file mode 100644
index 000000000..b323de41d
--- /dev/null
+++ b/apps/expo-lcagents/src/app/users.tsx
@@ -0,0 +1,115 @@
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { YStack, XStack, SizableText, Separator, ScrollView } from 'tamagui';
+import {
+	TamaUserCard,
+	LottieAnimation,
+	createSupabaseClient,
+	TamaProfileContainer,
+} from '@kbve/expo-bbq';
+import { useNavigation, useLocalSearchParams } from 'expo-router';
+
+const Users = () => {
+	const navigation = useNavigation();
+
+	const { username = 'h0lybyte' } = useLocalSearchParams<{
+        username?: string;
+    }>();
+
+	const supabaseUrl = 'https://supabase.kbve.com';
+	const supabaseAnonKey =
+		'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJyb2xlIjogImFub24iLAogICJpc3MiOiAic3VwYWJhc2UiLAogICJpYXQiOiAxNzI0NTM2ODAwLAogICJleHAiOiAxODgyMzAzMjAwCn0._fmEmblm0afeLoPXxt8wP2mYpa9gzU-ufx3v8oRTFGg';
+
+	const supabase = useMemo(
+		() => createSupabaseClient(supabaseUrl, supabaseAnonKey),
+		[supabaseUrl, supabaseAnonKey],
+	);
+
+	const lottieProfileAnimation = useMemo(
+		() => require('../../assets/json/profile.json'),
+		[],
+	);
+
+	const updateNavigationOptions = useCallback(() => {
+		navigation.setOptions({
+			title: 'KBVE Users',
+			headerBackTitle: 'Back',
+		});
+	}, [navigation]);
+
+	useEffect(() => {
+		updateNavigationOptions();
+	}, [updateNavigationOptions]);
+
+	const MemoizedLottieAnimation = React.memo(LottieAnimation);
+
+	return (
+		<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+			<XStack
+				f={1}
+				jc="center"
+				ai="center"
+				padding="$1"
+				flexDirection="column"
+				$gtMd={{
+					flexDirection: 'row',
+					justifyContent: 'space-between',
+					maxWidth: '90%',
+					gap: '$6',
+				}}
+				$gtLg={{
+					flexDirection: 'row',
+					justifyContent: 'space-between',
+					maxWidth: '80%',
+					gap: '$8',
+				}}>
+				<YStack
+					jc="center"
+					ai="center"
+					$sm={{ width: '50%', display: 'block' }}
+					$gtLg={{
+						flex: 1,
+						maxWidth: '100%',
+					}}>
+					<MemoizedLottieAnimation
+						lottieJSON={lottieProfileAnimation}
+						style={{
+							width: '100%',
+							height: 'auto',
+							aspectRatio: 1,
+							maxWidth: 800,
+						}}
+					/>
+				</YStack>
+
+				<YStack
+					jc="center"
+					ai="center"
+					$sm={{ width: '100%' }}
+					$gtLg={{
+						flex: 1,
+						maxWidth: '40%',
+						paddingLeft: '$8',
+					}}>
+					<SizableText size="$4" theme="alt1" $gtLg={{ size: '$6' }}>
+						KBVE Users
+					</SizableText>
+					<Separator
+						borderColor="cyan"
+						paddingVertical="$2"
+						alignSelf="stretch"
+						$gtLg={{
+							paddingVertical: '$5',
+						}}
+					/>
+
+					<TamaProfileContainer
+						username={username}
+						supabase={supabase}
+					/>
+				</YStack>
+			</XStack>
+		</ScrollView>
+	);
+};
+
+export default Users;
diff --git a/apps/kbve.com/src/content/journal/11-14.mdx b/apps/kbve.com/src/content/journal/11-14.mdx
index 784bc8a9c..c4597097b 100644
--- a/apps/kbve.com/src/content/journal/11-14.mdx
+++ b/apps/kbve.com/src/content/journal/11-14.mdx
@@ -21,3 +21,11 @@ import { Adsense, Tasks } from '@kbve/astropad';
     The `useMemory` hook is almost done, but we still need to fix the offscreen integration and maybe even utilize the `useIdleCallback`.
     Let me get this all pushed out and I will enter the testing realm again tonight.
 
+    After making the hook, we can test it out with a profile component?
+    The idea would be to create two files for us to use, the general profile container and then a wrapper around that said container for the rendering and caching.
+    The first file would be the Profile itself and the second would be a contaijner that would hold the profile and add the useMemory hook around it?
+
+    I am wondering what would be the best way to handle this without causing too many renders but also making it super fast to load and unload profiles.
+    I am also thinking that after we get the useMemory hook to work, we can add another hook that would help us create a pool of the objects that we could render offscreen and then transition them in.
+    In theory we would be creating one of those infinite scrolling situations but having it render as they scroll through the application.
+    The goal would also be to make sure that it does not pull any additional data, by having it cache the results and then use the cache to help build the profiles.
\ No newline at end of file
diff --git a/packages/expo-bbq/src/components/card/TamaProfileCard.tsx b/packages/expo-bbq/src/components/card/TamaProfileCard.tsx
new file mode 100644
index 000000000..8c151045a
--- /dev/null
+++ b/packages/expo-bbq/src/components/card/TamaProfileCard.tsx
@@ -0,0 +1,66 @@
+import React, { memo } from 'react';
+import {
+    YStack,
+    XStack,
+    SizableText,
+    Avatar,
+    Button,
+    Separator,
+} from 'tamagui';
+import { MessageCircle, Heart, MoreVertical } from '@tamagui/lucide-icons';
+import { type IUserCardsPublic } from '../../type';
+
+
+
+interface TamaProfileCardProps {
+    data: IUserCardsPublic;
+    loading: boolean;
+    onAction: (actionState: string, content: string) => void;
+}
+
+export const TamaProfileCard = memo(function TamaProfileCard({
+    data,
+    loading,
+    onAction,
+}: TamaProfileCardProps) {
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <YStack
+            width={400}
+            backgroundColor="$background"
+            borderRadius="$4"
+            padding="$4"
+            shadowColor="$shadowColor"
+            shadowOffset={{ width: 0, height: 4 }}
+            shadowOpacity={0.1}
+            shadowRadius={20}>
+
+            <XStack justifyContent="space-between" alignItems="center">
+                <XStack alignItems="center" gap="$2">
+                    {/* <Avatar circular size="$5">
+                        <Avatar.Image source={{ uri: data.avatarUrl }} width="100%" height="100%" />
+                    </Avatar> */}
+                    <YStack>
+                        <SizableText fontWeight="600" fontSize="$2">{data.username}</SizableText>
+                        <SizableText fontSize="$1" color="$gray10">{data.bio}</SizableText>
+                    </YStack>
+                </XStack>
+                <Button iconAfter={MoreVertical} onPress={() => onAction("Options", "Options menu opened")} />
+            </XStack>
+
+            <YStack paddingVertical="$3">
+                <SizableText fontSize="$2" color="$gray11">{data.bio}</SizableText>
+            </YStack>
+
+            <Separator marginVertical="$3" />
+
+            <XStack justifyContent="space-between" alignItems="center">
+                <Button iconAfter={MessageCircle} onPress={() => onAction("Send Message", "Message sent")} />
+                <Button iconAfter={Heart} onPress={() => onAction("Follow", "User followed")} />
+            </XStack>
+        </YStack>
+    );
+});
diff --git a/packages/expo-bbq/src/components/container/TamaProfileContainer.tsx b/packages/expo-bbq/src/components/container/TamaProfileContainer.tsx
new file mode 100644
index 000000000..733de9273
--- /dev/null
+++ b/packages/expo-bbq/src/components/container/TamaProfileContainer.tsx
@@ -0,0 +1,50 @@
+import React, { Suspense, useCallback } from 'react';
+import { TamaProfileCard } from '../card/TamaProfileCard';
+import { useMemory } from '../../core/useMemory';
+import { Spinner as SkeletonLoader, YStack, Button } from 'tamagui';
+import { type IUserCardsPublic } from '../../type';
+
+export const TamaProfileContainer = ({
+	username,
+	supabase,
+}: {
+	username: string;
+	supabase: any;
+}) => {
+	const fetchProfileData =
+		useCallback(async (): Promise<IUserCardsPublic> => {
+			const { data, error } = await supabase
+				.from('user_cards_public')
+				.select('username, bio, socials, style')
+				.eq('username', username)
+				.single();
+
+			if (error) {
+				console.error('Error fetching profile:', error);
+				return { username: '', socials: '', style: '', bio: '' };
+			}
+			return data;
+		}, [supabase, username]);
+
+	const { LazyLoadedComponent: MemoizedProfileCard, refreshData } = useMemory(
+		`profile_${username}`,
+		fetchProfileData,
+		TamaProfileCard,
+		SkeletonLoader,
+		{
+			onAction: (actionState: string, content: string) =>
+				console.log(`Action: ${actionState}, Content: ${content}`),
+		},
+	);
+
+	return (
+		<YStack space="$4" padding="$4" alignItems="center">
+			<Suspense fallback={<SkeletonLoader />}>
+				<MemoizedProfileCard />
+			</Suspense>
+			<Button onPress={refreshData}>Refresh Profile</Button>
+		</YStack>
+	);
+};
+
+export default TamaProfileContainer;
diff --git a/packages/expo-bbq/src/core/useMemory.tsx b/packages/expo-bbq/src/core/useMemory.tsx
index 41f20ce5f..ad6e9e19d 100644
--- a/packages/expo-bbq/src/core/useMemory.tsx
+++ b/packages/expo-bbq/src/core/useMemory.tsx
@@ -7,11 +7,12 @@ type LazyComponentProps<T> = {
 	loading: boolean;
 };
 
-export const useMemory = <T,>(
+export const useMemory = <T, P, >(
 	key: string,
 	fetchData: () => Promise<T>,
-	Component: React.ComponentType<LazyComponentProps<T>>,
+	Component: React.ComponentType<LazyComponentProps<T> & P>,
 	Skeleton?: React.ComponentType,
+	extraProps?: P,
 ) => {
 	const { data, loading } = useCache<T>(key, fetchData);
 
@@ -21,11 +22,10 @@ export const useMemory = <T,>(
 
 	const LazyLoadedComponent = useMemo(() => {
 		const LazyComponent = React.lazy(async () => {
-			await fetchData();
 			return {
 				default: () =>
 					data ? (
-						<Component data={data} loading={loading} />
+						<Component data={data} loading={loading} {...(extraProps as P)} />
 					) : Skeleton ? (
 						<Skeleton />
 					) : (
@@ -42,7 +42,7 @@ export const useMemory = <T,>(
 				<LazyComponent />
 			</Suspense>
 		);
-	}, [data, loading, fetchData, Component, Skeleton]);
+	}, [data, loading, Component, Skeleton, extraProps]);
 
 	return { LazyLoadedComponent, refreshData };
 };
diff --git a/packages/expo-bbq/src/index.ts b/packages/expo-bbq/src/index.ts
index 6f675d026..b6adb46c2 100644
--- a/packages/expo-bbq/src/index.ts
+++ b/packages/expo-bbq/src/index.ts
@@ -10,6 +10,12 @@ export { LottieAnimation } from './components/animation/LottieAnimation';
 export { LottieHero } from './components/animation/LottieHero';
 export { MaskedView } from './components/creative/MaskedView';
 
+//  [WRAPPER]
+export { createSupabaseClient } from './components/wrapper/Supabase';
+
+//  [CONTAINER]
+export { TamaProfileContainer } from './components/container/TamaProfileContainer';
+
 //  [CORE]
 export { useBBQ } from './core/BBQ';
 export { payloadInstance } from './core/Payload';
diff --git a/packages/expo-bbq/src/type.ts b/packages/expo-bbq/src/type.ts
new file mode 100644
index 000000000..7c4717c51
--- /dev/null
+++ b/packages/expo-bbq/src/type.ts
@@ -0,0 +1,7 @@
+
+export interface IUserCardsPublic {
+    username: string;
+    bio: string;
+    socials: string;
+    style: string;
+}