ibms-dome/ibms_react/src/App.js

import { useMemo, useEffect, useState } from "react";
import { Outlet, NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
import { fetchUserInfo, fetchUserAuthPages, changeBuilding, fetchSysMainSub } from "@STORE";
import Logo from "@ASSET/img/logo.png";
import { userAllAuthPages } from "@CON";
import AlarmOffcanvas from "@COM/app/AlarmOffcanvas";
import SystemOffcanvas from "@COM/app/SystemOffcanvas";

function App() {
  const dispatch = useDispatch();
  // user
  const { userAuthPages, userInfo } = useSelector((state) => state.user);
  const TopMenu = useMemo(() => {
    let menu = [
      userAllAuthPages.find((auth) => auth.name === "首頁"),
      ...userAuthPages?.map((page) => {
        if (userAllAuthPages.some((auth) => auth.name === page.subName)) {
          return { ...page, ...userAllAuthPages.find((auth) => auth.name === page.subName) };
        }
        return page;
      }),
    ];
    return menu;
  }, [userAuthPages]);

  // building
  const { buildingList, selectedBuiFullName, selectedBuiTag } = useSelector(
    (state) => state.buildingInfo,
  );
  const updateBuilding = (building_tag, urn_3D) => {
    dispatch(changeBuilding({ building_tag, urn_3D }));
  };

  // system
  const { mainSub } = useSelector((state) => state.system);
  const [systemMenuShow, setSystemMenuShow] = useState(false);
  const systemOffCanvasHandler = (e, name) => {
    if (name === "系統監控") {
      e.preventDefault();
      setSystemMenuShow(!systemMenuShow);
    }
  };
  useEffect(() => {
    // 取得使用者資料跟建築物資料(地區及棟別)
    dispatch(fetchUserAuthPages());
    if (selectedBuiTag) {
      dispatch(fetchSysMainSub(selectedBuiTag));
    }
  }, [selectedBuiTag]);
  return (
    <div className="App">
      {/* 主選單 */}
      <Navbar bg="dark" variant="dark">
        <Container fluid>
          <Navbar.Brand href="#home">
            <img alt="" src={Logo} width="150" className="d-inline-block align-top img-fluid" />
          </Navbar.Brand>
          <Nav className="w-100 d-flex justify-content-between">
            <NavDropdown
              title={selectedBuiFullName ? selectedBuiFullName : "選擇大樓"}
              className="d-flex align-items-center fs-5"
            >
              <NavDropdown.Item disabled href="#">
                選擇大樓
              </NavDropdown.Item>
              {buildingList.map(({ full_name, building_tag, urn_3D }) => (
                <NavDropdown.Item
                  data-urn={urn_3D}
                  key={building_tag}
                  onClick={() => {
                    updateBuilding(building_tag, urn_3D);
                  }}
                >
                  {full_name}
                </NavDropdown.Item>
              ))}
            </NavDropdown>
            <div className="d-flex">
              {TopMenu.map(({ name, path, icon }) => (
                <NavLink
                  key={name}
                  to={path ?? "none"}
                  className="nav-link mx-2 d-flex flex-column align-items-center justify-content-between"
                  onClick={(e) => {
                    systemOffCanvasHandler(e, name);
                  }}
                >
                  {icon}
                  <span className="mt-1">{name}</span>
                </NavLink>
              ))}
            </div>
            <div className="d-flex align-items-center">
              <AlarmOffcanvas />
              <div className="mx-3 text-center">
                <label className="mb-0 fs-6 position-relative">
                  Diamond Controls<span className="position-absolute">®</span>
                </label>
                <br />
                <label className="mb-0 fs-6">智慧大樓管理平台</label>
              </div>
            </div>
          </Nav>
        </Container>
      </Navbar>
      <SystemOffcanvas
        list={mainSub}
        systemMenuShow={systemMenuShow}
        setSystemMenuShow={setSystemMenuShow}
      />
      <Outlet />
    </div>
  );
}

export default App;