OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity
impress-2020/src/app/WardrobePage/index.js

193 lines
6.7 KiB
JavaScript
Raw Normal View History

Layout prototype, items panel
2020-04-21 20:32:53 -07:00
import React from "react";
update chakra imports
2020-12-25 09:08:33 -08:00
import { useToast } from "@chakra-ui/react";
Add page-reload recovery to *all* code splitting Still getting some chunk load errors in my Sentry reporting! My hunch is these are the culprit. I hooope that after this the errors are pretty much gone! If not, then I'm missing something about what causes these failures…
2021-01-21 14:34:55 -08:00
import { loadable } from "../util";
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
create ItemsAndSearchPanel, simplify search refs
2020-04-26 00:37:58 -07:00
import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
Add search footer to layout, behind a feature flag Yeah it looks cute as a starting point! Definitely a lot to do here tho 😳
2021-06-21 14:48:08 -07:00
import SearchFooter from "./SearchFooter";
add zone restrict hack tools similar to the layer zoning tools I just rolled out! not thrilled about the outfit state hacks here bc of how we cache restrict on the appearance rather than the item, but oh well! this escape hatch is pretty easy and solid, and it's a cleanup for another day Also did a code split here, now that this file is getting larger, to only load this for support users. I don't actually care about restricting console stuff to support users (I'd honestly rather not), but saving the bytes is worth it I think, since support mode is pretty easy to enter when we need to
2020-08-28 00:12:41 -07:00
import SupportOnly from "./support/SupportOnly";
Enable auto-saving while searching for items This means hoisting `useOutfitSaving` up to the top of the page! We had it down lower for iteration convenience to start :)
2021-05-04 13:28:29 -07:00
import useOutfitSaving from "./useOutfitSaving";
add DTIHackLayerZone fn to console A dev tool to preview what an item would look like in a different zone! To use, open the browser console, and type `DTIHackLayerZone(layerId, zoneIdOrName)`, but replace `layerId` with the layer's DTI ID, and `zoneIdOrName` with either the zone ID or its name in quotes.
2020-08-27 22:32:28 -07:00
import useOutfitState, { OutfitStateContext } from "./useOutfitState";
more realistic loading state into WardrobePage Here, we extract a lean WardrobePageLayout component, so that we can bundle it into the main app as a loading state for WardrobePage. This means that clicking Start from the homepage will, instead of flashing the screen to white while WardrobePage loads, show the correctly-sized black/white page layout instead.
2020-09-10 02:54:22 -07:00
import WardrobePageLayout from "./WardrobePageLayout";
Refactor into WardrobePreviewAndControls component I'm moving the preview and controls stuff closer together in the code, to clear the way to change `OutfitPreview` into a `useOutfitPreview` hook here!
2021-02-10 12:52:00 -08:00
import WardrobePreviewAndControls from "./WardrobePreviewAndControls";
[WIP] Migrate outfit page, with known bug Okay so there's a bug here where navigating directly to /outfits/new?species=X&color=Y will reset to a Blue Acara, because Next.js statically renders the Blue Acara on build, and then rehydrates a Blue Acara on load, and then updates the real page query in—and our state management for outfits doesn't *listen* to URL changes, it only *emits* them. It'd be good to consider like… changing that? It's tricky because our state model is… not simple, when you consider that we have both local state and URL state and saved-outfit state in play. But it could be done! But there might be another option too. I'll take a look at this after moving the home page, which will give me the chance to see what the experience navigating in from there is like!
2022-09-15 00:27:49 -07:00
import { useRouter } from "next/router";
Simplify page title & SSR for saved outfit Now we can just use our usual pattern: preload some GraphQL data, and render the title and such in the page component itself! Whew!
2022-09-15 04:03:51 -07:00
import Head from "next/head";
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
add zone restrict hack tools similar to the layer zoning tools I just rolled out! not thrilled about the outfit state hacks here bc of how we cache restrict on the appearance rather than the item, but oh well! this escape hatch is pretty easy and solid, and it's a cleanup for another day Also did a code split here, now that this file is getting larger, to only load this for support users. I don't actually care about restricting console stuff to support users (I'd honestly rather not), but saving the bytes is worth it I think, since support mode is pretty easy to enter when we need to
2020-08-28 00:12:41 -07:00
const WardrobeDevHacks = loadable(() => import("./WardrobeDevHacks"));
code-split OutfitControls
2020-05-18 00:11:18 -07:00
create ItemsAndSearchPanel, simplify search refs
2020-04-26 00:37:58 -07:00
/**
* WardrobePage is the most fun page on the site - it's where you create
* outfits!
*
* This page has two sections: the OutfitPreview, where we show the outfit as a
* big image; and the ItemsAndSearchPanels, which let you manage which items
* are in the outfit and find new ones.
*
* This component manages shared outfit state, and the fullscreen responsive
* page layout.
*/
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
function WardrobePage() {
add temporary toast explaining outfit is static
2020-04-22 02:57:58 -07:00
const toast = useToast();
create ItemsAndSearchPanel, simplify search refs
2020-04-26 00:37:58 -07:00
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
add temporary toast explaining outfit is static
2020-04-22 02:57:58 -07:00
Enable auto-saving while searching for items This means hoisting `useOutfitSaving` up to the top of the page! We had it down lower for iteration convenience to start :)
2021-05-04 13:28:29 -07:00
// We manage outfit saving up here, rather than at the point of the UI where
// "Saving" indicators appear. That way, auto-saving still happens even when
Warn user of unsaved outfit changes
2021-05-04 16:31:48 -07:00
// the indicator isn't on the page, e.g. when searching. We also mount a
// <Prompt /> in this component to prevent navigating away before saving.
Enable auto-saving while searching for items This means hoisting `useOutfitSaving` up to the top of the page! We had it down lower for iteration convenience to start :)
2021-05-04 13:28:29 -07:00
const outfitSaving = useOutfitSaving(outfitState, dispatchToOutfit);
create ItemsAndSearchPanel, simplify search refs
2020-04-26 00:37:58 -07:00
// TODO: I haven't found a great place for this error UI yet, and this case
// isn't very common, so this lil toast notification seems good enough!
add item list skeleton while loading
2020-04-22 15:24:38 -07:00
React.useEffect(() => {
if (error) {
Lint against console.log and replace `console.log` instances in the codebase with better alternatives!
2021-05-03 15:01:49 -07:00
console.error(error);
add item list skeleton while loading
2020-04-22 15:24:38 -07:00
toast({
title: "We couldn't load this outfit 😖",
description: "Please reload the page to try again. Sorry!",
status: "error",
isClosable: true,
Item search frontend + backend!
2020-04-24 21:17:03 -07:00
duration: 999999999,
add item list skeleton while loading
2020-04-22 15:24:38 -07:00
});
}
}, [error, toast]);
Warn user of unsaved outfit changes
2021-05-04 16:31:48 -07:00
// For new outfits, we only block navigation while saving. For existing
// outfits, we block navigation while there are any unsaved changes.
const shouldBlockNavigation =
outfitSaving.canSaveOutfit &&
((outfitSaving.isNewOutfit && outfitSaving.isSaving) ||
(!outfitSaving.isNewOutfit && !outfitSaving.latestVersionIsSaved));
// In addition to a <Prompt /> for client-side nav, we need to block full nav!
React.useEffect(() => {
if (shouldBlockNavigation) {
const onBeforeUnload = (e) => {
// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#example
e.preventDefault();
e.returnValue = "";
};
window.addEventListener("beforeunload", onBeforeUnload);
return () => window.removeEventListener("beforeunload", onBeforeUnload);
}
}, [shouldBlockNavigation]);
oops, fix bad comment to work around compiler bug This happened in an earlier change too, I forget where, but there's some compiler bug that causes comments placed in this kind of spot to yield this error in production, but not in dev: https://reactjs.org/docs/error-decoder.html/?invariant=152&args Oh well, moved the comment!
2020-08-05 01:23:26 -07:00
// NOTE: Most components pass around outfitState directly, to make the data
// relationships more explicit... but there are some deep components
// that need it, where it's more useful and more performant to access
// via context.
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
return (
Simplify page title & SSR for saved outfit Now we can just use our usual pattern: preload some GraphQL data, and render the title and such in the page component itself! Whew!
2022-09-15 04:03:51 -07:00
<>
<Head>
<title>
{outfitState.name || "Untitled outfit"} | Dress to Impress
</title>
{outfitState.id && <SavedOutfitMetaTags outfitState={outfitState} />}
</Head>
<OutfitStateContext.Provider value={outfitState}>
<SupportOnly>
<WardrobeDevHacks />
</SupportOnly>
Warn user of unsaved outfit changes
2021-05-04 16:31:48 -07:00
Simplify page title & SSR for saved outfit Now we can just use our usual pattern: preload some GraphQL data, and render the title and such in the page component itself! Whew!
2022-09-15 04:03:51 -07:00
{/*
* TODO: This might unnecessarily block navigations that we don't
* necessarily need to, e.g., navigating back to Your Outfits while the
* save request is in flight. We could instead submit the save mutation
* immediately on client-side nav, and have each outfit save mutation
* install a `beforeunload` handler that ensures that you don't close
* the page altogether while it's in flight. But let's start simple and
* see how annoying it actually is in practice lol
*/}
<Prompt
when={shouldBlockNavigation}
message="Are you sure you want to leave? Your changes might not be saved."
/>
<WardrobePageLayout
previewAndControls={
<WardrobePreviewAndControls
isLoading={loading}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
}
itemsAndMaybeSearchPanel={
<ItemsAndSearchPanels
loading={loading}
outfitState={outfitState}
outfitSaving={outfitSaving}
dispatchToOutfit={dispatchToOutfit}
/>
}
searchFooter={<SearchFooter />}
/>
</OutfitStateContext.Provider>
</>
);
}
Warn user of unsaved outfit changes
2021-05-04 16:31:48 -07:00
Simplify page title & SSR for saved outfit Now we can just use our usual pattern: preload some GraphQL data, and render the title and such in the page component itself! Whew!
2022-09-15 04:03:51 -07:00
/**
* SavedOutfitMetaTags renders the meta tags that we use to render pretty
* share cards for social media for saved outfits!
*/
function SavedOutfitMetaTags({ outfitState }) {
const updatedAtTimestamp = Math.floor(
new Date(outfitState.updatedAt).getTime() / 1000
);
const imageUrl =
`https://impress-outfit-images.openneo.net/outfits` +
`/${encodeURIComponent(outfitState.id)}` +
`/v/${encodeURIComponent(updatedAtTimestamp)}` +
`/600.png`;
return (
<>
<meta
property="og:title"
content={outfitState.name || "Untitled outfit"}
/>
<meta property="og:type" content="website" />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={outfitState.url} />
<meta property="og:site_name" content="Dress to Impress" />
<meta
property="og:description"
content="A custom Neopets outfit, designed on Dress to Impress!"
more realistic loading state into WardrobePage Here, we extract a lean WardrobePageLayout component, so that we can bundle it into the main app as a loading state for WardrobePage. This means that clicking Start from the homepage will, instead of flashing the screen to white while WardrobePage loads, show the correctly-sized black/white page layout instead.
2020-09-10 02:54:22 -07:00
/>
Simplify page title & SSR for saved outfit Now we can just use our usual pattern: preload some GraphQL data, and render the title and such in the page component itself! Whew!
2022-09-15 04:03:51 -07:00
</>
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
);
}
[WIP] Migrate outfit page, with known bug Okay so there's a bug here where navigating directly to /outfits/new?species=X&color=Y will reset to a Blue Acara, because Next.js statically renders the Blue Acara on build, and then rehydrates a Blue Acara on load, and then updates the real page query in—and our state management for outfits doesn't *listen* to URL changes, it only *emits* them. It'd be good to consider like… changing that? It's tricky because our state model is… not simple, when you consider that we have both local state and URL state and saved-outfit state in play. But it could be done! But there might be another option too. I'll take a look at this after moving the home page, which will give me the chance to see what the experience navigating in from there is like!
2022-09-15 00:27:49 -07:00
/**
* Prompt blocks client-side navigation via Next.js when the `when` prop is
* true. This is our attempt at a drop-in replacement for the Prompt component
* offered by react-router!
*
* Adapted from https://github.com/vercel/next.js/issues/2694#issuecomment-778225625
*/
function Prompt({ when, message }) {
const router = useRouter();
React.useEffect(() => {
const handleWindowClose = (e) => {
if (!when) return;
e.preventDefault();
return (e.returnValue = message);
};
const handleBrowseAway = () => {
if (!when) return;
if (window.confirm(message)) return;
router.events.emit("routeChangeError");
throw "routeChange aborted by <Prompt>.";
};
window.addEventListener("beforeunload", handleWindowClose);
router.events.on("routeChangeStart", handleBrowseAway);
return () => {
window.removeEventListener("beforeunload", handleWindowClose);
router.events.off("routeChangeStart", handleBrowseAway);
};
}, [when, message, router]);
return null;
}
Layout prototype, items panel
2020-04-21 20:32:53 -07:00
export default WardrobePage;
Copy permalink