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.
Navbar
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 />