@wger-project/react-components 25.10.16

package/src/utils/forms.ts

@@ -0,0 +1,54 @@
+interface ValidationErrorResponseSubList {
+    [key: string]: ValidationErrorResponseList[];
+}
+
+interface ValidationErrorResponseList {
+    [key: string]: string[];
+}
+
+interface ValidationErrorResponse {
+    [key: string]: string;
+}
+
+export function collectValidationErrors(
+    errors: ValidationErrorResponseList | ValidationErrorResponseSubList | ValidationErrorResponse | undefined | null,
+    parentKey?: string
+): string[] {
+    const allErrors: string[] = [];
+    if (!errors) {
+        return allErrors;
+    }
+
+    for (const field in errors) {
+        if (Object.hasOwn(errors, field)) {
+            const value = errors[field];
+            const key = parentKey ? `${parentKey}.${field}` : field;
+
+            if (Array.isArray(value)) {
+                if (value.length > 0 && typeof value[0] === "object" && value[0] !== null) {
+                    // If value is an array of objects, treat as sublist and recurse
+                    for (const sub of value) {
+                        if (typeof sub === "object" && sub !== null) {
+                            allErrors.push(...collectValidationErrors(sub, key));
+                        } else {
+                            allErrors.push(`${key}: ${sub}`);
+                        }
+                    }
+                } else {
+                    // If value is an array of strings, treat as error messages
+                    allErrors.push(...value.map(error => `${key}: ${error}`));
+                }
+            } else if (typeof value === "string") {
+                // If value is a string, treat as a single error message
+                allErrors.push(`${key}: ${value}`);
+            }
+        }
+    }
+
+    return allErrors;
+}
+
+export function errorsToString(errors: ValidationErrorResponse): string {
+    const allErrors = collectValidationErrors(errors);
+    return allErrors.length > 0 ? allErrors.join(" | ") : "";
+}

package/src/utils/numbers.test.ts

@@ -0,0 +1,55 @@
+import { numberGramLocale, numberLocale } from './numbers';
+
+describe('test the numberLocale function', () => {
+    test('should format number with no commas and "gram" unit in English locale', () => {
+        const result = numberLocale(1234567.123, 'en-US');
+        expect(result).toBe('1,234,567');
+    });
+
+    test('should format number with commas, no decimal point and "gram" unit in English locale', () => {
+        const result = numberLocale(1234.567, 'en-US');
+        expect(result).toBe('1,235');
+    });
+
+    test('should format number with "gram" unit in French locale', () => {
+        const result = numberLocale(9876543, 'fr-FR');
+        expect(result).toBe('9 876 543');
+    });
+
+    test('should format number without commas in Russian locale', () => {
+        const result = numberLocale(12345, 'ru');
+        expect(result).toBe('12 345');
+    });
+
+    test('should format zero without fraction digits', () => {
+        const result = numberLocale(0, 'de-DE');
+        expect(result).toBe('0');
+    });
+});
+
+describe('test the numberGramLocale function', () => {
+    test('should format number without commas and "gram" unit in English locale', () => {
+        const result = numberGramLocale(1234567.123, 'en-US');
+        expect(result).toBe('1,234,567 g');
+    });
+
+    test('should format number with commas, decimal point and "gram" unit in English locale', () => {
+        const result = numberGramLocale(1234.567, 'en-US');
+        expect(result).toBe('1,235 g');
+    });
+
+    test('should format number with commas and "gram" unit in French locale', () => {
+        const result = numberGramLocale(9876543, 'fr-FR');
+        expect(result).toBe('9 876 543 g');
+    });
+
+    test('should format number with commas and "gram" unit in Russian locale', () => {
+        const result = numberGramLocale(12345, 'ru');
+        expect(result).toBe('12 345 г');
+    });
+
+    test('should format zero without fraction digits and "gram" unit', () => {
+        const result = numberGramLocale(0, 'de-DE');
+        expect(result).toBe('0 g');
+    });
+});

package/src/utils/numbers.ts

@@ -0,0 +1,42 @@
+export enum LocaleUnit {
+    GRAM = 'gram',
+    KG = 'kilogram',
+    LB = 'pound',
+    PERCENT = 'percent',
+}
+
+/*
+ * Formats a number, localised, no fraction digits
+ */
+export function numberLocale(num: number, locale: string) {
+    return num.toLocaleString(locale, { maximumFractionDigits: 0 });
+}
+
+/*
+ * Formats a number with a unit, localised, no fraction digits
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ * https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
+ */
+export function numberUnitLocale(num: number, locale: string, unit: LocaleUnit) {
+    return num.toLocaleString(
+        locale,
+        { maximumFractionDigits: 0, unit: unit.valueOf(), style: 'unit' }
+    );
+}
+
+export function numberGramLocale(num: number, locale: string) {
+    return numberUnitLocale(num, locale, LocaleUnit.GRAM);
+}
+
+export function numberPercentLocale(num: number, locale: string) {
+    return numberUnitLocale(num, locale, LocaleUnit.PERCENT);
+}
+
+export function numberKgLocale(num: number, locale: string) {
+    return numberUnitLocale(num, locale, LocaleUnit.KG);
+}
+
+export function numberLbLocale(num: number, locale: string) {
+    return numberUnitLocale(num, locale, LocaleUnit.LB);
+}

package/src/utils/requests.test.ts

@@ -0,0 +1,61 @@
+import axios, { AxiosRequestConfig } from "axios";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader } from "utils/url";
+
+jest.mock('axios');
+
+describe("test the pagination utilities", () => {
+
+    const mockResponse1 = {
+        data: {
+            results: [1, 2, 3],
+            next: '/api/endpoint?page=2',
+        },
+    };
+
+    const mockResponse2 = {
+        data: {
+            results: [4, 5, 6],
+            next: null,
+        },
+    };
+
+
+    test('should fetch and yield results from all pages', async () => {
+        (axios.get as jest.Mock).mockResolvedValueOnce(mockResponse1);
+        (axios.get as jest.Mock).mockResolvedValueOnce(mockResponse2);
+
+        const generator = fetchPaginated('/api/endpoint');
+        const headers = makeHeader();
+
+        const results = [];
+        for await (const page of generator) {
+            results.push(...page);
+        }
+
+        expect(axios.get).toHaveBeenCalledTimes(2);
+        expect(axios.get).toHaveBeenCalledWith(
+            '/api/endpoint?page=2',
+            expect.objectContaining({ headers })
+        );
+        expect(axios.get).toHaveBeenCalledWith(
+            '/api/endpoint',
+            expect.objectContaining({ headers })
+        );
+        expect(results).toEqual([1, 2, 3, 4, 5, 6]);
+
+    });
+
+    test('should use custom headers when provided', async () => {
+        (axios.get as jest.Mock).mockResolvedValue(mockResponse1);
+
+        const headers: AxiosRequestConfig['headers'] = {
+            Authorization: 'Bearer token',
+        };
+
+        const generator = fetchPaginated('/api/endpoint', headers);
+        await generator.next();
+
+        expect(axios.get).toHaveBeenCalledWith('/api/endpoint', expect.objectContaining({ headers }));
+    });
+});

package/src/utils/requests.ts

@@ -0,0 +1,22 @@
+import axios, { AxiosRequestConfig } from 'axios';
+import { makeHeader } from "utils/url";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function* fetchPaginated(url: string, headers?: AxiosRequestConfig['headers']): AsyncGenerator<any[], void> {
+
+    if (headers == null) {
+        headers = makeHeader();
+    }
+
+    while (true) {
+        const response = await axios.get(url, { headers: headers });
+        const data = response.data;
+        yield data.results;
+
+        url = data.next;
+        if (!url) {
+            break;
+        }
+    }
+}
+

package/src/utils/strings.test.ts

@@ -0,0 +1,62 @@
+import { getTranslationKey, makeServerKey, truncateLongNames } from "utils/strings";
+
+describe("slugify utilities", () => {
+
+    test('whitespace', () => {
+        expect(makeServerKey('test 123')).toEqual('test_123');
+    });
+
+    test('several whitespaces', () => {
+        expect(makeServerKey('test   123')).toEqual('test___123');
+    });
+
+    test('capital letters', () => {
+        expect(makeServerKey('TeST123')).toEqual('test123');
+    });
+
+    test('parenthesis', () => {
+        expect(makeServerKey('Test(123)')).toEqual('test_123_');
+    });
+
+    test('dash', () => {
+        expect(makeServerKey('Test-123')).toEqual('test_123');
+    });
+
+    test('special chars are kept', () => {
+        expect(makeServerKey('abc*/&%$§')).toEqual('abc*/&%$§');
+    });
+});
+
+describe("translation key utilities", () => {
+
+    test('key', () => {
+        expect(getTranslationKey('test 123')).toEqual('server.test_123');
+    });
+
+    test('several whitespaces', () => {
+        expect(getTranslationKey('test   123')).toEqual('server.test___123');
+    });
+
+    test('capital letters', () => {
+        expect(getTranslationKey('TeST123')).toEqual('server.test123');
+    });
+
+    test('special chars are kept', () => {
+        expect(getTranslationKey('abc*/&%$§')).toEqual('server.abc*/&%$§');
+    });
+});
+
+describe("truncate name utilities", () => {
+
+    test('long name, default max length', () => {
+        expect(truncateLongNames('Pizza is a dish of Italian origin consisting of...')).toEqual('Pizza is a dish of Ita…');
+    });
+
+    test('long name, custom max length', () => {
+        expect(truncateLongNames('Pizza is a dish of Italian origin consisting of a usually round...', 10)).toEqual('Pizza is a…');
+    });
+
+    test('short name, default max length', () => {
+        expect(truncateLongNames('Pizza is a dish')).toEqual('Pizza is a dish');
+    });
+});

package/src/utils/strings.ts

@@ -0,0 +1,28 @@
+const MAX_LENGTH = 22;
+
+export function truncateLongNames(name: string, maxLength = MAX_LENGTH): string {
+    return name.length > maxLength ? name.slice(0, maxLength) + '…' : name;
+}
+
+// Replace whitespace and parenthesis with underscores and make lowercase
+//
+// Note this function is used to generate the translation keys for the exercise categories
+// etc. so they can be used as keys in the translation files. Don't change the implementation
+// of this function without updating its counterpart in extract-i18n.py
+export function makeServerKey(name: string): string {
+    return name.toLowerCase()
+        .replace(/\s/g, '_')
+        .replace('(', '_')
+        .replace(')', '_')
+        .replace('-', '_');
+}
+
+// Returns the key used for the translation of the given exercise data
+export function getTranslationKey(name: string | undefined): string {
+    if (name === undefined) {
+        console.warn("called getTranslationKey with undefined name");
+        return '';
+    }
+
+    return `server.${makeServerKey(name)}`;
+}

package/src/utils/url.test.ts

@@ -0,0 +1,127 @@
+import { makeHeader, makeLink, makeUrl, WgerLink } from "utils/url";
+
+describe("test url utility", () => {
+
+    test('generate overview URL', () => {
+        const result = makeUrl('endpoint', { server: 'http://localhost:8000' });
+        expect(result).toStrictEqual('http://localhost:8000/api/v2/endpoint/');
+    });
+
+    test('generate object method URL', () => {
+        const result = makeUrl('endpoint', { server: 'http://localhost:8000', objectMethod: 'foo' });
+        expect(result).toStrictEqual('http://localhost:8000/api/v2/endpoint/foo/');
+    });
+
+    test('generate object method for object detail URL', () => {
+        const result = makeUrl('endpoint', { server: 'http://localhost:8000', id: 1234, objectMethod: 'foo' });
+        expect(result).toStrictEqual('http://localhost:8000/api/v2/endpoint/1234/foo/');
+    });
+
+    test('generate overview URL, with query parameters', () => {
+        const params = { server: 'http://localhost:8000', query: { limit: 900 } };
+        const result = makeUrl('endpoint', params);
+        expect(result).toStrictEqual('http://localhost:8000/api/v2/endpoint/?limit=900');
+    });
+
+    test('generate overview URL, with query parameters and an object method', () => {
+        const params = { server: 'http://localhost:8000', query: { limit: 900 }, objectMethod: 'calculate_foo' };
+        const result = makeUrl('endpoint', params);
+        expect(result).toStrictEqual('http://localhost:8000/api/v2/endpoint/calculate_foo/?limit=900');
+    });
+
+    test('generate overview URL, default server', () => {
+        const result = makeUrl('endpoint');
+        expect(result).toStrictEqual('https://example.com/api/v2/endpoint/');
+    });
+
+    test('generate overview URL, default server, with query parameters', () => {
+        const result = makeUrl('endpoint', { query: { foo: 'bar' } });
+        expect(result).toStrictEqual('https://example.com/api/v2/endpoint/?foo=bar');
+    });
+
+    test('generate detail URL', () => {
+        const result = makeUrl('endpoint', { id: 1, server: 'https://example2.com' });
+        expect(result).toStrictEqual('https://example2.com/api/v2/endpoint/1/');
+    });
+
+    test('generate detail URL, with query parameters', () => {
+        const params = { id: 1, server: 'https://example2.com', query: { test: 'foo' } };
+        const result = makeUrl('endpoint', params);
+        expect(result).toStrictEqual('https://example2.com/api/v2/endpoint/1/?test=foo');
+    });
+
+    test('generate detail URL, default server', () => {
+        const result = makeUrl('endpoint', { id: 1 });
+        expect(result).toStrictEqual('https://example.com/api/v2/endpoint/1/');
+    });
+
+    test('generate detail URL, default server, query parameters', () => {
+        const params = { id: 1, query: { a: 1, b: '2', c: '&', d: 'ü' } };
+        const result = makeUrl('endpoint', params);
+        expect(result).toStrictEqual('https://example.com/api/v2/endpoint/1/?a=1&b=2&c=%26&d=%C3%BC');
+    });
+});
+
+describe("test the header utility", () => {
+
+    test('generate header', () => {
+        const result = makeHeader('123');
+        expect(result).toStrictEqual({
+            'Authorization': `Token 123`,
+            'Content-Type': 'application/json',
+        });
+    });
+
+    test('generate header - token from config', () => {
+        const result = makeHeader();
+        expect(result).toStrictEqual({
+            'Authorization': `Token 122333444455555666666`,
+            'Content-Type': 'application/json',
+        });
+    });
+});
+
+
+describe("test the makeLink helper", () => {
+
+    test('link to dashboard', () => {
+        const result = makeLink(WgerLink.DASHBOARD, 'de');
+        expect(result).toEqual('/');
+    });
+
+    test('link to exercise overview, simple language code', () => {
+        const result = makeLink(WgerLink.EXERCISE_OVERVIEW, 'de');
+        expect(result).toEqual('/de/exercise/overview');
+    });
+
+    test('link to exercise overview, complex language code', () => {
+        const result = makeLink(WgerLink.EXERCISE_OVERVIEW, 'de-DE');
+        expect(result).toEqual('/de-de/exercise/overview');
+    });
+
+    test('link to exercise overview, no language code', () => {
+        const result = makeLink(WgerLink.EXERCISE_OVERVIEW,);
+        expect(result).toEqual('/en/exercise/overview');
+    });
+
+    test('link to exercise contribution page', () => {
+        const result = makeLink(WgerLink.EXERCISE_CONTRIBUTE, 'de');
+        expect(result).toEqual('/de/exercise/contribute');
+    });
+
+    test('link to exercise detail page - with slug', () => {
+        const result = makeLink(WgerLink.EXERCISE_DETAIL, 'de', { id: 123, slug: 'foobar' });
+        expect(result).toEqual('/de/exercise/123/view/foobar');
+    });
+
+    test('link to exercise detail page - no slug', () => {
+        const result = makeLink(WgerLink.EXERCISE_DETAIL, 'de', { id: 123 });
+        expect(result).toEqual('/de/exercise/123/view');
+    });
+
+    test('link to weight overview page', () => {
+        const result = makeLink(WgerLink.WEIGHT_OVERVIEW, 'de',);
+        expect(result).toEqual('/de/weight/overview');
+    });
+
+});