@wger-project/react-components 25.10.16

package/src/theme.ts

@@ -0,0 +1,73 @@
+import { createTheme } from '@mui/material/styles';
+import { ThemeOptions } from '@mui/material/styles/createTheme';
+
+const fontFamilyBold = [
+    '"Open Sans Bold"',
+    'sans-serif'
+].join(',');
+
+const fontFamilyLight = [
+    '"Open Sans Light"',
+    'sans-serif'
+].join(',');
+
+const themeOptions: ThemeOptions = {
+
+    spacing: 8,
+    typography: {
+        h3: {
+            fontFamily: fontFamilyBold,
+        },
+        h4: {
+            fontFamily: fontFamilyBold,
+        },
+        h5: {
+            fontFamily: fontFamilyBold,
+        },
+        h6: {
+            fontFamily: fontFamilyBold,
+        },
+        fontFamily: fontFamilyLight,
+    },
+    palette: {
+        primary: {
+            main: '#2A4C7D',
+        },
+        secondary: {
+            main: '#e63946',
+        },
+        warning: {
+            main: '#cba328',
+        },
+        info: {
+            main: '#457b9d',
+        },
+        success: {
+            main: '#307916',
+        },
+    }
+};
+
+export const theme = createTheme(themeOptions);
+export const makeTheme = (element: HTMLDivElement) => createTheme(
+    {
+        ...themeOptions,
+        components: {
+            MuiPopover: {
+                defaultProps: {
+                    container: element,
+                },
+            },
+            MuiPopper: {
+                defaultProps: {
+                    container: element,
+                },
+            },
+            MuiModal: {
+                defaultProps: {
+                    container: element,
+                },
+            },
+        },
+    }
+);

package/src/types.ts

@@ -0,0 +1,144 @@
+import { AlertColor } from "@mui/material";
+import { ApiIngredientThumbnailType } from "components/Nutrition/models/IngredientImageThumbnails";
+
+export interface ApiBodyWeightType {
+    id: number,
+    date: string,
+    weight: string,
+}
+
+export interface ApiMuscleType {
+    id: number,
+    name: string,
+    is_front: boolean,
+    image_url_main: string,
+    image_url_secondary: string,
+}
+
+export interface ApiCategoryType {
+    id: number,
+    name: string,
+}
+
+export interface ApiLanguageType {
+    id: number,
+    short_name: string,
+    full_name: string,
+}
+
+export interface ApiSettingWeightUnitType {
+    id: number,
+    name: string,
+}
+
+export interface ApiSettingRepUnitType {
+    id: number,
+    name: string,
+}
+
+export interface ApiCommentType {
+    id: number,
+    uuid: string,
+    comment: string,
+}
+
+export interface ApiAliasType {
+    id: number,
+    uuid: string,
+    alias: string,
+}
+
+export interface ApiMeasurementCategoryType {
+    id: number,
+    name: string,
+    unit: string
+}
+
+export interface ApiIngredientType {
+    id: number,
+    uuid: string,
+    code: string,
+    name: string,
+    energy: number,
+    protein: string,
+    carbohydrates: string,
+    carbohydrates_sugar: string | null,
+    fat: string,
+    fat_saturated: string | null,
+    fiber: string | null,
+    sodium: string | null,
+    license: {
+        id: number,
+        full_name: string,
+        short_name: string,
+        url: string
+    },
+    license_author: string,
+    image: ApiIngredientImageType | null,
+    thumbnails: ApiIngredientThumbnailType | null,
+}
+
+export type ApiIngredientImageType = {
+    id: number,
+    uuid: string,
+    ingredient_id: number,
+    ingredient_uuid: string,
+    image: string,
+    created: string,
+    last_update: string,
+    size: number,
+    width: number,
+    height: number,
+    license: number,
+    license_title: string,
+    license_object_url: string,
+    license_author: string,
+    license_author_url: string,
+    license_derivative_source_url: string
+}
+
+
+export type ApiIngredientWeightUnitType = {
+    id: number,
+    amount: string,
+    ingredient: number,
+    gram: number,
+    unit: number
+}
+
+export interface ApiNutritionalPlanType {
+    id: number,
+    creation_date: string,
+    start: string,
+    end: string | null,
+    description: string,
+    only_logging: boolean,
+    goal_energy: number | null,
+    goal_protein: number | null,
+    goal_fiber: number | null,
+    goal_carbohydrates: number | null,
+    goal_fat: number | null,
+}
+
+
+export interface ApiMeasurementEntryType {
+    id: number,
+    category: number,
+    date: Date,
+    value: number,
+    notes: string
+}
+
+export interface ApiEquipmentType {
+    id: number,
+    name: string,
+}
+
+export interface Notification {
+    notify: boolean;
+    message: string;
+    severity: AlertColor | undefined;
+    title: string;
+    type: "other" | "delete" | undefined;
+    undo?: boolean;
+}

package/src/utils/Adapter.ts

@@ -0,0 +1,10 @@
+/*
+ * Small adapter interface to make TypeScript and us happy
+ */
+export interface Adapter<T> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): T;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    toJson?(item: T): any;
+}

package/src/utils/colors.test.ts

@@ -0,0 +1,38 @@
+import { generateChartColors } from "utils/colors";
+
+describe("test the color utility", () => {
+
+    test('3 items or less', () => {
+        const result = generateChartColors(2);
+        expect(result.next().value).toStrictEqual("#2a4c7d");
+        expect(result.next().value).toStrictEqual("#d45089");
+    });
+
+    test('5 items or less', () => {
+        const result = generateChartColors(5);
+
+        expect(result.next().value).toStrictEqual("#2a4c7d");
+        expect(result.next().value).toStrictEqual("#825298");
+        expect(result.next().value).toStrictEqual("#d45089");
+        expect(result.next().value).toStrictEqual("#ff6a59");
+        expect(result.next().value).toStrictEqual("#ffa600");
+    });
+
+    test('8 items or more - last ones undefined', () => {
+        const result = generateChartColors(8);
+
+        expect(result.next().value).toStrictEqual("#2a4c7d");
+        expect(result.next().value).toStrictEqual("#5b5291");
+        expect(result.next().value).toStrictEqual("#8e5298");
+        expect(result.next().value).toStrictEqual("#bf5092");
+        expect(result.next().value).toStrictEqual("#e7537e");
+        expect(result.next().value).toStrictEqual("#ff6461");
+        expect(result.next().value).toStrictEqual("#ff813d");
+        expect(result.next().value).toStrictEqual("#ffa600");
+
+        // If we continue, we get undefined, but that's acceptable since the chart
+        // renders this as black
+        expect(result.next().value).toStrictEqual(undefined);
+    });
+
+});

package/src/utils/colors.ts

@@ -0,0 +1,17 @@
+import { LIST_OF_COLORS3, LIST_OF_COLORS5, LIST_OF_COLORS8 } from "utils/consts";
+
+export function* generateChartColors(nrOfItems: number) {
+
+    let colors;
+    if (nrOfItems <= 3) {
+        colors = LIST_OF_COLORS3;
+    } else if (nrOfItems <= 5) {
+        colors = LIST_OF_COLORS5;
+    } else {
+        colors = LIST_OF_COLORS8;
+    }
+
+    for (const i of colors) {
+        yield i;
+    }
+}

package/src/utils/consts.ts

@@ -0,0 +1,160 @@
+import { Language } from "components/Exercises/models/language";
+import { MIN_ACCOUNT_AGE_TO_TRUST, TIME_ZONE } from "config";
+
+export const ENGLISH_LANGUAGE_ID = 2;
+export const ENGLISH_LANGUAGE_CODE = 'en';
+export const ENGLISH_LANGUAGE_OBJ = new Language(ENGLISH_LANGUAGE_ID, ENGLISH_LANGUAGE_CODE, 'English');
+
+export const MIN_ACCOUNT_AGE = MIN_ACCOUNT_AGE_TO_TRUST || 21;
+
+
+export const REP_UNIT_REPETITIONS = 1;
+export const REP_UNIT_TILL_FAILURE = 2;
+
+export const WEIGHT_UNIT_KG = 1;
+export const WEIGHT_UNIT_LB = 2;
+
+
+export const QUERY_EXERCISES = 'exercises';
+export const QUERY_EXERCISE_VARIATIONS = 'variations';
+export const QUERY_EXERCISE_DETAIL = 'detail';
+export const QUERY_LANGUAGES = 'languages';
+export const QUERY_CATEGORIES = 'categories';
+export const QUERY_EQUIPMENT = 'equipment';
+export const QUERY_MUSCLES = 'muscles';
+export const QUERY_NOTES = 'notes';
+
+export const QUERY_PERMISSION = 'permission';
+
+export const QUERY_MEASUREMENTS = 'measurements';
+export const QUERY_MEASUREMENTS_CATEGORIES = 'measurements-categories';
+
+/*
+ * Keys used for the queries
+ *
+ * These don't have any meaning, they just need to be globally unique
+ */
+export enum QueryKey {
+    ROUTINE_OVERVIEW = 'routine-overview',
+    ROUTINE_DETAIL = 'routine-detail',
+    SESSION_SEARCH = 'session-search',
+    SESSIONS_FULL = 'sessions-full',
+    ROUTINE_LOGS = 'routine-logs',
+    ROUTINE_LOG_DATA = 'routine-log-data',
+    ROUTINE_STATS = 'routine-stats',
+    ROUTINES_ACTIVE = 'routines-active',
+    ROUTINES_SHALLOW = 'routines-shallow',
+    PRIVATE_TEMPLATES = 'private-templates',
+    PUBLIC_TEMPLATES = 'public-templates',
+
+    NUTRITIONAL_PLANS = 'nutritional-plans',
+    NUTRITIONAL_PLAN = 'nutritional-plan',
+    NUTRITIONAL_PLAN_DIARY = 'nutritional-plan-diary',
+    NUTRITIONAL_PLAN_LAST = 'nutritional-plan-last',
+    INGREDIENT = 'ingredient',
+
+    BODY_WEIGHT = 'body-weight',
+
+    ROUTINE_WEIGHT_UNITS = 'weight-units',
+    ROUTINE_REP_UNITS = 'rep-units',
+
+    QUERY_PROFILE = 'profile',
+
+    EXERCISES = 'exercises',
+    EXERCISE_VARIATIONS = 'variations',
+    EXERCISE_DETAIL = 'detail',
+    LANGUAGES = 'languages',
+    CATEGORIES = 'categories',
+    EQUIPMENT = 'equipment',
+    MUSCLES = 'muscles',
+    QUERY_NOTES = 'notes',
+}
+
+/*
+ * List of API endpoints
+ */
+export enum ApiPath {
+
+    // Nutrition
+    MEAL = 'meal',
+    MEAL_ITEM = 'mealitem',
+    NUTRITIONAL_DIARY = 'nutritiondiary',
+    INGREDIENTINFO_PATH = 'ingredientinfo',
+    INGREDIENT_SEARCH_PATH = 'ingredient/search',
+    INGREDIENT_WEIGHT_UNIT = 'ingredientweightunit',
+
+    // Routines
+    ROUTINE = 'routine',
+    WEIGHT_CONFIG = 'weight-config',
+    MAX_WEIGHT_CONFIG = 'max-weight-config',
+    REPETITIONS_CONFIG = 'repetitions-config',
+    MAX_REPS_CONFIG = 'max-repetitions-config',
+    RIR_CONFIG = 'rir-config',
+    MAX_RIR_CONFIG = 'max-rir-config',
+    NR_OF_SETS_CONFIG = 'sets-config',
+    MAX_NR_OF_SETS_CONFIG = 'max-sets-config',
+    REST_CONFIG = 'rest-config',
+    MAX_REST_CONFIG = 'max-rest-config',
+    DAY = 'day',
+    SLOT = 'slot',
+    SLOT_ENTRY = 'slot-entry',
+    SESSION = 'workoutsession',
+
+    WORKOUT_LOG = 'workoutlog',
+    PRIVATE_TEMPLATE = 'templates',
+    PUBLIC_TEMPLATE = 'public-templates',
+
+    // Profile
+    API_PROFILE_PATH = 'userprofile',
+}
+
+
+export const API_MAX_PAGE_SIZE = '999';
+
+export const API_RESULTS_PAGE_SIZE = '100';
+
+/*
+ * List of colors to use in charts
+ *
+ * Use e.g. like LIST_OF_COLORS[key % LIST_OF_COLORS.length] so that there
+ * are no errors when there are more categories than colors
+ *
+ * https://www.learnui.design/tools/data-color-picker.html#palette
+ */
+export const LIST_OF_COLORS8 = [
+    "#2a4c7d",
+    "#5b5291",
+    "#8e5298",
+    "#bf5092",
+    "#e7537e",
+    "#ff6461",
+    "#ff813d",
+    "#ffa600",
+];
+export const LIST_OF_COLORS5 = [
+    "#2a4c7d",
+    "#825298",
+    "#d45089",
+    "#ff6a59",
+    "#ffa600",
+];
+export const LIST_OF_COLORS3 = [
+    "#2a4c7d",
+    "#d45089",
+    "#ffa600",
+];
+
+
+export const PAGINATION_OPTIONS = {
+    pageSizeOptions: [5, 10, 25, 50, 100],
+    pageSize: 10,
+};
+
+
+export const TIMEZONE = TIME_ZONE || 'Europe/Berlin';
+
+export const LANGUAGE_SHORT_ENGLISH = 'en';
+
+export const SNACKBAR_AUTO_HIDE_DURATION = 3000;
+
+export const DEBOUNCE_ROUTINE_FORMS = 500;

package/src/utils/date.test.ts

@@ -0,0 +1,56 @@
+import { calculatePastDate, dateTimeToHHMM, dateToYYYYMMDD } from "utils/date";
+
+describe("test date utility", () => {
+
+    test('convert date 1', () => {
+        const result = dateToYYYYMMDD(new Date(2022, 0, 1, 23));
+        expect(result).toStrictEqual('2022-01-01');
+    });
+
+    test('convert date 2', () => {
+        const result = dateToYYYYMMDD(new Date(2022, 5, 2, 23, 10, 34));
+        expect(result).toStrictEqual('2022-06-02');
+    });
+
+    test('convert date 3', () => {
+        const result = dateToYYYYMMDD(new Date('January 17, 2022 03:24:00'));
+        expect(result).toStrictEqual('2022-01-17');
+    });
+});
+
+describe("test time utility", () => {
+
+    test('convert time 1', () => {
+        const result = dateTimeToHHMM(new Date(2022, 0, 1, 23, 10, 22));
+        expect(result).toStrictEqual('23:10');
+    });
+
+});
+
+
+describe('calculatePastDate', () => {
+
+    it('should return undefined for empty string filter', () => {
+        expect(calculatePastDate('', new Date('2023-08-14'))).toBeUndefined();
+    });
+
+    it('should return the correct date for lastWeek filter', () => {
+        const result = calculatePastDate('lastWeek', new Date('2023-02-14'));
+        expect(result).toStrictEqual('2023-02-07');
+    });
+
+    it('should return the correct date for lastMonth filter', () => {
+        const result = calculatePastDate('lastMonth', new Date('2023-02-14'));
+        expect(result).toStrictEqual('2023-01-14');
+    });
+
+    it('should return the correct date for lastHalfYear filter', () => {
+        const result = calculatePastDate('lastHalfYear', new Date('2023-08-14'));
+        expect(result).toStrictEqual('2023-02-14');
+    });
+
+    it('should return the correct date for lastYear filter', () => {
+        const result = calculatePastDate('lastYear', new Date('2023-02-14'));
+        expect(result).toStrictEqual('2022-02-14');
+    });
+});

package/src/utils/date.ts

@@ -0,0 +1,145 @@
+import { FilterType } from "components/BodyWeight/widgets/FilterButtons";
+import i18n from 'i18next';
+import { DateTime, DateTimeFormatOptions } from "luxon";
+
+
+export function isSameDay(date1: Date, date2: Date): boolean {
+    return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+    );
+}
+
+/*
+ * Util function that converts a date to a YYYY-MM-DD string
+ */
+export function dateToYYYYMMDD(date: Date): string {
+    return date.toISOString().split('T')[0];
+}
+
+
+/*
+ * Returns the localized time from a date object
+ */
+export function dateTimeToLocaleHHMM(dateTime: Date | null, locale?: string, options?: Intl.DateTimeFormatOptions) {
+    if (dateTime == null) {
+        return null;
+    }
+    locale = locale ?? i18n.language;
+    options = options ?? { hour: '2-digit', minute: '2-digit' };
+
+    return dateTime.toLocaleTimeString(
+        locale ? [locale] : [],
+        options
+    );
+}
+
+export function dateTimeToLocale(dateTime: Date | null, locale?: string, options?: Intl.DateTimeFormatOptions,) {
+    if (dateTime == null) {
+        console.warn("dateTimeToLocaleHHMM called with null datetime!");
+        return '';
+    }
+
+    locale = locale ?? i18n.language;
+    options = options ?? {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+
+    return dateTime.toLocaleString(locale ? [locale] : [], options);
+}
+
+export function luxonDateTimeToLocale(dateTime: DateTime | null, locale?: string, options?: DateTimeFormatOptions,) {
+    if (dateTime == null) {
+        console.warn("luxonDateTimeToLocale called with null datetime!");
+        return '';
+    }
+
+    locale = locale ?? i18n.language;
+    options = options ?? DateTime.DATE_MED;
+
+    return dateTime.toLocaleString(options, { locale: locale });
+}
+
+export function dateToLocale(dateTime: Date | null, locale?: string, options?: Intl.DateTimeFormatOptions) {
+    if (dateTime == null) {
+        console.warn('dateToLocale called with null date!');
+        return '';
+    }
+
+    locale = locale ?? i18n.language;
+    options = options ?? {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+    };
+
+
+    return dateTime.toLocaleString(locale ? [locale] : [], options);
+}
+
+/*
+ * Converts a date object to a non localized string in the format HH:MM
+ */
+export function dateTimeToHHMM(date: Date | null) {
+    if (date == null) {
+        return null;
+    }
+    const [hour, minute] = date.toTimeString().split(':');
+    return `${hour}:${minute}`;
+}
+
+/*
+ * Converts HH:MM to a date object
+ *
+ * Note that this is only used when converting times from the api, so we don't
+ * have to consider that there could be annoying AMs and PMs in the string
+ */
+export function HHMMToDateTime(time: string | null) {
+
+    if (time == null) {
+        return null;
+    }
+
+    const [hour, minute] = time.split(':', 2);
+    const dateTime = new Date();
+    dateTime.setHours(parseInt(hour));
+    dateTime.setMinutes(parseInt(minute));
+
+    return dateTime;
+}
+
+/*
+ * Util function that calculates a date in the past based on a string filter
+ * and returns it as a YYYY-MM-DD string for API queries.
+ *
+ * @param filter - A string representing the desired time period (e.g., 'lastWeek', 'lastMonth')
+ * @param currentDate - (Optional) The current date to base calculations on. Defaults to `new Date()`.
+ *                      This parameter allows for testing or custom date bases.
+ * @returns - Date string in the format YYYY-MM-DD or undefined for no filtering
+ */
+export function calculatePastDate(filter: FilterType, currentDate: Date = new Date()): string | undefined {
+
+    // Dictionary for filters
+    const filterMap: Record<FilterType, (() => void) | undefined> = {
+        lastWeek: () => currentDate.setDate(currentDate.getDate() - 7),
+        lastMonth: () => currentDate.setMonth(currentDate.getMonth() - 1),
+        lastHalfYear: () => currentDate.setMonth(currentDate.getMonth() - 6),
+        lastYear: () => currentDate.setFullYear(currentDate.getFullYear() - 1),
+        '': undefined
+    };
+
+    // Execute the corresponding function for the filter
+    const applyFilter = filterMap[filter];
+    if (applyFilter) {
+        applyFilter();
+    } else {
+        return undefined;
+    }
+
+    return dateToYYYYMMDD(currentDate);
+}

package/src/utils/forms.test.ts

@@ -0,0 +1,41 @@
+import { collectValidationErrors } from "utils/forms";
+
+describe('test the collectValidationErrors function', () => {
+    test('correctly collects all errors from lists', () => {
+        const result = collectValidationErrors({
+            'field1': ['Error 1', 'Error 2'],
+            'field2': ['Error 3'],
+        });
+        expect(result).toStrictEqual(['field1: Error 1', 'field1: Error 2', 'field2: Error 3']);
+    });
+    test('correctly collects all errors from nested lists', () => {
+        const result = collectValidationErrors({
+            "main": [
+                { "sub-list": ["This is a list"] }
+            ],
+        });
+        expect(result).toStrictEqual(['main.sub-list: This is a list']);
+    });
+    test('correctly collects all errors from strings', () => {
+        const result = collectValidationErrors({
+            "language": "This is not a list",
+        });
+        expect(result).toStrictEqual(['language: This is not a list']);
+    });
+
+    test('correctly handles an emtpy object', () => {
+        const result = collectValidationErrors({});
+        expect(result).toStrictEqual([]);
+    });
+
+    test('correctly handles an undefined object', () => {
+        const result = collectValidationErrors(undefined);
+        expect(result).toStrictEqual([]);
+    });
+
+    test('correctly handles a null object', () => {
+        const result = collectValidationErrors(null);
+        expect(result).toStrictEqual([]);
+    });
+
+});