@wger-project/react-components 25.10.16

package/src/pages/CaloriesCalculator/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const CaloriesCalculator = () => {
+    return (
+        <div>
+            Calories Calculator Page
+        </div>
+    );
+};

package/src/pages/Equipments/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Equipments = () => {
+    return (
+        <div>
+            Equipments Page
+        </div>
+    );
+};

package/src/pages/ExerciseDetails/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ExerciseDetails } from "components/Exercises/Detail/ExerciseDetails";
+
+export const ExerciseDetailPage = () => {
+    return <ExerciseDetails />;
+};

package/src/pages/Ingrdedients/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Ingredients = () => {
+    return (
+        <div>
+            Ingredients Page
+        </div>
+    );
+};

package/src/pages/Login/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Login = () => {
+    return (
+        <div>
+            Login Page
+        </div>
+    );
+};

package/src/pages/Preferences/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Preferences = () => {
+    return (
+        <div>
+            Preferences Page
+        </div>
+    );
+};

package/src/pages/PublicTemplate/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const PublicTemplate = () => {
+    return (
+        <div>
+            Public Template
+        </div>
+    );
+};

package/src/pages/TemplatePage/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const TemplatePage = () => {
+    return (
+        <div>
+            Your Template
+        </div>
+    );
+};

package/src/pages/WeightOverview/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BodyWeight } from 'components';
+
+export const WeightOverview = () => {
+    return <BodyWeight />;
+};

package/src/pages/index.ts

@@ -0,0 +1,14 @@
+export { About } from './About';
+export { AddExercise } from './AddExercise';
+export { AddWeight } from './AddWeight';
+export { Calendar } from './Calendar';
+export { CaloriesCalculator } from './CaloriesCalculator';
+export { Equipments } from './Equipments';
+export { Ingredients } from './Ingrdedients';
+export { Login } from './Login';
+export { ExerciseDetails } from '../components/Exercises/Detail/ExerciseDetails';
+export { Preferences } from './Preferences';
+export { PublicTemplate } from './PublicTemplate';
+export { ApiPage } from './ApiPage';
+export { TemplatePage } from './TemplatePage';
+export { WeightOverview } from './WeightOverview';

package/src/permissions/index.ts

@@ -0,0 +1,13 @@
+export enum WgerPermissions {
+    // Exercises
+    EDIT_EXERCISE = 'exercises.change_exercise',
+    DELETE_EXERCISE = 'exercises.delete_exercise',
+
+    ADD_IMAGE = 'exercises.add_exerciseimage',
+    EDIT_IMAGE = 'exercises.change_exerciseimage',
+    DELETE_IMAGE = 'exercises.delete_exerciseimage',
+
+    ADD_VIDEO = 'exercises.add_exercisevideo',
+    EDIT_VIDEO = 'exercises.change_exercisevideo',
+    DELETE_VIDEO = 'exercises.delete_exercisevideo',
+}

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/routes.tsx

@@ -0,0 +1,137 @@
+import { Dashboard } from "components/Dashboard/Dashboard";
+import { ExerciseOverview } from "components/Exercises/ExerciseOverview";
+import { MeasurementCategoryDetail } from "components/Measurements/Screens/MeasurementCategoryDetail";
+import { MeasurementCategoryOverview } from "components/Measurements/Screens/MeasurementCategoryOverview";
+import { BmiCalculator } from "components/Nutrition/components/BmiCalculator";
+import { NutritionDiaryOverview } from "components/Nutrition/components/NutritionDiaryOverview";
+import { PlanDetail } from "components/Nutrition/components/PlanDetail";
+import { PlansOverview } from "components/Nutrition/components/PlansOverview";
+import { RoutineAdd } from "components/WorkoutRoutines/Detail/RoutineAdd";
+import { RoutineDetail } from "components/WorkoutRoutines/Detail/RoutineDetail";
+import { RoutineDetailsTable } from "components/WorkoutRoutines/Detail/RoutineDetailsTable";
+import { RoutineEdit } from "components/WorkoutRoutines/Detail/RoutineEdit";
+import { SessionAdd } from "components/WorkoutRoutines/Detail/SessionAdd";
+import { SlotProgressionEdit } from "components/WorkoutRoutines/Detail/SlotProgressionEdit";
+import { TemplateDetail } from "components/WorkoutRoutines/Detail/TemplateDetail";
+import { WorkoutLogs } from "components/WorkoutRoutines/Detail/WorkoutLogs";
+import { WorkoutStats } from "components/WorkoutRoutines/Detail/WorkoutStats";
+import { PrivateTemplateOverview } from "components/WorkoutRoutines/Overview/PrivateTemplateOverview";
+import { PublicTemplateOverview } from "components/WorkoutRoutines/Overview/PublicTemplateOverview";
+import { RoutineOverview } from "components/WorkoutRoutines/Overview/RoutineOverview";
+import {
+    About,
+    AddExercise,
+    AddWeight,
+    ApiPage,
+    Calendar,
+    CaloriesCalculator,
+    Equipments,
+    Ingredients,
+    Login,
+    Preferences,
+    WeightOverview,
+} from "pages";
+import { ExerciseDetailPage } from "pages/ExerciseDetails";
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+
+/*
+ * Routes for the application
+ *
+ * Don't change the routes of the elements which are also used in the django application
+ * See also src/utils/url.ts
+ */
+export const WgerRoutes = () => {
+    return <Routes>
+        <Route path="/:lang">
+
+            <Route path="routine">
+                <Route index element={<RoutineOverview />} />
+                <Route path="overview" element={<RoutineOverview />} />
+                <Route path="calendar" element={<Calendar />} />
+                <Route path="add" element={<RoutineAdd />} />
+
+                <Route path=":routineId">
+                    <Route path="day/:dayId">
+                        <Route path="add-logs" element={<SessionAdd />} />
+                    </Route>
+                    <Route path="edit">
+                        <Route index element={<RoutineEdit />} />
+                        <Route path="progression/:slotId" element={<SlotProgressionEdit />} />
+                    </Route>
+
+                    <Route path="view" element={<RoutineDetail />} />
+                    <Route path="table" element={<RoutineDetailsTable />} />
+                    <Route path="logs" element={<WorkoutLogs />} />
+                    <Route path="statistics" element={<WorkoutStats />} />
+                </Route>
+
+                <Route path="templates">
+                    <Route path=":routineId">
+                        <Route path="view" element={<TemplateDetail />} />
+                    </Route>
+                    <Route path="overview">
+                        <Route path="private" element={<PrivateTemplateOverview />} />
+                        <Route path="public" element={<PublicTemplateOverview />} />
+                    </Route>
+                </Route>
+
+            </Route>
+            <Route path="measurement">
+                <Route index element={<MeasurementCategoryOverview />} />
+                <Route path="overview" element={<MeasurementCategoryOverview />} />
+                <Route path="category/:categoryId" element={<MeasurementCategoryDetail />}>
+                </Route>
+            </Route>
+            <Route path="exercise">
+                <Route index element={<ExerciseOverview />} />
+                <Route path="overview" element={<ExerciseOverview />} />
+                <Route path=":exerciseId" element={<ExerciseDetailPage />}>
+                    <Route path="view" element={<ExerciseDetailPage />}>
+                        <Route path=":slug" element={<ExerciseDetailPage />} />
+                    </Route>
+                </Route>
+                <Route path="contribute" element={<AddExercise />} />
+            </Route>
+            <Route path="weight">
+                <Route path="overview" element={<WeightOverview />} />
+                <Route path="add" element={<AddWeight />} />
+            </Route>
+            <Route path="nutrition">
+                <Route path="overview" element={<PlansOverview />} />
+                <Route path=":planId">
+                    <Route path="view" element={<PlanDetail />} />
+                    <Route path=":date" element={<NutritionDiaryOverview />} />
+                    <Route path="diary" element={<NutritionDiaryOverview />} />
+                </Route>
+                <Route path="calculator">
+                    <Route path="bmi" element={<BmiCalculator />} />
+                    <Route path="calories" element={<CaloriesCalculator />} />
+                </Route>
+                <Route path="ingredient">
+                    <Route path="overview" element={<Ingredients />} />
+                </Route>
+            </Route>
+            <Route path="software">
+                <Route path="about-us" element={<About />} />
+                <Route path="api" element={<ApiPage />} />
+                <Route path="equipment" element={<Equipments />} />
+            </Route>
+            <Route path="login" element={<Login />} />
+            <Route path="user">
+                <Route path="preferences" element={<Preferences />} />
+            </Route>
+        </Route>
+        <Route path="/" element={<Dashboard />} />
+
+        {/* This route matches when no other route match, so a 404 */}
+        <Route
+            path="*"
+            element={
+                <main style={{ padding: "1rem" }}>
+                    <p>404, Page NOT FOUND</p>
+                </main>
+            }
+        />
+    </Routes>;
+};

package/src/services/alias.test.ts

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { Alias } from "components/Exercises/models/alias";
+import { postAlias } from "services";
+import { deleteAlias } from "services/alias";
+
+jest.mock("axios");
+
+
+describe("Exercise translation service API tests", () => {
+
+
+    test('POST a new alias', async () => {
+
+        // Arrange
+        const response = {
+            "id": 200,
+            "uuid": "eb18288d-4ca3-4c54-8279-343b110d86e0",
+            "exercise": 100,
+            "alias": "Elbow dislocator",
+
+        };
+        (axios.post as jest.Mock).mockImplementation(() => Promise.resolve({ data: response }));
+
+        // Act
+        const result = await postAlias(
+            100,
+            "Elbow dislocator",
+        );
+
+        // Assert
+        expect(axios.post).toHaveBeenCalledTimes(1);
+        expect(result).toEqual(new Alias(200, "eb18288d-4ca3-4c54-8279-343b110d86e0", "Elbow dislocator"));
+    });
+
+    test('DELETE an existing alias', async () => {
+
+        // Arrange
+        (axios.delete as jest.Mock).mockImplementation(() => Promise.resolve({ status: 204 }));
+
+        // Act
+        const result = await deleteAlias(100);
+
+        // Assert
+        expect(axios.delete).toHaveBeenCalledTimes(1);
+        expect(result).toEqual(204);
+    });
+});

package/src/services/alias.ts

@@ -0,0 +1,34 @@
+import axios from 'axios';
+import { Alias, AliasAdapter } from "components/Exercises/models/alias";
+import { makeHeader, makeUrl } from "utils/url";
+
+export const ALIAS_PATH = 'exercisealias';
+
+
+/*
+ * Create a new alias
+ */
+export const postAlias = async (translationId: number, alias: string): Promise<Alias> => {
+    const url = makeUrl(ALIAS_PATH);
+    const response = await axios.post(
+        url,
+        { translation: translationId, alias: alias },
+        { headers: makeHeader() }
+    );
+    const adapter = new AliasAdapter();
+    return adapter.fromJson(response.data);
+};
+
+/*
+ * Delete a given alias
+ */
+export const deleteAlias = async (aliasId: number): Promise<number> => {
+    const response = await axios.delete(
+        makeUrl(ALIAS_PATH, { id: aliasId }),
+        { headers: makeHeader() }
+    );
+
+    return response.status;
+};
+
+

package/src/services/base_config.test.ts

@@ -0,0 +1,48 @@
+import axios from "axios";
+import { BaseConfigAdapter } from "components/WorkoutRoutines/models/BaseConfig";
+import { editBaseConfig, EditBaseConfigParams } from "services/base_config";
+
+jest.mock('axios');
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+describe('editBaseConfig', () => {
+    const mockBaseConfigData = {
+        id: 1,
+        value: 100,
+        // eslint-disable-next-line camelcase
+        slot_entry: 1,
+    };
+
+    const mockEditBaseConfigParams: EditBaseConfigParams = {
+        id: 1,
+        value: 120,
+    };
+
+    const mockUrl = '/api/baseconfig/';
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('should update a base config and return the updated config', async () => {
+        mockedAxios.patch.mockResolvedValue({ data: mockBaseConfigData });
+
+        const updatedConfig = await editBaseConfig(mockEditBaseConfigParams, mockUrl);
+
+        expect(axios.patch).toHaveBeenCalledTimes(1);
+        expect(axios.patch).toHaveBeenCalledWith(
+            expect.any(String),
+            mockEditBaseConfigParams,
+            expect.any(Object)
+        );
+        expect(updatedConfig).toEqual(new BaseConfigAdapter().fromJson(mockBaseConfigData));
+    });
+
+    test('should handle errors gracefully', async () => {
+        const errorMessage = 'Network Error';
+        mockedAxios.patch.mockRejectedValue(new Error(errorMessage));
+
+        await expect(editBaseConfig(mockEditBaseConfigParams, mockUrl)).rejects.toThrow(errorMessage);
+        expect(axios.patch).toHaveBeenCalledTimes(1);
+    });
+});

package/src/services/base_config.ts

@@ -0,0 +1,86 @@
+import axios from 'axios';
+import {
+    BaseConfig,
+    BaseConfigAdapter,
+    OperationType,
+    RuleRequirements,
+    StepType
+} from "components/WorkoutRoutines/models/BaseConfig";
+import { ApiPath } from "utils/consts";
+import { makeHeader, makeUrl } from "utils/url";
+
+export interface AddBaseConfigParams {
+    value: number;
+    slot_entry: number;
+    iteration?: number;
+    operation?: OperationType;
+    step?: StepType;
+    requirements?: RuleRequirements;
+}
+
+export interface EditBaseConfigParams extends Partial<AddBaseConfigParams> {
+    id: number,
+}
+
+export interface ProcessBaseConfigsParams {
+    toAdd: AddBaseConfigParams[],
+    toEdit: EditBaseConfigParams[],
+    toDelete: number[],
+    apiPath: ApiPath
+}
+
+
+export const processBaseConfigs = async ({ values, maxValues }: {
+    values?: ProcessBaseConfigsParams,
+    maxValues?: ProcessBaseConfigsParams
+}): Promise<void> => {
+    const processEntries = async (entries: ProcessBaseConfigsParams) => {
+        const { toAdd, toEdit, toDelete, apiPath } = entries;
+
+        for (const entry of toAdd) {
+            await addBaseConfig(entry, apiPath);
+        }
+
+        for (const entry of toEdit) {
+            await editBaseConfig(entry, apiPath);
+        }
+
+        for (const entry of toDelete) {
+            await deleteBaseConfig(entry, apiPath);
+        }
+    };
+
+    if (values !== undefined) {
+        await processEntries(values);
+    }
+    if (maxValues !== undefined) {
+        await processEntries(maxValues);
+    }
+};
+
+export const editBaseConfig = async (data: EditBaseConfigParams, url: string): Promise<BaseConfig> => {
+
+    const response = await axios.patch(
+        makeUrl(url, { id: data.id }),
+        data,
+        { headers: makeHeader() }
+    );
+
+    const adapter = new BaseConfigAdapter();
+    return adapter.fromJson(response.data);
+};
+
+export const addBaseConfig = async (data: AddBaseConfigParams, url: string): Promise<BaseConfig> => {
+
+    const response = await axios.post(
+        makeUrl(url),
+        data,
+        { headers: makeHeader() }
+    );
+
+    const adapter = new BaseConfigAdapter();
+    return adapter.fromJson(response.data);
+};
+
+export const deleteBaseConfig = async (id: number, url: string): Promise<void> => await axios.delete(makeUrl(url, { id: id }), { headers: makeHeader() });
+

package/src/services/category.test.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+import { Category } from "components/Exercises/models/category";
+import { getCategories } from "services";
+
+jest.mock("axios");
+
+describe("category service tests", () => {
+
+    test('GET category entries', async () => {
+
+        // Arrange
+        const response = {
+            count: 3,
+            next: null,
+            previous: null,
+            results: [
+                {
+                    "id": 10,
+                    "name": "Abs"
+                },
+                {
+                    "id": 8,
+                    "name": "Arms"
+                },
+                {
+                    "id": 12,
+                    "name": "Back"
+                },
+            ]
+        };
+
+        // Act
+        (axios.get as jest.Mock).mockImplementation(() => Promise.resolve({ data: response }));
+        const result = await getCategories();
+
+        // Assert
+        expect(axios.get).toHaveBeenCalledTimes(1);
+        expect(result).toStrictEqual([
+            new Category(10, "Abs"),
+            new Category(8, "Arms"),
+            new Category(12, "Back"),
+        ]);
+    });
+});

package/src/services/category.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { Category, CategoryAdapter } from "components/Exercises/models/category";
+import { ApiCategoryType } from 'types';
+import { makeHeader, makeUrl } from "utils/url";
+import { ResponseType } from "./responseType";
+
+export const CATEGORY_PATH = 'exercisecategory';
+
+
+/*
+ * Fetch all categories
+ */
+export const getCategories = async (): Promise<Category[]> => {
+    const url = makeUrl(CATEGORY_PATH);
+    const { data: receivedCategories } = await axios.get<ResponseType<ApiCategoryType>>(url, {
+        headers: makeHeader(),
+    });
+    const adapter = new CategoryAdapter();
+    return receivedCategories.results.map(c => adapter.fromJson(c));
+};
+