I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons are being rendered.
When I inspected the Menu, I noticed that it contains 3 children:
1 - Dashboard;
2 - Subscribe;
3 - Array of resource buttons.
P.S. I am using React-Admin v3.18.2. If you need more information, please leave a comment below.
Thank you.
menu.tsx
import React from 'react';
import { useSelector } from 'react-redux';
import { DashboardMenuItem, MenuItemLink, getResources, Menu, MenuProps } from 'react-admin';
import { CardMembership, ViewList } from '@material-ui/icons';
const CustomMenu = (props: MenuProps) => {
const resources = useSelector(getResources);
return (
<Menu {...props}>
<DashboardMenuItem />
{/* @ts-ignore */}
<MenuItemLink
key="subscribe"
to="/subscribe"
primaryText="Subscriptions"
leftIcon={<CardMembership/>}
sidebarIsOpen={open}
/>
{
resources.map(resource => (
/* @ts-ignore */
<MenuItemLink
key={resource.name}
to={`/${resource.name}`}
primaryText={(resource.options && resource.options.label) || resource.name}
leftIcon={resource.icon ? <resource.icon /> : <ViewList />}
sidebarIsOpen={open}
/>
))
}
</Menu>
);
};
export default CustomMenu;
layout.tsx
import React from "react";
import { Layout, LayoutProps } from 'react-admin';
import CustomMenu from './menu';
import CustomAppBar from "./appBar";
import { ProfileProvider } from "../profile";
const CustomLayout = (props: LayoutProps) => (
<ProfileProvider>
<Layout {...props} appBar={CustomAppBar} menu={CustomMenu}/>
</ProfileProvider>
);
export default CustomLayout;
App.tsx
import React from "react";
import dynamic from "next/dynamic";
import { Admin, Resource } from 'react-admin';
import { Work, Group, ViewList } from '@material-ui/icons';
import authProvider from './authProvider';
import dataProvider from './dataProvider';
import Dashboard from './dashboard';
import LoginPage from './login';
import CustomRoutes from './customRoutes';
import CustomLayout from './layouts/layout';
import { JobList, JobEdit, JobCreate } from './jobs';
import { AccountList, AccountEdit, AccountCreate } from './accounts';
import { ServiceList, ServiceEdit, ServiceCreate } from './services';
const App = () => (
<Admin
layout={CustomLayout}
loginPage={LoginPage}
dashboard={Dashboard}
authProvider={authProvider}
dataProvider={dataProvider}
customRoutes={CustomRoutes}
>
{
permissions => [
permissions.subStatus === 'active'
&& <Resource
name="services"
list={ServiceList}
edit={ServiceEdit}
create={ServiceCreate}
icon={ViewList}
options={{ label: 'Services' }}
/>,
permissions.subStatus === 'active'
&& <Resource
name="accounts"
list={AccountList}
edit={AccountEdit}
create={AccountCreate}
icon={Group}
options={{ label: 'Accounts' }}
/>,
permissions.subStatus === 'active'
&& <Resource
name="jobs"
list={JobList}
edit={JobEdit}
create={JobCreate}
icon={Work}
options={{ label: 'Jobs' }}
/>,
]
}
</Admin>
);
const Run = dynamic(() => Promise.resolve(App), {
ssr: false,
});
export default Run;
customRoutes.tsx
import React from "react";
import { Route } from 'react-router-dom';
import SubscribePage from './subscription';
const CustomRoutes = [
<Route key="subscribe" exact path="/subscribe" component={SubscribePage}/>,
];
export default CustomRoutes;
UPDATE: I managed to solve the issue by updating react-admin to v3.19.7.