Getting started with React Web App

Create new page

• Create the page file on the views/pages directory. You can do a logical grouping of pages creating new folders on views/pages or using existing ones.
• Add the new page’s route on views/routes.js.
• Create access to new page:
  • To access from left menu, add the item on _nav.js.
  • To access from header’s dropdown menu, add item on components/header/AppHeaderDropdown.js.

Important:

The pages are not accessible unless the user has the permissions for the page’s url. This are set on the backend and sent on the endpoint security/authenticate.

Use translations

To use the language translations on your pages you need to:

1. On top of the page’s file add import \{ useTranslation } from 'react-i18next'
2. Then inside the page definition function add const { t, i18n } = useTranslation()
3. Now when you add text to you code instead of writing "Some text", write {i18n.t("Some text")}
4. If text to display doesn’t have a translation yet, add the translation on the translation.json files on location/

Add new language

1. Create a new folder on locales/ named as the abbreviation you want to use for the new language.
2. Copy into that folder the file locales/EN/translation.json
3. Change the values on the json for the new translations.
4. Add the new language on the i18n initialization on helpers/i18n.js

Calls to API

All calls to the SolaREC API are handled by the function DataAPI defined on helpers/DataAPI.js.
Use the function as follows:

DataAPI({
	endpoint: 'some_endpoint',
	method: 'GET or POST',
	body: body,
}).then((response) => {
	// Do stuff
}))

Using Cookies

If you need to use Cookies for your new page, you can import the functions getCookie and/or setCookie defined on helpers/sessionCookie.js.

Other useful information

Helpers

If you need helper functions which might be used across the app, you can implement them on the file helpers/utils.js

Components

To build new components to use across your pages, add them to components/

But first, see if you can find what you need on CoreUI’s components list. Take a look at the documentation on https://coreui.io/react/docs/

Style

On the file scss/_variables.scss you can modify global variables that can help you change the main style of the app. Take a look at https://coreui.io/react/docs/customize/options/.

If you need further customizations add your code on scss/_custom.scss

Unit test

For unit testing the app uses Jest.

If you want to create unit tests for your code just create a file on the same directory as the one you are testing with the same name, and type .test.js. So, if I’m testing example.js, I need to create example.test.js.

To understand how to build your testing files start here: https://jestjs.io/docs/tutorial-react