assemblee-virtuelle · mguihal · May 15, 2024 · Nov 25, 2023 · Nov 26, 2023 · Nov 26, 2023
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ lerna-debug.log
 .DS_Store
 /data
 /.idea
+.vscode
+*.sparql
diff --git a/deploy/frontend/Dockerfile b/deploy/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12.16-alpine
+FROM node:20-alpine
 
 # Default arguments
 ARG SELECTED_BRANCH=master
@@ -23,10 +23,10 @@ RUN git checkout $SELECTED_BRANCH
 ADD app /archipelago/frontend
 WORKDIR /archipelago/frontend
 
-RUN yarn install
+RUN yarn install --production --frozen-lockfile
 
 RUN yarn run build
 
 EXPOSE 4000
 
-CMD serve -s build -l 4000
+CMD serve -s dist -l 4000
diff --git a/deploy/middleware/Dockerfile b/deploy/middleware/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14.16-alpine
+FROM node:20-alpine
 
 # Default arguments
 ARG SELECTED_BRANCH=master
@@ -23,7 +23,7 @@ RUN git checkout $SELECTED_BRANCH
 ADD app /archipelago/middleware
 WORKDIR /archipelago/middleware
 
-RUN yarn install
+RUN yarn install --production --frozen-lockfile
 
 EXPOSE 3000
 

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  globals: {
+    process: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['react', '@typescript-eslint', 'jsx-a11y', 'react-hooks'],
+  rules: {
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+  },
+  overrides: [
+    {
+      files: ['*.js', '*.jsx'],
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+    },
+  ],
+};
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <title>Archipelago</title>
+
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="SemApps admin interface"
+      content="Archipelago"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-defaulticon-compatibility.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/styles/css/react-mde-all.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" />
-    <title>Archipelago</title>
+
+    <meta name="apple-mobile-web-app-title" content="Archipelago">
+    <meta name="application-name" content="Archipelago">
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,10 +1,11 @@
 {
   "name": "archipelago-frontend",
   "version": "1.0.0",
+  "type": "module",
   "dependencies": {
     "@fullcalendar/core": "^5.7.2",
-    "@mui/material": "^5.0.2",
-    "@mui/styles": "^5.0.2",
+    "@mui/material": "^5.15.14",
+    "@mui/styles": "^5.15.14",
     "@mui/x-tree-view": "6.0.0-beta.0",
     "@semapps/auth-provider": "0.6.0",
     "@semapps/date-components": "0.6.0",
@@ -15,39 +16,53 @@
     "@semapps/list-components": "0.6.0",
     "@semapps/markdown-components": "0.6.0",
     "@semapps/semantic-data-provider": "0.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "date-fns": "~2.8.1",
-    "leaflet": "^1.8.0",
-    "leaflet-defaulticon-compatibility": "^0.1.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "leaflet.markercluster": "^1.5.3",
     "mui-tree-select": "^1.0.0-beta.11",
-    "ra-language-french": "^4.11.0",
+    "ra-language-french": "^4.16.12",
     "react": "^18.1.0",
-    "react-admin": "^4.11.0",
-    "react-dom": "^18.1.0"
+    "react-admin": "^4.16.14",
+    "react-dom": "^18.1.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
+    "vite-plugin-checker": "^0.6.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react-scripts": "3.4.0",
     "source-map-explorer": "^2.5.2",
     "yalc": "1.0.0-pre.53"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "link-semapps-packages": "yalc link @semapps/activitypub-components @semapps/auth-provider @semapps/date-components @semapps/field-components @semapps/geo-components @semapps/input-components @semapps/list-components @semapps/markdown-components @semapps/semantic-data-provider",
     "unlink-semapps-packages": "yalc remove --all && rm -rf node_modules/@semapps && yarn install --force"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
-  ]
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 120
+  }
 }
diff --git a/frontend/src/App.js → frontend/src/App.jsx b/frontend/src/App.js → frontend/src/App.jsx
@@ -10,7 +10,7 @@ import i18nProvider from './config/i18nProvider';
 import authProvider from './config/authProvider';
 import dataProvider from './config/dataProvider';
 import theme from './config/theme';
-import * as resources from './resources';
+import resources from './resources';
 
 import Layout from './layout/Layout';
 

diff --git a/frontend/src/HomePage.js → frontend/src/HomePage.jsx b/frontend/src/HomePage.js → frontend/src/HomePage.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { useShowController, ShowContextProvider } from 'react-admin';
 import PageShow from './resources/Page/PageShow';
+import config from './config/config';
 
 const HomePage = () => {
-  const config = {
-    id: process.env.REACT_APP_MIDDLEWARE_URL + 'pages/accueil',
+  const showConfig = {
+    id: config.middlewareUrl + 'pages/accueil',
     resource: 'Page'
   };
 
   return (
-    <ShowContextProvider value={useShowController(config)}>
-      <PageShow {...config} />
+    <ShowContextProvider value={useShowController(showConfig)}>
+      <PageShow {...showConfig} />
     </ShowContextProvider>
   );
 };

diff --git a/frontend/src/common/CreateOrImport.js → frontend/src/common/CreateOrImport.jsx b/frontend/src/common/CreateOrImport.js → frontend/src/common/CreateOrImport.jsx
diff --git a/...end/src/common/GroupedReferenceHandler.js → ...nd/src/common/GroupedReferenceHandler.jsx b/...end/src/common/GroupedReferenceHandler.js → ...nd/src/common/GroupedReferenceHandler.jsx
diff --git a/frontend/src/common/RedirectByType.js → frontend/src/common/RedirectByType.jsx b/frontend/src/common/RedirectByType.js → frontend/src/common/RedirectByType.jsx
diff --git a/frontend/src/common/ReferenceFilterTree.js → frontend/src/common/ReferenceFilterTree.jsx b/frontend/src/common/ReferenceFilterTree.js → frontend/src/common/ReferenceFilterTree.jsx
@@ -47,8 +47,8 @@ function generateFilterTree(broader, label, allItems, routeTree, parentId) {
             maxWidth: "140px"
           }}>{route["pair:label"]}
         </div>}
-        nodeId={route["id"]} 
-        key={route["id"]} 
+        nodeId={route["id"]}
+        key={route["id"]}
         selected={true} >
           {generateFilterTree(broader, label, allItems, [], route["id"])}
       </CustomTreeItem>
@@ -58,7 +58,7 @@ function generateFilterTree(broader, label, allItems, routeTree, parentId) {
 
 const CustomContent = React.forwardRef(function CustomContent(props, ref) {
   const { filterValues } = useListFilterContext();
-  
+
   const {
     classes,
     className,
@@ -89,7 +89,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
     handleExpansion(event);
   };
 
-  const handleSelectionClick = (event, b) => {
+  const handleSelectionClick = (event) => {
     handleSelection(event);
   };
 
@@ -143,7 +143,7 @@ function CustomTreeItem(props) {
   return <TreeItem ContentComponent={CustomContent} {...props} />;
 }
 
-const ReferenceFilterTree = ({ reference, source, broader, label, limit, sort, filter, icon, predicate, title }) => {
+const ReferenceFilterTree = ({ reference, source, broader, label, sort, filter, title }) => {
   const { data } = useGetList(reference, { pagination:{page: 1, perPage: Infinity} , sort, filter});
   const { filterValues, setFilters } = useListFilterContext();
   const [ selected, setSelected ] = useState();
@@ -205,4 +205,4 @@ const ReferenceFilterTree = ({ reference, source, broader, label, limit, sort, f
   )
 };
 
-export default ReferenceFilterTree;
+export default ReferenceFilterTree;
diff --git a/frontend/src/common/field/MarkdownField.js → frontend/src/common/field/MarkdownField.jsx b/frontend/src/common/field/MarkdownField.js → frontend/src/common/field/MarkdownField.jsx
diff --git a/frontend/src/common/field/index.js → frontend/src/common/field/index.jsx b/frontend/src/common/field/index.js → frontend/src/common/field/index.jsx
diff --git a/frontend/src/common/input/DateTimeInput.js → frontend/src/common/input/DateTimeInput.jsx b/frontend/src/common/input/DateTimeInput.js → frontend/src/common/input/DateTimeInput.jsx
diff --git a/frontend/src/common/input/LocationInput.js → frontend/src/common/input/LocationInput.jsx b/frontend/src/common/input/LocationInput.js → frontend/src/common/input/LocationInput.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { extractContext, LocationInput as SemAppsLocationInput } from '@semapps/geo-components';
+import config from '../../config/config';
 
 const LocationInput = props => (
   <SemAppsLocationInput
     mapboxConfig={{
-      access_token: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
+      access_token: config.mapboxAccessToken,
       types: ['place', 'address'],
       country: ['fr', 'be', 'ch']
     }}

diff --git a/...src/common/input/ReificationArrayInput.js → ...rc/common/input/ReificationArrayInput.jsx b/...src/common/input/ReificationArrayInput.js → ...rc/common/input/ReificationArrayInput.jsx
@@ -11,19 +11,19 @@ const useHideInputStyles = makeStyles({
       display: 'none'
     }
   });
-  
+
 const ReificationArrayInput = props => {
     const { reificationClass, children, ...otherProps } = props;
     const hideInputStyles = useHideInputStyles();
 
     return (
         <ArrayInput {...otherProps}>
         <SimpleFormIterator inline>
-            {props.children}
+            {children}
             <TextInput className={hideInputStyles.root} source="type" defaultValue={reificationClass} />
         </SimpleFormIterator>
         </ArrayInput>
     );
 };
-  
-export default ReificationArrayInput;
+
+export default ReificationArrayInput;
diff --git a/...eeComponent/CustomTreeSelectArrayInput.js → ...eComponent/CustomTreeSelectArrayInput.jsx b/...eeComponent/CustomTreeSelectArrayInput.js → ...eComponent/CustomTreeSelectArrayInput.jsx
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-redeclare */
 import React, { useEffect, useState } from "react";
 import TreeSelect, {  DefaultOption, getDefaultOptionProps } from "mui-tree-select";
 import { getTreeData,Node } from "./TreeItemUtils";
@@ -12,6 +15,7 @@ const CustomTreeSelectArrayInput = (props) => {
   const [selected, setSelected] = useState([]);
   const { data, isLoading } = useGetList(props.reference, { pagination: { page: 1, perPage: Infinity } });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let nodes = [];
   if (!isLoading) {
       nodes = getTreeData(data, props.broader).map((item) => {
@@ -50,7 +54,7 @@ const CustomTreeSelectArrayInput = (props) => {
         isBranch={(node) => (node ? node.isBranch() : true)}
         value={selected}
         onChange={handleChange}
-        renderInput={(params) => 
+        renderInput={(params) =>
             <TextField
                 {...params}
                 {...field}
@@ -59,7 +63,7 @@ const CustomTreeSelectArrayInput = (props) => {
             />
         }
         renderOption={(...args) => {
-      
+
           return (
               <DefaultOption
                   {...((props, node) => ({
@@ -83,4 +87,4 @@ const CustomTreeSelectArrayInput = (props) => {
   );
 };
 
-export default CustomTreeSelectArrayInput;
+export default CustomTreeSelectArrayInput;
diff --git a/...ut/TreeComponent/CustomTreeSelectInput.js → ...t/TreeComponent/CustomTreeSelectInput.jsx b/...ut/TreeComponent/CustomTreeSelectInput.js → ...t/TreeComponent/CustomTreeSelectInput.jsx
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-redeclare */
 import React, { useEffect, useState } from "react";
 import TreeSelect, {  DefaultOption, getDefaultOptionProps } from "mui-tree-select";
 import { getTreeData, Node } from "./TreeItemUtils";
@@ -26,6 +29,7 @@ const CustomTreeSelect = (props) => {
   const [selected, setSelected] = useState(null);
   const { data, isLoading } = useGetList(props.reference, { pagination: { page: 1, perPage: Infinity } });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let nodes = [];
   if (!isLoading) {
       nodes = getTreeData(data, props.broader).map((item) => {