Skip to content

Components

Jump to bottom
Steven edited this page Jun 12, 2024 · 25 revisions

Wrappers

ContentWrapper

./src/components/ContentWrapper

  • for consistent styling and layout

Questions regarding ContentWrapper component: @samuelhertrich, @cwsyth



Context

./src/components/Context

Houses all Context providers used in the project to make state management more efficient and consistent.

  • AGGridLocaleContext stores a key value map with the grid locale
  • AuthenticatedContext stores a boolean with the users authentication status
  • AuthorizedContext stores a boolean with the users authorization status
  • LocaleContext stores a string with a two letter locale (e.g. 'de' or 'en')

Every context component features a useContext.ts that can be imported by any component to use the Context.

Questions regarding Context components: @MysterionAutotronic



UserAuthWrapper

./src/components/UserAuthWrapper

  • ensures user authentication
  • blocks and reroutes users to login page if not authenticated
  • reroutes admins to the admin page if trying to access user pages

Questions regarding UserAuthWrapper component: @cwsyth



AdminAuthWrapper

./src/components/AdminAuthWrapper

  • ensures admin authentication
  • blocks and reroutes users to login page if not authenticated

Questions regarding AdminAuthWrapper component: @MysterionAutotronic



Providers

LangProvider

./src/components/LangProvider

  • context provider for the i18next locale and the AG Grid locale
  • makes the API call and sets the contexts initially
  • ensures consistent states across the site
  • every child component has access to the provided contexts

Questions regarding LangProvider component: @MysterionAutotronic



AuthProvider

./src/components/AuthProvider

  • context provider for the authenticated context (=valid user) and authorized context (=valid admin)
  • makes the API call and sets the contexts initially
  • ensures consistent states across the site
  • every child component has access to the provided contexts

Questions regarding AuthProvider component: @MysterionAutotronic



Custom Components

Button

./src/components/Button

A custom button component that features disabled, loading and text props.

Questions regarding Error component: @cwsyth



Navigation

./src/components/ContentWrapper/Navigation

The navigation component provides the navigation for the admin (only visible to admin users). Furthermore it displays the current users email address as a link to the logout page and the LanguageSelector

Questions regarding Navigation component: @samuelhertrich, @MysterionAutotronic, @cwsyth, @ImpyKid



Footer

./src/components/ContentWrapper/Footer

The footer shows links to the amplimind page, the imprint and the GitHub organization as well as a license text.

Questions regarding Footer component: @MysterionAutotronic



Error

./src/components/Error

Is used to show error messages on forms with red text.

Questions regarding Error component: @cwsyth



Language Selector

./src/components/LanguageSelector

The LanguageSelector component implements a dropdown menu to set the applications language. It updates the LocaleContext and therefore needs to be wrapped in LangProvider

Questions regarding LanguageSelector component: @ImpyKid, @MysterionAutotronic



Layout

./src/components/Layout

Adds formatting to pages and wraps them with the background.

Questions regarding Layout component: @cwsyth, @MysterionAutotronic



Loader

./src/components/Loader

Shows a loader spinner.

Questions regarding Loader component: @cwsyth



LoaderPage

./src/components/LoaderPage

Shows a page with a loader spinner.

Questions regarding LoaderPage component: @cwsyth



Modal

./src/components/Modal

The Modal component is a customizable HTML dialog, that features a optional close body, and a custom body. It also features closing on pressing Esc. A polyfill is used to ensure compatibility with the testing environment and older browsers.

Questions regarding Footer component: @MysterionAutotronic



PasswordStrengthMeter

./src/components/PasswordStrengthMeter

The PasswordStrengthMeter component shows a password strength meter using zxcvbn. It features the levels weak, fair, good and strong. It requires the zxcvbn score to be passed as a param.

Questions regarding Footer component: @MysterionAutotronic



LocalizedFileInput

./src/pages/Commit/components

The localized file input component is a custom HTML <input type="file" /> component that supports dynamic localization with i18next. It features a onChange prop that takes the usual onChange() callback, an accept prop that is used as in <input type="file" accept="file_type" /> to specify the file type and a id prop that is used as in <input type="file" id="id" /> to pass a REQUIRED and UNIQUE CSS id.

Questions regarding Footer component: @MysterionAutotronic



Challenges

./src/pages/Admin/components/Challenges

The editor used inside Challenges.tsx is TinyMCE. In this case it is the selfhosted version which has been setup according to the docs. Furthermore the postinstall.js script has been added to the npm run dev and npm run build commands in order ensure an editor copy exists for every development environment since it was ignored in .gitignore.

Questions regarding Editor: @cwsyth



Hooks

useInterval

This is a custom hook similar to the experimental react useInterval() hook. It is used like a useEffect, requires a callback function and a number (delay in milliseconds) as well as an optional pause state as params. The callback function provided is executed every delay milliseconds as long as the pause state is false.

Questions regarding useInterval hook: @MysterionAutotronic



Clone this wiki locally