Entourage Web App

• Technologies
  • Outils
  • Bibliothèques internes
• Installation
• Architecture
• Storybook
• Tests
  • Jest
  • Git hooks
• Versionning & Release
• Ressources React
  • Docs & blogs
  • Bibliothèques React

Technologies

Outils

• React.js
• Next.js - React Framework
• TypeScript - JavaScript superset
• ESLint - JavaScript Linter
• Jest - Tests unitaires
• Storybook - UI Components doc
• Sentry - Bug tracker

Modules principaux & versions

App	Version
Node	14.18.x
NPM	6.14.x
YARN	1.22.x
Next.js	12.0.7
React	17.0.2
Redux	7.2.2
Redux-Saga	1.1.3
React-Query	0.3.23
Webpack	4.41.2
esLint	8.15.0

Bibliothèques internes

• Forms - react-hook-form
• Design system - @material-ui
• Data - react-query
• HTTP client - axios
• WebSocket client - socket.io-client

Installation

Pour lancer le projet, vous devez installer Yarn.

Install dependencies

yarn install

Build dependencies

yarn dev

Variable d'environnement

ADMIN_ASSO_URL=
API_KEY=
API_V1_URL= // utiliser l'URL de l'API en preprod
FIREBASE_API_KEY=
FIREBASE_APP_ID=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_MEASUREMENT_ID=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
GOOGLE_MAP_API_KEY=
HEROKU_APP_ID=
HEROKU_APP_NAME=
HEROKU_RELEASE_CREATED_AT=
HEROKU_RELEASE_VERSION=
HEROKU_SLUG_COMMIT=
HEROKU_SLUG_DESCRIPTION=
PAPERTRAIL_API_TOKEN=
SENTRY_AUTH_TOKEN=
SENTRY_DSN=
SERVER_URL=

Architecture

• components
• containers
• core
  • api
  • events
  • store
  • services
  • useCases
• i18n
• pages
• styles
• utils
  • hooks
  • types
  • misc
    • plateform

components

Composants React purement UI, sans manimulation de données. Ces composant sont visibles dans la documentation Storybook

Dépendances: components styles utils

containers

Composant React qui manupule des données. Ils sont en charge fetcher les données et de les afficher. Un composant de type "container" peut inclure d'autres containers ainsi que des composants UI.

core

Logique métier

api

Le schéma de l'api est défini dans src/api/schema et utilise le format typescript-object-schema.

Utilisation de l'API:

import { api } from 'src/core/api'

const users = await api.request({
  name: 'GET users',
  pathParams: {
    ...
  },
  params: {
    ...
  },
  data: {
    ...
  }
})

Les valeur de name seront autocompletées, ainsi que les valeurs requises pour params, data, etc.
L'objet api est une instance axios.

routes

• /anonymous_users POST
• /entourages POST
• /entourages/:entourageId/users GET
• /entourages/:entourageId/users POST
• /entourages/:entourageId/chat_messages GET
• /entourages/:entourageId/chat_messages POST
• /entourages/:entourageId/users/:userId PUT
• /entourages/:entourageId/users/:userId DELETE
• /feeds GET
• /login POST
• /myfeeds GET
• /pois GET
• /users POST
• /users/me GET
• /users/me PATCH
• /users/me/address POST
• /users/me/presigned_avatar_upload/ POST
• /users/lookup POST

events

Il s'agit d'un système de listener / dispatch utilisant RxJS. On y trouvera des hooks pour écouter l'évenement onLogin, onLogout par exemple.

Liste des évènements

• onLogin
• onLogout

Exemple

import { useOnLogin } from 'src/core/events'

function MyComponent() {

  useOnLogin((user) => {
    // code
  })

  // ...
}

Store Redux

Persistance des données via react-redux Ordonnancement des actions via redux-saga

Use-Cases

• authUser
• feed
• firebase
• location
• messages
• notifications
• pois

Détails des uses-cases

Chaque use case possède

• un fichier d'action xxx.actions.ts
• un fichier saga xxx.saga.ts
• un fichier de test xxx.spec.ts
• un fichier de type xxx.types.ts
• un fichier d'interface pour définir les méthode de l'API IXXXGateway.ts
• un fichier de mock de l'API pour moquer l'interface TestXXXGateway.ts
• éventuellement un fichier de mocks __mocks__.ts

Tests

Chaque use-case possède un fichier de test dans le dossier xxx.spec.ts.

Ce fichier permet de tester toute la logique métier du use-case, sans se soucier de l'interface.

Store legacy React-Query (à remplacer)

Persistance des données via react-query

Ce store était utilisé avant, mais il faut le remplacer par le store Redux.

Il reste quelques use-cases à remplacer par le store Redux.

Queries

• useQueryEntouragesWithMembers
• useQueryEntourageUsers
• useQueryMembersPending
• useQueryUser

Mutations

• useMutateAcceptEntourageUser
• useMutateDeleteEntourageUser

i18n

Contenu textuel

Dépendances: aucune

pages

Composant React servant de Page NextJS. Plus d'infos

Dépendances: toutes

Actions

/actions: les actions ou événements autour d'une zone par défaut

/actions/[actionId]: les détails d'une action ou d'un événement, et les actions ou événements autour de l'élément en question

POIs

/pois: les POIs autour d'une zone par défaut

/pois/[poiId]: les détails d'un POI et les POIs autour de l'élément en question

Routes spéciales

/actions/[cityId]: les actions ou événements de la ville en question /pois/[cityId]: les POIs de la ville en question

cityId peut prendre une des valeurs suivantes :

'paris' | 'lyon' | 'rennes' | 'lille' | 'hauts-de-seine' | 'seine-saint-denis'

Liste des routes "statiques" existantes

• https://app.entourage.social/actions
• https://app.entourage.social/actions/paris
• https://app.entourage.social/actions/lyon
• https://app.entourage.social/actions/rennes
• https://app.entourage.social/actions/lille
• https://app.entourage.social/actions/hauts-de-seine
• https://app.entourage.social/actions/seine-saint-denis
• https://app.entourage.social/pois
• https://app.entourage.social/pois/paris
• https://app.entourage.social/pois/lyon
• https://app.entourage.social/pois/rennes
• https://app.entourage.social/pois/lille
• https://app.entourage.social/pois/hauts-de-seine
• https://app.entourage.social/pois/seine-saint-denis

styles

Données relatives au style de l'application: thème Matérial UI, liste des couleurs utilisé, etc...

Breakpoints & Responsive design

import React from 'react'
import styled from 'styled-components'
import { devices } from 'src/styles'

export const Container = styled.div`
  @media ${devices.mobile} {
    // CSS for mobile
  }

  @media ${devices.desktop} {
    // CSS for desktop
  }
`

utils

Liste d'utilitaires JavaScript et TypeScript

Plateformes

Il arrive souvent d'avoir besoin de créer un composant spécique par plateforme (mobile / tablette / desktop). Exemple:

src/components/Header/index.ts

import { plateform } from 'src/utils/misc'
import { Header as Desktop } from './Header.desktop'
import { Header as Mobile } from './Header.mobile'

export const Header = plateform({
  Mobile,
  Desktop,
})

App.tsx

import { Header } from 'src/components/Header'

export function App() {
  return (
    <Header />
    ...
  )
}

Storybook

La version en ligne du storybook d'entourage est ici: reseauentourage.github.io/entourage-webapp

Lancer le styleguide en local

yarn storybook

Créer une story

Créer un fichier *.stories.tsx au même endroit que le composant

Button.tsx
Button.stories.tsx

import React from 'react'
import { Button } from './Button'

export default {
  title: 'Button',
}

export const BasicButton = () => <Button />

Publier le styleguide sur Github Pages

yarn deploy-storybook

Note: d'ici quelques temps le déploiement de storybook sera automatisé avec Travis

Tests

Jest

Les tests unitaires sont réalisés avec Jest

Architecture

Button.tsx
Button.styles.ts
__tests__
  Button.spec.ts

Exécuter les tests unitaires:

yarn test:jest

Git hooks

Huksy est utilisé pour activer les git hooks.

Git hooks actifs:

"pre-commit": "yarn test:eslint",
"pre-push": "yarn test"

Pour contourner les git hook, vous pouvez utiliser --no-verify, mais à faire uniquement en cas de force majeur 😉

git commit -m "votre message" --no-verify
git push --no-verify

Versionning & Release

• Conventional Commits

Ressources React

Docs & blogs

• Doc officielle React - reactjs.org

• Doc officielle Next - nextjs.org

• React Status newsletter - react.statuscode.com

• Resources React (docs, confs, lib, blogs) - github.com/enaqx/awesome-react

• Kent C Dodds - kentcdodds.com/blog

• Dan Abramov - overreacted.io

Bibliothèques React

• Hooks - awesome-react-hooks

• Components - awesome-react-components