前回の続きです。
概要
これまでの構築で、タスクの登録・編集・更新・削除と、認証機能などを構築してきました。
一方で一般的なサイトにあるようなサイトに入って、ログインして、作業をして、出ていくという通常動作の動線を作って行く上で、ナビゲーションバーは重要な役割を果たします。
ガイド
全体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;
動作させてみる
以下の様に、ナビゲーションバーが表示されました。
今回は以上です。続きは次回です
