Skip to main content

Generic

Generic components are site-wide components that are used across the application. They are generally used to provide a consistent look and feel across the application. Generic components can be found in the root of the src/app/components directory. In the following sections, we will discuss the various generic components used in the Record Books application.

The Navbar Client Side component is used to display the navigation bar of the application. It contains links to various pages in the application. The Navbar component is defined in the src/app/components/Navbar.jsx file. The contents and positioning of the links in the Navbar depend on if the user is logged in or not and the size of screen the application is being viewed on.

The Navbar styles are applied in the global stylesheet src/app/global.css.

Positioning​

The Navbar's position depends on the size of the screen the application is being viewed on. On larger screens, the Navbar is positioned at the top of the screen. On smaller screens, the Navbar is positioned at the bottom of the screen. This positioning is handled by the styles in the global stylesheet src/app/global.css, so developers do not need to worry about positioning the Navbar in the application.

State​

The Navbar component has two main layouts: basic and dashboard. The basic state is used when the user is viewing the landing page or another page (if any) that does not require the user to be logged in. The dashboard state is used when the user is viewing a page that requires the user to be logged in.

For the the basic state, there is an optional isAuth prop that can be passed to the Navbar component to determine if the user is logged in or not. If the isAuth prop is true, the Navbar will display a link to the dashboard page. If the isAuth prop is false, the Navbar will display links to the sign in and sign up pages. isAuth can generally be linked with the user authentication state of the application through the Auth0 client object.

Usage examples​

# Basic Navbar with no user logged in
# Uses the optional isAuth prop
<Navbar isBasic={true} isAuth={false} />

# Basic Navbar with user logged in
# Uses the optional isAuth prop
<Navbar isBasic={true} isAuth={true} />

# Dashboard
# Dahsboard pages should handle the user authentication state. 
#   If the Navbar is rendered by a dashboard page, it is assumed that the user is logged in.
# Does not use the isAuth prop
<Navbar isBasic={false} />

ActionBar​

The ActionBar component is defined in the src/app/components/ActionBar.jsx file. As currently implemented, the ActionBar component is used to display the title of the page and a navigate back button. The ActionBar is positioned at the top of the page and is used to provide a consistent look and feel across the application. The ActionBar is only used in mobile views of the application.

The ActionBar styles are applied in the global stylesheet src/app/global.css.

State​

The ActionBar takes in a title prop that is used to display the title of the page. There is an additional optional disableBack prop that can be passed to the ActionBar component to disable the navigate back button.

Usage examples​

# ActionBar with back button
<ActionBar title="Page Title" />

# ActionBar without back button
<ActionBar title="Page Title" disableBack={true} />

CloverLoader​

The CloverLoader component is defined in the src/app/components/CloverLoader.jsx file. The CloverLoader component is used to display a loading spinner while the application is fetching data.

Usage examples​

<CloverLoader />