firegex-traffic-viewer/frontend/src/components/Header/index.tsx

import React, { useEffect, useState } from 'react';
import { ActionIcon, Badge, Modal } from '@mantine/core';
import style from "./Header.module.scss";
import { errorNotify, generalstats } from '../../js/utils';
import { GeneralStats, update_freq } from '../../js/models';
import { BsPlusLg } from "react-icons/bs"
import { AiFillHome } from "react-icons/ai"
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import AddNewRegex from '../AddNewRegex';
import AddNewService from '../AddNewService';


function Header() {
  
  const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regex:0, services:0});
  const location = useLocation()

  const navigator = useNavigate()

    const updateInfo = () => {
      generalstats().then(res => {
        setGeneralStats(res)
      }).catch(
        err => errorNotify("General Info Auto-Update failed!", err.toString())
      )
  }

  useEffect(()=>{
      updateInfo()
      const updater = setInterval(updateInfo, update_freq)
      return () => { clearInterval(updater) }
  }, []);


  const {srv_id} = useParams()
  const [open, setOpen] = useState(false);
  const closeModal = () => {setOpen(false);}

  return <div id="header-page" className={style.header}>
        <div className={style.logo} >LOGO</div>
        <div className="flex-spacer" />
        <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
        <Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
        <Badge style={{marginLeft:"10px"}} size="lg" color="violet" variant="filled">Regexes: {generalStats.regex}</Badge>
        <div style={{marginLeft:"20px"}}></div>
        { location.pathname !== "/"?
            <ActionIcon color="teal" style={{marginRight:"10px"}}
              size="xl" radius="md" variant="filled"
              onClick={()=>navigator("/")}>
              <AiFillHome size="25px" />
            </ActionIcon>
        :null}
        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
        {srv_id?
          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
            <AddNewRegex closePopup={closeModal} service={srv_id} />
          </Modal>:
          <Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
            <AddNewService closePopup={closeModal} />
          </Modal>
        }
            
        
        <div style={{marginLeft:"40px"}}></div>
  </div>
}

export default Header;