@wger-project/react-components 25.11.22 → 26.1.18

package/src/components/Trophies/queries/trophies.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getTrophies } from "components/Trophies/services/trophies";
+import { getUserTrophies, setTrophyAsNotified } from "components/Trophies/services/userTrophies";
+import { getUserTrophyProgression } from "components/Trophies/services/userTrophyProgression";
+import { QueryKey } from "utils/consts";
+
+export const useTrophiesQuery = () => useQuery({
+    queryFn: () => getTrophies(),
+    queryKey: [QueryKey.TROPHIES],
+});
+
+export const useUserTrophiesQuery = () => useQuery({
+    queryFn: () => getUserTrophies(),
+    queryKey: [QueryKey.USER_TROPHIES],
+});
+
+export const useSetTrophyAsNotifiedQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (trophyId: number) => setTrophyAsNotified(trophyId),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.USER_TROPHIES]
+        })
+    });
+};
+
+export const useUserTrophyProgressionQuery = () => useQuery({
+    queryFn: () => getUserTrophyProgression(),
+    queryKey: [QueryKey.USER_TROPHY_PROGRESSION],
+});

package/src/components/Trophies/services/trophies.ts

@@ -0,0 +1,22 @@
+import { Trophy } from "components/Trophies/models/trophy";
+import { API_MAX_PAGE_SIZE, ApiPath } from "utils/consts";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getTrophies = async (): Promise<Trophy[]> => {
+
+    const url = makeUrl(
+        ApiPath.API_TROPHIES_PATH,
+        { query: { limit: API_MAX_PAGE_SIZE } }
+    );
+    const out: Trophy[] = [];
+
+    for await (const page of fetchPaginated(url, makeHeader())) {
+        for (const logData of page) {
+            out.push(Trophy.fromJson(logData));
+        }
+    }
+    return out;
+};
+

package/src/components/Trophies/services/userTrophies.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+import { API_MAX_PAGE_SIZE, ApiPath } from "utils/consts";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getUserTrophies = async (): Promise<UserTrophy[]> => {
+
+    const url = makeUrl(
+        ApiPath.API_USER_TROPHIES_PATH,
+        { query: { limit: API_MAX_PAGE_SIZE } }
+    );
+    const out: UserTrophy[] = [];
+
+    for await (const page of fetchPaginated(url, makeHeader())) {
+        for (const logData of page) {
+            out.push(UserTrophy.fromJson(logData));
+        }
+    }
+    return out;
+};
+
+
+export const setTrophyAsNotified = async (trophyId: number): Promise<void> => {
+
+    await axios.patch(
+        makeUrl(ApiPath.API_USER_TROPHIES_PATH, { id: trophyId }),
+        { id: trophyId, "is_notified": true },
+        { headers: makeHeader() }
+    );
+
+};

package/src/components/Trophies/services/userTrophyProgression.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { ApiUserTrophyType, UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+import { ApiPath } from "utils/consts";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getUserTrophyProgression = async (): Promise<UserTrophyProgression[]> => {
+
+    const { data: trophyData } = await axios.get(
+        makeUrl(ApiPath.API_USER_TROPHY_PROGRESSION_PATH),
+        { headers: makeHeader() }
+    );
+
+    return trophyData.map((item: ApiUserTrophyType) => UserTrophyProgression.fromJson(item));
+};
+

package/src/components/WorkoutRoutines/Detail/WorkoutStats.tsx

@@ -30,7 +30,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { getLanguageByShortName } from "services";
 import { generateChartColors } from "utils/colors";
 import { makeLink, WgerLink } from "utils/url";

package/src/components/WorkoutRoutines/widgets/forms/DayTypeSelect.tsx

@@ -10,8 +10,7 @@ interface DayTypeSelectProps {
 
 export const DayTypeSelect = (props: DayTypeSelectProps) => {
     const { t } = useTranslation();
-    const [field, meta] = useField(props.fieldName);
-
+    const [field] = useField(props.fieldName);
     const options = [
         {
             value: 'custom',

package/src/components/WorkoutRoutines/widgets/forms/SlotForm.tsx

@@ -10,10 +10,6 @@ export const SlotForm = (props: { slot: Slot, routineId: number }) => {
     const editSlotQuery = useEditSlotQuery(props.routineId);
     const [slotComment, setSlotComment] = useState<string>(props.slot.comment);
 
-    const handleChange = (value: string) => {
-        setSlotComment(value);
-    };
-
     const handleBlur = () => {
         editSlotQuery.mutate(Slot.clone(props.slot, { comment: slotComment }));
     };

package/src/components/index.ts

@@ -1,3 +1 @@
-export { BodyWeight } from './BodyWeight/index';
 export { Header } from './Header';
-export { Carousel, CarouselItem } from './Carousel';

package/src/index.tsx

@@ -4,9 +4,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
-import { NutritionCard } from "components/Dashboard/NutritionCard";
-import { RoutineCard } from "components/Dashboard/RoutineCard";
-import { WeightCard } from "components/Dashboard/WeightCard";
 import { IngredientSearch } from "components/Nutrition/components/IngredientSearch";
 import React, { Suspense } from 'react';
 import { createRoot } from "react-dom/client";
@@ -123,49 +120,6 @@ renderComponentShadowDom('react-page');
 /*
  * Components used in the wger django app, don't change the IDs here
  */
-const weightDashboard = document.getElementById("react-weight-dashboard");
-if (weightDashboard) {
-    const root = createRoot(weightDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <WeightCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const nutritionDashboard = document.getElementById('react-nutrition-dashboard');
-if (nutritionDashboard) {
-    const root = createRoot(nutritionDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <NutritionCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const routineDashboard = document.getElementById('react-routine-dashboard');
-if (routineDashboard) {
-    const root = createRoot(routineDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <RoutineCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-
 const ingredientSearchBox = document.getElementById("react-ingredient-search");
 if (ingredientSearchBox) {
     const root = createRoot(ingredientSearchBox);

package/src/pages/Calendar/index.tsx

@@ -4,7 +4,7 @@ import CalendarComponent from "../../components/Calendar/Components/CalendarComp
 export const Calendar = () => {
     return (
         <div>
-            <CalendarComponent/>
+            <CalendarComponent />
         </div>
     );
-};
+};

package/src/pages/WeightOverview/index.tsx

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

package/src/routes.tsx

@@ -1,4 +1,4 @@
-import { Dashboard } from "components/Dashboard/Dashboard";
+import { ConfigurableDashboard } from "components/Dashboard/ConfigurableDashboard";
 import { ExerciseOverview } from "components/Exercises/ExerciseOverview";
 import { MeasurementCategoryDetail } from "components/Measurements/Screens/MeasurementCategoryDetail";
 import { MeasurementCategoryOverview } from "components/Measurements/Screens/MeasurementCategoryOverview";
@@ -6,6 +6,7 @@ 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 { TrophiesDetail } from "components/Trophies/components/TrophiesDetail";
 import { RoutineAdd } from "components/WorkoutRoutines/Detail/RoutineAdd";
 import { RoutineDetail } from "components/WorkoutRoutines/Detail/RoutineDetail";
 import { RoutineDetailsTable } from "components/WorkoutRoutines/Detail/RoutineDetailsTable";
@@ -42,96 +43,103 @@ import { Route, Routes } from "react-router-dom";
  * See also src/utils/url.ts
  */
 export const WgerRoutes = () => {
-    return <Routes>
-        <Route path="/:lang">
+    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="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=":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 path="view" element={<RoutineDetail />} />
+                        <Route path="table" element={<RoutineDetailsTable />} />
+                        <Route path="logs" element={<WorkoutLogs />} />
+                        <Route path="statistics" element={<WorkoutStats />} />
                     </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 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 path="overview">
-                        <Route path="private" element={<PrivateTemplateOverview />} />
-                        <Route path="public" element={<PublicTemplateOverview />} />
+                </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>
-            <Route path="measurement">
-                <Route index element={<MeasurementCategoryOverview />} />
-                <Route path="overview" element={<MeasurementCategoryOverview />} />
-                <Route path="category/:categoryId" element={<MeasurementCategoryDetail />}>
+                <Route path="weight">
+                    <Route path="overview" element={<WeightOverview />} />
+                    <Route path="add" element={<AddWeight />} />
                 </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 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="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 path="software">
+                    <Route path="about-us" element={<About />} />
+                    <Route path="api" element={<ApiPage />} />
+                    <Route path="equipment" element={<Equipments />} />
                 </Route>
-                <Route path="calculator">
-                    <Route path="bmi" element={<BmiCalculator />} />
-                    <Route path="calories" element={<CaloriesCalculator />} />
+                <Route path="login" element={<Login />} />
+                <Route path="user">
+                    <Route path="preferences" element={<Preferences />} />
                 </Route>
-                <Route path="ingredient">
-                    <Route path="overview" element={<Ingredients />} />
+                <Route path="dashboard">
+                    <Route index element={<ConfigurableDashboard />} />
+                    <Route path="" element={<ConfigurableDashboard />} />
+                </Route>
+                <Route path="trophies">
+                    <Route index element={<TrophiesDetail />} />
+                    <Route path="" element={<TrophiesDetail />} />
                 </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 />} />
+            <Route path="/" element={<ConfigurableDashboard />} />
 
-        {/* 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>;
-};
+            {/* This route matches when no other route matches, so a 404 */}
+            <Route
+                path="*"
+                element={
+                    <main style={{ padding: "1rem" }}>
+                        <p>404, Page NOT FOUND</p>
+                    </main>
+                }
+            />
+        </Routes>
+    );
+};

package/src/services/exerciseTranslation.ts

@@ -14,7 +14,6 @@ export const EXERCISE_TRANSLATION_PATH = 'exercise-translation';
  */
 export const getExerciseTranslations = async (id: number): Promise<Translation[]> => {
     const url = makeUrl(EXERCISE_PATH, { query: { exercise: id } });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { data } = await axios.get<ResponseType<Translation>>(url, {
         headers: makeHeader(),
     });
@@ -26,7 +25,7 @@ export const getExerciseTranslations = async (id: number): Promise<Translation[]
 /*
  * Search for exercises by name using the exerciseinfo endpoint
  */
-export const searchExerciseTranslations = async (name: string,languageCode: string = ENGLISH_LANGUAGE_CODE,searchEnglish: boolean = true): Promise<Exercise[]> => {
+export const searchExerciseTranslations = async (name: string, languageCode: string = ENGLISH_LANGUAGE_CODE, searchEnglish: boolean = true): Promise<Exercise[]> => {
     const languages = [languageCode];
     if (languageCode !== LANGUAGE_SHORT_ENGLISH && searchEnglish) {
         languages.push(LANGUAGE_SHORT_ENGLISH);
@@ -34,19 +33,19 @@ export const searchExerciseTranslations = async (name: string,languageCode: stri
 
     const url = makeUrl('exerciseinfo', {
         query: {
-            name__search: name,
-            language__code: languages.join(','),
+            "name__search": name,
+            "language__code": languages.join(','),
             limit: 50,
         }
     });
 
     try {
         const { data } = await axios.get<ResponseType<Exercise>>(url);
-        
+
         if (!data || !data.results || !Array.isArray(data.results)) {
             return [];
         }
-        
+
         const adapter = new ExerciseAdapter();
         return data.results.map((item: unknown) => adapter.fromJson(item));
     } catch {

package/src/services/measurements.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import { MeasurementCategory, MeasurementCategoryAdapter } from "components/Measurements/models/Category";
-import { MeasurementEntry, MeasurementEntryAdapter } from "components/Measurements/models/Entry";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { MeasurementEntry } from "components/Measurements/models/Entry";
 import { ApiMeasurementCategoryType } from 'types';
 import { API_MAX_PAGE_SIZE } from "utils/consts";
 import { dateToYYYYMMDD } from "utils/date";
@@ -18,8 +18,6 @@ export type MeasurementQueryOptions = {
 export const getMeasurementCategories = async (options?: MeasurementQueryOptions): Promise<MeasurementCategory[]> => {
     const { filtersetQueryCategories = {}, filtersetQueryEntries = {} } = options || {};
 
-    const adapter = new MeasurementCategoryAdapter();
-    const entryAdapter = new MeasurementEntryAdapter();
     const categories: MeasurementCategory[] = [];
     const categoryUrl = makeUrl(API_MEASUREMENTS_CATEGORY_PATH, {
         query: {
@@ -30,7 +28,7 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
 
     for await (const page of fetchPaginated(categoryUrl, makeHeader())) {
         for (const catData of page) {
-            categories.push(adapter.fromJson(catData));
+            categories.push(MeasurementCategory.fromJson(catData));
         }
     }
 
@@ -48,7 +46,7 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
         // Collect all pages of entries
         for await (const page of fetchPaginated(url, makeHeader())) {
             for (const entries of page) {
-                out.push(entryAdapter.fromJson(entries));
+                out.push(MeasurementEntry.fromJson(entries));
             }
         }
         return out;
@@ -73,15 +71,14 @@ export const getMeasurementCategory = async (id: number): Promise<MeasurementCat
         { headers: makeHeader() },
     );
 
-    const category = new MeasurementCategoryAdapter().fromJson(receivedCategories);
-    const adapter = new MeasurementEntryAdapter();
+    const category = MeasurementCategory.fromJson(receivedCategories);
     const measurements: MeasurementEntry[] = [];
     const url = makeUrl(API_MEASUREMENTS_ENTRY_PATH, { query: { category: category.id } });
 
     // Collect all pages of entries
     for await (const page of fetchPaginated(url, makeHeader())) {
         for (const entries of page) {
-            measurements.push(adapter.fromJson(entries));
+            measurements.push(MeasurementEntry.fromJson(entries));
         }
     }
 
@@ -105,8 +102,7 @@ export const addMeasurementCategory = async (data: AddMeasurementCategoryParams)
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementCategoryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementCategory.fromJson(response.data);
 };
 
 export interface editMeasurementCategoryParams {
@@ -125,8 +121,7 @@ export const editMeasurementCategory = async (data: editMeasurementCategoryParam
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementCategoryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementCategory.fromJson(response.data);
 };
 
 export const deleteMeasurementCategory = async (id: number): Promise<void> => {
@@ -157,8 +152,7 @@ export const editMeasurementEntry = async (data: editMeasurementParams): Promise
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementEntryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementEntry.fromJson(response.data);
 };
 
 export interface AddMeasurementParams {
@@ -181,6 +175,5 @@ export const addMeasurementEntry = async (data: AddMeasurementParams): Promise<M
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementEntryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementEntry.fromJson(response.data);
 };

package/src/services/video.test.ts

@@ -11,17 +11,17 @@ describe("Exercise video service API tests", () => {
             id: 1,
             uuid: "b1c934fa-c4f8-4d84-8cb4-7802be0d284c",
             exercise: 258,
-            exercise_uuid: "6260e3aa-e46b-4b4b-8ada-58bfd0922d3a",
+            "exercise_uuid": "6260e3aa-e46b-4b4b-8ada-58bfd0922d3a",
             video: "http://localhost:8000/media/exercise-video/258/b1c934fa-c4f8-4d84-8cb4-7802be0d284c.mp4",
-            is_main: false,
+            "is_main": false,
             size: 0,
             duration: "0.00",
             width: 0,
             height: 0,
             codec: "",
-            codec_long: "",
+            "codec_long": "",
             license: 2,
-            license_author: null,
+            "license_author": null,
         };
 
         const video = new ExerciseVideo(