@preply/navigation

Overview

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

Data being displayed

This package is using live data from your active user profile on your localhost environment.

If you want to see the different states of the navigation (i.e for an Approved tutor vs an Applicant one) you can login into different profiles and then see changes reflected in Storybook.

REBRAND local dev

It's been a mess and I'd appreciate if anyone could solve this properly but after a couple of days of wrangling with @preply/shared and navigation I see no other viable option to work on this.

Do yarn add file:../../../yarn-workspace/packages/shared

don't commit yarn.lock changes

yarn --ignore-optional doesn't work as intended (it's literally bugged) so it's no use to install it as optional dependency

uncomment rebrand related lines in .storybook/config.js and /src/Navigation.stories.tsx

This is a temporary setup until FE platform figures out how to run these together or rebrand components are moved to DS.

Build & run

Docker mode

Build

docker-compose run --rm main yarn build

⚠️ 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

Test with Preply-Space

You have a few options to test the Navigation library in the context of Preply-Space, npm pack, npm/yarn link, and yalc. Here is an example with yalc for a quick start guide.

1. yarn global add yalc

2. Use the following bash scripts to run and clean:

   1. Run the following cmd in the navigation folder. That's it, now go test your changes.

      yarn dev && yalc publish && cd ../../preply-space && yalc add @preply/navigation && yarn start

      Yarn dev might take quite some time, (ranging between 2 and 11 minutes, so stay patient even if the terminal seems stuck) Rerun this command to fetch new changes if needed.
   2. When done testing ensure to clean up the extra files.

      cd ../../preply-space && yalc remove @preply/navigation

Test with monolith:

1. Build

   yarn dev

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

Log in

1. Click "Log in" and use the login/password option.
2. Start preply-space locally, impersonate there, and it should log in the Navigation's storybook as well.

More info: Slack.

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.

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

An example for the usage of NotificationItem can be found in ./src/components/Header/notifications/KidsSearch/index.tsx

For more information on the different bell notifications, please refer to Confluence