Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

3) The React app

Jump to bottom
Olivier PASCAL edited this page Jul 6, 2022 · 4 revisions

The entry point

  • src/main.js: startup
  • src/panel/app_panel.js: initialize the map, render RootComponent

The Map

The map is created and managed from src/adapters/scene.js

The code structure

  • src/adapters: JS scripts used by React components
  • src/components: sub-components useable by different panels
  • src/hooks: React hooks useable by different panels
  • src/libs: helper scripts
  • src/mapbox: Mapbox plug-in scripts
  • src/modals: Modals that can appear above the whole app (attached/detached on-the fly in a separate React root)
  • src/panel: All the elements rendered on top of the map
  • src/scss: SCSS stylesheets
  • node_modules/@qwant/qwant-ponents: Design components shared with Qwant Search and published on npm

The configuration files

  • .env files at the root of the project
  • YML files in /config/
  • Custom server configs for de / plive / prod instances (see Gitlab)

Typescript

The codebase is using both Javascript and Typescript files (.ts, .tsx) using babel-preset-typescript.

Migration

The codebase is incrementally migrated to Typescript - the migration started in February 2022.

You can follow some progression indicators running the following commands.

  • npm run ts:coverage - Display a Typescript coverage report
  • npm run ts:count - Display the sum of Javascript/JSX files and Typescript/TSX files in the project.

Types

You can find useful Qmaps types in @types/ folder.

Libraries

We encourage to maintain as much as possible typings for internal Qwant libs such as @qwant-ponents.
This is a temporary way to handle typings in the project as far as @qwant-ponents is not typed yet.

Idunn

To enforce strict API response manipulation through the codebase,
we are using openapi-typescript to generate types from Idunn OpenAPI JSON file.

To update types and regenerate @types/idunn.ts file, you can use following command:

  • npm run ts:codegen-idunn

⚠️ Make sure to specify IDUNN_OPEN_API_URL JSON path in your local .env file.

Routing

See: https://github.com/Qwant/erdapfel/blob/master/docs/src/routing.md

Possible future clean-up:

  • merge src/adapters and src/libs
  • move js scripts in src/panel elsewhere
  • remove old files / folders at the root of the projects (bench, dev, docs, some local_modules, ...)
Clone this wiki locally