assemblee-virtuelle · mguihal · Apr 7, 2024 · Mar 17, 2024 · Mar 17, 2024 · Mar 31, 2024
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
@@ -29,4 +29,4 @@ RUN yarn run build
 
 EXPOSE 4000
 
-CMD serve -s build -l 4000
+CMD serve -s dist -l 4000
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/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet-defaulticon-compatibility@0.1.1/dist/leaflet-defaulticon-compatibility.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" href="https://unpkg.com/react-mde@11.5.0/lib/styles/css/react-mde-all.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/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.15.11",
-    "@mui/styles": "^5.15.11",
+    "@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,16 +16,26 @@
     "@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",
+    "dotenv": "^16.4.5",
+    "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.16.12",
     "react": "^18.1.0",
-    "react-admin": "^4.16.12",
+    "react-admin": "^4.16.14",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
+    "vite-plugin-checker": "^0.6.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
@@ -34,23 +45,25 @@
     "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
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";

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";

diff --git a/...mmon/input/TreeComponent/TreeItemUtils.js → ...mon/input/TreeComponent/TreeItemUtils.jsx b/...mmon/input/TreeComponent/TreeItemUtils.js → ...mon/input/TreeComponent/TreeItemUtils.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 from "react";
 import { TreeItem } from '@mui/x-tree-view';
 

diff --git a/frontend/src/common/input/index.js → frontend/src/common/input/index.jsx b/frontend/src/common/input/index.js → frontend/src/common/input/index.jsx
diff --git a/frontend/src/common/list/Hero/DetailsList.js → ...tend/src/common/list/Hero/DetailsList.jsx b/frontend/src/common/list/Hero/DetailsList.js → ...tend/src/common/list/Hero/DetailsList.jsx
diff --git a/frontend/src/common/list/Hero/Hero.js → frontend/src/common/list/Hero/Hero.jsx b/frontend/src/common/list/Hero/Hero.js → frontend/src/common/list/Hero/Hero.jsx
@@ -39,7 +39,7 @@ const Hero = ({ children, image, defaultImage }) => {
 };
 
 Hero.defaultProps = {
-  defaultImage: process.env.PUBLIC_URL + '/logo512.png'
+  defaultImage: '/logo512.png'
 };
 
 export default Hero;
diff --git a/frontend/src/common/list/Hero/MainImage.js → frontend/src/common/list/Hero/MainImage.jsx b/frontend/src/common/list/Hero/MainImage.js → frontend/src/common/list/Hero/MainImage.jsx
diff --git a/...nd/src/common/list/MainList/LargeLabel.js → ...d/src/common/list/MainList/LargeLabel.jsx b/...nd/src/common/list/MainList/LargeLabel.js → ...d/src/common/list/MainList/LargeLabel.jsx
diff --git a/...tend/src/common/list/MainList/MainList.js → ...end/src/common/list/MainList/MainList.jsx b/...tend/src/common/list/MainList/MainList.js → ...end/src/common/list/MainList/MainList.jsx
@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import LargeLabel from './LargeLabel';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   divider: {
     paddingTop: 5,
     paddingBottom: 20,

diff --git a/...nd/src/common/list/SideList/RightLabel.js → ...d/src/common/list/SideList/RightLabel.jsx b/...nd/src/common/list/SideList/RightLabel.js → ...d/src/common/list/SideList/RightLabel.jsx
diff --git a/...tend/src/common/list/SideList/SideList.js → ...end/src/common/list/SideList/SideList.jsx b/...tend/src/common/list/SideList/SideList.js → ...end/src/common/list/SideList/SideList.jsx
diff --git a/frontend/src/common/list/SimpleList.js → frontend/src/common/list/SimpleList.jsx b/frontend/src/common/list/SimpleList.js → frontend/src/common/list/SimpleList.jsx
diff --git a/frontend/src/common/list/TreeList.js → frontend/src/common/list/TreeList.jsx b/frontend/src/common/list/TreeList.js → frontend/src/common/list/TreeList.jsx
@@ -6,7 +6,7 @@ import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRig
 import { buildTreeData, generateTreeItem } from '../input/TreeComponent/TreeItemUtils';
 
 
-const TreeList =({source, label, reference , defaultExpanded = true}) => {
+const TreeList =({source, label, defaultExpanded = true}) => {
   const redirect = useRedirect()
   const createPath = useCreatePath();
   const { data, isLoading } = useListContext();
@@ -28,4 +28,4 @@ const TreeList =({source, label, reference , defaultExpanded = true}) => {
   )
 }
 
-export default TreeList;
+export default TreeList;
diff --git a/frontend/src/common/list/index.js → frontend/src/common/list/index.jsx b/frontend/src/common/list/index.js → frontend/src/common/list/index.jsx
diff --git a/frontend/src/config/config.js → frontend/src/config/config.ts b/frontend/src/config/config.js → frontend/src/config/config.ts
@@ -1,4 +1,10 @@
 const config = {
+  // Middleware API url (ex: https://<host>:<port>/). Should contain a trailing slash.
+  middlewareUrl: process.env.MIDDLEWARE_URL,
+
+  // Mapbox Access Token used for addresses completion
+  mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN,
+
   // Displays import tab when creating resource if it is listed here
   importableResources: [
     "Event",

diff --git a/frontend/src/config/dataProvider.js b/frontend/src/config/dataProvider.js
@@ -3,14 +3,15 @@ import ontologies from './ontologies.json';
 import dataServers from './dataServers';
 import resources from '../resources';
 import { withLifecycleCallbacks } from 'react-admin';
+import config from './config';
 
 const baseDataProvider = semanticDataProvider({
   dataServers,
   resources: Object.fromEntries(Object.entries(resources).map(([k, v]) => [k, v.dataModel])),
   ontologies,
   jsonContext: [
     'https://www.w3.org/ns/activitystreams',
-    process.env.REACT_APP_MIDDLEWARE_URL + '.well-known/context.jsonld'
+    config.middlewareUrl + '.well-known/context.jsonld'
   ]
 });
 

diff --git a/frontend/src/config/dataServers.js b/frontend/src/config/dataServers.js
@@ -1,6 +1,8 @@
+import config from "./config";
+
 const dataServers = {
   default: {
-    baseUrl: process.env.REACT_APP_MIDDLEWARE_URL,
+    baseUrl: config.middlewareUrl,
     authServer: true,
     default: true,
     uploadsContainer: '/files'
@@ -30,4 +32,4 @@ const dataServers = {
   // }
 };
 
-export default dataServers;
+export default dataServers;
diff --git a/frontend/src/index.js → frontend/src/index.tsx b/frontend/src/index.js → frontend/src/index.tsx
@@ -3,5 +3,7 @@ import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-const root = createRoot(document.getElementById('root'));
+const root = createRoot(
+  document.getElementById('root') as HTMLElement
+);
 root.render(<App />);
diff --git a/frontend/src/layout/AppBar.js → frontend/src/layout/AppBar.jsx b/frontend/src/layout/AppBar.js → frontend/src/layout/AppBar.jsx
@@ -87,7 +87,7 @@ const AppBar = props => {
         <div className={classes.presContainer}>
           <div className={classes.logoContainer}>
             <Zoom in={true} timeout={2000}>
-              <img className={classes.logo} src={process.env.PUBLIC_URL + '/logo192.png'} alt="logo" />
+              <img className={classes.logo} src={'/logo192.png'} alt="logo" />
             </Zoom>
           </div>
           <Typography className={classes.title} variant="h6" noWrap>

diff --git a/frontend/src/layout/BaseView.js → frontend/src/layout/BaseView.jsx b/frontend/src/layout/BaseView.js → frontend/src/layout/BaseView.jsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,5 @@ lerna-debug.log @@
     .DS_Store
     /data
     /.idea
+    .vscode
+    *.sparql
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,4 @@ RUN yarn run build

		EXPOSE 4000

		CMD serve -s build -l 4000
		CMD serve -s dist -l 4000