{"id":4111,"date":"2022-10-04T09:58:36","date_gmt":"2022-10-04T00:58:36","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=4111"},"modified":"2022-10-04T14:36:18","modified_gmt":"2022-10-04T05:36:18","slug":"nextjs-click-side-button-reload-after-the-second-time","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=4111","title":{"rendered":"nextjs : Click side-menu button , reload after the second time<\/small>"},"content":{"rendered":"

1. Click side-menu button , reload after the second time
\n\"\"<\/p>\n

2. Seide-menu button
\n– For example, click Cancellation list twice
\n\"\"<\/p>\n

3. modules
\nnext@12.3.0
\nreact@18.2.0<\/p>\n

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

5. Reason for loading only the first time
\n– Set to Show only the first time in the Display component<\/p>\n

\r\n  useEffect(() => {\r\n    func.getCancellationList(setRows); <--- get Data\r\n  }, []);\r\n\r\n<\/pre>\n
6. Changes for reloading after the second time
\n– add counter<\/p>\n
\r\nimport { useRouter } from 'next\/router'\r\n...\r\n const router = useRouter();\r\n useEffect(() => {\r\n    func.getCancellationList(setRows); \r\n }, [router.query.counter]);  <---- change\r\n\r\n<\/pre>\n
7. Create a selected_class on the side-menu
\n– create selected_class
\n– increment a counter
\n– path is set in textContent
\n– set query
\n– do not display queries
\n– file: SideMenu.tsx<\/p>\n
\r\nconst selected = new selected_class();\r\n\r\nfunction selected_class() {\r\n  this.target = null;\r\n  this.setTarget = (target) => this.target = target;\r\n  this.getTarget = () => this.target;\r\n  this.item = item.bind(this);\r\n  this.counter = 0;\r\n  return this;\r\n\r\n  async function item(target,router, item) {\r\n\r\n    const old_target = await this.getTarget();\r\n\r\n    if (old_target == null) {\r\n        selected.counter = 0;\r\n    } else {\r\n        if (old_target.textContent != target.textContent) {\r\n            selected.counter = 0;\r\n        } else {\r\n            selected.counter++;\r\n        }\r\n    }\r\n\r\n    await router.push(\r\n        { \r\n            pathname: (item.path),\r\n            query: {counter: selected.counter }  <--- set query\r\n        },\r\n        item.path,    <---- do not display queries\r\n    );\r\n\r\n    this.setTarget(target);\r\n  }\r\n}\r\n<\/pre>\n
8. Component of side-menu
\n– call selected.item
\n– file: SideMenu.tsx<\/p>\n
\r\nimport { useRouter } from 'next\/router'\r\n\r\nexport const SideMenu = () => {\r\n  const router = useRouter();\r\n  ....\r\n  return (\r\n    <div>\r\n    {sideMenuItems.map((item) => (\r\n    ....\r\n      <button\r\n        onClick={(e) => {\r\n          selected.item(e.target, router, item)\r\n        }}  \r\n      \/> \r\n    <\/div>\r\n  )\r\n}\r\n<\/pre>\n
9. SideMenuItems<\/p>\n
\r\n  SideMenuItems: [\r\n    {\r\n      key: 1,\r\n      name: \"Dashboard\",\r\n      icon: MdDashboard,\r\n      path: \"..\/Dashboard\/\",\r\n    },\r\n    {\r\n       key: 2,\r\n       name: \"Today\\'s rental\",\r\n       icon: RiRidingLine,\r\n       path: \"..\/RentalStatus\/\",\r\n    },\r\n    {\r\n       key: 3,\r\n       name: \"Tomorrow \",\r\n       icon: BiCalendar,\r\n       path: \"..\/Tomorrow\/\",\r\n    },\r\n    {\r\n        key: 4,\r\n        name: \"After tomorrow\",\r\n        icon: BiCalendar,\r\n        path: \"..\/AfterTomorrow\/\",\r\n    },\r\n  ...\r\n  }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
1. Click side-menu button , reload after the second time 2. Seide-menu button – For example, click Cance…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4111"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4111"}],"version-history":[{"count":46,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4111\/revisions"}],"predecessor-version":[{"id":4147,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4111\/revisions\/4147"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}