Add compatibility with older-style outfit URLs
Notable things: - We used to have the parameters in the hash (`#`) part of the URL. - We used to use the key `outfit=123` instead of `outfitId=123`. In this change, we add backwards-compatibility for these things, while still keeping the latest behavior too, with no change to the URLs we generate!
This commit is contained in:
parent
e300b2d342
commit
a983ac9053
1 changed files with 20 additions and 5 deletions
|
@ -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 { useNavigate, useSearchParams } from "react-router-dom";
|
import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
|
||||||
|
|
||||||
import { itemAppearanceFragment } from "../components/useOutfitAppearance";
|
import { itemAppearanceFragment } from "../components/useOutfitAppearance";
|
||||||
|
|
||||||
|
@ -380,13 +380,26 @@ const EMPTY_CUSTOMIZATION_STATE = {
|
||||||
};
|
};
|
||||||
|
|
||||||
function useParseOutfitUrl() {
|
function useParseOutfitUrl() {
|
||||||
const [searchParams] = useSearchParams();
|
// Get params from both the `?a=1` and `#a=1` parts of the URL, because DTI
|
||||||
|
// has historically used both!
|
||||||
|
const location = useLocation();
|
||||||
|
const [justSearchParams] = useSearchParams();
|
||||||
|
const hashParams = new URLSearchParams(location.hash.substr(1));
|
||||||
|
|
||||||
|
// Merge them into one URLSearchParams object.
|
||||||
|
const mergedParams = new URLSearchParams();
|
||||||
|
for (const [key, value] of justSearchParams) {
|
||||||
|
mergedParams.append(key, value);
|
||||||
|
}
|
||||||
|
for (const [key, value] of hashParams) {
|
||||||
|
mergedParams.append(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
// We memoize this to make `outfitStateWithoutExtras` an even more reliable
|
// We memoize this to make `outfitStateWithoutExtras` an even more reliable
|
||||||
// stable object!
|
// stable object!
|
||||||
const memoizedOutfitState = React.useMemo(
|
const memoizedOutfitState = React.useMemo(
|
||||||
() => readOutfitStateFromSearchParams(searchParams),
|
() => readOutfitStateFromSearchParams(mergedParams),
|
||||||
[searchParams],
|
[mergedParams.toString()],
|
||||||
);
|
);
|
||||||
|
|
||||||
return memoizedOutfitState;
|
return memoizedOutfitState;
|
||||||
|
@ -395,7 +408,9 @@ function useParseOutfitUrl() {
|
||||||
function readOutfitStateFromSearchParams(searchParams) {
|
function readOutfitStateFromSearchParams(searchParams) {
|
||||||
// For the /outfits/:id page, ignore the query string, and just wait for the
|
// For the /outfits/:id page, ignore the query string, and just wait for the
|
||||||
// outfit data to load in!
|
// outfit data to load in!
|
||||||
const outfitId = searchParams.get("outfitId");
|
// NOTE: We now use `outfitId` when generating URLs, but historically we've
|
||||||
|
// used `outfit` too!
|
||||||
|
const outfitId = searchParams.get("outfitId") ?? searchParams.get("outfit");
|
||||||
if (outfitId != null) {
|
if (outfitId != null) {
|
||||||
return {
|
return {
|
||||||
...EMPTY_CUSTOMIZATION_STATE,
|
...EMPTY_CUSTOMIZATION_STATE,
|
||||||
|
|
Loading…
Reference in a new issue