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

use outfit name in page title

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 20:54:18 -07:00
parent 152ba2cb17
commit 1ca61215be
3 changed files with 101 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -24,6 +24,7 @@
"node-fetch": "^2.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-scripts": "3.4.1",
"react-transition-group": "^4.3.0"
},

152
src/WardrobePage.js
View file

@ -10,6 +10,7 @@ import {
InputRightElement,
useToast,
} from "@chakra-ui/core";
import { Helmet } from "react-helmet";
import ItemsPanel from "./ItemsPanel";
import OutfitPreview from "./OutfitPreview";
@ -44,91 +45,98 @@ function WardrobePage() {
}, [searchQuery]);
return (
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<Grid
// Fullscreen, split into a vertical stack on smaller screens
// or a horizontal stack on larger ones!
templateAreas={{
base: `"outfit"
<>
<Helmet>
<title>
{outfitState.name || "Untitled outfit"} | Dress to Impress
</title>
</Helmet>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<Grid
// Fullscreen, split into a vertical stack on smaller screens
// or a horizontal stack on larger ones!
templateAreas={{
base: `"outfit"
"search"
"items"`,
lg: `"outfit search"
lg: `"outfit search"
"outfit items"`,
}}
templateRows={{
base: "minmax(100px, 1fr) auto minmax(300px, 1fr)",
lg: "auto 1fr",
}}
templateColumns={{
base: "100%",
lg: "50% 50%",
}}
height="100%"
width="100%"
>
<Box gridArea="outfit" backgroundColor="gray.900">
<OutfitPreview
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
<Box gridArea="search" boxShadow="sm">
<Box px="5" py="3">
<SearchToolbar
query={searchQuery}
queryRef={searchQueryRef}
onChange={setSearchQuery}
onMoveFocusDownToResults={(e) => {
if (firstSearchResultRef.current) {
firstSearchResultRef.current.focus();
e.preventDefault();
}
}}
}}
templateRows={{
base: "minmax(100px, 1fr) auto minmax(300px, 1fr)",
lg: "auto 1fr",
}}
templateColumns={{
base: "100%",
lg: "50% 50%",
}}
height="100%"
width="100%"
>
<Box gridArea="outfit" backgroundColor="gray.900">
<OutfitPreview
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Box>
{searchQuery ? (
<Box
gridArea="items"
position="relative"
overflow="auto"
key="search-panel"
ref={searchContainerRef}
>
<Box px="4" py="5">
<SearchPanel
<Box gridArea="search" boxShadow="sm">
<Box px="5" py="3">
<SearchToolbar
query={searchQuery}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
firstSearchResultRef={firstSearchResultRef}
onMoveFocusUpToQuery={(e) => {
if (searchQueryRef.current) {
searchQueryRef.current.focus();
queryRef={searchQueryRef}
onChange={setSearchQuery}
onMoveFocusDownToResults={(e) => {
if (firstSearchResultRef.current) {
firstSearchResultRef.current.focus();
e.preventDefault();
}
}}
/>
</Box>
</Box>
) : (
<Box
gridArea="items"
position="relative"
overflow="auto"
key="items-panel"
>
<Box px="5" py="5">
<ItemsPanel
loading={loading}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
{searchQuery ? (
<Box
gridArea="items"
position="relative"
overflow="auto"
key="search-panel"
ref={searchContainerRef}
>
<Box px="4" py="5">
<SearchPanel
query={searchQuery}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
firstSearchResultRef={firstSearchResultRef}
onMoveFocusUpToQuery={(e) => {
if (searchQueryRef.current) {
searchQueryRef.current.focus();
e.preventDefault();
}
}}
/>
</Box>
</Box>
</Box>
)}
</Grid>
</Box>
) : (
<Box
gridArea="items"
position="relative"
overflow="auto"
key="items-panel"
>
<Box px="5" py="5">
<ItemsPanel
loading={loading}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Box>
)}
</Grid>
</Box>
</>
);
}

20
yarn.lock
View file

@ -9628,6 +9628,11 @@ react-error-overlay@^6.0.7:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
react-fast-compare@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-focus-lock@^2.2.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"
@ -9640,6 +9645,16 @@ react-focus-lock@^2.2.1:
use-callback-ref "^1.2.1"
use-sidecar "^1.0.1"
react-helmet@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
integrity sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==
dependencies:
object-assign "^4.1.1"
prop-types "^15.7.2"
react-fast-compare "^2.0.4"
react-side-effect "^2.1.0"
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9705,6 +9720,11 @@ react-scripts@3.4.1:
optionalDependencies:
fsevents "2.1.2"
react-side-effect@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"