AuthenticationGuard

.gitignore

@@ -38,4 +38,5 @@ next-env.d.ts
 
 todo
 dist
-uploads
+uploads
+dump-files

packages/web/src/app/components/AuthenticationGuard.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useAuthentication } from "@/hooks";
+import { PropsWithChildren, Suspense } from "react";
+import TokenInput from "./Token";
+
+function AuthenticationGuard({ children }: PropsWithChildren<{}>) {
+  const { data } = useAuthentication();
+
+  if (!data) return <div>loading</div>;
+  if (data.role !== "master") {
+    return <TokenInput />;
+  }
+  return <Suspense>{children}</Suspense>;
+}
+
+export default AuthenticationGuard;

packages/web/src/app/add-music/page.tsx → packages/web/src/app/music/add/page.tsx

@@ -6,9 +6,8 @@ import { nanoid } from "nanoid";
 import { atom, useAtom } from "jotai";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { Music } from "@/music";
+import AuthenticationGuard from "@/app/components/authenticationGuard";
 import { tokenAtom } from "@/state";
-import useSWR from "swr";
-import { useAuthentication } from "@/hooks";
 
 type MusicInput = {
   nanoId: string;
@@ -29,9 +28,7 @@ const musicInputAtom = atom<MusicInput>({
 function AddMusic() {
   const [musics, setMusics] = useState<MusicInput[]>([]);
   const [musicInput, setMusicInput] = useAtom(musicInputAtom);
-  const [token, setToken] = useAtom(tokenAtom);
-  const [tokenInput, setTokenInput] = useState("");
-  const { data, mutate } = useAuthentication();
+  const [token] = useAtom(tokenAtom);
 
   const handleSubmit = async () => {
     if (!musics.length) return;
@@ -88,27 +85,6 @@ function AddMusic() {
     });
   };
 
-  if (!data) return <div>loading</div>;
-
-  if (data.role !== "master") {
-    return (
-      <>
-        <Input
-          value={tokenInput}
-          onChange={(e) => setTokenInput(e.currentTarget.value)}
-        />
-        <Button
-          onClick={() => {
-            setToken(tokenInput);
-            mutate(tokenInput);
-          }}
-        >
-          Token
-        </Button>
-      </>
-    );
-  }
-
   return (
     <div>
       {musics.map((music, idx) => (
@@ -200,4 +176,12 @@ function AddMusic() {
   );
 }
 
-export default AddMusic;
+function AddMusicPage() {
+  return (
+    <AuthenticationGuard>
+      <AddMusic />
+    </AuthenticationGuard>
+  );
+}
+
+export default AddMusicPage;

packages/web/src/app/music/list/list.tsx

@@ -0,0 +1,38 @@
+import { Music } from "@/music";
+
+async function MusicList() {
+  const data: { musics: Music[] } = await fetch(
+    `${process.env.NEXT_PUBLIC_API_GATE}/music/list`,
+    { cache: "no-cache" }
+  ).then((res) => res.json());
+
+  return (
+    <table className="table-auto">
+      <thead>
+        <tr className="border">
+          <th>ID</th>
+          <th>Name</th>
+          <th>censored</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.musics.map((music) => (
+          <tr key={music.id} className="border">
+            <td>{music.id}</td>
+            <td>{music.name}</td>
+            <td>
+              <input
+                className="checked:bg-red-500"
+                type="checkbox"
+                defaultChecked={music.censored}
+                readOnly
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default MusicList;

packages/web/src/app/music/list/page.tsx

@@ -0,0 +1,13 @@
+import List from "./list";
+import AuthenticationGuard from "@/app/components/authenticationGuard";
+
+async function MusicList() {
+  return (
+    <AuthenticationGuard>
+      {/* @ts-ignore */}
+      <List />
+    </AuthenticationGuard>
+  );
+}
+
+export default MusicList;

packages/web/src/music.ts

@@ -1,4 +1,4 @@
-export type { Music } from "@15s-music/server/entry";
+export type { Music } from "@15s-music/server/src/entry";
 
 let audio: HTMLAudioElement | null = null;
 export const playMusic = (blob: Blob): Promise<HTMLAudioElement | null> => {

packages/web/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@15s-music/server/*": ["packages/server/src/*"]
+    }
+  }
+}