#11

frontend/src/App.tsx

@@ -6,6 +6,8 @@ import TopNav from './components/TopNav'
 import TagSidebar from './components/TagSidebar'
 import PostPage from './pages/PostPage'
 import PostDetailPage from './pages/PostDetailPage'
+import { API_BASE_URL } from './config'
+import axios from 'axios'
 
 type Tag = { id:        number
              name:      string
@@ -17,18 +19,48 @@ type Post = { id:         number
               thumbnail:  string
               tags:       Tag[] }
 
+type User = { id:               number
+              name:             string | null
+              inheritanceCode:  string
+              role:             string }
+
 
 const App = () => {
   const [posts, setPosts] = useState<Post[]> ([])
+  const [user, setUser] = useState<User | null> (null)
 
   useEffect (() => {
+    const createUser = () => (
+        axios.post (`${ API_BASE_URL }/users`)
+        .then (res => {
+          if (res.data.code)
+            {
+              localStorage.setItem ('user_code', res.data.code)
+              setUser (res.data)
+            }
+        }))
+
+    const code = localStorage.getItem ('user_code')
+    if (code)
+      {
+        void (axios.post (`${ API_BASE_URL }/users/verify`, { code })
+              .then (res => {
+                if (res.data.valid)
+                  setUser (res.data.user)
+                else
+                  createUser ()
+              }))
+      }
+    else
+      createUser ()
+
     alert ('このサイトはまだ作りかけです!!!!\n出てけ!!!!!!!!!!!!!!!!!!!!')
   }, [])
 
   return (
       <Router>
         <div className="flex flex-col h-screen w-screen">
-          <TopNav />
+          <TopNav user={user} />
           <div className="flex flex-1">
             <TagSidebar posts={posts} setPosts={setPosts} />
             <main className="flex-1 overflow-y-auto p-4">

frontend/src/components/TopNav.tsx

@@ -1,7 +1,15 @@
 import React from "react"
 import { Link } from 'react-router-dom'
 
-const TopNav: React.FC = () => (
+type User = { id:               number
+              name:             string | null
+              inheritanceCode:  string
+              role:             string }
+
+type Props = { user: User }
+
+
+const TopNav: React.FC = ({ user }: Props) => (
     <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
       <div className="flex items-center gap-4">
         <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
@@ -11,8 +19,9 @@ const TopNav: React.FC = () => (
         <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
       </div>
       <div className="ml-auto pr-4">
-        <Link to="/login" className="hover:text-orange-500">ログイン</Link>
+        <Link to="/setting" className="hover:text-orange-500">{user?.name || '名もなきニジラー'}</Link>
       </div>
     </nav>)
 
+
 export default TopNav