OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

remove demo outfit, initialize state from url

Browse source 
it was causing a flash of content sometimes, oops!
This commit is contained in:
Matt Dunn-Rankin 2020-05-10 01:28:39 -07:00
parent 905b41aa7c
commit 072a95faba
1 changed files with 16 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/app/useOutfitState.js
View file

@ -9,32 +9,10 @@ enableMapSet();
function useOutfitState() { function useOutfitState() {
const apolloClient = useApolloClient(); const apolloClient = useApolloClient();
const initialState = parseOutfitUrl();
const [state, dispatchToOutfit] = React.useReducer( const [state, dispatchToOutfit] = React.useReducer(
outfitStateReducer(apolloClient), outfitStateReducer(apolloClient),
{ initialState
name: "Dress to Impress demo 💖",
wornItemIds: new Set(["51054", "35779", "35780", "37830"]),
closetedItemIds: new Set([
"76732",
"54393",
"80087",
"75997",
"57632",
"80052",
"67617",
"50861",
"77778",
"51164",
"62215",
"70660",
"74546",
"57997",
]),
speciesId: "24",
colorId: "62",
emotion: "HAPPY",
genderPresentation: "FEMININE",
}
); );
const { name, speciesId, colorId, emotion, genderPresentation } = state; const { name, speciesId, colorId, emotion, genderPresentation } = state;
@ -101,24 +79,7 @@ function useOutfitState() {
url, url,
}; };
// Get the state from the URL the first time we load. // Keep the URL up-to-date. (We don't listen to it, though 😅)
React.useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("species")) {
dispatchToOutfit({
type: "reset",
name: urlParams.get("name"),
speciesId: urlParams.get("species"),
colorId: urlParams.get("color"),
emotion: urlParams.get("emotion") || "HAPPY",
genderPresentation: urlParams.get("genderPresentation") || "FEMININE",
wornItemIds: urlParams.getAll("objects[]"),
closetedItemIds: urlParams.getAll("closet[]"),
});
}
}, []);
// Afterwards, keep the URL up-to-date, but don't listen to it anymore.
React.useEffect(() => { React.useEffect(() => {
window.history.replaceState(null, "", url); window.history.replaceState(null, "", url);
}, [url]); }, [url]);
@ -219,6 +180,19 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
} }
}; };
function parseOutfitUrl() {
const urlParams = new URLSearchParams(window.location.search);
return {
name: urlParams.get("name"),
speciesId: urlParams.get("species"),
colorId: urlParams.get("color"),
emotion: urlParams.get("emotion") || "HAPPY",
genderPresentation: urlParams.get("genderPresentation") || "FEMININE",
wornItemIds: urlParams.getAll("objects[]"),
closetedItemIds: urlParams.getAll("closet[]"),
};
}
function findItemConflicts(itemIdToAdd, state, apolloClient) { function findItemConflicts(itemIdToAdd, state, apolloClient) {
const { wornItemIds, speciesId, colorId } = state; const { wornItemIds, speciesId, colorId } = state;