add displayType to Widget config to reduce code complexity on homepag…

…e display and saving to API
kibagateaux · Jul 30, 2024 · c404a63 · c404a63
1 parent 2a596a6
commit c404a63
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 25 deletions.
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -16,7 +16,6 @@ import OnboardingWizard from 'components/wizards/OnboardingWizard';
 import {
     STAGE_AVATAR_CONFIG,
     TRACK_ONBOARDING_STAGE,
-    filterOutDefaultWidgets,
     getStorage,
     itemAbilityToWidgetConfig,
     saveStorage,
@@ -83,21 +82,9 @@ const HomeScreen = () => {
 
     const saveWidgets = useCallback(
         (widgets: WidgetConfig[]) => {
-            // if saved from widget container then default widgets are filtered out for display and need to be re-added before saving
-            const isFiltered = !widgets.find((w) => w.id === 'maliksmajik-avatar-viewer');
-            const allWidgi = !isFiltered
-                ? widgets
-                : [
-                      ...widgets,
-                      ...(widgetConfig.filter(
-                          (w) =>
-                              w.id === 'maliksmajik-avatar-viewer' ||
-                              w.id === 'maliksmajik-speak-intention',
-                      ) ?? []),
-                  ];
-            setWidgetConfig(allWidgi);
+            setWidgetConfig(widgets);
         },
-        [widgetConfig, setWidgetConfig],
+        [setWidgetConfig],
     );
 
     const finalizeRenovation = useCallback(
@@ -224,7 +211,7 @@ const HomeScreen = () => {
                     <Button color="purple" title="Speak Intention" onPress={onIntentionPress} />
                 </View>
                 <WidgetContainer
-                    widgets={filterOutDefaultWidgets(widgetConfig) as WidgetConfig[]}
+                    widgets={widgetConfig}
                     WidgetRenderer={HomeWidget}
                     saveWidgets={saveWidgets}
                     finalizeRenovation={finalizeRenovation}

diff --git a/src/components/common/AvatarViewer.tsx b/src/components/common/AvatarViewer.tsx
@@ -25,6 +25,7 @@ const AvatarViewer = ({ SVG, uri, is3d }: AvatarViewerProps) => {
 
     const SvgComponent = () => (!SVG ? null : <SVG />);
     // TODO add suppoort for rendering base64 encoded images
+    // <Image style={styles.image} source={{uri: `data:image/png;base64,${encodedBase64}`}} />
     //  https://stackoverflow.com/questions/29380265/does-react-native-support-base64-encoded-images
     return (
         <View

diff --git a/src/components/home/WidgetContainer.tsx b/src/components/home/WidgetContainer.tsx
@@ -125,7 +125,9 @@ const WidgetContainer = ({
             // <gesture={longPress}>
             <FlatList
                 data={widgets}
-                renderItem={({ item }: { item: WidgetConfig }) => <WidgetRenderer {...item} />}
+                renderItem={({ item }: { item: WidgetConfig }) =>
+                    item.displayType === 'home' ? <WidgetRenderer {...item} /> : null
+                }
                 keyExtractor={(item) => item.id}
             />
             // <
@@ -157,8 +159,8 @@ const WidgetContainer = ({
             {addMode ? renderAddWidgetModal() : null}
             {editMode ? ( // TODO use icons not buttons
                 <>
+                    <Button title="Edit" onPress={showSelectedWigets} />
                     <Button title="Close" onPress={onEditModeEnd} />
-                    <Button title="Add Widget" onPress={showSelectedWigets} />
                 </>
             ) : (
                 <Button title="Renovate" onPress={() => setEditMode(true)} />

diff --git a/src/hooks/useHomeConfig.ts b/src/hooks/useHomeConfig.ts
@@ -11,6 +11,7 @@ export const useHomeConfig = () => {
     const { loading: isLoadingNetwork } = useNetworkState();
     const [config, setHomeConfig] = useState<HomeConfig | null>(null);
 
+    // TODO useCallback
     const save = async (widgets: WidgetConfig[], merge: boolean = true) => {
         const newConfig = await saveHomeConfig({
             widgets: widgets,
@@ -19,6 +20,7 @@ export const useHomeConfig = () => {
         setHomeConfig(newConfig);
     };
 
+    // TODO useMemo
     useEffect(() => {
         getHomeConfig(player?.id).then((config) => setHomeConfig(config));
     }, [player, isLoadingNetwork]);

diff --git a/src/inventory/github.ts b/src/inventory/github.ts
@@ -81,7 +81,8 @@ const item: InventoryItem = {
             symbol: '💻',
             description: 'Give your jinni access to your code repos to learn from your daily adds',
             provider: ITEM_ID,
-            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
+            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'unequipped'),
+            displayType: 'none',
             do: async () => {
                 track(ABILITY_SYNC_REPOS, {
                     spell: ABILITY_SYNC_REPOS,
@@ -152,7 +153,8 @@ const item: InventoryItem = {
             symbol: '💻',
             description: 'Jinni will learn from what you have been working on',
             provider: ITEM_ID,
-            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
+            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'unequipped'),
+            displayType: 'none',
             do: async () => {
                 track(ABILITY_TRACK_COMMITS, {
                     spell: ABILITY_TRACK_COMMITS,

diff --git a/src/inventory/maliks-majik.ts b/src/inventory/maliks-majik.ts
@@ -90,6 +90,7 @@ const item: InventoryItem = {
             provider: ITEM_ID,
             symbol: '🧞‍♂️',
             description: 'Get access to the full game',
+            displayType: 'none',
             canDo: async (status: ItemStatus) => {
                 // @dev implicit check for PROOF_MAJIK
                 if (status !== 'equipped') return 'unequipped';
@@ -160,6 +161,7 @@ const item: InventoryItem = {
             name: 'Create Mystic Crypt',
             provider: ITEM_ID,
             symbol: '🏦',
+            displayType: 'none',
             description:
                 "Save game progress to your phone'scloud storage to restore account if you lose your phone",
             canDo: async (status: ItemStatus) => {
@@ -188,6 +190,7 @@ const item: InventoryItem = {
         (stat): ItemAbility => ({
             ...stat,
             id: 'stat-' + stat.name.toLowerCase(),
+            displayType: 'home',
             provider: ITEM_ID,
             description: `Display your stat points for ${stat.name} so other jinn can see`,
             canDo: async () => 'unequipped',

diff --git a/src/inventory/spotify.ts b/src/inventory/spotify.ts
@@ -89,7 +89,8 @@ const item: InventoryItem = {
             symbol: '🎶',
             description: 'Share a playlist on Spotify with another player',
             provider: ITEM_ID,
-            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
+            displayType: 'none',
+            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'unequipped'),
             do: async () => {
                 // const pid = await getStorage(ID_PLAYER_SLOT);
                 // if (!pid) return async () => false;
@@ -130,7 +131,8 @@ const item: InventoryItem = {
             symbol: '🦹‍♂️',
             description: 'Share your Spotfiy profile with another player',
             provider: ITEM_ID,
-            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
+            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'unequipped'),
+            displayType: 'none',
             do: async () => {
                 console.log('Spotify:Ability:ShareProfile');
                 track(TRACK_SHARE_CONTENT, {
@@ -210,7 +212,7 @@ const item: InventoryItem = {
         //     name: 'Silent Disco',
         //     symbol: '🪩',
         //     description: 'Create an IRL rave right now!',
-        //     canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
+        //     canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'unequipped'),
         //     do: async () => {
 
         //         // TODO cant just return func, need to return initial data + follow up. follow up neds to take object of data
@@ -226,7 +228,8 @@ const item: InventoryItem = {
             description:
                 'Add a playlist to your homepage that will autoplay when people visit your profile',
             provider: ITEM_ID,
-            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'notdoable'),
+            canDo: async (status: ItemStatus) => (status === 'equipped' ? 'idle' : 'notdoable'),
+            displayType: 'none',
             do: async <WidgetSettingInput>(params: WidgetSettingInput): Promise<HoF> => {
                 console.log('playlist to pin', params);
                 // TODO need a func for when widget pressed on profile which is diff then setting up widget

diff --git a/src/types/GameMechanics.ts b/src/types/GameMechanics.ts
@@ -10,7 +10,7 @@ export interface Avatar {
  */
 export type ModalContentProps = {
     wizard: {
-        // key 0-indexed  order
+        // key 0-indexed order
         [key: number]: {
             title: string | ((dialogueData: object) => string);
             text: string | ((dialogueData: object) => string);
@@ -146,6 +146,7 @@ export type ItemIds =
 export type ItemStatus =
     | void
     | 'ethereal' // can be used by player but isnt installed or accessible at the moment
+    | 'idle' // can be used by player immediately
     | 'unequipped' // player can equip but hasnt yet
     | 'unequipping' // in the process of moving from 'equipped' -> 'unequipped'
     | 'equipping' // in the process of moving from 'unequipped' -> 'equipped'

diff --git a/src/types/UserConfig.ts b/src/types/UserConfig.ts
@@ -19,10 +19,12 @@ export interface HomeConfig {
     tabs: WidgetConfig[];
 }
 
+type WidgetDisplayTypes = 'none' | 'avatar' | 'nav' | 'home';
 export interface WidgetConfig {
     id: WidgetIds;
     provider: ItemIds;
     priority?: number;
+    displayType: WidgetDisplayTypes; // 'none' for Abilities, nav ior home for Widgets
     // navigation
     routeName: string; // Expo route navigation name
     title: string;

diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -172,6 +172,7 @@ export const saveHomeConfig = async ({
               ...widgets,
               ...(config?.widgets.filter((w) => !_.find(widgets, { id: w.id })) ?? []), // dedupe widgets that are already in saved config
           ];
+
     console.log(
         'home config deduped 2!!!',
         merged,
@@ -185,6 +186,7 @@ export const saveHomeConfig = async ({
         merge,
         // defaultHomeConfig,
     );
+    // TODO if merged === newConfig. Dont send API request
 
     console.log('!!! new home config saved!!!', newConfig);
     const playerId = await getStorage(ID_PLAYER_SLOT);

diff --git a/src/utils/config.ts b/src/utils/config.ts
@@ -131,6 +131,7 @@ export const filterOutDefaultWidgets = (widgets: WidgetConfig[] | ItemAbility[])
     widgets.filter(
         (w) => w.id !== 'maliksmajik-avatar-viewer' && w.id !== 'maliksmajik-speak-intention',
     );
+
 export const itemAbilityToWidgetConfig = (
     provider: ItemIds,
     widgetId: WidgetIds,
@@ -139,6 +140,7 @@ export const itemAbilityToWidgetConfig = (
     provider,
     routeName: `/inventory/${provider}?widget=${widgetId}`,
     path: `/inventory/${provider}?widget=${widgetId}`,
+    displayType: 'home', // TODO i think assuming widget not ability is right here but might need to refactor. Wdigrets are getting sloppy af
     title:
         widgetId.split('-').length === 1
             ? widgetId
@@ -156,27 +158,31 @@ const defaultWidgetConfig: WidgetConfig[] = [
         title: 'Strength',
         routeName: '/stats/strength',
         path: '/stats/strength',
+        displayType: 'home',
     },
     {
         id: 'stat-intelligence',
         provider: 'MaliksMajik',
         title: 'Intelligence',
         routeName: '/stats/intelligence',
         path: '/stats/intelligence',
+        displayType: 'home',
     },
     {
         id: 'stat-stamina',
         provider: 'MaliksMajik',
         title: 'Stamina',
         routeName: '/stats/stamina',
         path: '/stats/stamina',
+        displayType: 'home',
     },
     {
         id: 'stat-spirit',
         provider: 'MaliksMajik',
         title: 'Spirit',
         routeName: '/stats/spirit',
         path: '/stats/spirit',
+        displayType: 'home',
     },
 ];
 
@@ -187,13 +193,15 @@ const defaultTabConfig: WidgetConfig[] = [
         routeName: 'index',
         title: 'Home',
         path: '/',
+        displayType: 'nav',
     },
     {
         id: 'inventory',
         provider: 'MaliksMajik',
         routeName: 'inventory',
         title: 'inventory',
         path: '/inventory',
+        displayType: 'nav',
     },
     // {
     //     title: 'tzolkin',