Day 6: 1140918
一、目標:建立首頁按鍵的畫面跳轉功能。

在 day 5的文章中，最後提到 app.jsx 這份檔案會處理系統核心和路由設定。
檔案中的第一行引用的 HeaderComponent.jsx，用來設定首頁按鍵的畫面跳轉功能。當按下按鍵後，如創建帳號按鍵，會跳到相對應的帳號註冊畫面。

import HeaderComponent from "./components/common/HeaderComponent";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
(略)

在 HeaderComponent.jsx 這麼檔案，我們同樣會引用一些別的文件的功能，如 AuthApiService.jsx 的登出( logout，擷取程式碼如下)或確認使用者處於登入狀態( isUserLoggedIn )的功能。

**HeaderComponent.jsx **
//清除所有儲存的登入資訊 (localStorage & sessionStorage)，使用者完全登出
export const logout = () => {
  localStorage.clear();
  sessionStorage.clear();
};

此外，受限於尚未連結後端資料庫，無法創建新的使用者帳號和密碼，在程式碼中，我們可以先使用 const isAuth = true/false;，來確認點選按鍵後是否會跳到相對應的畫面。

1. const isAuth = true;
   
2. const isAuth = false;
   

import logo from '/src/assets/react.svg'
import { NavLink, useNavigate } from "react-router-dom"
import { isUserLoggedIn, logout } from '../../api/AuthApiService'
import 'bootstrap/dist/css/bootstrap.min.css';

const HeaderComponent = () => {
  // 判斷使用者是否已登入
  const isAuth = isUserLoggedIn();
  //測試時會使用下面這句(true用來測試登出和歷史任務的按鍵是否成功跳轉到相對應畫面;false:用來測試創建帳號和登入的按鍵是否成功跳轉到相對應畫面)
  // const isAuth = true;
  // 跳轉頁面
  const navigate = useNavigate();
  // 使用者登出
  function handleLogout() {
    logout();
    navigate("/login");
  }

  function isUrlHistory() {
    //取得當前網址
    let url = window.location.href;
    // 判斷網址是否以 "history" 結尾，回傳 true，表示使用者在 Task History 頁面，回傳 false，表示使用者在 Tasks 頁面
    return url.endsWith("history");
  }

  return (
    // 建立導航列，並固定在頁面頂端(fixed-top)
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div className="container">
        <NavLink className="navbar-brand" to="/">
          <img src={logo} alt="logo" width={30} height={30} />
          任務管理系統
        </NavLink>
        <button
          // 在小螢幕 (如手機) 上，可展開選單
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul className="navbar-nav">
            {isAuth && (
              // 使用者登入後顯示的選項 (isAuth === true)有任務/歷史任務/登出按鍵
              <li className="nav-item">
                {isUrlHistory() ? (
                  // 點選任務按鍵，會跳轉到 tasks 頁面
                  <NavLink className="nav-link" to="/tasks">
                    📋 任務
                  </NavLink>
                ) : (
                  // 點選歷史任務按鍵，會跳轉到 history 頁面
                  <NavLink className="nav-link" to="/history">
                    📁 歷史任務
                  </NavLink>
                )}
              </li>
            )}
            {/* 登出 */}
            {isAuth && (
              <li className="nav-item">
                <button className="btn btn-outline-light ms-2" onClick={handleLogout}>
                  🚪 登出
                </button>
              </li>
            )}

            {/* 使用者未登入時顯示的選項 (isAuth === false) */}有建立帳號/登入按鍵
            {!isAuth && (
              <li className="nav-item">
                // 點選建立帳號按鍵，會跳轉到 create-account 頁面
                <NavLink className="nav-link" to="/create-account">
                  🆕 建立帳號
                </NavLink>
              </li>
            )}
            {!isAuth && (
              <li className="nav-item">
                // 點選登入按鍵，會跳轉到 login 頁面
                <NavLink className="nav-link" to="/login">
                  🔑 登入
                </NavLink>
              </li>
            )}

          </ul>
        </div>
      </div>
    </nav>
  );
};

export default HeaderComponent;