Fix faulty update to template (#60)

* fix(database): perform update check when getting api call from relevant functions * test(api/unit): test util function `isMoreThanOrEqualOneWeek` * cache(web): remove `localforage` in favor of trpc cache * feat(web/cache): use trpc api and app cache * fix(api): check more than one week for last updated time instead of last committed time * refactor(pages/templates): remove unnecessary array depedency * fix(api/database): return proper condition to determine when to update database * fix(web): postfix `test-integration` with `copy-env-testing` in Make
GervinFung · Jun 25, 2024 · 9939cd2 · 9939cd2
1 parent cc52fe4
commit 9939cd2
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 245 deletions.
diff --git a/apps/web/Makefile b/apps/web/Makefile
@@ -123,7 +123,7 @@ test-type:
 test-unit:
 	pnpm vitest test/unit/**/**.test.ts $(arguments)
 
-test-integration:
+test-integration: copy-env-testing
 	make test-type path="integration" arguments="$(arguments)"
 
 test-snapshot:

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -31,7 +31,6 @@
 		"hex-rgb": "^5.0.0",
 		"iwanthue": "^2.0.0",
 		"jszip": "^3.10.1",
-		"localforage": "^1.10.0",
 		"next": "^14.2.3",
 		"next-seo": "^6.5.0",
 		"react": "^18.3.1",

diff --git a/apps/web/pages/api/trpc/[trpc].ts b/apps/web/pages/api/trpc/[trpc].ts
@@ -7,6 +7,20 @@ import Routes, { createContext } from '../../../src/api/routes/instance';
 const context = createNextApiHandler({
 	createContext,
 	router: Routes.instance().internal(),
+	responseMeta: (options) => {
+		if (options.errors.length) {
+			return {};
+		}
+
+		const oneDay = 60 * 60 * 24;
+		const oneHour = 60 * 60;
+
+		return {
+			headers: {
+				'cache-control': `s-maxage=${oneDay}, stale-while-revalidate=${oneHour}`,
+			},
+		};
+	},
 });
 
 export { createContext };

diff --git a/apps/web/pages/templates/index.tsx b/apps/web/pages/templates/index.tsx
@@ -26,8 +26,6 @@ import styled from '@emotion/styled';
 
 import { parse, object, array, string, transform, nullable } from 'valibot';
 
-import localForage from 'localforage';
-
 import Fuse from 'fuse.js';
 
 import {
@@ -52,7 +50,6 @@ import {
 	combineTemplates,
 	generateContrastingColor,
 } from '../../src/web/util/generator';
-import { singleFlowParser } from '../../src/common/parser';
 
 type Template = Templates[number];
 
@@ -289,85 +286,6 @@ const TemplatesPreview = (
 	);
 };
 
-class TemplatesCache {
-	constructor(
-		private readonly keys: Readonly<{
-			templates: string;
-		}>
-	) {}
-
-	readonly updateTemplates = async (
-		props: ReturnType<typeof useNotification>['updateState']
-	) => {
-		const templates = await this.getOptionalTemplates();
-
-		return templates.match({
-			none: this.setAndGetTemplates(props),
-			some: async () => {
-				return trpcClient.templateBatch.shouldUpdate
-					.query()
-					.then(async (result) => {
-						const func =
-							result.hadSucceed && result.data
-								? this.setAndGetTemplates(props)
-								: this.getTemplates;
-
-						return func();
-					});
-			},
-		});
-	};
-
-	private readonly setAndGetTemplates = (
-		props: ReturnType<typeof useNotification>['updateState']
-	) => {
-		return async () => {
-			props.loading();
-
-			return trpcClient.template.findAllTemplates
-				.query()
-				.then((result) => {
-					if (!result.hadSucceed) {
-						props.failed();
-					} else {
-						props.succeed();
-						this.setTemplates(result.data);
-					}
-
-					return result;
-				});
-		};
-	};
-
-	private readonly setTemplates = async (templates: Templates) => {
-		return localForage.setItem(this.keys.templates, templates);
-	};
-
-	private readonly getTemplates = async () => {
-		return this.getOptionalTemplates().then((templates) => {
-			return templates
-				.map((templates) => {
-					return {
-						hadSucceed: true,
-						data: templates,
-					} as const;
-				})
-				.unwrapOrElse(() => {
-					return {
-						hadSucceed: false,
-						reason: new Error(`Templates should be defined`),
-					} as const;
-				});
-		});
-	};
-
-	private readonly getOptionalTemplates = async () => {
-		return localForage
-			.getItem(this.keys.templates)
-			.then(singleFlowParser(schemas.cacheOrdinaryTemplates));
-	};
-}
-
 const QuerySection = (
 	props: DeepReadonly<{
 		templates: {
@@ -495,16 +413,14 @@ const useNotification = () => {
 	}, [type]);
 
 	return {
-		updateState: {
-			failed: () => {
-				setType('failed');
-			},
-			succeed: () => {
-				setType('succeed');
-			},
-			loading: () => {
-				setType('loading');
-			},
+		failed: () => {
+			setType('failed');
+		},
+		succeed: () => {
+			setType('succeed');
+		},
+		loading: () => {
+			setType('loading');
 		},
 	};
 };
@@ -514,10 +430,6 @@ const Templates = () => {
 
 	const router = useRouter();
 
-	const cache = new TemplatesCache({
-		templates: 'templates',
-	});
-
 	const names = decodeURIComponent(
 		parse(schemas.names, router.query.names ?? '')
 	)
@@ -535,8 +447,19 @@ const Templates = () => {
 	});
 
 	React.useEffect(() => {
-		cache
-			.updateTemplates(notification.updateState)
+		notification.loading();
+
+		trpcClient.template.findAllTemplates
+			.query()
+			.then((result) => {
+				if (!result.hadSucceed) {
+					notification.failed();
+				} else {
+					notification.succeed();
+				}
+
+				return result;
+			})
 			.then((templates) => {
 				if (templates.hadSucceed) {
 					return templates.data;
@@ -545,7 +468,7 @@ const Templates = () => {
 				throw templates.reason;
 			})
 			.then(setTemplate);
-	}, [templates.length]);
+	}, []);
 
 	return (
 		<Layout title="Templates">