diff --git a/app/components/Catcher.tsx b/app/components/Catcher.tsx new file mode 100644 index 000000000..e48e1e26b --- /dev/null +++ b/app/components/Catcher.tsx @@ -0,0 +1,35 @@ +import { useCatch } from "@remix-run/react"; +import { Button } from "~/components/Button"; +import { useUser } from "~/hooks/useUser"; +import { LOG_IN_URL, SENDOU_INK_DISCORD_URL } from "~/utils/urls"; + +export function Catcher() { + const caught = useCatch(); + const user = useUser(); + + switch (caught.status) { + case 401: + return ( +
+

401 Unauthorized

+ {user ? ( +

+ If you need assistance you can ask for help on{" "} + + our Discord + +

+ ) : ( +
+

+ You should try{" "} + +

+
+ )} +
+ ); + } +} diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index c5045d781..d4edb85ff 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -7,17 +7,12 @@ import { MobileMenu } from "./MobileMenu"; import { SearchInput } from "./SearchInput"; import { UserItem } from "./UserItem"; -interface LayoutProps { - children: React.ReactNode; - menuOpen: boolean; - setMenuOpen: (open: boolean) => void; -} - export const Layout = React.memo(function Layout({ children, - menuOpen, - setMenuOpen, -}: LayoutProps) { +}: { + children: React.ReactNode; +}) { + const [menuOpen, setMenuOpen] = React.useState(false); const matches = useMatches(); const pageTitleKey = "pageTitle"; @@ -39,6 +34,7 @@ export const Layout = React.memo(function Layout({ <>
+ {/* xxx: replace with admin page */}
{pageTitle}
@@ -59,7 +55,10 @@ export const Layout = React.memo(function Layout({ function ScreenWidthSensitiveMenu({ menuOpen, setMenuOpen, -}: Pick) { +}: { + menuOpen: boolean; + setMenuOpen: (open: boolean) => void; +}) { const { width } = useWindowSize(); const closeMenu = () => setMenuOpen(false); diff --git a/app/root.tsx b/app/root.tsx index cd6bfcb0d..ab9dc8815 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -59,7 +59,6 @@ export const loader: LoaderFunction = async ({ request }) => { }; export default function App() { - const [menuOpen, setMenuOpen] = React.useState(false); return ( @@ -68,7 +67,7 @@ export default function App() { - + diff --git a/app/routes/plus/index.tsx b/app/routes/plus/index.tsx index 9690a23b9..f112ac431 100644 --- a/app/routes/plus/index.tsx +++ b/app/routes/plus/index.tsx @@ -7,6 +7,7 @@ import type * as plusSuggestions from "~/db/models/plusSuggestions.server"; import { useUser } from "~/hooks/useUser"; import { requireUser } from "~/utils/remix"; import styles from "~/styles/plus.css"; +import { Catcher } from "~/components/Catcher"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: styles }]; @@ -71,3 +72,5 @@ function SuggestedForInfo() { ); } + +export const CatchBoundary = Catcher; diff --git a/app/styles/common.css b/app/styles/common.css index 625628569..e984314f7 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -1,3 +1,12 @@ +.button-text-paragraph { + display: flex; + gap: var(--s-1); +} + +.button-text-paragraph > button { + font-size: var(--fonts-md); +} + .sub-nav__container { display: flex; flex-wrap: wrap;