remove demo outfit, initialize state from url
it was causing a flash of content sometimes, oops!
This commit is contained in:
parent
905b41aa7c
commit
072a95faba
1 changed files with 16 additions and 42 deletions
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue