Merge branch 'issues/149'

closes: #149

src/components/Expanded.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Expanded = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+export const ExpandedCenter = styled(Expanded)<{ gap?: number }>`
+  display: grid;
+  place-items: center;
+  place-content: center;
+  gap: ${({ gap }) => (gap != null ? `${gap * 4}px` : undefined)};
+`;

src/hooks/db/_esaDB.ts

@@ -6,6 +6,7 @@ import { type AnySchema } from "yup";
 import { type useTeam as _useTeam } from "@/hooks/teams";
 import { DB_VERSION, waitMs } from "@/lib/consts";
 import { $config } from "@/lib/stores/config";
+import { enableIgnoreResCacheTemporarily } from "@/lib/stores/teams";
 import { yPostData, type PostData } from "@/types/post-data/_struct";
 import { type Nullable } from "@/types/utils";
 
@@ -16,6 +17,7 @@ export function useEsaDB<T>(
     postName: string;
     schema: AnySchema<T>;
     atom: WritableAtom<Nullable<T>>;
+    initData: T;
   },
 ) {
   const { baseCategory } = useStore($config);
@@ -30,6 +32,8 @@ export function useEsaDB<T>(
   const category = `${baseCategory}/${config.postName}`;
 
   const init = async (): Promise<void> => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    using _ = enableIgnoreResCacheTemporarily();
     const postId = await searchPostId().catch(() => undefined);
 
     if (postId == null) {
@@ -61,7 +65,7 @@ export function useEsaDB<T>(
     const postData = {
       _name: "esachievement",
       _version: DB_VERSION,
-      data: undefined,
+      data: config.initData,
     } as const satisfies PostData<T>;
 
     return await __createNewPost({

src/hooks/db/achievements.ts

@@ -12,4 +12,5 @@ export const useAchievements = (useTeam: typeof _useTeam) =>
     postName: "achievements",
     schema: yAchievementsPostData,
     atom: $currentAchievements,
+    initData: [],
   });

src/hooks/db/unlocked-achievements.ts

@@ -12,4 +12,5 @@ export const useUnlockedAchievements = (useTeam: typeof _useTeam) =>
     postName: "unlockedAchievements",
     schema: yUnlockedAchievementsPostData,
     atom: $currentUnlockedAchievements,
+    initData: [],
   });

src/hooks/member.ts

@@ -3,7 +3,7 @@
 import { useStore } from "@nanostores/react";
 import { match } from "ts-pattern";
 import { A } from "@/lib/consts";
-import { esaClient } from "@/lib/services/esa";
+import { getEsaClient } from "@/lib/services/esa";
 import { $hasAuthenticated } from "@/lib/stores/auth";
 import { $selectedTeamName } from "@/lib/stores/teams";
 import { type InferResponseType } from "@/types/openapi";
@@ -18,7 +18,7 @@ export function useMember() {
   const fetchJoinedTeams = async (): Promise<
     InferResponseType<"/teams", "get">["teams"]
   > => {
-    const result = await esaClient.GET("/teams");
+    const result = await getEsaClient().GET("/teams");
     return await match(result)
       .with(A.Success, ({ data }) => data.teams)
       .otherwise(async ({ response }) => {
@@ -35,7 +35,7 @@ export function useMember() {
   const fetchCurrentMember = async (): Promise<
     InferResponseType<"/user", "get">
   > => {
-    const result = await esaClient.GET("/user");
+    const result = await getEsaClient().GET("/user");
     return await match(result)
       .with(A.Success, ({ data }) => data)
       .otherwise(async ({ response }) => {

src/hooks/teams.ts

@@ -1,7 +1,7 @@
 import { useStore } from "@nanostores/react";
 import { match } from "ts-pattern";
 import { A } from "@/lib/consts";
-import { esaClient } from "@/lib/services/esa";
+import { getEsaClient } from "@/lib/services/esa";
 import { $selectedTeamName } from "@/lib/stores/teams";
 import {
   type InferRequestBodyType,
@@ -35,15 +35,17 @@ export function useTeam() {
   const fetchAbout = async (): Promise<
     InferResponseType<"/teams/{team_name}", "get">
   > =>
-    await match(await esaClient.GET("/teams/{team_name}", paramsWithTeamName))
+    await match(
+      await getEsaClient().GET("/teams/{team_name}", paramsWithTeamName),
+    )
       .with(A.Success, ({ data }) => data)
       .otherwise(handleError);
 
   const fetchStats = async (): Promise<
     InferResponseType<"/teams/{team_name}/stats", "get">
   > =>
     await match(
-      await esaClient.GET("/teams/{team_name}/stats", paramsWithTeamName),
+      await getEsaClient().GET("/teams/{team_name}/stats", paramsWithTeamName),
     )
       .with(A.Success, ({ data }) => data)
       .otherwise(handleError);
@@ -52,7 +54,10 @@ export function useTeam() {
     InferResponseType<"/teams/{team_name}/members", "get">["members"]
   > =>
     await match(
-      await esaClient.GET("/teams/{team_name}/members", paramsWithTeamName),
+      await getEsaClient().GET(
+        "/teams/{team_name}/members",
+        paramsWithTeamName,
+      ),
     )
       .with(A.Success, ({ data }) => data.members)
       .otherwise(handleError);
@@ -61,7 +66,7 @@ export function useTeam() {
     postBody: InferRequestBodyType<"/teams/{team_name}/posts", "post">["post"],
   ): Promise<InferResponseType<"/teams/{team_name}/posts", "post", 201>> =>
     await match(
-      await esaClient.POST("/teams/{team_name}/posts", {
+      await getEsaClient().POST("/teams/{team_name}/posts", {
         ...paramsWithTeamName,
         body: {
           post: postBody,
@@ -75,7 +80,7 @@ export function useTeam() {
     category: string,
   ): Promise<InferResponseType<"/teams/{team_name}/posts", "get">["posts"]> =>
     await match(
-      await esaClient.GET("/teams/{team_name}/posts", {
+      await getEsaClient().GET("/teams/{team_name}/posts", {
         params: {
           ...paramsWithTeamName.params,
           query: {
@@ -93,7 +98,7 @@ export function useTeam() {
     InferResponseType<"/teams/{team_name}/posts/{post_number}", "get">
   > =>
     await match(
-      await esaClient.GET("/teams/{team_name}/posts/{post_number}", {
+      await getEsaClient().GET("/teams/{team_name}/posts/{post_number}", {
         params: {
           path: {
             ...paramsWithTeamName.params.path,
@@ -115,7 +120,7 @@ export function useTeam() {
     InferResponseType<"/teams/{team_name}/posts/{post_number}", "patch">
   > =>
     await match(
-      await esaClient.PATCH("/teams/{team_name}/posts/{post_number}", {
+      await getEsaClient().PATCH("/teams/{team_name}/posts/{post_number}", {
         params: {
           path: {
             ...paramsWithTeamName.params.path,
@@ -130,7 +135,7 @@ export function useTeam() {
 
   const deletePost = async (postNumber: number): Promise<void> => {
     await match(
-      await esaClient.DELETE("/teams/{team_name}/posts/{post_number}", {
+      await getEsaClient().DELETE("/teams/{team_name}/posts/{post_number}", {
         params: {
           path: {
             ...paramsWithTeamName.params.path,
@@ -147,7 +152,7 @@ export function useTeam() {
     InferResponseType<"/teams/{team_name}/emojis", "get">
   > =>
     await match(
-      await esaClient.GET("/teams/{team_name}/emojis", paramsWithTeamName),
+      await getEsaClient().GET("/teams/{team_name}/emojis", paramsWithTeamName),
     )
       .with(A.Success, ({ data }) => data)
       .otherwise(handleError);

src/lib/services/esa.ts

@@ -1,7 +1,8 @@
-import createClient from "openapi-fetch";
+import createClient, { type MiddlewareRequest } from "openapi-fetch";
 import { type paths } from "./esa.gen";
 import { getEnv } from "@/lib/consts";
 import { $accessTokenData } from "@/lib/stores/auth";
+import { $shouldIgnoreResCache } from "@/lib/stores/teams";
 import { type AccessTokenData } from "@/types/auth";
 
 export function getAuthorizePageUrl(): string {
@@ -35,16 +36,31 @@ export async function requestAccessTokenData(
   return await res.json();
 }
 
-export const esaClient = createClient<paths>({
+function processRequest(req: MiddlewareRequest): MiddlewareRequest {
+  const token = $accessTokenData.get();
+  if (token == null) throw new Error("Access token has not been set");
+
+  req.headers.set("Authorization", `Bearer ${token.access_token}`);
+  return req;
+}
+
+const esaClient = createClient<paths>({
   baseUrl: "/api",
 });
 
 esaClient.use({
-  onRequest: async (req) => {
-    const token = $accessTokenData.get();
-    if (token == null) throw new Error("Access token has not been set");
+  onRequest: processRequest,
+});
 
-    req.headers.set("Authorization", `Bearer ${token.access_token}`);
-    return req;
-  },
+const esaClientUnCached = createClient<paths>({
+  baseUrl: "/api",
+  cache: "no-cache",
 });
+
+esaClientUnCached.use({
+  onRequest: processRequest,
+});
+
+export function getEsaClient(): typeof esaClient {
+  return $shouldIgnoreResCache.get() ? esaClientUnCached : esaClient;
+}

src/lib/stores/teams.ts

@@ -1,7 +1,25 @@
+/* eslint-disable no-console */
+
 import { persistentAtom } from "@nanostores/persistent";
+import { atom } from "nanostores";
 import { getLocalStorageKey } from "@/lib/consts";
 
 export const $selectedTeamName = persistentAtom<string | undefined>(
   getLocalStorageKey("selectedTeamName"),
   undefined,
 );
+
+export const $shouldIgnoreResCache = atom<boolean>(false);
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function enableIgnoreResCacheTemporarily() {
+  console.warn("Ignore response cache temporarily");
+  $shouldIgnoreResCache.set(true);
+
+  return {
+    [Symbol.dispose]: () => {
+      console.warn("Stop ignoring response cache");
+      $shouldIgnoreResCache.set(false);
+    },
+  };
+}