Merge pull request #128 from traP-jp/client/feat/auth

フロントエンドで認証

client/src/App.tsx

@@ -1,18 +1,46 @@
-import { ConfigProvider } from "antd";
+import { Button, ConfigProvider } from "antd";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import useExplorerDispatcher from "./api/explorer";
 import { StampPicker } from "./components/StampPicker";
 import { Timeline } from "./components/Timeline";
 import Canvas from "./pixi/Canvas";
 import dispatcherAtom from "./state/dispatcher";
+import { useMe } from "./api/user";
+import { User } from "./schema2/user";
+import { useAuth } from "./api/auth";
+import meAtom from "./state/me";
 
 const App = () => {
   const dispatcher = useExplorerDispatcher();
   const setDispatcher = useSetAtom(dispatcherAtom);
   useEffect(() => {
     setDispatcher(() => dispatcher);
   }, [dispatcher, setDispatcher]);
+  const { data: resUser, error, isLoading } = useMe();
+  const { trigger: authTrigger } = useAuth();
+  const setMe = useSetAtom(meAtom);
+
+  const loginOnClick = async () => {
+    const res = await authTrigger();
+    window.location.href = res.location;
+  };
+
+  useEffect(
+    () => setMe({ id: resUser?.user?.id, name: resUser?.user?.name } as User),
+    [resUser, setMe],
+  );
+
+  if (error) {
+    console.log(error);
+  }
+
+  if (isLoading) {
+    return <div>loading...</div>;
+  }
+  if (!resUser) {
+    return <Button onClick={loginOnClick}>ログイン</Button>;
+  }
 
   return (
     <div className="flex">

client/src/model/user.ts

@@ -0,0 +1,5 @@
+interface User {
+  id: string;
+  name: string;
+}
+export default User;

client/src/pixi/Canvas.tsx

@@ -17,6 +17,8 @@ import PIXI from "pixi.js";
 import { useAtom, useAtomValue } from "jotai";
 import dispatcherAtom from "../state/dispatcher";
 import userPositionAtom from "../state/userPosition";
+import meAtom from "../state/me";
+import { traqIconURL } from "../util/icon";
 
 const mountHandler = import.meta.env.DEV
   ? (app: PIXI.Application) => {
@@ -44,6 +46,7 @@ const Canvas: React.FC<Props> = (props) => {
   const intervalID = useRef<number | null>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const dispatcher = useAtomValue(dispatcherAtom);
+  const me = useAtomValue(meAtom);
 
   useEffect(() => {
     const width = (window.innerWidth * 3) / 5;
@@ -100,7 +103,7 @@ const Canvas: React.FC<Props> = (props) => {
         return nextPosition;
       });
     },
-    [dispatcher, fieldSize, intervalID],
+    [dispatcher, fieldSize, setUserPosition],
   );
 
   const onFieldClick = useCallback(
@@ -163,10 +166,10 @@ const Canvas: React.FC<Props> = (props) => {
           userDisplayPosition={userDisplayPosition}
         />
         <Explorer
-          imgURL="https://q.trap.jp/api/v3/public/icon/ikura-hamu"
+          imgURL={traqIconURL(me?.name ?? "")}
           position={userDisplayPosition}
           isMe
-          name="ikura-hamu"
+          name={me?.name ?? ""}
         />
       </Stage>
     </div>

client/src/state/me.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import User from "../model/user";
+
+const meAtom = atom<User | undefined>(undefined);
+export default meAtom;