Create a frontend page

Create your components

You should create your components in the frontend/src/components/myapp folder. Keep in mind that the components you are going to create will be displayed like this to the end user:

<Navbar />
<MyAppComponent />

In other words, you are responsible of a huge part of the design. Unless you have a very good reason, we recommend that you use this blueprint:

<Container className="mt-5">
    <Row>
        <Col md="3">
            <YourAppSidebar />
        </Col>
        <Col md="9">
            <PageTitle>My Wonderful App!</PageTitle>
            [Some content...]
        </Col>
    </Row>
</Container>

The PageTitle component can be found in frontend/src/components/utils. This folder also contains other generic components which you may find very useful, such as Error, Loading, Pagination, etc. We will now focus on some of them.

The sidebar

You can use the Sidebar component located in frontend/src like this:

<Sidebar title="My App">
    <SidebarItem icon="clock" to="/myapp/piche/">
        Picher
    </SidebarItem>
    <SidebarSeparator />
    <SidebarItem icon="check-square" to="/myapp/quiche/">
        Quicher
    </SidebarItem>
    <SidebarItem icon="plus" to="/myapp/cliche/">
        Cliché
    </SidebarItem>
</Sidebar>

Be aware that some apps, like associations, already have a Sidebar. In such a case, please use the existing component and edit as you need.

The forms

We use Formik to create our forms. Formik integrates quite well with React Bootstrap and Tabler. However, some specific controls may be tricky to adapt. Before rewriting everything from scratch, please check the frontend/src/components/utils/forms/ folder. You will find several controls ready to use, such as a date picker or a select group. The comments at the beginning of each of these components should be enough to understand how to use them.

Create the route

The frontend uses react-router to choose which page to display depending on the URL. You don't have to worry about how it works under the hood (check App.tsx and associations/Main.tsx if you really want to know), but you should know how to add a new page.

The routes configuration files are located in the frontend/src/routing folder. Depending on the module you are developing, you will either create a new file or append your routes to an existing file.

Regular (not association) routes

Let's imagine you have created a file myapp.ts in frontend/src/routing. Create a Route array named routes in it. A Route object has three properties:

• path is the route that the URL will match.
  • path is absolute, i.e. the part after http://localhost:3000 on your computer. This means it must begin with a forward slash /.
  • We also recommend not putting a forward slash at the end of the path, even though URLs ending with a slash are still valid.
  • Please use French in the URL names, as they are a part of the final user interface.
• component is the React component that should be rendered when the URL is called.
  • If you need to pass constant props, do so using a fat arrow function: component: () => ListPolls({ current: false }).
• exact should always be true, unless you are implementing an intermediate router.

Finally, you should append the content of your routes to global.ts:

import { routes as myAppRoutes } from "./polls";

[...]

export const routes = [
    // Existing routes.
]
    .concat(pollsRoutes)
    .concat(myAppRoutes)

Association routes

Association routes are almost the same, except a couple small differences.

If you want to add or edit an association route, you should open routing/associations.ts. Then, you will see something like this:

/* Some imports */
export const routes = association => [
    /* [...] */
    {
        path: `/pages/:pageId/edit`,
        component: AssociationEditPage,
        exact: true,
        props: { association: association }
    }
];

As you can see, there is a new parameter, props. It will be passed to your component; as the component you are developing will certainly depend on association, you should leave it like this.

Also, path should not be prefixed with associations/:associationId/ (it is added automatically in global.ts).