dev -> test

.github/workflows/testing-client.yml

@@ -16,6 +16,7 @@ jobs:
     name: Running client tests
     runs-on: ubuntu-22.04
     timeout-minutes: 30
+    if: ${{ github.ref_name != 'test' }}
     strategy:
       fail-fast: false
     defaults:
@@ -49,7 +50,6 @@ jobs:
           command-prefix: yarn dlx
           command: "yarn test:e2e"
         env:
-          NEXT_PUBLIC_MAPBOX_API_TOKEN: ${{ secrets.NEXT_PUBLIC_MAPBOX_API_TOKEN }}
           NEXT_PUBLIC_API_URL: ${{ secrets.CYPRESS_API_URL }}
           NEXT_TELEMETRY_DISABLED: 1
           NEXTAUTH_URL: http://localhost:3000

client/.env.sample

@@ -1,6 +1,3 @@
-NEXT_PUBLIC_MAPBOX_API_TOKEN="[mapbox-token]"
 NEXT_PUBLIC_API_URL="http://[api-url]"
 NEXTAUTH_URL="http://localhost:3000"
-NEXTAUTH_SECRET="nyancat"
-NEXT_PUBLIC_FILE_UPLOADER_MAX_SIZE=10000000
 NEXT_TELEMETRY_DISABLED=1

client/.eslintrc.cjs

@@ -0,0 +1,22 @@
+/** @type import('eslint').Linter.Config */
+module.exports = {
+  extends: [
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['prettier'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'internal', 'object', 'type'],
+        'newlines-between': 'always',
+      },
+    ],
+    'no-console': ['warn'],
+    'no-debugger': ['warn'],
+  },
+  ignorePatterns: ['*.md'],
+};

client/Dockerfile

@@ -4,7 +4,6 @@ ARG UID=5000
 ARG GID=5000
 ARG NEXTAUTH_URL
 ARG NEXTAUTH_SECRET
-ARG NEXT_PUBLIC_MAPBOX_API_TOKEN
 ARG NEXT_PUBLIC_API_URL
 ARG CYPRESS_USERNAME
 ARG CYPRESS_PASSWORD
@@ -14,7 +13,6 @@ ENV USER $NAME
 ENV APP_HOME /opt/$NAME
 ENV NEXTAUTH_URL $NEXTAUTH_URL
 ENV NEXTAUTH_SECRET $NEXTAUTH_SECRET
-ENV NEXT_PUBLIC_MAPBOX_API_TOKEN $NEXT_PUBLIC_MAPBOX_API_TOKEN
 ENV NEXT_PUBLIC_API_URL $NEXT_PUBLIC_API_URL
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV CYPRESS_USERNAME $CYPRESS_USERNAME
@@ -38,8 +36,8 @@ COPY --chown=$USER:$USER public ./public
 
 # NextJS required files
 COPY --chown=$USER:$USER next.config.js local.d.ts \
-	postcss.config.js tailwind.config.ts entrypoint.sh \
-	tsconfig.json tsconfig.eslint.json .browserlistrc .eslintrc.js .prettierrc.cjs ./
+	postcss.config.cjs tailwind.config.ts entrypoint.sh \
+	tsconfig.json .browserlistrc .eslintrc.cjs .prettierrc.cjs ./
 
 RUN yarn build
 

client/README.md

@@ -21,6 +21,17 @@ Run the development server:
 ```bash
 yarn dev
 ```
+
+### Environmental variables
+The application handles environmental variables using [@t3-oss/env-nextjs](https://env.t3.gg/docs). You can see the available (and required) variables in the `./src/env` file. **NOTE**: the application will NOT start if the required variables are not set previously.
+
+#### Testing
+Additionally, and exclusively for testing purposes, you can set the following environmental variables:
+
+- `CYPRESS_USERNAME`: email to authenticate for the e2e tests.
+- `CYPRESS_PASSWORD`: password to authenticate for the e2e tests.
+- `CYPRESS_API_URL`: API used to run the e2e tests.
+
 ### Running tests
 
 Run the tests locally:

client/docker-compose.test.yml

@@ -7,7 +7,6 @@ services:
       args:
         - NEXTAUTH_URL=http://localhost:3000
         - NEXTAUTH_SECRET=secret
-        - NEXT_PUBLIC_MAPBOX_API_TOKEN=token
     ports:
       - "3000:3000"
     container_name: landgriffon-client

client/next.config.js

@@ -1,3 +1,12 @@
+import { fileURLToPath } from 'node:url';
+
+import createJiti from 'jiti';
+
+import { env } from './src/env.mjs';
+
+const jiti = createJiti(fileURLToPath(import.meta.url));
+jiti('./src/env.mjs');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   poweredByHeader: false,
@@ -6,41 +15,48 @@ const nextConfig = {
   reactStrictMode: false,
   redirects() {
     return [
-      {
-        source: '/',
-        destination: '/analysis/map',
-        permanent: false,
-      },
-      {
-        source: '/analysis',
-        destination: '/analysis/map',
-        permanent: false,
-      },
       {
         source: '/auth/signup',
         destination: '/auth/signin',
         permanent: false,
       },
-      ...(process.env.NEXT_PUBLIC_ENABLE_EUDR !== 'true'
+      ...(env.NEXT_PUBLIC_ENABLE_EUDR
         ? [
+            {
+              source: '/',
+              destination: '/eudr',
+              permanent: false,
+            },
+            {
+              source: '/analysis',
+              destination: '/eudr',
+              permanent: false,
+            },
+            {
+              source: '/analysis/map',
+              destination: '/eudr',
+              permanent: false,
+            },
+          ]
+        : [
+            {
+              source: '/',
+              destination: '/analysis/map',
+              permanent: false,
+            },
+            {
+              source: '/analysis',
+              destination: '/analysis/map',
+              permanent: false,
+            },
             {
               source: '/eudr',
               destination: '/analysis/map',
               permanent: false,
             },
-          ]
-        : []),
+          ]),
     ];
   },
-  env: {
-    NEXT_PUBLIC_PLANET_API_KEY: 'PLAK6679039df83f414faf798ba4ad4530db',
-    NEXT_PUBLIC_CARTO_FOREST_ACCESS_TOKEN:
-      'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfemsydWhpaDYiLCJqdGkiOiJjY2JlMjUyYSJ9.LoqzuDp076ESVYmHm1mZNtfhnqOVGmSxzp60Fht8PQw',
-    NEXT_PUBLIC_CARTO_DEFORESTATION_ACCESS_TOKEN:
-      'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfemsydWhpaDYiLCJqdGkiOiJjZDk0ZWIyZSJ9.oqLagnOEc-j7Z4hY-MTP1yoZA_vJ7WYYAkOz_NUmCJo',
-    NEXT_PUBLIC_CARTO_RADD_ACCESS_TOKEN:
-      'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfemsydWhpaDYiLCJqdGkiOiI3NTFkNzA1YSJ9.jrVugV7HYfhmjxj-p2Iks8nL_AjHR91Q37JVP2fNmtc',
-  },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

client/package.json

@@ -2,6 +2,7 @@
   "name": "landgriffon-client",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -96,9 +97,11 @@
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "1.0.7",
     "uuid": "8.3.2",
-    "yup": "0.32.11"
+    "yup": "0.32.11",
+    "zod": "3.22.4"
   },
   "devDependencies": {
+    "@t3-oss/env-nextjs": "0.9.2",
     "@types/chroma-js": "2.1.3",
     "@types/d3-format": "3.0.1",
     "@types/d3-scale": "4.0.2",
@@ -108,16 +111,14 @@
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
     "@types/uuid": "^9.0.5",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
+    "@typescript-eslint/eslint-plugin": "7.7.0",
     "cypress": "13.2.0",
-    "eslint": "8.23.1",
-    "eslint-config-next": "13.5.5",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.2.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
     "istanbul-reports": "3.0.0",
+    "jiti": "1.21.0",
     "nyc": "15.1.0",
     "nyc-report-lcov-absolute": "1.0.0",
     "prettier": "^3.1.1",

client/src/components/map/layer-manager/provider.tsx

@@ -35,9 +35,7 @@ export const MapboxOverlayProvider = ({ children }: PropsWithChildren) => {
 
   const addLayer = useCallback(
     (layer) => {
-      // TODO: fix this
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+      // @ts-expect-error to fix
       const layers = OVERLAY._props.layers || [];
 
       const l1 = new layer.type({
@@ -54,9 +52,7 @@ export const MapboxOverlayProvider = ({ children }: PropsWithChildren) => {
 
   const removeLayer = useCallback(
     (id) => {
-      // TODO: fix this, same as above
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+      // @ts-expect-error to fix
       const layers = OVERLAY._props.layers || [];
 
       OVERLAY.setProps({

client/src/components/map/layers/maplibre/raster/utils.ts

@@ -1,5 +1,7 @@
 import queryString from 'query-string';
 
+import { env } from '@/env.mjs';
+
 import type { ContextualLayerApiResponse } from 'hooks/layers/getContextualLayers';
 
 export const getTiler = (
@@ -9,7 +11,7 @@ export const getTiler = (
   return queryString.stringifyUrl({
     url: tilerPath.match(/^(http|https):\/\//)
       ? tilerPath
-      : `${process.env.NEXT_PUBLIC_API_URL}${tilerPath}`,
+      : `${env.NEXT_PUBLIC_API_URL}${tilerPath}`,
     query: tilerParams,
   });
 };

client/src/components/table/column.ts

@@ -7,7 +7,6 @@ declare module '@tanstack/table-core' {
     theme: TableProps<TData>['theme'];
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     isSticky?: boolean | 'left' | 'right';
     align?: 'left' | 'right' | 'center';