activitypods · srosset81 · Jun 24, 2024 · Jun 25, 2024
diff --git a/backend/.env b/backend/.env
@@ -1,5 +1,5 @@
 SEMAPPS_HOME_URL=http://localhost:3002/
-SEMAPPS_FRONT_URL=http://localhost:4000/
+SEMAPPS_FRONT_URL=http://localhost:5173/
 SEMAPPS_PORT=3002
 
 # Triple store

diff --git a/frontend/.env b/frontend/.env
@@ -1,24 +1,16 @@
-REACT_APP_NAME="Welcome to my place"
-REACT_APP_LANG=en
-REACT_APP_CONTACT_EMAIL=contact@welcometomyplace.org
+VITE_APP_NAME="Welcome to my place"
+VITE_APP_LANG=en
 
-REACT_APP_BACKEND_URL=http://localhost:3002/
-REACT_APP_BACKEND_CLIENT_ID=${REACT_APP_BACKEND_URL}app
+VITE_BACKEND_URL=http://localhost:3002/
+VITE_BACKEND_CLIENT_ID=${VITE_BACKEND_URL}app
 
-REACT_APP_ORGANIZATION_NAME=Virtual Assembly
-REACT_APP_ORGANIZATION_URL=https://virtual-assembly.org
+VITE_ORGANIZATION_NAME=Virtual Assembly
+VITE_ORGANIZATION_URL=https://virtual-assembly.org
 
 # If this is defined, the user will not be able to choose a pod provider
 # This is useful to test a pod provider in a local dev environment
-REACT_APP_POD_PROVIDER_DOMAIN_NAME=
+VITE_POD_PROVIDER_DOMAIN_NAME=
 
 # Required for the addresses autocomplete fields
 # See https://docs.mapbox.com/help/getting-started/access-tokens/
-REACT_APP_MAPBOX_ACCESS_TOKEN=
-
-# Port under which the application will be launched
-PORT=4000
-
-# Needed to set our own eslint rules
-# See https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config
-EXTEND_ESLINT=true
+VITE_MAPBOX_ACCESS_TOKEN=
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -0,0 +1,23 @@
+export default {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    "react/prop-types": "off",
+  },
+};
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="shortcut icon" href="./favicon.ico" />
+    <title>Welcome to my place</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+        background-color: #eaeaea;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+      }
+
+      a,
+      a:hover,
+      a:active {
+        color: #d2123f;
+        text-decoration: none;
+      }
+
+      .MuiScopedCssBaseline-root {
+        background-color: unset;
+      }
+
+      /* .loader-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #fafafa;
+      }
+
+      .loader,
+      .loader:before,
+      .loader:after {
+        border-radius: 50%;
+      }
+
+      .loader {
+        color: #283593;
+        font-size: 11px;
+        text-indent: -99999em;
+        margin: 55px auto;
+        position: relative;
+        width: 10em;
+        height: 10em;
+        box-shadow: inset 0 0 0 1em;
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+      }
+
+      .loader:before,
+      .loader:after {
+        position: absolute;
+        content: "";
+      }
+
+      .loader:before {
+        width: 5.2em;
+        height: 10.2em;
+        background: #fafafa;
+        border-radius: 10.2em 0 0 10.2em;
+        top: -0.1em;
+        left: -0.1em;
+        -webkit-transform-origin: 5.2em 5.1em;
+        transform-origin: 5.2em 5.1em;
+        -webkit-animation: load2 2s infinite ease 1.5s;
+        animation: load2 2s infinite ease 1.5s;
+      }
+
+      .loader:after {
+        width: 5.2em;
+        height: 10.2em;
+        background: #fafafa;
+        border-radius: 0 10.2em 10.2em 0;
+        top: -0.1em;
+        left: 5.1em;
+        -webkit-transform-origin: 0px 5.1em;
+        transform-origin: 0px 5.1em;
+        -webkit-animation: load2 2s infinite ease;
+        animation: load2 2s infinite ease;
+      }
+
+      @-webkit-keyframes load2 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes load2 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      } */
+    </style>
+    <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.2/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" />
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+  <script type="module" src="/src/index.jsx"></script>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,20 @@
 {
   "name": "welcometomyplace-frontend",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
+    "format": "prettier --write ./src",
+    "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"
+  },
   "dependencies": {
+    "@fontsource/kaushan-script": "^5.0.21",
+    "@fontsource/roboto": "^5.0.13",
     "@mui/styles": "^5.0.2",
     "@react-hook/debounce": "^4.0.0",
     "@semapps/activitypub-components": "0.6.2",
@@ -24,7 +37,7 @@
     "final-form-calculate": "^1.3.2",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.8.0",
-    "leaflet-defaulticon-compatibility": "^0.1.1",
+    "leaflet-defaulticon-compatibility": "0.1.2",
     "leaflet.markercluster": "^1.5.3",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",
@@ -48,41 +61,18 @@
     "url-join": "^4.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "prettier": "^2.3.2",
-    "react-scripts": "3.4.0",
-    "source-map-explorer": "^2.5.2",
-    "yalc": "1.0.0-pre.53"
-  },
-  "scripts": {
-    "start": "export NODE_OPTIONS=\"--openssl-legacy-provider --max-old-space-size=8192\" && react-scripts start",
-    "build": "export NODE_OPTIONS=\"--openssl-legacy-provider --max-old-space-size=8192\" && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "bootstrap": "lerna bootstrap",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "prettier": "prettier --single-quote --print-width 120 --write '**/*.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",
-    "overrides": [
-      {
-        "files": [
-          "**/*.js"
-        ],
-        "rules": {
-          "jsx-a11y/anchor-is-valid": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ]
+    "@types/node": "^18.16.1",
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.5"
+  }
 }
diff --git a/frontend/prettier.config.cjs b/frontend/prettier.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  singleQuote: true,
+  printWidth: 120,
+  trailingComma: "none",
+  arrowParens: "avoid",
+};