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

Use react-router to *set* the page URL too

Browse source 
We never had a specific reason why we didn't use the router for this I don't think? Not that I wrote down anyway. Let's just switch it over and see what happens!

I mainly did this as a misdiagnosis of the page reload problem fixed in c162864, but it seems like a good idea to try out anyway!
This commit is contained in:
Emi Matchu 2023-08-10 18:54:25 -07:00
parent b830198feb
commit eef8f1349d
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js
View file

@ -2,7 +2,7 @@ import React from "react";
import gql from "graphql-tag"; import gql from "graphql-tag";
import produce, { enableMapSet } from "immer"; import produce, { enableMapSet } from "immer";
import { useQuery, useApolloClient } from "@apollo/client"; import { useQuery, useApolloClient } from "@apollo/client";
import { useSearchParams } from "react-router-dom"; import { useNavigate, useSearchParams } from "react-router-dom";
import { itemAppearanceFragment } from "../components/useOutfitAppearance"; import { itemAppearanceFragment } from "../components/useOutfitAppearance";
@ -12,6 +12,8 @@ export const OutfitStateContext = React.createContext(null);
function useOutfitState() { function useOutfitState() {
const apolloClient = useApolloClient(); const apolloClient = useApolloClient();
const navigate = useNavigate();
const urlOutfitState = useParseOutfitUrl(); const urlOutfitState = useParseOutfitUrl();
const [localOutfitState, dispatchToOutfit] = React.useReducer( const [localOutfitState, dispatchToOutfit] = React.useReducer(
outfitStateReducer(apolloClient), outfitStateReducer(apolloClient),
@ -256,15 +258,11 @@ function useOutfitState() {
savedOutfitState, savedOutfitState,
}; };
// Keep the URL up-to-date. (We don't listen to it, though 😅) // Keep the URL up-to-date.
// TODO: Seems like we should hook this in with the actual router... I'm const path = buildOutfitPath(outfitState);
// avoiding it rn, but I'm worried Next.js won't necessarily play nice
// with this hack, even though react-router did. Hard to predict!
React.useEffect(() => { React.useEffect(() => {
if (typeof history !== "undefined") { navigate(path, { replace: true });
history.replaceState(null, "", url); }, [path]);
}
}, [url]);
return { return {
loading: outfitLoading || itemsLoading, loading: outfitLoading || itemsLoading,
@ -616,19 +614,23 @@ function getZonesAndItems(itemsById, wornItemIds, closetedItemIds) {
return zonesAndItems; return zonesAndItems;
} }
export function buildOutfitUrl(outfitState, { withoutOutfitId = false } = {}) { function buildOutfitPath(outfitState, { withoutOutfitId = false } = {}) {
const { id } = outfitState; const { id } = outfitState;
if (id && !withoutOutfitId) {
return `/outfits/${id}`;
}
return "/outfits/new?" + buildOutfitQueryString(outfitState);
}
export function buildOutfitUrl(outfitState, options = {}) {
const origin = const origin =
typeof window !== "undefined" typeof window !== "undefined"
? window.location.origin ? window.location.origin
: "https://impress-2020.openneo.net"; : "https://impress-2020.openneo.net";
if (id && !withoutOutfitId) { return origin + buildOutfitPath(outfitState, options);
return origin + `/outfits/${id}`;
}
return origin + "/outfits/new?" + buildOutfitQueryString(outfitState);
} }
function buildOutfitQueryString(outfitState) { function buildOutfitQueryString(outfitState) {