1
0
Fork 0
forked from OpenNeo/impress

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:
Emi Matchu 2023-10-24 16:50:07 -07:00
parent e300b2d342
commit a983ac9053

View file

@ -2,7 +2,7 @@ import React from "react";
import gql from "graphql-tag";
import produce, { enableMapSet } from "immer";
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";
@ -380,13 +380,26 @@ const EMPTY_CUSTOMIZATION_STATE = {
};
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
// stable object!
const memoizedOutfitState = React.useMemo(
() => readOutfitStateFromSearchParams(searchParams),
[searchParams],
() => readOutfitStateFromSearchParams(mergedParams),
[mergedParams.toString()],
);
return memoizedOutfitState;
@ -395,7 +408,9 @@ function useParseOutfitUrl() {
function readOutfitStateFromSearchParams(searchParams) {
// For the /outfits/:id page, ignore the query string, and just wait for the
// 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) {
return {
...EMPTY_CUSTOMIZATION_STATE,