diff --git a/src/app/HomePage.js b/src/app/HomePage.js index 99cbc6b..e6a9629 100644 --- a/src/app/HomePage.js +++ b/src/app/HomePage.js @@ -29,6 +29,7 @@ import { ErrorMessage, Heading1, Heading2, + TestErrorSender, useCommonStyles, useLocalStorage, usePageTitle, @@ -51,12 +52,6 @@ function HomePage() { const [previewState, setPreviewState] = React.useState(null); - React.useEffect(() => { - if (window.location.href.includes("send-test-error-for-sentry")) { - throw new Error("Test error for Sentry"); - } - }); - return ( Maybe we'll rename it to Impress 2021โ€ฆ or maybe not! ๐Ÿค” + ); } diff --git a/src/app/PageLayout.js b/src/app/PageLayout.js index 291b7d0..3e3bbc7 100644 --- a/src/app/PageLayout.js +++ b/src/app/PageLayout.js @@ -1,11 +1,9 @@ import React from "react"; -import { Box, Flex, Grid, Link } from "@chakra-ui/react"; +import { Box } from "@chakra-ui/react"; import { loadable } from "./util"; import * as Sentry from "@sentry/react"; -import { WarningIcon } from "@chakra-ui/icons"; -import ErrorGrundoImg from "./images/error-grundo.png"; -import ErrorGrundoImg2x from "./images/error-grundo@2x.png"; +import { MajorErrorMessage } from "./util"; const GlobalHeader = loadable(() => import("./GlobalHeader")); const GlobalFooter = loadable(() => import("./GlobalFooter")); @@ -41,49 +39,4 @@ function PageLayout({ children }) { ); } -function MajorErrorMessage({ error }) { - return ( - - - - - - - Ah dang, I broke it ๐Ÿ˜– - - - There was an error displaying this page. I'll get info about it - automatically, but you can tell me more at{" "} - - matchu@openneo.net - - ! - - - - "{error.message}" - - - - ); -} - export default PageLayout; diff --git a/src/app/WardrobePage/ItemsAndSearchPanels.js b/src/app/WardrobePage/ItemsAndSearchPanels.js index 0b3657c..9eeb9af 100644 --- a/src/app/WardrobePage/ItemsAndSearchPanels.js +++ b/src/app/WardrobePage/ItemsAndSearchPanels.js @@ -1,5 +1,6 @@ import React from "react"; import { Box, Flex } from "@chakra-ui/react"; +import * as Sentry from "@sentry/react"; import ItemsPanel from "./ItemsPanel"; import SearchToolbar, { @@ -7,6 +8,7 @@ import SearchToolbar, { searchQueryIsEmpty, } from "./SearchToolbar"; import SearchPanel from "./SearchPanel"; +import { MajorErrorMessage, TestErrorSender } from "../util"; /** * ItemsAndSearchPanels manages the shared layout and state for: @@ -21,60 +23,68 @@ import SearchPanel from "./SearchPanel"; * performing some wiring to help them interact with each other via simple * state and refs. */ -function ItemsAndSearchPanels({ loading, outfitState, outfitSaving, dispatchToOutfit }) { +function ItemsAndSearchPanels({ + loading, + outfitState, + outfitSaving, + dispatchToOutfit, +}) { const [searchQuery, setSearchQuery] = React.useState(emptySearchQuery); const scrollContainerRef = React.useRef(); const searchQueryRef = React.useRef(); const firstSearchResultRef = React.useRef(); return ( - - - - - {!searchQueryIsEmpty(searchQuery) ? ( - - - - + + + + + - ) : ( - - - + {!searchQueryIsEmpty(searchQuery) ? ( + + + + - - )} - + ) : ( + + + + + + )} + + ); } diff --git a/src/app/WardrobePage/WardrobePageLayout.js b/src/app/WardrobePage/WardrobePageLayout.js index 65523ba..d06afad 100644 --- a/src/app/WardrobePage/WardrobePageLayout.js +++ b/src/app/WardrobePage/WardrobePageLayout.js @@ -32,7 +32,12 @@ function WardrobePageLayout({ previewAndControls, itemsAndSearch }) { height="100%" width="100%" > - + {previewAndControls} diff --git a/src/app/WardrobePage/WardrobePreviewAndControls.js b/src/app/WardrobePage/WardrobePreviewAndControls.js index a304dba..0190242 100644 --- a/src/app/WardrobePage/WardrobePreviewAndControls.js +++ b/src/app/WardrobePage/WardrobePreviewAndControls.js @@ -2,13 +2,14 @@ import React from "react"; import { Box, DarkMode } from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; +import * as Sentry from "@sentry/react"; import OutfitThumbnail, { outfitThumbnailFragment, getOutfitThumbnailRenderSize, } from "../components/OutfitThumbnail"; import { useOutfitPreview } from "../components/OutfitPreview"; -import { loadable } from "../util"; +import { loadable, MajorErrorMessage, TestErrorSender } from "../util"; const OutfitControls = loadable(() => import("./OutfitControls")); @@ -34,7 +35,8 @@ function WardrobePreviewAndControls({ }); return ( - <> + + {preview} @@ -46,7 +48,7 @@ function WardrobePreviewAndControls({ appearance={appearance} /> - + ); } diff --git a/src/app/util.js b/src/app/util.js index cc1c4ce..d9898b3 100644 --- a/src/app/util.js +++ b/src/app/util.js @@ -1,8 +1,19 @@ import React from "react"; -import { Box, Heading, useColorModeValue } from "@chakra-ui/react"; +import { + Box, + Flex, + Grid, + Heading, + Link, + useColorModeValue, +} from "@chakra-ui/react"; import loadableLibrary from "@loadable/component"; import * as Sentry from "@sentry/react"; +import ErrorGrundoImg from "./images/error-grundo.png"; +import ErrorGrundoImg2x from "./images/error-grundo@2x.png"; +import { WarningIcon } from "@chakra-ui/icons"; + /** * Delay hides its content at first, then shows it after the given delay. * @@ -375,3 +386,59 @@ export function logAndCapture(e) { console.error(e); Sentry.captureException(e); } + +export function MajorErrorMessage({ error }) { + return ( + + + + + + + Ah dang, I broke it ๐Ÿ˜– + + + There was an error displaying this page. I'll get info about it + automatically, but you can tell me more at{" "} + + matchu@openneo.net + + ! + + + + "{error.message}" + + + + ); +} + +export function TestErrorSender() { + React.useEffect(() => { + if (window.location.href.includes("send-test-error-for-sentry")) { + throw new Error("Test error for Sentry"); + } + }); + + return null; +}