Merge pull request #931 from wger-project/feature/move-to-vite

Move to vite
wger-project · Jul 20, 2024 · 1535890 · 1535890
2 parents ec0429e + d267286
commit 1535890
Show file tree

Hide file tree

Showing 33 changed files with 2,730 additions and 7,556 deletions.
diff --git a/.env.TEMPLATE b/.env.TEMPLATE
@@ -5,7 +5,9 @@
 #
 
 # wger instance
-REACT_APP_API_SERVER=https://wger.de
+VITE_API_SERVER=https://wger.de
 
 # API token for the user
-REACT_APP_API_KEY=your-api-token-here
+VITE_API_KEY=your-api-token-here
+
+VITE_TIME_ZONE=Europe/Berlin
diff --git a/.env.production b/.env.production
@@ -1,6 +1,6 @@
 # During production the wger instance is the same server from which the scripts
 # are executed.
-REACT_APP_API_SERVER=
+VITE_API_SERVER=
 
 # Don't generate source maps for production
 GENERATE_SOURCEMAP=false
diff --git a/.env.test b/.env.test
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub'
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,34 +2,34 @@
 <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 name="theme-color" content="#000000" />
+    <link href="/favicon.ico" rel="icon" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta content="#000000" name="theme-color" />
     <meta
-            name="description"
-            content="Web site created using create-react-app"
+        content="Web site created using create-react-app"
+        name="description"
     />
     <style>
         @font-face {
             font-family: "Open Sans Light";
-            src: url("%PUBLIC_URL%/OpenSans-Light.woff") format("woff");
+            src: url("/OpenSans-Light.woff") format("woff");
             font-weight: normal;
             font-style: normal;
         }
 
         @font-face {
             font-family: "Open Sans Bold";
-            src: url("%PUBLIC_URL%/OpenSans-Bold.woff") format("woff");
+            src: url("/OpenSans-Bold.woff") format("woff");
             font-weight: normal;
             font-style: normal;
         }
     </style>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link href="/logo192.png" rel="apple-touch-icon" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="/manifest.json" rel="manifest" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -44,6 +44,7 @@
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
+<script src="/src/index.tsx" type="module"></script>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

diff --git a/package.json b/package.json
@@ -2,7 +2,9 @@
   "name": "wger_react",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.21",
@@ -12,22 +14,24 @@
     "@mui/x-data-grid": "^6.16.0",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-query": "^4.2.3",
+    "@vitejs/plugin-react": "^4.3.1",
     "axios": "^1.6.7",
     "formik": "^2.4.6",
     "history": "^5.3.0",
-    "i18next": "^23.6.0",
-    "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-http-backend": "^2.4.3",
+    "i18next": "^23.12.2",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
     "luxon": "^3.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
     "react-responsive": "^10.0.0",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.25.1",
     "react-simple-wysiwyg": "^3.0.3",
     "recharts": "^2.12.7",
     "slug": "^9.1.0",
-    "typescript": "5.1.6",
+    "typescript": "^5.5.3",
+    "vite-tsconfig-paths": "^4.3.2",
     "web-vitals": "^4.2.1",
     "yup": "^1.4.0"
   },
@@ -37,6 +41,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.7",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
@@ -46,17 +51,22 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "i18next-parser": "^9.0.0",
-    "react-scripts": "^5.0.1"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^22.1.0",
+    "ts-jest": "^29.1.5",
+    "vite": "^5.3.2",
+    "vitest": "^0.34.6"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
     "postbuild": "./postbuild.sh",
-    "test": "LANG=de_de react-scripts test --watchAll=false",
-    "eject": "react-scripts eject",
+    "test": "LANG=de_de jest",
     "i18n": "i18next",
     "lint": "eslint ."
   },
@@ -100,7 +110,17 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "^axios$": "axios/dist/axios.js"
-    }
+      "^axios$": "<rootDir>/node_modules/axios/dist/node/axios.cjs",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    },
+    "preset": "ts-jest",
+    "testEnvironment": "jest-environment-jsdom",
+    "modulePaths": [
+      "<rootDir>/src"
+    ],
+    "setupFilesAfterEnv": [
+      "./src/setupTests.ts"
+    ]
   }
 }
diff --git a/postbuild.sh b/postbuild.sh
@@ -8,8 +8,8 @@ GREEN='\033[0;32m'
 NC='\033[0m'
 
 if [ -d "$STATIC_FOLDER" ]; then
-    cp build/static/js/main.*.js $STATIC_FOLDER/main.js
-    cp build/static/css/main.*.css $STATIC_FOLDER/main.css
+    cp build/assets/index-*.js $STATIC_FOLDER/main.js
+    cp build/assets/index-*.css $STATIC_FOLDER/main.css
     cp -r build/locales $STATIC_FOLDER/
     cp -r build/muscles $STATIC_FOLDER/
     echo -e "${GREEN}*** SUCCESS ***: Build files copied to django static folder: ${STATIC_FOLDER} ${NC}"

diff --git a/src/components/Exercises/Add/Step5Images.tsx b/src/components/Exercises/Add/Step5Images.tsx
@@ -77,9 +77,9 @@ export const Step5Images = ({ onContinue, onBack }: StepProps) => {
         derivativeSourceUrl: string,
         imageStyle: number
     }) => {
-        setLocalImages(localImages?.concat({
-            url: popupImage?.url,
-            file: popupImage?.file,
+        setLocalImages(localImages.concat({
+            url: popupImage?.url!,
+            file: popupImage?.file!,
 
             author: data.author,
             authorUrl: data.authorUrl,

diff --git a/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx b/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx
@@ -29,6 +29,8 @@ jest.mock("components/Exercises/queries");
 describe("Exercise translation edit tests", () => {
 
     beforeEach(() => {
+        jest.resetAllMocks();
+
         // @ts-ignore
         editExerciseTranslation.mockImplementation(() => Promise.resolve(testExerciseSquats.translations[1]));
 

diff --git a/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.test.tsx b/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.test.tsx
@@ -17,6 +17,8 @@ describe("Test the ExerciseDeleteDialog component", () => {
 
     // Arrange
     beforeEach(() => {
+        jest.resetAllMocks();
+
         // @ts-ignore
         searchExerciseTranslations.mockImplementation(() => Promise.resolve(searchResponse));
 

diff --git a/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx b/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx
@@ -19,12 +19,12 @@ import {
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
 import { Exercise } from "components/Exercises/models/exercise";
 import { Language } from "components/Exercises/models/language";
+import { SERVER_URL } from "config";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { deleteExercise, deleteExerciseTranslation, getExercise } from "services";
 import { ExerciseSearchResponse } from "services/responseType";
-import { SERVER_URL } from "utils/url";
 
 export function ExerciseDeleteDialog(props: {
     onClose: Function,

diff --git a/src/components/Exercises/Filter/NameAutcompleter.tsx b/src/components/Exercises/Filter/NameAutcompleter.tsx
@@ -12,14 +12,14 @@ import {
     Switch,
     TextField
 } from "@mui/material";
+import { SERVER_URL } from "config";
 import throttle from 'lodash/throttle';
 import * as React from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { searchExerciseTranslations } from "services";
 import { ExerciseSearchResponse } from "services/responseType";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
-import { SERVER_URL } from "utils/url";
 
 type NameAutocompleterProps = {
     callback: Function;

diff --git a/src/components/Exercises/forms/ImageCard.tsx b/src/components/Exercises/forms/ImageCard.tsx
@@ -47,7 +47,21 @@ export const AddImageCard = ({ exerciseId }: AddImageCardProps) => {
         }
         const [uploadedFile] = e.target.files;
         if (profileQuery.isSuccess) {
-            await postExerciseImage(exerciseId, profileQuery.data!.username, uploadedFile);
+
+            await postExerciseImage({
+                exerciseId: exerciseId,
+                image: uploadedFile,
+                imageData: {
+                    url: '',
+                    file: uploadedFile,
+                    author: '',
+                    authorUrl: '',
+                    title: '',
+                    objectUrl: '',
+                    derivativeSourceUrl: '',
+                    style: ''
+                },
+            });
         }
     };
 

diff --git a/src/components/Muscles/MuscleOverview.tsx b/src/components/Muscles/MuscleOverview.tsx
@@ -1,6 +1,6 @@
-import React from "react";
 import { Muscle } from "components/Exercises/models/muscle";
-import { PUBLIC_URL } from "utils/url";
+import { PUBLIC_URL } from "config";
+import React from "react";
 
 type OverviewCardProps = {
     primaryMuscles: Muscle[];

diff --git a/src/components/Nutrition/widgets/IngredientAutcompleter.tsx b/src/components/Nutrition/widgets/IngredientAutcompleter.tsx
@@ -13,14 +13,14 @@ import {
     Switch,
     TextField
 } from "@mui/material";
+import { SERVER_URL } from "config";
 import throttle from 'lodash/throttle';
 import * as React from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from "react-i18next";
 import { searchIngredient } from "services";
 import { IngredientSearchResponse } from "services/responseType";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
-import { SERVER_URL } from "utils/url";
 
 type IngredientAutocompleterProps = {
     callback: Function;

diff --git a/src/components/Nutrition/widgets/LoggedPlannedNutritionalValuesTable.tsx b/src/components/Nutrition/widgets/LoggedPlannedNutritionalValuesTable.tsx
@@ -109,7 +109,7 @@ export const LoggedPlannedNutritionalValuesTable = (props: {
                     <TableCell></TableCell>
                 </TableRow>
                 <TableRow>
-                    <TableCell>{t('nutrition.fiber')}</TableCell>
+                    <TableCell>{t('nutrition.fibres')}</TableCell>
                     <TableCell align="right">
                         {numberGramLocale(props.planned.fiber, i18n.language)}
                     </TableCell>

diff --git a/src/components/Nutrition/widgets/NutritionalValuesTable.tsx b/src/components/Nutrition/widgets/NutritionalValuesTable.tsx
@@ -82,7 +82,7 @@ export const NutritionalValuesTable = (props: { values: NutritionalValues }) =>
                     {/*<TableCell align="right"></TableCell>*/}
                 </TableRow>
                 <TableRow>
-                    <TableCell>{t('nutrition.fiber')}</TableCell>
+                    <TableCell>{t('nutrition.fibres')}</TableCell>
                     <TableCell align="right">
                         {numberGramLocale(props.values.fiber, i18n.language)}
                     </TableCell>

diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,12 @@
+/*
+ *  Collect all constants that access import.meta.env so it's easier to mock them
+ */
+
+export const IS_PROD = import.meta.env.PROD;
+export const PUBLIC_URL = IS_PROD ? "/static/react" : import.meta.env.PUBLIC_URL;
+export const SERVER_URL = IS_PROD ? "" : import.meta.env.VITE_API_SERVER;
+export const TIME_ZONE = import.meta.env.TIME_ZONE;
+export const MIN_ACCOUNT_AGE_TO_TRUST = import.meta.env.MIN_ACCOUNT_AGE_TO_TRUST;
+
+export const VITE_API_SERVER = import.meta.env.VITE_API_SERVER;
+export const VITE_API_KEY = import.meta.env.VITE_API_KEY;
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -1,8 +1,9 @@
+import { IS_PROD } from "config";
 import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
 import common from "locales/en/translation.json";
+import { initReactI18next } from "react-i18next";
 
 export const resources = {
     en: {
@@ -42,7 +43,7 @@ i18n
         // (i.e.) production, the path is /static/react/locales/<lang>/<ns>.json
         backend: {
             loadPath:
-                process.env.NODE_ENV === "production"
+                IS_PROD
                     ? `/static/react/locales/{{lng}}/{{ns}}.json`
                     : `/locales/{{lng}}/{{ns}}.json`
         },

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/services/exercise.test.ts b/src/services/exercise.test.ts
@@ -6,6 +6,10 @@ jest.mock("axios");
 
 describe("Exercise service API tests", () => {
 
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
     test('GET exercise data entries', async () => {
 
         // Arrange

diff --git a/src/services/measurements.test.ts b/src/services/measurements.test.ts
@@ -6,6 +6,11 @@ import { getMeasurementCategories, getMeasurementCategory } from "services/measu
 jest.mock("axios");
 
 describe('measurement service tests', () => {
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
     test('GET measurement categories', async () => {
         const measurementResponse = {
             count: 2,

diff --git a/src/services/profile.test.ts b/src/services/profile.test.ts
@@ -7,6 +7,10 @@ jest.mock("axios");
 
 describe("Profile API tests", () => {
 
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
 
     test('get the user profile (logged in)', async () => {