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/", }, ... }