path required for Pages

[oehm-smith]

Describe the bug

Really nice template thanks. However some teething issues. This one is for the documentation.

The documentation at https://huseyindeniz.github.io/react-dapp-template-documentation/docs/tutorial-basics/create-a-page says:

// Home Route
const MyNewPageRoute: PageType = {
  index: true,
  element: <MyNewPage />,
  menuLabel: t("My New Page", { ns: "Menu" }),
  isShownInMainMenu: false,
  isShownInSecondaryMenu: false,
  isProtected: false,
};

But you also need to add path to get the new page to work. For example:

const EventsPageRoute: PageType = {
    index: true,
    path: 'events',
    element: <EventsPage />,
    menuLabel: t('Events', { ns: 'Menu' }),
    isShownInMainMenu: false,
    isShownInSecondaryMenu: true,
    isProtected: false,
  };

It also wouldn't hurt to add some more details to this page. For example:

• isProtected is if Wallet authentication is required
• isShownInXMenu - at least one of these must be true

[huseyindeniz]

hi @oehm-smith thank you very much for your valuable feedback. You're right, probably I blindly copy-pasted the HomePageRoute which doesn't need path but index:true. TBH, I created the documentation website, added some content and forgot it :) But when I have more time, I'll improve it. Meanwhile, feel free to send PR to it's repository here: https://github.com/huseyindeniz/react-dapp-template-documentation
Additionally, you can use Discussions section if you have questions. I'm using this template in 2 dapps currently and there are lots of tricks not mentioned in Documentation but very useful. Feel free asking details in discussion section.

I'll keep this Issue open until I updated the documentation website. Thanks again.

[oehm-smith]

Great thanks for your feedback. I'll get you a PR. But what is index for? I can't see how it is used and has no effect true|false on my page. I see it has something to do with children (pages?) but am not sure how this is setup:

const PagesWithLang = Pages.map(p => {
    if (p.children) {
      return {
        ...p,
        path: `/:${i18nConfig.urlParam}/${p.path}`,
        children: p.children.map(c => {
          if (c.index) {
            return c;
          } else {
            return {
              ...c,
              path: `/:${i18nConfig.urlParam}${c.path}`,
            };
          }
        }),
      };
    } else {
      return {
        ...p,
        path: `/:${i18nConfig.urlParam}/${p.path}`,
      };
    }
  });

[oehm-smith]

huseyindeniz/react-dapp-template-documentation#1

[huseyindeniz]

Thank you very much for the documentation update.

PageType is union of my custom MenuType type and React Router package RouteObject and most of the props coming from RouteObject.

and index is for special routes described more here: index-routes

But I realized smt else when I look at your latest comment. The code you showed is for handling "Routes with lang parameter in the URL". At the time of developing, I just tried to make it work and didn't think about the design much. I just needed "lang parameter in the URL" and I needed "menu items". And I managed to make it work with that horrible code that even I can't understand anymore :D When I have more time, I'll think about the design. Maybe PageType was not a good idea. Not sure at this point. I'll think about this.