dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Header.tsx (2557B)

      1 import { useToken } from '@/components/contexts/TokenContext'
      2 import Navbar from '@/components/layout/Navbar'
      3 import NavbarDropdownItem from '@/components/layout/NavbarDropdownItem'
      4 import NavbarDropdownLabel from '@/components/layout/NavbarDropdownLabel'
      5 import NavbarItem from '@/components/layout/NavbarItem'
      6 import classNames from '@/lib/classnames'
      7 import { UserProfile } from '@/lib/models/user_profile'
      8 import { AccessTokenPayload } from '@/lib/security/token'
      9 import { useEffect, useState } from 'react'
     10 import styles from './Header.module.css'
     11 
     12 export default function Header () {
     13   const token = useToken()
     14 
     15   const [userProfile, setUserProfile] = useState<UserProfile | null>(null)
     16   useEffect(() => {
     17     if (token == null) {
     18       return
     19     }
     20 
     21     fetch('/api/users/me', {
     22       headers: {
     23         Authorization: `Bearer ${token}`
     24       }
     25     })
     26       .then(response => response.json())
     27       .then(data => {
     28         setUserProfile(data)
     29       })
     30   }, [token])
     31 
     32   return (
     33     <header {...classNames(styles.header)}>
     34       <Navbar>
     35         {userProfile == null || token == null ? (
     36           <>
     37             <NavbarItem href={'/users/login'}>Login</NavbarItem>
     38             <NavbarItem href={'/users/signup'}>Sign up</NavbarItem>
     39           </>
     40         ) : (
     41           <>
     42             <NavbarDropdownItem label={userProfile.nickname}>
     43               <NavbarItem href={`/users/${userProfile.loginId}`}>
     44                 내 프로필
     45               </NavbarItem>
     46 
     47               <hr />
     48 
     49               <WikiLinkList token={token} />
     50 
     51               <hr />
     52 
     53               <NavbarItem href={`/users/logout`}>
     54                 로그아웃
     55               </NavbarItem>
     56             </NavbarDropdownItem>
     57           </>
     58         )}
     59       </Navbar>
     60     </header>
     61   )
     62 }
     63 
     64 interface WikiListProps {
     65   token: AccessTokenPayload
     66 }
     67 
     68 function WikiLinkList (props: WikiListProps) {
     69   const [wikis, setWikis] = useState<Array<{ title: string; slug: string }>>([])
     70 
     71   useEffect(() => {
     72     fetch(`/api/users/${props.token.uid}/wikis?format=links`, {
     73       method: 'GET',
     74     })
     75       .then(resp => resp.json())
     76       .then(data => setWikis(data))
     77   }, [props.token?.uid])
     78 
     79   return (
     80     <>
     81       <NavbarDropdownLabel>내 위키</NavbarDropdownLabel>
     82 
     83       <div className={styles['wiki-list']}>
     84         {wikis.map(wiki => (
     85           <NavbarItem key={wiki.slug} href={`/wiki/${wiki.slug}`}>
     86             {wiki.title}
     87           </NavbarItem>
     88         ))}
     89 
     90         <NavbarItem href={`/wiki/new`}>
     91           새 위키 만들기
     92         </NavbarItem>
     93       </div>
     94     </>
     95   )
     96 }