./src/components/ContentWrapper

• for consistent styling and layout

Questions regarding ContentWrapper component: @samuelhertrich, @cwsyth

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

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

./src/components/AdminAuthWrapper

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

Questions regarding AdminAuthWrapper component: @MysterionAutotronic

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

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

./src/components/Button

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

Questions regarding Error component: @cwsyth

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

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

./src/components/Error

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

Questions regarding Error component: @cwsyth

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

./src/components/Layout

Adds formatting to pages and wraps them with the background.

Questions regarding Layout component: @cwsyth, @MysterionAutotronic

./src/components/Loader

Shows a loader spinner.

Questions regarding Loader component: @cwsyth

./src/components/LoaderPage

Shows a page with a loader spinner.

Questions regarding LoaderPage component: @cwsyth

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

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

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

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

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