1. Click side-menu button , reload after the second time

2. Seide-menu button
– For example, click Cancellation list twice

3. modules
next@12.3.0
react@18.2.0

4. Contents
(1) Reason for loading only the first time
(2) Changes for reloading after the second time
(3) Create a selected_class on the side-menu
(4) Component of side-menu
(5) SideMenuItems

5. Reason for loading only the first time
– Set to Show only the first time in the Display component

  useEffect(() => {
    func.getCancellationList(setRows); <--- get Data
  }, []);

6. Changes for reloading after the second time
– add counter

import { useRouter } from 'next/router'
...
 const router = useRouter();
 useEffect(() => {
    func.getCancellationList(setRows); 
 }, [router.query.counter]);  <---- change

7. Create a selected_class on the side-menu
– create selected_class
– increment a counter
– path is set in textContent
– set query
– do not display queries
– file: SideMenu.tsx

const selected = new selected_class();

function selected_class() {
  this.target = null;
  this.setTarget = (target) => this.target = target;
  this.getTarget = () => this.target;
  this.item = item.bind(this);
  this.counter = 0;
  return this;

  async function item(target,router, item) {

    const old_target = await this.getTarget();

    if (old_target == null) {
        selected.counter = 0;
    } else {
        if (old_target.textContent != target.textContent) {
            selected.counter = 0;
        } else {
            selected.counter++;
        }
    }

    await router.push(
        { 
            pathname: (item.path),
            query: {counter: selected.counter }  <--- set query
        },
        item.path,    <---- do not display queries
    );

    this.setTarget(target);
  }
}

8. Component of side-menu
– call selected.item
– file: SideMenu.tsx

import { useRouter } from 'next/router'

export const SideMenu = () => {
  const router = useRouter();
  ....
  return (
    <div>
    {sideMenuItems.map((item) => (
    ....
      <button
        onClick={(e) => {
          selected.item(e.target, router, item)
        }}  
      /> 
    </div>
  )
}

9. SideMenuItems

  SideMenuItems: [
    {
      key: 1,
      name: "Dashboard",
      icon: MdDashboard,
      path: "../Dashboard/",
    },
    {
       key: 2,
       name: "Today\'s rental",
       icon: RiRidingLine,
       path: "../RentalStatus/",
    },
    {
       key: 3,
       name: "Tomorrow ",
       icon: BiCalendar,
       path: "../Tomorrow/",
    },
    {
        key: 4,
        name: "After tomorrow",
        icon: BiCalendar,
        path: "../AfterTomorrow/",
    },
  ...
  }