feat: enable page admin for maintainers

edmundhung · Nov 22, 2022 · 1a3109d · 1a3109d
1 parent b327bfe
commit 1a3109d
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 44 deletions.
diff --git a/app/components/ResourcesDetails.tsx b/app/components/ResourcesDetails.tsx
@@ -17,7 +17,7 @@ import FlashMessage from '~/components/FlashMessage';
 import type { User } from '~/types';
 import IconLink from '~/components/IconLink';
 import { platforms } from '~/config';
-import { isAdministrator } from '~/helpers';
+import { isMaintainer } from '~/helpers';
 import { useLists } from '~/hooks';
 
 interface ResourcesDetailsProps {
@@ -110,7 +110,7 @@ function ResourcesDetails({
 						{bookmarkCount >= 0 ? bookmarkCount : 0}
 					</label>
 				</bookmark.Form>
-				{isAdministrator(user?.profile.name) ? (
+				{isMaintainer(user?.profile.name) ? (
 					<div className="flex flex-row items-center">
 						<IconLink icon={backIcon} to={bookmarkURL} rotateIcon />
 					</div>

diff --git a/app/components/SidebarNavigation.tsx b/app/components/SidebarNavigation.tsx
@@ -32,7 +32,7 @@ import {
 import { getResourceURL, getSearchOptions, toggleSearchParams } from '~/search';
 import type { SearchOptions } from '~/types';
 import IconLink from '~/components/IconLink';
-import { isAdministrator, isMaintainer } from '~/helpers';
+import { isMaintainer } from '~/helpers';
 import type { GuideMetadata } from '../../worker/types';
 
 interface ExternalLinkProps {
@@ -192,15 +192,15 @@ function SidebarNavigation({
 								) : null
 							}
 						>
+							{isMaintainer(profile?.name) ? (
+								<MenuLink to="/admin">⌨ Admin</MenuLink>
+							) : null}
 							<SearchLink list="bookmarks">
 								<SvgIcon className="w-4 h-4" href={bookmarkIcon} /> Bookmarks
 							</SearchLink>
 							<SearchLink list="history">
 								<SvgIcon className="w-4 h-4" href={historyIcon} /> History
 							</SearchLink>
-							{isAdministrator(profile.name) ? (
-								<MenuLink to="/admin">⌨ Admin</MenuLink>
-							) : null}
 						</List>
 					) : null}
 					<List title="Menu">

diff --git a/app/helpers.ts b/app/helpers.ts
@@ -115,3 +115,13 @@ export async function requireAdministrator(context: AppLoadContext) {
 
 	return profile;
 }
+
+export async function requireMaintainer(context: AppLoadContext) {
+	const profile = await context.session.getUserProfile();
+
+	if (!profile || !isMaintainer(profile.name)) {
+		throw notFound();
+	}
+
+	return profile;
+}
diff --git a/app/routes/_layout.admin.index.tsx b/app/routes/_layout.admin.index.tsx
@@ -0,0 +1,9 @@
+import type { LoaderArgs } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
+import { requireMaintainer } from '~/helpers';
+
+export async function loader({ context }: LoaderArgs) {
+	await requireMaintainer(context);
+
+	return redirect('/admin/pages');
+}
diff --git a/app/routes/_layout.admin.pages.tsx b/app/routes/_layout.admin.pages.tsx
@@ -1,15 +1,15 @@
 import type { LoaderArgs, ActionArgs } from '@remix-run/cloudflare';
 import { json, redirect } from '@remix-run/cloudflare';
-import { Link, Form, useLoaderData, useLocation } from '@remix-run/react';
-import { requireAdministrator } from '~/helpers';
+import { Form, useLoaderData, useLocation } from '@remix-run/react';
+import { requireMaintainer } from '~/helpers';
 import { getSite } from '~/search';
 import type { PageMetadata } from '~/types';
 
 export async function action({ context, request }: ActionArgs) {
 	const { session, pageStore } = context;
 	const [formData] = await Promise.all([
 		request.formData(),
-		requireAdministrator(context),
+		requireMaintainer(context),
 	]);
 	const url = formData.get('url')?.toString();
 
@@ -30,11 +30,10 @@ export async function action({ context, request }: ActionArgs) {
 }
 
 export async function loader({ context }: LoaderArgs) {
-	const { pageStore } = context;
-
-	await requireAdministrator(context);
-
-	const entries = await pageStore.listPageMetadata();
+	const [entries] = await Promise.all([
+		context.pageStore.listPageMetadata(),
+		requireMaintainer(context),
+	]);
 
 	return json({
 		entries,
@@ -49,12 +48,6 @@ export default function ListUsers() {
 		<section className="px-2.5 pt-2">
 			<div className="flex flex-row gap-4">
 				<h3 className="pb-4">Pages ({entries.length})</h3>
-				<div>/</div>
-				<div>
-					<Link to="statistics" className="hover:underline">
-						Statistics
-					</Link>
-				</div>
 			</div>
 			<div>
 				<table className="w-full border-collapse">

diff --git a/app/routes/_layout.admin.resources.tsx b/app/routes/_layout.admin.resources.tsx
@@ -1,9 +1,15 @@
-import type { ActionArgs } from '@remix-run/cloudflare';
+import type { LoaderArgs, ActionArgs } from '@remix-run/cloudflare';
 import { json, redirect } from '@remix-run/cloudflare';
 import { useActionData } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import BackupForm from '~/components/BackupForm';
 
+export async function loader({ context }: LoaderArgs) {
+	await requireAdministrator(context);
+
+	return json({});
+}
+
 export async function action({ request, context }: ActionArgs) {
 	const { session, resourceStore } = context;
 	const [formData] = await Promise.all([

diff --git a/...routes/_layout.admin.pages.statistics.tsx → app/routes/_layout.admin.statistics.tsx b/...routes/_layout.admin.pages.statistics.tsx → app/routes/_layout.admin.statistics.tsx
@@ -1,9 +1,15 @@
-import type { ActionArgs } from '@remix-run/cloudflare';
+import type { LoaderArgs, ActionArgs } from '@remix-run/cloudflare';
 import { json, redirect } from '@remix-run/cloudflare';
 import { useActionData } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import BackupForm from '~/components/BackupForm';
 
+export async function loader({ context }: LoaderArgs) {
+	await requireAdministrator(context);
+
+	return json({});
+}
+
 export async function action({ request, context }: ActionArgs) {
 	const { session, pageStore } = context;
 	const [formData] = await Promise.all([

diff --git a/app/routes/_layout.admin.tsx b/app/routes/_layout.admin.tsx
@@ -1,23 +1,25 @@
 import type { LoaderArgs } from '@remix-run/cloudflare';
 import { json } from '@remix-run/cloudflare';
-import { Link, Outlet, useLoaderData, useLocation } from '@remix-run/react';
+import { Link, Outlet, useLocation } from '@remix-run/react';
 import { useMemo } from 'react';
 import menuIcon from '~/icons/menu.svg';
 import FlashMessage from '~/components/FlashMessage';
 import { PaneContainer, PaneHeader, PaneFooter, PaneContent } from '~/layout';
 import { toggleSearchParams } from '~/search';
 import IconLink from '~/components/IconLink';
-import { requireAdministrator } from '~/helpers';
+import { requireMaintainer, isAdministrator } from '~/helpers';
+import { useSessionData } from '~/hooks';
 
 export async function loader({ context }: LoaderArgs) {
-	await requireAdministrator(context);
+	await requireMaintainer(context);
 
 	return json({});
 }
 
 export default function Admin() {
-	const { message } = useLoaderData();
 	const location = useLocation();
+	const { profile, message } = useSessionData();
+
 	const toggleMenuURL = useMemo(
 		() => `?${toggleSearchParams(location.search, 'menu')}`,
 		[location.search],
@@ -28,21 +30,27 @@ export default function Admin() {
 			<PaneHeader>
 				<IconLink icon={menuIcon} to={toggleMenuURL} mobileOnly />
 				<div className="flex-1 leading-8 line-clamp-1">Administrator</div>
+				{isAdministrator(profile?.name) ? (
+					<div className="px-2.5 flex flex-row gap-4">
+						<Link to="pages" className="hover:underline">
+							Pages
+						</Link>
+						<span>/</span>
+						<Link to="users" className="hover:underline">
+							Users
+						</Link>
+						<span>/</span>
+						<Link to="resources" className="hover:underline">
+							Resources
+						</Link>
+						<span>/</span>
+						<Link to="statistics" className="hover:underline">
+							Statistics
+						</Link>
+					</div>
+				) : null}
 			</PaneHeader>
 			<PaneContent>
-				<div className="px-2.5 flex flex-row gap-4">
-					<Link to="pages" className="hover:underline">
-						Pages
-					</Link>
-					<span>/</span>
-					<Link to="users" className="hover:underline">
-						Users
-					</Link>
-					<span>/</span>
-					<Link to="resources" className="hover:underline">
-						Resources
-					</Link>
-				</div>
 				<Outlet />
 			</PaneContent>
 			<PaneFooter>

diff --git a/app/routes/_layout.admin.users.tsx b/app/routes/_layout.admin.users.tsx
@@ -5,11 +5,10 @@ import { requireAdministrator } from '~/helpers';
 import type { UserProfile } from '~/types';
 
 export async function loader({ context }: LoaderArgs) {
-	const { userStore } = context;
-
-	await requireAdministrator(context);
-
-	const users = await userStore.listUserProfiles();
+	const [users] = await Promise.all([
+		context.userStore.listUserProfiles(),
+		requireAdministrator(context),
+	]);
 
 	return json({
 		users,