@wger-project/react-components 25.10.16

package/src/components/User/models/profile.ts

@@ -0,0 +1,81 @@
+/* eslint-disable camelcase */
+
+import { Adapter } from "utils/Adapter";
+
+export interface EditProfileParams {
+    email: string,
+    height: number,
+    weight_unit: 'kg' | 'lb',
+    weightRounding: number | null,
+    repetitionsRounding: number | null,
+}
+
+export class Profile {
+    public username: string;
+    public email: string;
+    public emailVerified: boolean;
+    public dateJoined: Date;
+    public isTrustworthy: boolean;
+    public useMetric: boolean;
+    public height: number;
+    public weightRounding: number | null;
+    public repetitionsRounding: number | null;
+
+    constructor(data: {
+        username: string,
+        email: string,
+        emailVerified: boolean,
+        dateJoined: Date,
+        isTrustworthy: boolean,
+        useMetric: boolean,
+        height: number,
+        weightRounding: number | null,
+        repetitionsRounding: number | null,
+    }) {
+        this.username = data.username;
+        this.email = data.email;
+        this.emailVerified = data.emailVerified;
+        this.dateJoined = data.dateJoined;
+        this.isTrustworthy = data.isTrustworthy;
+        this.useMetric = data.useMetric;
+        this.height = data.height;
+        this.weightRounding = data.weightRounding;
+        this.repetitionsRounding = data.repetitionsRounding;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any) {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
+}
+
+class ProfileAdapter implements Adapter<Profile> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson = (item: any): Profile => new Profile({
+        username: item.username,
+        email: item.email,
+        emailVerified: item.email_verified,
+        dateJoined: new Date(item.date_joined),
+        isTrustworthy: item.is_trustworthy,
+        useMetric: item.weight_unit === 'kg',
+        height: item.height,
+        weightRounding: item.weight_rounding !== null ? parseFloat(item.weight_rounding) : null,
+        repetitionsRounding: item.repetitions_rounding !== null ? parseFloat(item.repetitions_rounding) : null,
+    });
+
+
+    toJson = (item: Profile) => ({
+        email: item.email,
+        height: item.height,
+        weight_unit: item.useMetric ? 'kg' : 'lb',
+        weight_rounding: item.weightRounding,
+        repetitions_rounding: item.repetitionsRounding,
+    });
+}
+
+
+const adapter = new ProfileAdapter();

package/src/components/User/queries/contribute.test.ts

@@ -0,0 +1,132 @@
+import { Profile } from "components/User/models/profile";
+import { useCanContributeExercises } from "components/User/queries/contribute";
+import { usePermissionQuery } from "components/User/queries/permission";
+import { useProfileQuery } from "components/User/queries/profile";
+
+jest.mock("components/User/queries/profile");
+jest.mock("components/User/queries/permission");
+
+
+describe("Test the exercise contribution query", () => {
+
+    let testProfile: Profile;
+
+    beforeEach(() => {
+        (usePermissionQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: false
+        }));
+
+        testProfile = new Profile({
+            username: 'testerMcTest',
+            email: 'admin@google.com',
+            emailVerified: false,
+            dateJoined: new Date(),
+            isTrustworthy: false,
+            useMetric: true,
+            height: 180,
+            weightRounding: null,
+            repetitionsRounding: null,
+        });
+    });
+
+
+    test('no verified email', () => {
+        // Arrange
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfile
+        }));
+
+        // Assert
+        const result = useCanContributeExercises();
+        expect(result).toStrictEqual({
+            admin: false,
+            anonymous: false,
+            canContribute: false,
+            emailVerified: false,
+        });
+    });
+
+
+    test('verified email', () => {
+        // Arrange
+        testProfile.emailVerified = true;
+
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfile
+        }));
+
+        // Assert
+        const result = useCanContributeExercises();
+        expect(result).toStrictEqual({
+            admin: false,
+            anonymous: false,
+            canContribute: false,
+            emailVerified: true,
+        });
+    });
+
+    test('user is trustworthy', () => {
+        // Arrange
+        testProfile.emailVerified = true;
+        testProfile.isTrustworthy = true;
+
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfile
+        }));
+
+        // Assert
+        const result = useCanContributeExercises();
+        expect(result).toStrictEqual({
+            admin: false,
+            anonymous: false,
+            canContribute: true,
+            emailVerified: true,
+        });
+    });
+
+    test('user is logged out', () => {
+        // Arrange
+        testProfile.emailVerified = true;
+        testProfile.isTrustworthy = true;
+
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: null
+        }));
+
+        // Assert
+        const result = useCanContributeExercises();
+        expect(result).toStrictEqual({
+            admin: false,
+            anonymous: true,
+            canContribute: false,
+            emailVerified: false,
+        });
+    });
+
+    test('user is admin, even without verified email', () => {
+        // Arrange
+        (usePermissionQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: true
+        }));
+
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfile
+        }));
+
+        // Assert
+        const result = useCanContributeExercises();
+        expect(result).toStrictEqual({
+            admin: true,
+            anonymous: false,
+            canContribute: true,
+            emailVerified: false,
+        });
+    });
+});

package/src/components/User/queries/contribute.ts

@@ -0,0 +1,33 @@
+import { useProfileQuery } from "components/User/queries/profile";
+import { usePermissionQuery } from "components/User/queries/permission";
+import { WgerPermissions } from "permissions";
+
+export function useCanContributeExercises() {
+    const profileQuery = useProfileQuery();
+    const permissionQuery = usePermissionQuery(WgerPermissions.EDIT_EXERCISE);
+
+    const result = { canContribute: false, anonymous: true, emailVerified: false, admin: false };
+
+    if (profileQuery.isSuccess && permissionQuery.isSuccess) {
+
+        // Profile is null, user is not logged in
+        if (profileQuery.data === null) {
+            return result;
+        }
+
+        result.anonymous = false;
+
+        if (profileQuery.data?.emailVerified) {
+            result.emailVerified = true;
+        }
+
+        if (permissionQuery.data) {
+            result.admin = true;
+        }
+
+        if (result.admin || profileQuery.data?.isTrustworthy) {
+            result.canContribute = true;
+        }
+    }
+    return result;
+}

package/src/components/User/queries/permission.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { WgerPermissions } from "permissions";
+import { checkPermission } from "services/permission";
+import { QUERY_PERMISSION } from "utils/consts";
+
+export function usePermissionQuery(permission: WgerPermissions) {
+    return useQuery({
+        queryKey: [QUERY_PERMISSION, permission],
+        queryFn: () => checkPermission(permission.valueOf())
+    });
+}

package/src/components/User/queries/profile.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { EditProfileParams } from "components/User/models/profile";
+import { editProfile, getProfile } from "services";
+import { QueryKey } from "utils/consts";
+
+export function useProfileQuery() {
+    return useQuery({
+        queryKey: [QueryKey.QUERY_PROFILE],
+        queryFn: getProfile
+    });
+}
+
+export const useEditProfileQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: Partial<EditProfileParams>) => editProfile(data),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: [QueryKey.QUERY_PROFILE] });
+        }
+    });
+};

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

@@ -0,0 +1,12 @@
+import Grid from "@mui/material/Grid";
+import { RoutineForm } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
+import React from "react";
+
+export const RoutineAdd = () => {
+
+    return <Grid container>
+        <Grid size={6} offset={3}>
+            <RoutineForm />
+        </Grid>
+    </Grid>;
+};

package/src/components/WorkoutRoutines/Detail/RoutineDetail.test.tsx

@@ -0,0 +1,71 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { RoutineDetail } from "components/WorkoutRoutines/Detail/RoutineDetail";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getRoutine } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { getTestQueryClient } from "tests/queryClient";
+import { testPrivateTemplate1, testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the RoutineDetail component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+    });
+
+    test('renders the detail page', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={getTestQueryClient()}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<RoutineDetail />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalledWith(101);
+            expect(getLanguages).toHaveBeenCalledTimes(1);
+        });
+        await waitFor(() => {
+            expect(screen.getByText('Test routine 1')).toBeInTheDocument();
+        });
+
+        expect(screen.queryByText('routines.template')).not.toBeInTheDocument();
+        expect(screen.getByText('Full body routine')).toBeInTheDocument();
+        expect(screen.getByText('Every day is leg day 🦵🏻')).toBeInTheDocument();
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.getByText('4 Sets, 5 x 20 @ 2Rir')).toBeInTheDocument();
+    });
+
+    test('renders chip for templates', async () => {
+        (getRoutine as jest.Mock).mockResolvedValue(testPrivateTemplate1);
+
+        // Act
+        render(
+            <QueryClientProvider client={getTestQueryClient()}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<RoutineDetail />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalled();
+        });
+        await waitFor(() => {
+            expect(screen.getByText('routines.template')).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,87 @@
+import { Box, Button, Chip, Stack, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { RenderLoadingQuery } from "components/Core/Widgets/RenderLoadingQuery";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { RoutineDetailDropdown } from "components/WorkoutRoutines/widgets/RoutineDetailDropdown";
+import { DayDetailsCard } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
+import i18n from "i18n";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { dateToLocale } from "utils/date";
+import { makeLink, WgerLink } from "utils/url";
+
+export const RoutineDetail = () => {
+    const { t } = useTranslation();
+    const params = useParams<{ routineId: string }>();
+    const routineId = parseInt(params.routineId ?? '');
+    if (Number.isNaN(routineId)) {
+        return <p>Please pass an integer as the routine id.</p>;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const routineQuery = useRoutineDetailQuery(routineId);
+
+    const routine = routineQuery.data;
+    const subtitle = routine !== undefined ? `${dateToLocale(routine!.start)} - ${dateToLocale(routine!.end)} (${routine?.durationText})` : '';
+    const chip = routine?.isTemplate
+        ? <Chip color="info" size="small" label={t('routines.template')} />
+        : null;
+
+    return <RenderLoadingQuery
+        query={routineQuery}
+        child={routineQuery.isSuccess
+            && <WgerContainerRightSidebar
+                title={<>{routine!.name} {chip}</>}
+                subTitle={subtitle}
+                optionsMenu={<RoutineDetailDropdown routine={routineQuery.data!} />}
+                mainContent={
+                    <Stack spacing={2}>
+
+                        {routine!.description !== ''
+                            && <Typography variant={"body2"} sx={{ whiteSpace: 'pre-line' }}>
+                                {routine?.description}
+                            </Typography>
+                        }
+
+                        {routine!.isTemplate && <Button
+                            component="a"
+                            href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: routineId })}
+                            variant={"contained"}
+                        >{t('routines.copyAndUseTemplate')}</Button>}
+                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                            <DayDetailsCard
+                                routineId={routineId}
+                                dayData={dayData}
+                                key={`dayDetails-${dayData.date.toISOString()}`}
+                                readOnly={routine!.isTemplate}
+                            />
+                        )}
+                    </Stack>
+                }
+                sideBar={
+                    <Stack>
+                        <Box height={40} />
+                        <Grid container>
+                            <Grid size={6}>
+                                <MuscleOverview
+                                    primaryMuscles={routine!.mainMuscles.filter(m => m.isFront)}
+                                    secondaryMuscles={routine!.secondaryMuscles.filter(m => m.isFront)}
+                                    isFront={true}
+                                />
+                            </Grid>
+                            <Grid size={6}>
+                                <MuscleOverview
+                                    primaryMuscles={routine!.mainMuscles.filter(m => !m.isFront)}
+                                    secondaryMuscles={routine!.secondaryMuscles.filter(m => !m.isFront)}
+                                    isFront={false}
+                                />
+                            </Grid>
+                        </Grid>
+                    </Stack>
+                }
+            />}
+    />;
+};

package/src/components/WorkoutRoutines/Detail/RoutineDetailsTable.test.tsx

@@ -0,0 +1,83 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { compareValue, RoutineDetailsTable } from "components/WorkoutRoutines/Detail/RoutineDetailsTable";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getRoutine, getRoutineLogData } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { testQueryClient } from "tests/queryClient";
+import { testRoutine1, testRoutineLogData } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the RoutineDetailsTable component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+        (getRoutineLogData as jest.Mock).mockResolvedValue(testRoutineLogData);
+    });
+
+    test('renders the routine table', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<RoutineDetailsTable />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalledTimes(1);
+            expect(getLanguages).toHaveBeenCalledTimes(1);
+            expect(getRoutineLogData).toHaveBeenCalledTimes(1);
+        });
+        expect(screen.getByText('Test routine 1')).toBeInTheDocument();
+        expect(screen.getByText('routines.sets')).toBeInTheDocument();
+        expect(screen.getByText('routines.reps')).toBeInTheDocument();
+        expect(screen.getByText('weight')).toBeInTheDocument();
+        expect(screen.getByText('routines.restTime')).toBeInTheDocument();
+        expect(screen.getByText('routines.rir')).toBeInTheDocument();
+    });
+});
+
+describe('compareValue', () => {
+    test('returns null when value is null or undefined', () => {
+        expect(compareValue(null, 1, 10)).toBeNull();
+        expect(compareValue(undefined, 1, 10)).toBeNull();
+    });
+
+    test('returns "lower" when value is less than from', () => {
+        expect(compareValue(0, 1, 10)).toBe('lower');
+    });
+
+    test('returns "higher" when value is greater than to', () => {
+        expect(compareValue(11, 1, 10)).toBe('higher');
+    });
+
+    test('returns "match" when value is within from and to', () => {
+        expect(compareValue(5, 1, 10)).toBe('match');
+    });
+
+    test('returns "lower" when only from is set and value is less than from', () => {
+        expect(compareValue(0, 1, null)).toBe('lower');
+    });
+
+    test('returns "higher" when only from is set and value is greater than from', () => {
+        expect(compareValue(2, 1, null)).toBe('higher');
+    });
+
+    test('returns "match" when only from is set and value is equal to from', () => {
+        expect(compareValue(1, 1, null)).toBe('match');
+    });
+
+    test('returns null when from and to are both null or undefined', () => {
+        expect(compareValue(5, null, null)).toBeNull();
+        expect(compareValue(5, undefined, undefined)).toBeNull();
+    });
+});