@wger-project/react-components 25.10.16

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

@@ -0,0 +1,206 @@
+import { MenuItem, TextField } from "@mui/material";
+import { LoadingProgressIcon } from "components/Core/LoadingWidget/LoadingWidget";
+import { useEditProfileQuery, useProfileQuery } from "components/User/queries/profile";
+import { SlotEntry, SlotEntryType } from "components/WorkoutRoutines/models/SlotEntry";
+import {
+    useEditSlotEntryQuery,
+    useFetchRoutineRepUnitsQuery,
+    useFetchRoutineWeighUnitsQuery
+} from "components/WorkoutRoutines/queries";
+import debounce from "lodash/debounce";
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { DEBOUNCE_ROUTINE_FORMS } from "utils/consts";
+
+export const SlotEntryTypeField = (props: { slotEntry: SlotEntry, routineId: number }) => {
+    const { t } = useTranslation();
+    const editQuery = useEditSlotEntryQuery(props.routineId);
+
+    const options = [
+        {
+            value: 'normal',
+            label: t('routines.set.normalSet'),
+        },
+        {
+            value: 'dropset',
+            label: t('routines.set.dropSet'),
+        },
+        {
+            value: 'myo',
+            label: t('routines.set.myo'),
+        },
+        {
+            value: 'partial',
+            label: t('routines.set.partial'),
+        },
+        {
+            value: 'forced',
+            label: t('routines.set.forced'),
+        },
+        {
+            value: 'tut',
+            label: t('routines.set.tut'),
+        },
+        {
+            value: 'iso',
+            label: t('routines.set.iso'),
+        },
+        {
+            value: 'jump',
+            label: t('routines.set.jump'),
+        }
+    ] as const;
+
+    const handleOnChange = (newValue: string) => {
+        editQuery.mutate(SlotEntry.clone(props.slotEntry, { type: newValue as SlotEntryType }));
+    };
+
+    return <>
+        <TextField
+            fullWidth
+            select
+            label={t('routines.set.type')}
+            variant="standard"
+            value={props.slotEntry.type}
+            disabled={editQuery.isPending}
+            onChange={e => handleOnChange(e.target.value)}
+        >
+            {options!.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                </MenuItem>
+            ))}
+        </TextField>
+    </>;
+};
+
+
+export const SlotEntryRepetitionUnitField = (props: { slotEntry: SlotEntry, routineId: number }) => {
+    const { t } = useTranslation();
+    const editSlotEntryQuery = useEditSlotEntryQuery(props.routineId);
+    const repUnitsQuery = useFetchRoutineRepUnitsQuery();
+
+    if (repUnitsQuery.isLoading) {
+        return <LoadingProgressIcon />;
+    }
+
+    const options = repUnitsQuery.data?.map((unit) => ({
+        value: unit.id,
+        label: unit.name,
+    }));
+
+    const handleOnChange = (newValue: string) => {
+        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { repetitionUnitId: parseInt(newValue) }));
+    };
+
+
+    return <>
+        <TextField
+            fullWidth
+            select
+            label={t('unit')}
+            variant="standard"
+            value={props.slotEntry.repetitionUnitId}
+            disabled={editSlotEntryQuery.isPending}
+            onChange={e => handleOnChange(e.target.value)}
+        >
+            {options!.map((option) => (
+                <MenuItem key={option.value} value={option.value ?? ''}>
+                    {option.label}
+                </MenuItem>
+            ))}
+        </TextField>
+    </>;
+};
+
+export const SlotEntryWeightUnitField = (props: { slotEntry: SlotEntry, routineId: number }) => {
+    const { t } = useTranslation();
+    const editSlotEntryQuery = useEditSlotEntryQuery(props.routineId);
+    const weightUnitsQuery = useFetchRoutineWeighUnitsQuery();
+    const userProfileQuery = useProfileQuery();
+
+
+    if (weightUnitsQuery.isLoading || userProfileQuery.isLoading) {
+        return <LoadingProgressIcon />;
+    }
+
+    const options = weightUnitsQuery.data?.map((unit) => ({
+        value: unit.id,
+        label: unit.name,
+    }));
+
+
+    const handleOnChange = (newValue: string) => {
+        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { weightUnitId: parseInt(newValue) }));
+    };
+
+    return <>
+        <TextField
+            fullWidth
+            select
+            label={t('unit')}
+            variant="standard"
+            value={props.slotEntry.weightUnitId}
+            disabled={editSlotEntryQuery.isPending}
+            onChange={e => handleOnChange(e.target.value)}
+        >
+            {options!.map((option) => (
+                <MenuItem key={option.value} value={option.value ?? ''}>
+                    {option.label}
+                </MenuItem>
+            ))}
+        </TextField>
+    </>;
+};
+
+type BaseSlotEntryRoundingFieldProps = {
+    initialValue: number | null;
+    rounding: 'weight' | 'reps';
+    routineId: number;
+};
+
+type SlotEntryRoundingFieldProps =
+    | (BaseSlotEntryRoundingFieldProps & { editProfile: true })
+    | (BaseSlotEntryRoundingFieldProps & { editProfile: false; slotEntry: SlotEntry });
+
+export const SlotEntryRoundingField = (props: SlotEntryRoundingFieldProps) => {
+    const { t } = useTranslation();
+
+    const editSlotEntryQuery = useEditSlotEntryQuery(props.routineId);
+    const editProfileQuery = useEditProfileQuery();
+
+    const [value, setValue] = useState<string | number | null>(props.initialValue === null ? '' : props.initialValue);
+
+    const debouncedSave = useCallback(
+        debounce((newValue: string) => {
+            const parsedValue = isNaN(Number(newValue)) ? null : parseFloat(newValue);
+
+            const data = props.rounding === 'weight'
+                ? { weightRounding: parsedValue }
+                : { repetitionRounding: parsedValue };
+
+            if (props.editProfile) {
+                editProfileQuery.mutate(data);
+            } else {
+                editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, data));
+            }
+        }, DEBOUNCE_ROUTINE_FORMS),
+        []
+    );
+
+    const handleOnChange = (newValue: string) => {
+        setValue(newValue);
+        debouncedSave(newValue);
+    };
+
+    return (
+        <TextField
+            fullWidth
+            label={props.rounding === 'weight' ? t('weight') : t('routines.reps')}
+            variant="standard"
+            value={value}
+            disabled={editSlotEntryQuery.isPending || editProfileQuery.isPending}
+            onChange={e => handleOnChange(e.target.value)}
+        />
+    );
+};

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

@@ -0,0 +1,44 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { Slot } from "components/WorkoutRoutines/models/Slot";
+import { SlotForm } from "components/WorkoutRoutines/widgets/forms/SlotForm";
+import { editSlot } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { testDayLegs } from "tests/workoutRoutinesTestData";
+
+
+jest.mock("services");
+
+let user: ReturnType<typeof userEvent.setup>;
+const mockEditSlot = editSlot as jest.Mock;
+
+describe('SlotForm', () => {
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        jest.resetAllMocks();
+    });
+
+    test('correctly updates the slot entry on change', async () => {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <SlotForm
+                    slot={testDayLegs.slots[0]}
+                    routineId={1}
+                />
+            </QueryClientProvider>
+        );
+
+
+        const inputElement = screen.getByRole('textbox', { name: /comment/i });
+        await user.click(inputElement);
+        await user.type(inputElement, 'This is a test comment');
+        await user.tab();
+
+        const clonedSlot = Slot.clone(testDayLegs.slots[0], { comment: 'This is a test comment' });
+
+        expect(mockEditSlot).toHaveBeenCalledTimes(1);
+        expect(mockEditSlot).toHaveBeenCalledWith(clonedSlot);
+    });
+});

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

@@ -0,0 +1,36 @@
+import { TextField } from "@mui/material";
+import { LoadingProgressIcon } from "components/Core/LoadingWidget/LoadingWidget";
+import { Slot } from "components/WorkoutRoutines/models/Slot";
+import { useEditSlotQuery } from "components/WorkoutRoutines/queries";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const SlotForm = (props: { slot: Slot, routineId: number }) => {
+    const { t } = useTranslation();
+    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 }));
+    };
+
+    return (<>
+        <TextField
+            label={t('comment')}
+            variant="standard"
+            fullWidth
+            size={"small"}
+            value={slotComment}
+            disabled={editSlotQuery.isPending}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={handleBlur}
+            slotProps={{
+                input: { endAdornment: editSlotQuery.isPending && <LoadingProgressIcon /> }
+            }}
+        />
+    </>);
+};

package/src/components/index.ts

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

package/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/node/@wger-project/react-components/build" : import.meta.env.VITE_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;

package/src/i18n.ts

@@ -0,0 +1,63 @@
+import { IS_PROD } from "config";
+import i18n from "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: {
+        common,
+    },
+} as const;
+
+i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+
+        // Also load the language code with the region code
+        // e.g. 'pt' and 'pt-BR' are treated as different languages
+        load: 'all',
+
+        // Options for the language detection
+        // https://github.com/i18next/i18next-browser-languageDetector
+        detection: {
+            // order and from where user language should be detected
+            order: ['path', 'navigator', 'htmlTag'],
+
+        },
+
+        fallbackLng: 'en',
+
+        //lng: "de",
+        // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+        // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+        // if you're using a language detector, do not define the lng option
+
+        interpolation: {
+            escapeValue: false // not needed for react as it escapes by default
+        },
+
+        // During development the translation files are served from
+        // locales/<lang>/<ns>.json but when copied over to the django site
+        // (i.e.) production, the path is /static/react/locales/<lang>/<ns>.json
+        //
+        // To match the file name convention from weblate, we replace '-' with '_'
+        backend: {
+            loadPath: (lng: string[], ns: string[]) => {
+                const lang = lng[0].replace('-', '_');
+                return IS_PROD
+                    ? `/static/node/@wger-project/react-components/build/locales/${lang}/${ns}.json`
+                    : `/locales/${lang}/${ns}.json`;
+            }
+        },
+
+        // TOOD: https://github.com/wger-project/react/issues/630
+        //ns: ["common",],
+        //defaultNS: 'common',
+        //resources
+    });
+
+export default i18n;

package/src/i18n.tsx

@@ -0,0 +1,52 @@
+// This code is autogenerated in the backend repo in extract-i18n.py do not edit!
+
+// Translate dynamic strings that are returned from the server
+// These strings such as categories or equipment are returned by the server
+// in English and need to be translated here in the application (there are
+// probably better ways to do this, but that's the way it is right now).
+
+import { useTranslation } from "react-i18next";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const DummyComponent = () => {
+    const [t] = useTranslation();
+    t("server.abs");
+    t("server.arms");
+    t("server.back");
+    t("server.barbell");
+    t("server.bench");
+    t("server.biceps");
+    t("server.body_weight");
+    t("server.calves");
+    t("server.cardio");
+    t("server.chest");
+    t("server.dumbbell");
+    t("server.glutes");
+    t("server.gym_mat");
+    t("server.hamstrings");
+    t("server.incline_bench");
+    t("server.kettlebell");
+    t("server.kilometers");
+    t("server.kilometers_per_hour");
+    t("server.lats");
+    t("server.legs");
+    t("server.max_reps");
+    t("server.miles");
+    t("server.miles_per_hour");
+    t("server.minutes");
+    t("server.plates");
+    t("server.pull_up_bar");
+    t("server.quads");
+    t("server.repetitions");
+    t("server.sz_bar");
+    t("server.seconds");
+    t("server.shoulders");
+    t("server.swiss_ball");
+    t("server.triceps");
+    t("server.until_failure");
+    t("server.kg");
+    t("server.lb");
+    t("server.none__bodyweight_exercise_");
+
+    return (<p></p>);
+};

package/src/index.css

@@ -0,0 +1,13 @@
+body {
+    margin: 0;
+    font-family: 'Open Sans Light', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+

package/src/index.tsx

@@ -0,0 +1,184 @@
+import createCache from '@emotion/cache';
+import { CacheProvider } from "@emotion/react";
+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";
+import { BrowserRouter as Router } from 'react-router-dom';
+import { WgerRoutes } from "routes";
+import { makeTheme, theme } from 'theme';
+
+import App from './App';
+import './i18n';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
+
+
+const queryClient = new QueryClient({
+    // -> https://tanstack.com/query/latest/docs/reference/QueryClient
+    // time in milliseconds, so 1000 * 30 = 30s
+
+    defaultOptions: {
+        queries: {
+            retry: 3,
+            staleTime: 1000 * 60 * 5,
+            refetchOnMount: true,
+            refetchOnWindowFocus: true,
+            refetchOnReconnect: "always"
+        },
+    }
+});
+
+
+const renderComponentShadowDom = (divId: string) => {
+
+    const rootElement = document.getElementById(divId);
+    if (rootElement === null) {
+        return;
+    }
+
+    const shadow = rootElement.attachShadow({ mode: 'open' });
+    const shadowRoot = document.createElement('div');
+    const styleElement = document.createElement('style');
+
+    const djangoReactStyle = document.getElementById('react-css');
+    if (djangoReactStyle) {
+        const djangoStyleElement = document.createElement('link');
+        djangoStyleElement.setAttribute('rel', 'stylesheet');
+        // @ts-ignore
+        djangoStyleElement.setAttribute('href', djangoReactStyle.href);
+        shadow.appendChild(djangoReactStyle);
+    }
+
+    shadow.appendChild(shadowRoot);
+    shadow.appendChild(styleElement);
+
+
+    const cache = createCache({
+        key: 'css',
+        prepend: true,
+        container: styleElement,
+    });
+
+    const root = createRoot(shadowRoot);
+    root.render(
+        <CacheProvider value={cache}>
+            <Suspense fallback={<LoadingWidget />}>
+                <Router>
+                    <ThemeProvider theme={makeTheme(shadowRoot)}>
+                        <QueryClientProvider client={queryClient}>
+                            <WgerRoutes />
+                        </QueryClientProvider>
+                    </ThemeProvider>
+                </Router>
+            </Suspense>
+        </CacheProvider>
+    );
+};
+
+const rootElement = document.getElementById("root");
+if (rootElement) {
+    const root = createRoot(rootElement);
+    root.render(
+        <React.StrictMode>
+            <Suspense fallback={<LoadingWidget />}>
+                <Router>
+                    <ThemeProvider theme={theme}>
+                        <QueryClientProvider client={queryClient}>
+                            <App />
+                            <ReactQueryDevtools />
+                        </QueryClientProvider>
+                    </ThemeProvider>
+                </Router>
+            </Suspense>
+        </React.StrictMode>
+    );
+}
+
+
+const rootNoShadowDom = document.getElementById("react-page-no-shadow-dom");
+if (rootNoShadowDom) {
+    const root = createRoot(rootNoShadowDom);
+    root.render(
+        <Suspense fallback={<LoadingWidget />}>
+            <Router>
+                <ThemeProvider theme={theme}>
+                    <QueryClientProvider client={queryClient}>
+                        <WgerRoutes />
+                    </QueryClientProvider>
+                </ThemeProvider>
+            </Router>
+        </Suspense>
+    );
+}
+
+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);
+    root.render(
+        <Suspense fallback={<LoadingWidget />}>
+            <ThemeProvider theme={theme}>
+                <IngredientSearch />
+            </ThemeProvider>
+        </Suspense>
+    );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/src/locales/README.md

@@ -0,0 +1,7 @@
+Note
+====
+
+
+this symlink is only needed so that `src/i18n.ts` can correctly load its contents
+and make typescript happy. We can't import from public since it is outside of src,
+and we need to keep the translations there, so they can be served from there.

package/src/pages/About/index.tsx

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

package/src/pages/AddExercise/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AddExerciseStepper } from "components/Exercises/Add/AddExerciseStepper";
+import { useCanContributeExercises } from "components/User/queries/contribute";
+import { NotEnoughRights } from "components/Exercises/Add/NotEnoughRights";
+
+export const AddExercise = () => {
+    const contributeQuery = useCanContributeExercises();
+
+    return <>
+        {contributeQuery.canContribute
+            ? <AddExerciseStepper />
+            : <NotEnoughRights />}
+
+    </>;
+};

package/src/pages/AddWeight/index.tsx

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

package/src/pages/ApiPage/index.tsx

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

package/src/pages/Calendar/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import CalendarComponent from "../../components/Calendar/Components/CalendarComponent";
+
+export const Calendar = () => {
+    return (
+        <div>
+            <CalendarComponent/>
+        </div>
+    );
+};