feat: loading flash message at the root only

edmundhung · May 23, 2022 · 5b1707f · 5b1707f
1 parent 31b5c12
commit 5b1707f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 71 deletions.
diff --git a/app/hooks.ts b/app/hooks.ts
@@ -1,6 +1,12 @@
 import { useMatches } from 'remix';
 import { GuideMetadata } from '~/types';
 
+export function useFlashMessage(): string | null {
+	const [rootMatch] = useMatches();
+
+	return rootMatch?.data.message ?? null;
+}
+
 export function useLists(): Required<GuideMetadata>['lists'] {
 	const [rootMatch] = useMatches();
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -37,25 +37,27 @@ export let meta: MetaFunction = () => {
 
 export let loader: LoaderFunction = async ({ context }) => {
 	const { session, resourceStore } = context as Context;
-	const [profile, guide] = await Promise.all([
+	const [profile, [message, headers], guide] = await Promise.all([
 		session.isAuthenticated(),
+		session.getFlashMessage(),
 		resourceStore.getData(),
 	]);
 
-	return json({
-		profile,
-		lists: guide.metadata.lists,
-		version: process.env.VERSION,
-	});
+	return json(
+		{
+			profile,
+			message,
+			lists: guide.metadata.lists,
+			version: process.env.VERSION,
+		},
+		{
+			headers,
+		},
+	);
 };
 
-/**
- * Not sure if this is a bad idea or not to minimise requests
- * But the only time this data change is when user login / logout
- * Which trigger a full page reload at the moment
- */
 export const unstable_shouldReload: ShouldReloadFunction = ({ submission }) => {
-	return typeof submission !== 'undefined';
+	return submission?.formData.get('type') !== 'view';
 };
 
 function Document({

diff --git a/app/routes/$guide.$list/index.tsx b/app/routes/$guide.$list/index.tsx
@@ -15,6 +15,7 @@ import { getSuggestions, patchResource } from '~/resources';
 import { getSearchOptions, getTitleBySearchOptions } from '~/search';
 import type { Context, Resource, SearchOptions, User } from '~/types';
 import BookmarkDetails from '~/components/BookmarkDetails';
+import { useFlashMessage } from '~/hooks';
 
 interface LoaderData {
 	resource: Resource;
@@ -142,22 +143,13 @@ export let loader: LoaderFunction = async ({ context, request }) => {
 		throw notFound();
 	}
 
-	const [user, [message, setCookieHeader]] = await Promise.all([
-		profile?.id ? userStore.getUser(profile.id) : null,
-		session.getFlashMessage(),
-	]);
+	const user = profile?.id ? await userStore.getUser(profile.id) : null;
 
-	return json(
-		{
-			user,
-			message,
-			resource: user ? patchResource(resource, user) : resource,
-			suggestions: getSuggestions(list, resource),
-		},
-		{
-			headers: setCookieHeader,
-		},
-	);
+	return json({
+		user,
+		resource: user ? patchResource(resource, user) : resource,
+		suggestions: getSuggestions(list, resource),
+	});
 };
 
 export const unstable_shouldReload: ShouldReloadFunction = ({
@@ -178,7 +170,8 @@ export const unstable_shouldReload: ShouldReloadFunction = ({
 };
 
 export default function UserProfile() {
-	const { resource, message, user, suggestions } = useLoaderData<LoaderData>();
+	const { resource, user, suggestions } = useLoaderData<LoaderData>();
+	const message = useFlashMessage();
 	const location = useLocation();
 	const [showBookmark, action] = useMemo(() => {
 		const searchParams = new URLSearchParams(location.search);

diff --git a/app/routes/$guide/index.tsx b/app/routes/$guide/index.tsx
@@ -15,6 +15,7 @@ import { getSuggestions, patchResource } from '~/resources';
 import { getSearchOptions, getTitleBySearchOptions } from '~/search';
 import type { Context, Resource, SearchOptions, User } from '~/types';
 import BookmarkDetails from '~/components/BookmarkDetails';
+import { useFlashMessage } from '~/hooks';
 
 interface LoaderData {
 	resource: Resource;
@@ -142,22 +143,13 @@ export let loader: LoaderFunction = async ({ context, request }) => {
 		throw notFound();
 	}
 
-	const [user, [message, setCookieHeader]] = await Promise.all([
-		profile?.id ? userStore.getUser(profile.id) : null,
-		session.getFlashMessage(),
-	]);
+	const user = profile?.id ? await userStore.getUser(profile.id) : null;
 
-	return json(
-		{
-			user,
-			message,
-			resource: user ? patchResource(resource, user) : resource,
-			suggestions: getSuggestions(list, resource),
-		},
-		{
-			headers: setCookieHeader,
-		},
-	);
+	return json({
+		user,
+		resource: user ? patchResource(resource, user) : resource,
+		suggestions: getSuggestions(list, resource),
+	});
 };
 
 export const unstable_shouldReload: ShouldReloadFunction = ({
@@ -178,7 +170,8 @@ export const unstable_shouldReload: ShouldReloadFunction = ({
 };
 
 export default function UserProfile() {
-	const { resource, message, user, suggestions } = useLoaderData<LoaderData>();
+	const { resource, user, suggestions } = useLoaderData<LoaderData>();
+	const message = useFlashMessage();
 	const location = useLocation();
 	const [showBookmark, action] = useMemo(() => {
 		const searchParams = new URLSearchParams(location.search);

diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx
@@ -1,5 +1,5 @@
 import type { LoaderFunction } from 'remix';
-import { Outlet, json, useLoaderData, useLocation } from 'remix';
+import { Outlet, useLoaderData, useLocation } from 'remix';
 import { useMemo } from 'react';
 import menuIcon from '~/icons/menu.svg';
 import FlashMessage from '~/components/FlashMessage';
@@ -16,15 +16,6 @@ export let loader: LoaderFunction = async ({ context }) => {
 	if (!isAdministrator(profile?.name)) {
 		throw notFound();
 	}
-
-	const [message, setCookieHeader] = await session.getFlashMessage();
-
-	return json(
-		{ message },
-		{
-			headers: setCookieHeader,
-		},
-	);
 };
 
 export default function Admin() {

diff --git a/app/routes/submit.tsx b/app/routes/submit.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunction, MetaFunction, ActionFunction } from 'remix';
-import { Form, redirect, json, useLoaderData, useLocation } from 'remix';
+import type { MetaFunction, ActionFunction } from 'remix';
+import { Form, redirect, useLocation } from 'remix';
 import { useMemo } from 'react';
 import menuIcon from '~/icons/menu.svg';
 import FlashMessage from '~/components/FlashMessage';
@@ -8,6 +8,7 @@ import { Context } from '~/types';
 import { formatMeta, isMaintainer } from '~/helpers';
 import { toggleSearchParams } from '~/search';
 import IconLink from '~/components/IconLink';
+import { useFlashMessage } from '~/hooks';
 
 export let meta: MetaFunction = () => {
 	return formatMeta({
@@ -113,22 +114,8 @@ export let action: ActionFunction = async ({ request, context }) => {
 	}
 };
 
-export let loader: LoaderFunction = async ({ context }) => {
-	const { session } = context as Context;
-	const [message, setCookieHeader] = await session.getFlashMessage();
-
-	return json(
-		{
-			message,
-		},
-		{
-			headers: setCookieHeader,
-		},
-	);
-};
-
 export default function Submit() {
-	const { message } = useLoaderData();
+	const message = useFlashMessage();
 	const location = useLocation();
 	const toggleMenuURL = useMemo(
 		() => `?${toggleSearchParams(location.search, 'menu')}`,