diff --git a/apps/expo-lcagents/src/app/_layout.tsx b/apps/expo-lcagents/src/app/_layout.tsx index 2b4bdc235..f6dd1ce23 100644 --- a/apps/expo-lcagents/src/app/_layout.tsx +++ b/apps/expo-lcagents/src/app/_layout.tsx @@ -62,6 +62,8 @@ function RootLayoutNav() { + + diff --git a/apps/expo-lcagents/src/app/onboard.tsx b/apps/expo-lcagents/src/app/onboard.tsx new file mode 100644 index 000000000..b3ddea397 --- /dev/null +++ b/apps/expo-lcagents/src/app/onboard.tsx @@ -0,0 +1,119 @@ +import React, { useMemo, useCallback, useEffect, useState, useRef } from 'react'; +import { YStack, XStack, SizableText, Separator, ScrollView, Button } from 'tamagui'; +import { TamaOnboard, LottieAnimation, TamaSheet, useBBQ } from '@kbve/expo-bbq'; +import { useNavigation } from 'expo-router'; + +const Onboard = () => { + + // [C ~~> Nav[]] + const navigation = useNavigation(); + const router = useBBQ(); + // [Sheet] + const sheetRef = useRef<{ + showSheet: () => void; + hideSheet: () => void; + } | null>(null); + + // [States] + const [sheetMessage, setSheetMessage] = useState(''); + const [isComplete, setIsComplete] = useState(false); + const [hasError, setHasError] = useState(false); + + // [Lottie] => (Memo) -> JSON animation for the onboarding screen, since its a static asset. + const lottieOnboardAnimation = useMemo( + () => require('../../assets/json/360-vr.json'), + [], + ); + + // [Navigation] => (useCallback) <~> (useEffect) + const updateNavigationOptions = useCallback(() => { + navigation.setOptions({ + title: 'Onboarding', + headerBackTitle: 'Back', + }); + + }, [navigation]); + + useEffect( + () => { + updateNavigationOptions(); + }, [updateNavigationOptions] + ); + + // [onSuccess] ?=> + const handleSuccess = () => { + setIsComplete(true); + setHasError(false); + // [i18n] ?? NULL => TamaI18N('[onboard_true']); ($->trigger) + setSheetMessage('Onboarding completed successfully!'); + if(sheetRef.current) { + sheetRef.current.showSheet(); + } + }; + + // [onError] ?=> + const handleError = (error: string) => { + setIsComplete(false); + setHasError(true); + // [i18n] ?? NULL => TamaI18N('[onboard_error']); ($->trigger)[error:key] + if(sheetRef.current) { + sheetRef.current.showSheet(); + } + }; + + + const renderSheetContent = () => { + return ( + + {sheetMessage} + {isComplete && !hasError && ( + + )} + + ); + }; + + const MemoizedLottieAnimation = React.memo(LottieAnimation); + + return ( + + + Welcome to Onboarding + + + + + + {renderSheetContent()} + + + ); + +}; + +export default Onboard; \ No newline at end of file diff --git a/apps/kbve.com/src/content/journal/11-10.mdx b/apps/kbve.com/src/content/journal/11-10.mdx new file mode 100644 index 000000000..93b5b851f --- /dev/null +++ b/apps/kbve.com/src/content/journal/11-10.mdx @@ -0,0 +1,139 @@ +--- +title: 'November: 10th' +category: Daily +date: 2024-11-10 12:00:00 +client: Self +unsplash: 1721332154373-17e78d19b4a4 +img: https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzNjM5Nzd8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODE3NDg2ODY&ixlib=rb-4.0.3&q=85 +description: November 10th. +tags: + - daily +--- + +import { Adsense, Tasks } from '@kbve/astropad'; + +## 2024 + +- 07:13AM + + **Nx Update** + + Updated the monorepo to nx v20.0.12. + Also moved up the build process to see where the main branch fails, hopefully we can address that problem tonight. + + **Main** + + The branch seems to build without any major issues, but it did skip a couple libraries from being built. + What we could do is try to maybe start changing the triggers to be all via readme updates? + Hmm, I will have to think through it again, let me get some coffee and revisit this concept again within the next hour. + + **Package** + + I am going to go through the package again and see if there are any libraries that we need to update or remove. + We are no longer supporting `appwrite`, so lets go ahead and remove that one. + I believe we can also drop the `preact` libraries as well. + `"@astrojs/preact": "^3.5.3"` and `preact` both could be removed. + +- 07:30AM + + **Vue** + + We can take out the `vue` package as well, following the same command from the `preact` earlier. + ```shell + pnpm remove @astrojs/vue vue + ``` + + However I will run those later when I get back to the monorepo. + After we run that, we will need to make sure to clean up the cache. + + ```shell + pnpm nx reset + ``` + +- 08:53AM + + **Unity** + + I grabbed the ERW tilesets from Matos and threw them into the `Rareicon` asset folder. + With the generic collection of tilesets, we should have enough to build a couple generic maps. + Now the bigger question would be to figure out how to get the hang of the animation. + + **Supabase** + + While making changes to the Unity configuration, I can spend some time thinking through the changes that I want to do with the `user_cards`. + One of the goals for the user cards after this base update will be to pull the stats from the character sheet and render them. + We want the goal of the card to contain all the public information that a random guest or user would require. + So lets take abit of a step back and review the psql for it. + + We will keep parts of the table, like the `CONSTRAINT` for the function, example: + + ```sql + + CONSTRAINT bio_length CHECK (char_length(bio) <= 255), -- Limit bio length to 255 characters + CONSTRAINT bio_format CHECK (bio ~ '^[a-zA-Z0-9.!? ]*$'), -- Allow alphanumeric characters, spaces, and basic punctuation + + ``` + + Okay, yet the `JSONB` needs to be adjusted within the function because it does not let specific nulls through, like if the user has a github but not a twitter. + + Wait I am a tart, I can just drop these functions and use the row level security to handle the updating and managing of the table. + Thus the PSQL will make this so much easier to manage in the future, yay! + Okay so we will just run these and move forward with the current project. + + ```sql + + BEGIN; + + -- Drop older trigger and function + DROP TRIGGER IF EXISTS on_auth_new_card_created ON auth.users; + DROP FUNCTION IF EXISTS public.handle_user_card_update(); + DROP FUNCTION IF EXISTS public.handle_new_user_card(); + DROP TRIGGER IF EXISTS handle_user_card_update ON public.user_cards; + + COMMIT; + + ``` + + Then we can update the command to just handle these directly for us. + Oh I made another silly mistake, I have to drop the triggers first then the functions! + Let me go ahead and fix that up really quick. + +- 11:30AM + + **Expo** + + Okay after migrating both the user profile and the user card out of the sign up process, we can begin building out the onboarding process. + This process will have to be done on both the `@kbve/laser` project and also in the `@kbve/expo-bbq`, since we need to include this for both astro and expo. + In both situations, I will open four instances of VS Code and tackle them all at the same time! + This is the peak of development, my brain is going to be broken as I do this xD + Under the current expo, it will be `packages/expo-bbq/src/components/auth/user/TamaOnboard.tsx` and then inside of that we can build out the component! + This would be the barebone component, aka, `TamaOnboard`, and it would have two states that it would manage. + The first state would be for the `username` and making sure that it is unique before setting it up, however it would be noted that it is the user's public username. + The second state would be for the profile card, the core specific here would be preparing the basic information for the init card. + Hmm, okay these two states should be enough for us to move forward, I believe we can always go back around and double check the onboarding when it goes live into production. + + I am thinking that for error management, we should push the error up in the component, so that the parent component that calls the Tamaonboard can process the error? + This would be easier for us to handle, without having to create multiple error handlers inside of the sub-components, okay let me do that next. + + To keep with the standard, the TamaOnBoard will pass up an `OnError` and `OnSuccess` void, both of which can then be managed by the parent component. + This means we can remove the redirect that is hard coded into the component, yet it does mean we can not specifically highlight where the error is exactly in the form? + + Next, we need to create the actual `onboard.tsx` that we will be using in the expo-lcagents?! + Since this page will be similar to our login / profile, we can strip them down and grab the components that will be useful for the onboarding. + The goal will be to keep it simple enough to push towards production, then we can loop back around and work on resolving the specific bugs. + I do know that the username being taken would be a bug or if the username format is off, both of which we can resolve through the onboarding component. + Besides those two additions, I am not too sure what else the onboarding would need? + I guess we could have them double check the legal docs as well before moving forward, but that is up to the client as well. + Having the legal documents be a combination is a cool future-like concept but there would be a decent amount of work that has to go into setting that up. + + Then there is the actual content that the website would have, maybe since we are already data mining different job sites, we could link that data back into the website. + That could be a great way to drive up natural traffic to the site too. + + Updating the `public.create_user_profile` function to return the new username after it gets created. + Okay let me push this through as the most recent update! + + **FredAgain** + + While working on the expo component, I am jamming to that radio session with Fred and Jim! + The whole work is flames, just nearly a perfect set for this expo work. + Here is the link to the [set](https://www.youtube.com/watch?v=DE_yVb3JMD8), which should be thrown into that future music application. \ No newline at end of file diff --git a/apps/kbve.com/src/content/journal/11-11.mdx b/apps/kbve.com/src/content/journal/11-11.mdx new file mode 100644 index 000000000..dac30420b --- /dev/null +++ b/apps/kbve.com/src/content/journal/11-11.mdx @@ -0,0 +1,22 @@ +--- +title: 'November: 11th' +category: Daily +date: 2024-11-11 12:00:00 +client: Self +unsplash: 1721332154373-17e78d19b4a4 +img: https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzNjM5Nzd8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODE3NDg2ODY&ixlib=rb-4.0.3&q=85 +description: November 11th. +tags: + - daily +--- + +import { Adsense, Tasks } from '@kbve/astropad'; + +## 2024 + +- 02:18AM + + **Screen** + + Forgot to add the screen for the `onboard` section. + Let me go ahead and push that up. \ No newline at end of file diff --git a/apps/kilobase/sql/user_cards/20241104130000_user_cards_onboard.sql b/apps/kilobase/sql/user_cards/20241104130000_user_cards_onboard.sql deleted file mode 100644 index 7c54fa46c..000000000 --- a/apps/kilobase/sql/user_cards/20241104130000_user_cards_onboard.sql +++ /dev/null @@ -1,7 +0,0 @@ -BEGIN; - --- Drop older trigger and function -DROP TRIGGER IF EXISTS on_auth_new_card_created ON auth.users; -DROP FUNCTION IF EXISTS public.handle_user_card_update(); - -COMMIT; \ No newline at end of file diff --git a/apps/kilobase/sql/user_cards/20241109130000_user_cards_migration.sql b/apps/kilobase/sql/user_cards/20241109130000_user_cards_migration.sql new file mode 100644 index 000000000..fb78d8ddc --- /dev/null +++ b/apps/kilobase/sql/user_cards/20241109130000_user_cards_migration.sql @@ -0,0 +1,11 @@ +BEGIN; + +-- Drop the triggers first +DROP TRIGGER IF EXISTS on_auth_new_card_created ON auth.users; +DROP TRIGGER IF EXISTS handle_user_card_update ON public.user_cards; + +-- Then drop the functions +DROP FUNCTION IF EXISTS public.handle_user_card_update(); +DROP FUNCTION IF EXISTS public.handle_new_user_card(); + +COMMIT; \ No newline at end of file diff --git a/apps/kilobase/sql/user_profiles/20241104120000_remove_username_for_auth.sql b/apps/kilobase/sql/user_profiles/20241104120000_remove_username_for_auth.sql index 35cb7a1da..333770bab 100644 --- a/apps/kilobase/sql/user_profiles/20241104120000_remove_username_for_auth.sql +++ b/apps/kilobase/sql/user_profiles/20241104120000_remove_username_for_auth.sql @@ -3,11 +3,11 @@ BEGIN; -- Drop the function and trigger for creating an empty user profile row on registration DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; DROP FUNCTION IF EXISTS public.handle_new_user_profile(); - +DROP FUNCTION IF EXISTS public.create_user_profile(_username TEXT); -- Function to create a user profile using the caller's UUID CREATE OR REPLACE FUNCTION public.create_user_profile(_username TEXT) - RETURNS VOID AS $$ + RETURNS TEXT AS $$ DECLARE _user_id UUID := auth.uid(); -- Automatically get the UUID of the caller BEGIN @@ -41,8 +41,12 @@ BEGIN -- Insert the profile with the username if it doesn't already exist INSERT INTO public.user_profiles (id, username) VALUES (_user_id, _username); + + -- Return the created username + RETURN _username; END; $$ LANGUAGE plpgsql SECURITY DEFINER; + COMMIT; \ No newline at end of file diff --git a/package.json b/package.json index 11e3b79d5..aaa877ce5 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "@astrojs/markdown-remark": "^5.3.0", "@astrojs/mdx": "^2.3.1", "@astrojs/partytown": "^2.1.2", - "@astrojs/preact": "^3.5.3", "@astrojs/react": "^3.6.2", "@astrojs/sitemap": "^3.2.1", "@astrojs/solid-js": "^4.4.2", @@ -17,7 +16,6 @@ "@astrojs/starlight-tailwind": "^2.0.3", "@astrojs/svelte": "^5.7.2", "@astrojs/tailwind": "^5.1.2", - "@astrojs/vue": "^4.5.2", "@babel/core": "^7.25.8", "@babel/preset-react": "^7.25.7", "@babel/runtime": "7.24.5", @@ -30,22 +28,22 @@ "@nx-extend/shadcn-ui": "^4.1.2", "@nx-go/nx-go": "^3.2.0", "@nx-tools/nx-container": "^6.1.0", - "@nx/cypress": "20.0.11", - "@nx/devkit": "20.0.11", - "@nx/esbuild": "20.0.11", - "@nx/eslint": "20.0.11", - "@nx/eslint-plugin": "20.0.11", - "@nx/expo": "20.0.11", - "@nx/express": "20.0.11", - "@nx/jest": "20.0.11", - "@nx/js": "20.0.11", - "@nx/next": "20.0.11", - "@nx/node": "20.0.11", - "@nx/react": "20.0.11", - "@nx/vite": "20.0.11", - "@nx/web": "20.0.11", - "@nx/webpack": "20.0.11", - "@nx/workspace": "20.0.11", + "@nx/cypress": "20.0.12", + "@nx/devkit": "20.0.12", + "@nx/esbuild": "20.0.12", + "@nx/eslint": "20.0.12", + "@nx/eslint-plugin": "20.0.12", + "@nx/expo": "20.0.12", + "@nx/express": "20.0.12", + "@nx/jest": "20.0.12", + "@nx/js": "20.0.12", + "@nx/next": "20.0.12", + "@nx/node": "20.0.12", + "@nx/react": "20.0.12", + "@nx/vite": "20.0.12", + "@nx/web": "20.0.12", + "@nx/webpack": "20.0.12", + "@nx/workspace": "20.0.12", "@nxlv/python": "19.2.1", "@nxtensions/astro": "19.0.1", "@playwright/test": "^1.48.1", @@ -104,9 +102,7 @@ "jsdom": "~22.1.0", "lit": "^3.2.1", "nanostores": "^0.9.5", - "node-appwrite": "^11.1.1", - "nx": "20.0.11", - "preact": "^10.24.3", + "nx": "20.0.12", "prettier": "^3.3.3", "prettier-plugin-astro": "^0.13.0", "react": "18.3.1", @@ -126,8 +122,7 @@ "vite": "5.0.9", "vite-plugin-dts": "~3.8.3", "vite-plugin-top-level-await": "^1.4.4", - "vitest": "^1.6.0", - "vue": "^3.5.12" + "vitest": "^1.6.0" }, "dependencies": { "@astrojs/ts-plugin": "^1.10.3", diff --git a/packages/expo-bbq/src/components/auth/TamaProfile.tsx b/packages/expo-bbq/src/components/auth/TamaProfile.tsx index f4477d724..584f70d8b 100644 --- a/packages/expo-bbq/src/components/auth/TamaProfile.tsx +++ b/packages/expo-bbq/src/components/auth/TamaProfile.tsx @@ -54,8 +54,15 @@ export function TamaProfile({ .eq('id', session.session.user.id) // Use session.user.id for filtering .single(); - if (profileError) { - throw profileError; + // 11-10-2024 - Going to redirect the user to the onboarding. + // if (profileError) { + // throw profileError; + // } + + if (profileError || !profileData) { + // If no profile exists for the new user, redirect to onboarding + router.replace('/onboard'); + return; } setUsername( diff --git a/packages/expo-bbq/src/components/auth/user/TamaOnboard.tsx b/packages/expo-bbq/src/components/auth/user/TamaOnboard.tsx new file mode 100644 index 000000000..5d928faec --- /dev/null +++ b/packages/expo-bbq/src/components/auth/user/TamaOnboard.tsx @@ -0,0 +1,175 @@ +import React, { useState, useCallback, useMemo, useEffect } from 'react'; +import { YStack, Input, Button, TextArea, Text } from 'tamagui'; +import { createSupabaseClient } from '../../wrapper/Supabase'; +import { socialsSchema, styleSchema } from './UserSchema'; + +export function TamaOnboard({ + supabaseUrl, + supabaseAnonKey, + onSuccess, + onError, +}: { + supabaseUrl: string; + supabaseAnonKey: string; + onSuccess?: () => void; + onError?: (error: string) => void; +}) { + + // [States] + const [step, setStep] = useState(1); + const [username, setUsername] = useState(''); + const [bio, setBio] = useState(''); + const [socials, setSocials] = useState(''); + const [style, setStyle] = useState(''); + const [loading, setLoading] = useState(true); + + + // [Supabase] + const supabase = useMemo( + () => createSupabaseClient(supabaseUrl, supabaseAnonKey), + [supabaseUrl, supabaseAnonKey], + ); + + // [User] -> Memoize the user object. + // const user = useMemo(async () => { + // return (await supabase.auth.getUser())?.data.user; + // }, [supabase]); + + + // Check if username is already set + useEffect(() => { + const checkExistingUsername = async () => { + try { + const user = (await supabase.auth.getUser())?.data.user; + if (!user) throw new Error('User data not found'); + + const { data, error } = await supabase + .from('user_profiles') + .select('username') + .eq('id', user.id) + .single(); + + if (error) throw new Error(error.message); + + // If username exists, skip to step 2 + if (data?.username) { + setStep(2); + } + } catch (err) { + if (onError) onError('Failed to check username. Please try again.'); + console.error(err); + } finally { + setLoading(false); + } + }; + + checkExistingUsername(); + }, [supabase, onError]); + + // Handler to submit the username + const handleUsernameSubmit = useCallback(async () => { + try { + const user = (await supabase.auth.getUser())?.data.user; + if (!user) throw new Error('User data not found'); + + // Lowercase the username for consistency + const lowercasedUsername = username.toLowerCase(); + + + // Call the stored function to handle the new user profile + const { data, error } = await supabase + .rpc('create_user_profile', { _username: lowercasedUsername }); + + + if (error) throw new Error(JSON.stringify(error)); + + // Check if data was returned to confirm successful update + if (data && data.length > 0) { + setStep(2); // Move to the next step for bio/socials + } else { + throw new Error('Update failed, no data returned'); + } + } catch (err) { + if (onError) onError('Failed to set username. Please try again.'); + console.error(err); + } + }, [username, supabase, onError]); + + // Handler to submit the user card details + const handleUserCardSubmit = useCallback(async () => { + try { + const user = (await supabase.auth.getUser())?.data.user; + if (!user) throw new Error('User data not found'); + + // Prepare the payload, excluding `socials` and `style` if they're empty + const payload: Record = { id: user.id, bio }; + if (socials) payload.socials = socials; + if (style) payload.style = style; + + // Use upsert to insert or update the row + const { data, error } = await supabase + .from('user_cards') + .upsert(payload, { onConflict: 'id' }) // Handle conflicts based on the user's id + .select(); + + if (error) throw new Error(JSON.stringify(error)); + if (!data || data.length === 0) throw new Error('Failed to save user card details'); + + if (onSuccess) onSuccess(); + } catch (err) { + if (onError) onError('Failed to save user card details. Please try again.'); + console.error(err); + } + }, [bio, socials, style, supabase, onSuccess, onError]); + + + if (loading) { + return Loading...; + } + + return ( + + {step === 1 ? ( + <> + Please choose your public username: + + + + + ) : ( + <> + Tell us more about yourself: +