前回の続きです。

概要

これまでの構築で、タスクの登録・編集・更新・削除と、認証機能などを構築してきました。
一方で一般的なサイトにあるようなサイトに入って、ログインして、作業をして、出ていくという通常動作の動線を作って行く上で、ナビゲーションバーは重要な役割を果たします。

ガイド

全体Index：タスク管理ツールをReact + ASP.Coreで作る - Index

流れ

ナビゲーションバー用のコンポーネントを作る
App.tsx内でコンポーネントを呼び出す

ナビゲーションバー用のコンポーネントを作る

以下を作ります。
項目やドロップダウンなども入れてますが、現時点ではハリボテです。
今後ルーター等導入していった際に有効になるようにしていこうと思います。

NavBar.tsx


import React from 'react';
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
import { UserInfo } from './app/models/Account';


interface Props {
    userInfo: UserInfo;
}

export const NavBar = ({userInfo}: Props) => {

    return(
        <Navbar bg="dark" variant="dark" expand="sm" className="border-bottom box-shadow mb-3">
            <Container>
                <Navbar.Brand>Tasket</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link >Tasks</Nav.Link>
                    </Nav>
                    <Nav>
                        <Nav.Link >PrivacyPolicy</Nav.Link>                        
                        {
                            userInfo.username ?
                                <NavDropdown title={userInfo.username} id="collasible-nav-dropdown-user">
                                    <NavDropdown.Item >register</NavDropdown.Item>  
                                    <NavDropdown.Divider />
                                    <NavDropdown.Item >Logout</NavDropdown.Item>
                                </NavDropdown>       
                                :
                                <Nav.Link>Login</Nav.Link>
                        }
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
}

App.tsx内でナビゲーションバーのコンポーネントを呼び出す

以下の様になります。

NavBar.tsx


import { useEffect, useState } from 'react';
import './App.css';
import api from './app/api/api';
import { UserInfo } from './app/models/Account';
import Login from './components/Login';
import Register  from './components/Register';
import { TaskOperationMain } from './components/TaskOperationMain';
+ import { NavBar } from './NavBar';

function App() {

  
  const [userInfo, setUserInfo] = useState<UserInfo>({username: '',email: '',token: ''});
  
  useEffect(() => {
    const token = window.localStorage.getItem('tasket_jwt_token');
    try{
      api.Account.current().then(user => {
        window.localStorage.setItem('tasket_jwt_token', user.token);
        setUserInfo(user);
      });
      
    } catch (error) {
      console.log(error);
    }
  }, []);

  
  return (
+    <>
+      <NavBar userInfo={userInfo} />
+      {userInfo.username==='' ? 
+        <>
+          <Login setUserInfo={setUserInfo}/>
+          <Register /> 
+        </>
+        :
+        <TaskOperationMain />
+      }      
+     </>
  );
}
export default App;

動作させてみる

以下の様に、ナビゲーションバーが表示されました。
今回は以上です。続きは次回です