Merge pull request #49 from su-its/feat/add-login-context

Feat/add login context
su-its · Apr 1, 2024 · fc25015 · fc25015
2 parents 3a5e372 + 5eb97e1
commit fc25015
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 7 deletions.
diff --git a/typing-app/docs/state-management.md b/typing-app/docs/state-management.md
@@ -0,0 +1,15 @@
+# 状態管理
+## ログイン状態
+
+- ログインしているかどうか判断したいとき
+
+  ```tsx
+  "use client";
+  import { useUser } from "@/state";
+
+  export function LoginStatus() {
+    const user = useUser()
+
+    return <div>User is{user ? " " : " not "}logged in!</div>
+  }
+  ```
diff --git a/typing-app/src/app/layout.tsx b/typing-app/src/app/layout.tsx
@@ -4,29 +4,36 @@ import Header from "../components/organism/Header";
 import Footer from "../components/organism/Footer";
 import "./globals.css";
 import { Box, ChakraProvider } from "@chakra-ui/react";
+import { LoginProvider } from "@/state";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "TypeMaster",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  // TODO: 正しくユーザをセットする処理などで置き換える。
+  // cookie を使えばログイン中は判断できるがログイン/ログアウト時はどうするんだ?
+  const user = await Promise.resolve({ student_number: "user1", handle_name: "handle1"});
+
   return (
     <html lang="en">
       <body className={inter.className}>
         <ChakraProvider>
-          <Box minH="100vh" display="flex" flexDirection="column" bg="black">
-            <Header />
-            <Box flex="1" py={2}>
-              {children}
+          <LoginProvider user={user}>
+            <Box minH="100vh" display="flex" flexDirection="column" bg="black">
+              <Header />
+              <Box flex="1" py={2}>
+                {children}
+              </Box>
+              <Footer />
             </Box>
-            <Footer />
-          </Box>
+          </LoginProvider>
         </ChakraProvider>
       </body>
     </html>

diff --git a/typing-app/src/state/index.tsx b/typing-app/src/state/index.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { ReactNode, createContext, useContext } from "react";
+
+// TODO: あとで直す。適当な型であることを明示するためにあえてへんな名前にしてる
+type UserType001 = {
+  student_number: string;
+  handle_name: string;
+};
+
+export const LoginContext = createContext<UserType001 | undefined>(undefined);
+
+export function useUser() {
+  return useContext(LoginContext);
+}
+
+type LoginProviderProps = {
+  children: ReactNode;
+  user?: UserType001;
+};
+
+/**
+ * Server Component で Context が使えないのでその children の Client Component で `useUser()` できない。
+ * これをできるようにするための Client Component。`LoginContext.Provider` を挟むだけ。
+ * - https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
+ * - https://future-architect.github.io/articles/20231214a/
+ */
+export function LoginProvider({ children, user }: LoginProviderProps) {
+  return <LoginContext.Provider value={user}>{children}</LoginContext.Provider>;
+}