@preply/navigation NPM

Overview

This package contains main navigation components used across the pages: header and navigation menu (aka 'black' menu)

Build & run

Docker mode

Build

docker-compose run --rm main yarn build

:warning: This doesn't work from docker so far. Propbably need to try storybook-docker or smth

Start storybook

docker-compose up

Local mode

Prerequisites

Our project depends on a particular version of NodeJS to run (both locally and on CI). Refer to nvmrc to find the actual version. Use nvm to easily switch the version of NodeJS.
We use yarn, so you'll need to run yarn in the project folder before starting to work on it. Installing deps via npm install won't work.

Start storybook

yarn storybook

To test with monolith:

Build
```
yarn dev
```
Install or link the local version of @preply/navigation in the monolith:
- Locall installation - use npm pack
- Linking - use yarn link/npm link; altho mixing of npm and yarn may work unstable, so the recommended way for convenience is to use yalc

Go to http://localhost:9001

Codestyle

Refer to the ESLint in Preply: How to for a detailed guide on how we pursue the same codestyle within different projects at Preply.

:bulb: You’ll need to install dependencies in the repo root by running yarn there to enable linting via CLI.

Monitoring / Alerting

Errors from this service are reported to Sentry under client-pkgs project.

To filter errors that are only related to this service use source tag.

Release

Follow this readme

Usage

yarn add @preply/navigation -E

import { Header, NavigationMenu, NavigationConfig } from `@preply/navigation`

<NavigationConfig {...props}>
    <Header />
    {includeNavMenu && <NavigationMenu />}
</NavigationConfig>

In order to prevent page jumping while the Header is being rendered, you might need to wrap it into a placeholder with 70px height

Props

language: string - current page language currentPath: string - current router path options: NavigationOptions Optional - configuration options: apiHost: string - GraphQL API host url (e.g. http://localhost)

TODO

Contribute to @preply/ui to create Select and Notification components and replace those temp ones copypasted into here
Get rid of redux (it's a legacy stuff and being used only for fetching lessons in a single place)

How to add a new notification

The piece of code responsible for rendering notifications is located in ./src/components/Header/notifications/index.tsx.

The component in charge of rendering the notifications once is open is NotificationList.

All the bell notifications are listed within

NotificationList.customSystemMessage: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];

Currently, there are some notifications that if available to be seen, will expand automatically the bell notification display, view popupVisible.

Currently, there are also some notifications that even if they are available, the bell notification display will not be opened BUT there will be a badge indicating there is a bell notification, for instance allNotificationsCount.

Currently, some notifications use query and mutation calls to the server to get and give information with respect to the visibility, status, and perhaps content of a particular notification. For instance, see the Certificate Notification (under an experiment as well):

./src/components/Header/notifications/CertificateMessage/index.tsx is the React component where the interaction is happening, telling the server whether it was seen, whether any of its buttons was clicked etc.

Most, if not all of the bell notification components are using the direct implementation of ./src/components/Header/notifications/NotificationItem/index.tsx as the parent component where they compose the notification.