Skip to content

Commit

Permalink
update item status updates to useInventory hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@kibagateaux
kibagateaux committed Feb 6, 2024
1 parent ae6df72 commit f9a9c01
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 51 deletions.
105 changes: 56 additions & 49 deletions src/app/inventory/[item].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,20 @@ interface ItemPageProps {

const ItemPage: React.FC<ItemPageProps> = () => {
const { item: id }: { item: string } = useLocalSearchParams();
const { inventory, loading } = useInventory();
const { inventory, loading, setItemStatus } = useInventory();
const { player, getSpellBook } = useAuth();

// const item = inventory.find((i) => i.id === id);
const [item, setItem] = useState<InventoryItem | null>(null);
const [status, setStatus] = useState<ItemStatus | null>(null);
const status = item?.status;
// const [status, setItemStatus] = useState<ItemStatus | null>(null);
// const [activeModal, setActiveModal] = useState<string | null>(null);
const { setActiveModal } = useGameContent();
const { inventory: content } = useGameContent();
// hooks for items that require 3rd party authentication
const [itemOauthConfig, setItemOauth] = useState<OAuthProvider>(oauthConfigs.undefined);
const [activeAbilities, setActiveAbilities] = useState<ItemAbility[]>([]);

console.log('pg:inventory:item:Load', id, item?.tags);
console.log('pg:inventory:item:Load', id, status, item?.tags);

const [request, response, promptAsync] = useAuthRequest(
{
Expand All @@ -66,41 +67,44 @@ const ItemPage: React.FC<ItemPageProps> = () => {
if (item?.id && !status)
item!.checkStatus().then((newStatus: ItemStatus) => {
console.log('pg:Inv:Item check item status', newStatus);
setStatus(newStatus);
setItemStatus(item.id, newStatus);
});

if (item?.abilities?.length && status) {
Promise.all(
item.abilities?.filter(async (ability) => {
(await ability.canDo(status!)) === 'doable';
(await ability.canDo(status!)) === 'ethereal';
}) ?? [],
).then((active) => {
console.log('pb:Inv:Item post item status abilitiy check', active);
setActiveAbilities(active);
});
}
}, [item, status]);
}, [item, status, setItemStatus]);

// console.log('Item: item', id, item);
// console.log('Item: status & modal', status, activeModal);

useMemo(() => {
if (id && !item) {
const item = inventory.find((item) => item.id === id);
if (item) setItem(item);
}
const newItem = inventory.find((item) => item.id === id);
if (!newItem) return; // invalid id
if (id && !item) setItem(newItem); // first render
if (newItem.status !== item?.status) setItem(newItem); // status update
}, [id, item, inventory]);

useMemo(async () => {
if (item?.id) {
// configure oauth if required for item equip/unequip
const oauth = oauthConfigs[item.id];
// configure oauth if required for item equip/unequip
console.log('page:inv:item:oauth', oauth);
if (oauth)
if (oauth) {
setItemOauth({
...oauth,
// TODO see if we can add state later in promptAsync.
// can pass url as option to promptAsync e.g. promptAsync(oauthConfig, { url: getredirectUri + generateRedirectState })
state: await generateRedirectState(item.id as OAuthProviderIds),
});
}
}
}, [item]);

Expand All @@ -112,7 +116,7 @@ const ItemPage: React.FC<ItemPageProps> = () => {

const onItemEquipPress = async () => {
if (item.equip) {
setStatus('equipping'); // hide equip button
setItemStatus(item.id, 'equipping'); // hide equip button

// console.log('modal to render', ItemEquipWizardModal, Modals);
// TODO check if player.id first.
Expand All @@ -137,23 +141,23 @@ const ItemPage: React.FC<ItemPageProps> = () => {
console.log('Oauth request/response', request, response);

if (result) {
// setStatus('post-equip');
// setItemStatus(item.id, 'post-equip');
// TODO api request to add item to their avatar (:DataProvider or :Resource?)
setStatus('equipped');
setItemStatus(item.id, 'equipped');
} else {
// assume failure
setStatus('unequipped');
setItemStatus(item.id, 'unequipped');
}
} catch (e) {
console.log('Error Equipping:', e);
setStatus('unequipped');
setItemStatus(item.id, 'unequipped');
}
}
};

const onItemUnequipPress = () => {
if (item.unequip) item.unequip();
setStatus('unequipping');
setItemStatus(item.id, 'unequipping');
};

const renderItemButton = () => {
Expand All @@ -167,18 +171,10 @@ const ItemPage: React.FC<ItemPageProps> = () => {
</Link>
);

if (status === 'ethereal' && item.installLink)
return (
<Link to={item.installLink} trackingId="item-page-install-cta">
<Button
title="Install"
style={[styles.activeItemStatusButton, styles.equipButton]}
/>
</Link>
);

// dont render if oauth request going out already.
// TODO is that redundant if we set status to 'equipping' tho?
console.log('item action button');

if (status === 'unequipped' && item.equip && (!itemOauthConfig || request))
return (
<Button
Expand Down Expand Up @@ -206,6 +202,15 @@ const ItemPage: React.FC<ItemPageProps> = () => {
style={[styles.activeItemStatusButton, styles.unequipButton]}
/>
);

if (status === 'unequipped')
return (
<Button
title="Equip"
disabled
style={[styles.activeItemStatusButton, styles.unequipButton]}
/>
);
};

const renderDefaultItemInfo = () => (
Expand Down Expand Up @@ -273,7 +278,7 @@ const ItemPage: React.FC<ItemPageProps> = () => {
);

const renderAllItemAbilities = () => (
<View>
<>
<Text style={styles.sectionTitle}>All Abilities</Text>
{item?.abilities?.length ? (
<ScrollView horizontal style={{ flex: 1 }}>
Expand All @@ -291,29 +296,31 @@ const ItemPage: React.FC<ItemPageProps> = () => {
</Text>
</Link>
)}
</View>
</>
);

const renderItemWidgets = () => (
<ScrollView>
<>
<Text style={styles.sectionTitle}>Widgets</Text>
{item?.widgets?.length ? (
item.widgets.map((widgy) => (
<TouchableOpacity key={widgy.id} onPress={() => widgy.do()}>
<View key={widgy.id} style={{ marginRight: 24, alignItems: 'center' }}>
<Text style={styles.sectionTitle}>{widgy.symbol}</Text>
<Text style={styles.sectionBody}>{widgy.name}</Text>
</View>
</TouchableOpacity>
))
) : (
<Link to="https://nootype.substack.com/subscribe">
<Text>
No Widgets Available For This Item Yet. Stay Tuned For Game Updates!!
</Text>
</Link>
)}
</ScrollView>
<ScrollView horizontal>
{item?.widgets?.length ? (
item.widgets.map((widgy) => (
<TouchableOpacity key={widgy.id} onPress={() => widgy.do()}>
<View key={widgy.id} style={{ marginRight: 24, alignItems: 'center' }}>
<Text style={styles.sectionTitle}>{widgy.symbol}</Text>
<Text style={styles.sectionBody}>{widgy.name}</Text>
</View>
</TouchableOpacity>
))
) : (
<Link to="https://nootype.substack.com/subscribe">
<Text>
No Widgets Available For This Item Yet. Stay Tuned For Game Updates!!
</Text>
</Link>
)}
</ScrollView>
</>
);

const renderItemContent = () => (
Expand Down
3 changes: 3 additions & 0 deletions src/components/modals/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ interface ModalRendererProps {

const ModalRenderer = (props: ModalRendererProps) => {
const { activeModal, setActiveModal } = useGameContent();
console.log('comp:modal:index:renderer', activeModal);

if (!activeModal || !activeModal.name) return null;

const onClose = (data: unknown) => {
props.onClose && props.onClose(data);
setActiveModal(undefined);
Expand Down
16 changes: 14 additions & 2 deletions src/hooks/useInventory.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState, useMemo } from 'react';
import { reduce } from 'lodash/fp';

import { InventoryItem, ItemAbility } from 'types/GameMechanics';
import { InventoryItem, ItemAbility, ItemStatus, ItemIds } from 'types/GameMechanics';
import utils from 'inventory';
import { useAuth } from 'contexts/AuthContext';

Expand Down Expand Up @@ -45,5 +45,17 @@ export const useInventory = () => {
}
}, [player?.name, inventory.length]);

return { inventory, loading, widgets };
const setItemStatus = (itemId: ItemIds, status: ItemStatus) => {
console.log('hooks:useInventory:setStatus', itemId, status);
// return setInventory(inventory.map(i => i.id !== itemId ? i : {...i, status}))
return setInventory(
inventory.map((i) => {
if (i.id !== itemId) return i;
console.log('hooks:useInventory:setStatus:i', { ...i, status });
return { ...i, status };
}),
);
};

return { inventory, loading, widgets, setItemStatus };
};

0 comments on commit f9a9c01

Please sign in to comment.