CyberAgentHack · junseinagao · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/.github/workflows/create_heroku_review_app.yaml b/.github/workflows/create_heroku_review_app.yaml
@@ -1,13 +1,40 @@
 name: Review App
 on:
-  pull_request_target:
-    types: [opened]
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   create-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - name: Get PR Number
+        id: get_pr_number
+        run: echo "::set-output name=pr_number::${{ github.event.pull_request.number }}"
+
+      - name: Check if PR Number is greater than 140
+        id: set_step_id
+        run: |
+          pr_number=${{ steps.get_pr_number.outputs.pr_number }}
+          if [ $pr_number -gt 140 ]; then
+            echo "::set-output name=step_id::true"
+          else
+            echo "::set-output name=step_id::false"
+          fi
+
+      - name: Display step_id
+        run: echo "Step ID is ${{ steps.set_step_id.outputs.step_id }}"
+
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
+        if: ${{ steps.set_step_id.outputs.step_id == 'true' }}
+        with:
+          action: destroy
+        env:
+          HEROKU_API_TOKEN: ${{ secrets.HEROKU_API_TOKEN }}
+          HEROKU_PIPELINE_ID: ${{ secrets.HEROKU_PIPELINE_ID }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
+        if: ${{ steps.set_step_id.outputs.step_id == 'true' }}
         with:
           action: create
         env:

diff --git a/.github/workflows/destroy_heroku_review_app.yaml b/.github/workflows/destroy_heroku_review_app.yaml
@@ -7,7 +7,7 @@ jobs:
   destroy-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: destroy
         env:

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "test": "wireit"
   },
   "dependencies": {
-    "wireit": "0.14.9"
+    "wireit": "0.14.11"
   },
   "devDependencies": {
     "@wsh-2025/configs": "workspace:*"
@@ -58,5 +58,8 @@
         "./workspaces/test:test"
       ]
     }
+  },
+  "volta": {
+    "node": "22.14.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -0,0 +1,41 @@
+// workspaces/client/public/service-worker.js
+const CACHE_NAME = 'arema-streams-cache-v1';
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((name) => {
+          if (name !== CACHE_NAME) {
+            return caches.delete(name);
+          }
+        }),
+      );
+    }),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const requestUrl = new URL(event.request.url);
+  // /streams/ に対するリクエストのみキャッシュ対象とする
+  if (requestUrl.pathname.startsWith('/streams/')) {
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request).then((networkResponse) => {
+          const responseClone = networkResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseClone);
+          });
+          return networkResponse;
+        });
+      }),
+    );
+  }
+});
diff --git a/workspaces/client/src/app/Document.tsx b/workspaces/client/src/app/Document.tsx
@@ -18,7 +18,7 @@ export const Document = () => {
         <script src="/public/main.js"></script>
       </head>
       <body className="size-full bg-[#000000] text-[#ffffff]">
-        <Suspense>
+        <Suspense fallback={<div>Loading...</div>}>
           <Layout>
             <Outlet />
           </Layout>

diff --git a/workspaces/client/src/app/createRoutes.tsx b/workspaces/client/src/app/createRoutes.tsx
@@ -1,7 +1,7 @@
-import lazy from 'p-min-delay';
+import React from 'react';
 import { RouteObject } from 'react-router';
 
-import { Document, prefetch } from '@wsh-2025/client/src/app/Document';
+import { Document, prefetch as documentPrefetch } from '@wsh-2025/client/src/app/Document';
 import { createStore } from '@wsh-2025/client/src/app/createStore';
 
 export function createRoutes(store: ReturnType<typeof createStore>): RouteObject[] {
@@ -10,99 +10,85 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
       children: [
         {
           index: true,
-          async lazy() {
-            const { HomePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/home/components/HomePage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/home/components/HomePage'
             );
             return {
-              Component: HomePage,
-              async loader() {
-                return await prefetch(store);
-              },
+              Component: module.HomePage,
+              loader: async () => await module.prefetch(store),
             };
           },
         },
         {
-          async lazy() {
-            const { EpisodePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/episode/components/EpisodePage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/episode/components/EpisodePage'
             );
             return {
-              Component: EpisodePage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              Component: module.EpisodePage,
+              loader: async ({ params }) => await module.prefetch(store, params),
             };
           },
           path: '/episodes/:episodeId',
         },
         {
-          async lazy() {
-            const { prefetch, ProgramPage } = await lazy(
-              import('@wsh-2025/client/src/pages/program/components/ProgramPage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/program/components/ProgramPage'
             );
             return {
-              Component: ProgramPage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              Component: module.ProgramPage,
+              loader: async ({ params }) => await module.prefetch(store, params),
             };
           },
           path: '/programs/:programId',
         },
         {
-          async lazy() {
-            const { prefetch, SeriesPage } = await lazy(
-              import('@wsh-2025/client/src/pages/series/components/SeriesPage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/series/components/SeriesPage'
             );
             return {
-              Component: SeriesPage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              Component: module.SeriesPage,
+              loader: async ({ params }) => await module.prefetch(store, params),
             };
           },
           path: '/series/:seriesId',
         },
         {
-          async lazy() {
-            const { prefetch, TimetablePage } = await lazy(
-              import('@wsh-2025/client/src/pages/timetable/components/TimetablePage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/timetable/components/TimetablePage'
             );
             return {
-              Component: TimetablePage,
-              async loader() {
-                return await prefetch(store);
-              },
+              Component: module.TimetablePage,
+              loader: async () => await module.prefetch(store),
             };
           },
           path: '/timetable',
         },
         {
-          async lazy() {
-            const { NotFoundPage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/not_found/components/NotFoundPage'),
-              1000,
+          lazy: async () => {
+            const module = await import(
+              /* webpackPrefetch: true */
+              '@wsh-2025/client/src/pages/not_found/components/NotFoundPage'
             );
             return {
-              Component: NotFoundPage,
-              async loader() {
-                return await prefetch(store);
-              },
+              Component: module.NotFoundPage,
+              loader: async () => await module.prefetch(store),
             };
           },
           path: '*',
         },
       ],
-      Component: Document,
-      async loader() {
-        return await prefetch(store);
-      },
+      element: <Document />,
+      loader: async () => await documentPrefetch(store),
       path: '/',
     },
   ];

diff --git a/workspaces/client/src/features/auth/hooks/useAuthActions.ts b/workspaces/client/src/features/auth/hooks/useAuthActions.ts
@@ -1,15 +1,17 @@
+import { useMemo } from 'react';
+
 import { useStore } from '@wsh-2025/client/src/app/StoreContext';
 
 export function useAuthActions() {
-  const state = useStore((s) => s);
+  const actions = useStore((s) => ({
+    closeDialog: s.features.auth.closeDialog,
+    openSignInDialog: s.features.auth.openSignInDialog,
+    openSignOutDialog: s.features.auth.openSignOutDialog,
+    openSignUpDialog: s.features.auth.openSignUpDialog,
+    signIn: s.features.auth.signIn,
+    signOut: s.features.auth.signOut,
+    signUp: s.features.auth.signUp,
+  }));
 
-  return {
-    closeDialog: state.features.auth.closeDialog,
-    openSignInDialog: state.features.auth.openSignInDialog,
-    openSignOutDialog: state.features.auth.openSignOutDialog,
-    openSignUpDialog: state.features.auth.openSignUpDialog,
-    signIn: state.features.auth.signIn,
-    signOut: state.features.auth.signOut,
-    signUp: state.features.auth.signUp,
-  };
+  return useMemo(() => actions, [actions]);
 }
diff --git a/workspaces/client/src/features/auth/hooks/useAuthDialogType.ts b/workspaces/client/src/features/auth/hooks/useAuthDialogType.ts
@@ -1,6 +1,5 @@
 import { useStore } from '@wsh-2025/client/src/app/StoreContext';
 
 export function useAuthDialogType() {
-  const state = useStore((s) => s);
-  return state.features.auth.dialog;
+  return useStore((s) => s.features.auth.dialog);
 }
diff --git a/workspaces/client/src/features/auth/hooks/useAuthUser.ts b/workspaces/client/src/features/auth/hooks/useAuthUser.ts
@@ -1,6 +1,5 @@
 import { useStore } from '@wsh-2025/client/src/app/StoreContext';
 
 export function useAuthUser() {
-  const state = useStore((s) => s);
-  return state.features.auth.user;
+  return useStore((s) => s.features.auth.user);
 }
diff --git a/workspaces/client/src/features/channel/hooks/useChannelById.ts b/workspaces/client/src/features/channel/hooks/useChannelById.ts
@@ -3,9 +3,5 @@ import { useStore } from '@wsh-2025/client/src/app/StoreContext';
 type ChannelId = string;
 
 export function useChannelById(params: { channelId: ChannelId }) {
-  const state = useStore((s) => s);
-
-  const channel = state.features.channel.channels[params.channelId];
-
-  return channel;
+  return useStore((s) => s.features.channel.channels[params.channelId]);
 }