Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-03-21 18:04:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Prompt user to log in if accessing plus logged out

Browse Source
This commit is contained in:
Kalle 2022-05-24 21:14:42 +03:00
parent 92db2f8976
commit fdbac9082c
5 changed files with 57 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/Catcher.tsx Normal file
View File

@ -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 (
<div className="four-zero-one__container">
<h2 className="four-zero-one__status-header">401 Unauthorized</h2>
{user ? (
<p>
If you need assistance you can ask for help on{" "}
<a className="four-zero-one__link" href={SENDOU_INK_DISCORD_URL}>
our Discord
</a>
</p>
) : (
<form action={LOG_IN_URL} method="post">
<p className="button-text-paragraph">
You should try{" "}
<Button type="submit" variant="minimal">
logging in
</Button>
</p>
</form>
)}
</div>
);
}
}

19
app/components/layout/index.tsx
View File

@ -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({
<>
<header className="layout__header">
<div className="layout__header__search-container">
{/* xxx: replace with admin page */}
<SearchInput />
</div>
<div className="layout__header__title-container">{pageTitle}</div>
@ -59,7 +55,10 @@ export const Layout = React.memo(function Layout({
function ScreenWidthSensitiveMenu({
menuOpen,
setMenuOpen,
}: Pick<LayoutProps, "menuOpen" | "setMenuOpen">) {
}: {
menuOpen: boolean;
setMenuOpen: (open: boolean) => void;
}) {
const { width } = useWindowSize();
const closeMenu = () => setMenuOpen(false);

3
app/root.tsx
View File

@ -59,7 +59,6 @@ export const loader: LoaderFunction = async ({ request }) => {
};
export default function App() {
const [menuOpen, setMenuOpen] = React.useState(false);
return (
<html lang="en">
<head>
@ -68,7 +67,7 @@ export default function App() {
</head>
<body>
<React.StrictMode>
<Layout menuOpen={menuOpen} setMenuOpen={setMenuOpen}>
<Layout>
<Outlet />
</Layout>
</React.StrictMode>

3
app/routes/plus/index.tsx
View File

@ -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() {
</div>
);
}
export const CatchBoundary = Catcher;

9
app/styles/common.css
View File

@ -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;