@wger-project/react-components 25.10.16

package/src/components/Nutrition/helpers/nutritionalValues.test.ts

@@ -0,0 +1,108 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+
+describe('NutritionalValues', () => {
+    test('should add nutritional values correctly', () => {
+        const values1 = new NutritionalValues();
+        values1.energy = 100;
+        values1.protein = 10;
+        values1.carbohydrates = 20;
+        values1.fat = 5;
+
+        const values2 = new NutritionalValues();
+        values2.energy = 50;
+        values2.protein = 5;
+        values2.carbohydrates = 10;
+        values2.fat = 2;
+
+        values1.add(values2);
+
+        expect(values1.energy).toBe(150);
+        expect(values1.protein).toBe(15);
+        expect(values1.carbohydrates).toBe(30);
+        expect(values1.fat).toBe(7);
+    });
+
+    test('should calculate energy in kJ correctly', () => {
+        const values = new NutritionalValues();
+        values.energy = 500;
+
+        expect(values.energyKj).toBe(2092);
+    });
+
+    test('should compare nutritional values correctly', () => {
+        const values1 = new NutritionalValues();
+        values1.energy = 100;
+        values1.protein = 10;
+        values1.carbohydrates = 20;
+        values1.fat = 5;
+
+        const values2 = new NutritionalValues();
+        values2.energy = 100;
+        values2.protein = 10;
+        values2.carbohydrates = 20;
+        values2.fat = 5;
+
+        const values3 = new NutritionalValues();
+        values3.energy = 200;
+        values3.protein = 20;
+        values3.carbohydrates = 40;
+        values3.fat = 10;
+
+        expect(values1.equals(values2)).toBe(true);
+        expect(values1.equals(values3)).toBe(false);
+    });
+
+    test('should have correct string representation', () => {
+        const values = new NutritionalValues();
+        values.energy = 100;
+        values.protein = 10;
+        values.carbohydrates = 20;
+        values.fat = 5;
+
+        const expectedString = 'e: 100, p: 10, c: 20, cS: 0, f: 5, fS: 0, fi: 0, s: 0';
+
+        expect(values.toString()).toBe(expectedString);
+    });
+
+    test('the percentage calculations work correctly', () => {
+        // protein 4 kcal per g
+        // carbohydrates 4 kcal per g
+        // fat 9 kcal per g
+
+        const values = new NutritionalValues({
+            energy: 165,
+            protein: 10,
+            carbohydrates: 20,
+            fat: 5
+        });
+
+        expect(values.percent.protein).toBeCloseTo(24.24, 2);
+        expect(values.percent.carbohydrates).toBeCloseTo(48.4848, 2);
+        expect(values.percent.fat).toBeCloseTo(27.2727, 2);
+    });
+
+    test('the g-per-body-kg is correctly calculated', () => {
+        const values = new NutritionalValues({
+            protein: 150,
+            carbohydrates: 200,
+            fat: 50,
+            bodyWeight: 100
+        });
+
+        expect(values.perBodyKg.protein).toBeCloseTo(1.5, 2);
+        expect(values.perBodyKg.carbohydrates).toBeCloseTo(2, 2);
+        expect(values.perBodyKg.fat).toBeCloseTo(0.5, 2);
+    });
+
+    test('the g-per-body-kg correctly handles no known weight', () => {
+        const values = new NutritionalValues({
+            protein: 150,
+            carbohydrates: 200,
+            fat: 50,
+        });
+
+        expect(values.perBodyKg.protein).toBeCloseTo(0, 2);
+        expect(values.perBodyKg.carbohydrates).toBeCloseTo(0, 2);
+        expect(values.perBodyKg.fat).toBeCloseTo(0, 2);
+    });
+});

package/src/components/Nutrition/helpers/nutritionalValues.ts

@@ -0,0 +1,128 @@
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import { NutritionWeightUnit } from "components/Nutrition/models/weightUnit";
+
+type NutritionalValuesConstructor = {
+    energy?: number;
+    protein?: number;
+    carbohydrates?: number;
+    carbohydratesSugar?: number;
+    fat?: number;
+    fatSaturated?: number;
+    fiber?: number;
+    sodium?: number;
+    bodyWeight?: number;
+}
+
+// in kcal per g
+export const ENERGY_FACTOR = {
+    protein: 4,
+    carbohydrates: 4,
+    fat: 9
+};
+
+export class NutritionalValues {
+    bodyWeight: number = 0;
+
+    energy: number = 0;
+    protein: number = 0;
+    carbohydrates: number = 0;
+    carbohydratesSugar: number = 0;
+    fat: number = 0;
+    fatSaturated: number = 0;
+    fiber: number = 0;
+    sodium: number = 0;
+
+    get energyKj(): number {
+        return this.energy * 4.184;
+    }
+
+    get isEmpty(): boolean {
+        return this.energy === 0 && this.protein === 0 && this.carbohydrates === 0 && this.fat === 0;
+    }
+
+    get percent() {
+        return {
+            protein: this.protein > 0 ? this.protein * ENERGY_FACTOR.protein / this.energy * 100 : 0,
+            carbohydrates: this.carbohydrates > 0 ? this.carbohydrates * ENERGY_FACTOR.carbohydrates / this.energy * 100 : 0,
+            fat: this.fat > 0 ? this.fat * ENERGY_FACTOR.fat / this.energy * 100 : 0
+        };
+    }
+
+    get perBodyKg() {
+        return {
+            protein: this.bodyWeight > 0 ? this.protein / this.bodyWeight : 0,
+            carbohydrates: this.bodyWeight > 0 ? this.carbohydrates / this.bodyWeight : 0,
+            fat: this.bodyWeight > 0 ? this.fat / this.bodyWeight : 0,
+        };
+    };
+
+
+    constructor(values?: NutritionalValuesConstructor) {
+        this.energy = values?.energy ?? 0;
+        this.protein = values?.protein ?? 0;
+        this.carbohydrates = values?.carbohydrates ?? 0;
+        this.carbohydratesSugar = values?.carbohydratesSugar ?? 0;
+        this.fat = values?.fat ?? 0;
+        this.fatSaturated = values?.fatSaturated ?? 0;
+        this.fiber = values?.fiber ?? 0;
+        this.sodium = values?.sodium ?? 0;
+        this.bodyWeight = values?.bodyWeight ?? 0;
+    }
+
+    static fromIngredient(ingredient: Ingredient, amount: number, weightUnit: NutritionWeightUnit | null) {
+        const out = new NutritionalValues();
+
+        const weight = weightUnit === null
+            ? amount
+            : amount * weightUnit.amount * weightUnit.grams;
+
+        // divide by 100 because nutrition values are per 100g
+        out.energy = ingredient.energy * weight / 100;
+        out.protein = ingredient.protein * weight / 100;
+        out.carbohydrates = ingredient.carbohydrates * weight / 100;
+        out.carbohydratesSugar = ingredient.carbohydratesSugar ? ingredient.carbohydratesSugar * weight / 100 : 0;
+        out.fat = ingredient.fat * weight / 100;
+        out.fatSaturated = ingredient.fatSaturated ? ingredient.fatSaturated * weight / 100 : 0;
+        out.fiber = ingredient.fiber ? ingredient.fiber * weight / 100 : 0;
+        out.sodium = ingredient.sodium ? ingredient.sodium * weight / 100 : 0;
+
+        return out;
+    }
+
+
+    add(other: NutritionalValues) {
+        this.energy += other.energy;
+        this.protein += other.protein;
+        this.carbohydrates += other.carbohydrates;
+        this.carbohydratesSugar += other.carbohydratesSugar;
+        this.fat += other.fat;
+        this.fatSaturated += other.fatSaturated;
+        this.fiber += other.fiber;
+        this.sodium += other.sodium;
+
+        return this;
+    }
+
+    toString(): string {
+        return `e: ${this.energy}, p: ${this.protein}, c: ${this.carbohydrates}, cS: ${this.carbohydratesSugar}, f: ${this.fat}, fS: ${this.fatSaturated}, fi: ${this.fiber}, s: ${this.sodium}`;
+    }
+
+    equals(other: NutritionalValues): boolean {
+        return (
+            this.energy === other.energy &&
+            this.protein === other.protein &&
+            this.carbohydrates === other.carbohydrates &&
+            this.carbohydratesSugar === other.carbohydratesSugar &&
+            this.fat === other.fat &&
+            this.fatSaturated === other.fatSaturated &&
+            this.fiber === other.fiber &&
+            this.sodium === other.sodium
+        );
+    }
+}
+
+export type BaseNutritionalValues = {
+    protein: number;
+    carbohydrates: number;
+    fat: number;
+}

package/src/components/Nutrition/models/Ingredient.ts

@@ -0,0 +1,84 @@
+import { IngredientImage } from "components/Nutrition/models/IngredientImage";
+import { IngredientImageThumbnails } from "components/Nutrition/models/IngredientImageThumbnails";
+import { ApiIngredientType } from "types";
+import { Adapter } from "utils/Adapter";
+
+export type IngredientConstructorParams = {
+    id: number;
+    uuid: string;
+    code: string;
+    name: string;
+    energy: number;
+    protein: number;
+    carbohydrates: number;
+    carbohydratesSugar: number | null;
+    fat: number;
+    fatSaturated: number | null;
+    fiber: number | null;
+    sodium: number | null;
+    image?: IngredientImage | null;
+    thumbnails?: IngredientImageThumbnails | null;
+};
+
+export class Ingredient {
+
+    public id: number;
+    public uuid: string;
+    public code: string;
+    public name: string;
+    public energy: number;
+    public protein: number;
+    public carbohydrates: number;
+    public carbohydratesSugar: number | null;
+    public fat: number;
+    public fatSaturated: number | null;
+    public fiber: number | null;
+    public sodium: number | null;
+    public image: IngredientImage | null;
+    public thumbnails: IngredientImageThumbnails | null;
+
+    constructor(params: IngredientConstructorParams) {
+        this.id = params.id;
+        this.uuid = params.uuid;
+        this.code = params.code;
+        this.name = params.name;
+        this.energy = params.energy;
+        this.protein = params.protein;
+        this.carbohydrates = params.carbohydrates;
+        this.carbohydratesSugar = params.carbohydratesSugar;
+        this.fat = params.fat;
+        this.fatSaturated = params.fatSaturated;
+        this.fiber = params.fiber;
+        this.sodium = params.sodium;
+        this.image = params.image ?? null;
+        this.thumbnails = params.thumbnails ?? null;
+    }
+
+    static fromJson(json: ApiIngredientType): Ingredient {
+        return adapter.fromJson(json);
+    }
+}
+
+
+class IngredientAdapter implements Adapter<Ingredient> {
+    fromJson(item: ApiIngredientType) {
+        return new Ingredient({
+            id: item.id,
+            uuid: item.uuid,
+            code: item.code,
+            name: item.name,
+            energy: item.energy,
+            protein: parseFloat(item.protein),
+            carbohydrates: parseFloat(item.carbohydrates),
+            carbohydratesSugar: item.carbohydrates_sugar === null ? null : parseFloat(item.carbohydrates_sugar),
+            fat: parseFloat(item.fat),
+            fatSaturated: item.fat_saturated === null ? null : parseFloat(item.fat_saturated),
+            fiber: item.fiber === null ? null : parseFloat(item.fiber),
+            sodium: item.sodium === null ? null : parseFloat(item.sodium),
+            image: item.image === null ? null : IngredientImage.fromJson(item.image),
+            thumbnails: item.thumbnails === null ? null : IngredientImageThumbnails.fromJson(item.thumbnails),
+        });
+    }
+}
+
+const adapter = new IngredientAdapter();

package/src/components/Nutrition/models/IngredientImage.ts

@@ -0,0 +1,57 @@
+import { ApiIngredientImageType } from "types";
+import { Adapter } from "utils/Adapter";
+
+
+export type IngredientImageConstructorParams = {
+    id: number;
+    uuid: string;
+    url: string;
+    created: Date;
+    lastUpdate: Date;
+    size: number;
+    width: number;
+    height: number;
+};
+
+export class IngredientImage {
+    public id: number;
+    public uuid: string;
+    public url: string;
+    public created: Date;
+    public lastUpdate: Date;
+    public size: number;
+    public width: number;
+    public height: number;
+
+    constructor(params: IngredientImageConstructorParams) {
+        this.id = params.id;
+        this.uuid = params.uuid;
+        this.url = params.url;
+        this.created = params.created;
+        this.lastUpdate = params.lastUpdate;
+        this.size = params.size;
+        this.width = params.width;
+        this.height = params.height;
+    }
+
+    static fromJson(json: ApiIngredientImageType): IngredientImage {
+        return adapter.fromJson(json);
+    }
+}
+
+class IngredientImageAdapter implements Adapter<IngredientImage> {
+    fromJson(item: ApiIngredientImageType) {
+        return new IngredientImage({
+            id: item.id,
+            uuid: item.uuid,
+            url: item.image,
+            created: new Date(item.created),
+            lastUpdate: new Date(item.last_update),
+            size: item.size,
+            width: item.width,
+            height: item.height,
+        });
+    }
+}
+
+const adapter = new IngredientImageAdapter();

package/src/components/Nutrition/models/IngredientImageThumbnails.ts

@@ -0,0 +1,59 @@
+import { Adapter } from "utils/Adapter";
+
+export type ApiIngredientThumbnailType = {
+    small: string,
+    small_cropped: string,
+    medium: string,
+    medium_cropped: string,
+    large: string,
+    large_cropped: string
+}
+
+export type IngredientImageThumbnailsConstructorParams = {
+    small: string;
+    smallCropped: string;
+    medium: string;
+    mediumCropped: string;
+    large: string;
+    largeCropped: string;
+};
+
+/**
+ * Note: all the strings are URLs to the images
+ */
+export class IngredientImageThumbnails {
+    public small: string;
+    public smallCropped: string;
+    public medium: string;
+    public mediumCropped: string;
+    public large: string;
+    public largeCropped: string;
+
+    constructor(params: IngredientImageThumbnailsConstructorParams) {
+        this.small = params.small;
+        this.smallCropped = params.smallCropped;
+        this.medium = params.medium;
+        this.mediumCropped = params.mediumCropped;
+        this.large = params.large;
+        this.largeCropped = params.largeCropped;
+    }
+
+    static fromJson(json: ApiIngredientThumbnailType): IngredientImageThumbnails {
+        return adapter.fromJson(json);
+    }
+}
+
+class IngredientImageThumbnailsAdapter implements Adapter<IngredientImageThumbnails> {
+    fromJson(item: ApiIngredientThumbnailType): IngredientImageThumbnails {
+        return new IngredientImageThumbnails({
+            small: item.small,
+            smallCropped: item.small_cropped,
+            medium: item.medium,
+            mediumCropped: item.medium_cropped,
+            large: item.large,
+            largeCropped: item.large_cropped,
+        });
+    }
+}
+
+const adapter = new IngredientImageThumbnailsAdapter();

package/src/components/Nutrition/models/diaryEntry.ts

@@ -0,0 +1,129 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import { NutritionWeightUnit } from "components/Nutrition/models/weightUnit";
+import { Adapter } from "utils/Adapter";
+
+export interface ApiNutritionDiaryType {
+    id: number,
+    plan: number,
+    meal: number | null,
+    ingredient: number,
+    weight_unit: number,
+    datetime: Date,
+    amount: string
+}
+
+export type DiaryEntryConstructorParams = {
+    id?: number;
+    planId: number;
+    mealId?: number | null;
+    ingredientId: number;
+    weightUnitId?: number | null;
+    amount: number;
+    datetime: Date;
+    ingredient?: Ingredient | null;
+    weightUnit?: NutritionWeightUnit | null;
+};
+
+export class DiaryEntry {
+
+    public id?: number | null;
+    public planId: number;
+    public mealId: number | null;
+    public amount: number;
+    public datetime: Date;
+
+    public ingredientId: number;
+    public ingredient: Ingredient | null = null;
+    public weightUnitId: number | null;
+    public weightUnit: NutritionWeightUnit | null = null;
+
+
+    constructor(params: DiaryEntryConstructorParams) {
+        this.id = params.id ?? null;
+        this.planId = params.planId;
+        this.mealId = params.mealId ?? null;
+        this.amount = params.amount;
+        this.datetime = params.datetime;
+
+        this.ingredientId = params.ingredientId;
+        if (params.ingredient) {
+            this.ingredient = params.ingredient;
+            this.ingredientId = params.ingredient.id;
+        }
+
+        this.weightUnitId = params.weightUnitId ?? null;
+        if (params.weightUnit) {
+            this.weightUnit = params.weightUnit;
+            this.weightUnitId = params.weightUnit.id;
+        }
+    }
+
+    get amountString(): string {
+        return this.amount.toFixed().toString() + (this.weightUnitId !== null ? ` ${this.weightUnit?.name}` : 'g');
+    }
+
+    get nutritionalValues() {
+        if (this.ingredient) {
+            return NutritionalValues.fromIngredient(this.ingredient, this.amount, this.weightUnit);
+        }
+        console.log('Diary entry has no ingredient, returning empty NutritionalValues object');
+        return new NutritionalValues();
+    }
+
+    static clone(other: DiaryEntry, overrides?: Partial<DiaryEntryConstructorParams>): DiaryEntry {
+        const ingredient = overrides?.ingredient ?? other.ingredient;
+        const weightUnit = overrides?.weightUnit ?? other.weightUnit;
+
+        return new DiaryEntry({
+            id: overrides?.id ?? (other.id ?? undefined),
+            planId: overrides?.planId ?? other.planId,
+            mealId: overrides?.mealId ?? other.mealId,
+            amount: overrides?.amount ?? other.amount,
+            datetime: overrides?.datetime ?? other.datetime,
+            ingredientId: ingredient ? ingredient.id : (overrides?.ingredientId ?? other.ingredientId),
+            ingredient,
+            weightUnitId: weightUnit ? weightUnit.id : (overrides?.weightUnitId ?? other.weightUnitId),
+            weightUnit,
+        });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any): DiaryEntry {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
+}
+
+class DiaryEntryAdapter implements Adapter<DiaryEntry> {
+    fromJson(item: ApiNutritionDiaryType) {
+        return new DiaryEntry({
+            id: item.id,
+            planId: item.plan,
+            mealId: item.meal,
+            ingredientId: item.ingredient,
+            weightUnitId: item.weight_unit,
+            amount: parseFloat(item.amount),
+            datetime: new Date(item.datetime),
+        });
+    }
+
+    toJson(item: DiaryEntry) {
+        return {
+            plan: item.planId,
+            meal: item.mealId,
+            ingredient: item.ingredientId,
+
+            // eslint-disable-next-line camelcase
+            weight_unit: item.weightUnitId,
+            amount: item.amount.toString(),
+            datetime: item.datetime.toISOString(),
+        };
+    }
+}
+
+
+const adapter = new DiaryEntryAdapter();

package/src/components/Nutrition/models/ingredient.test.ts

@@ -0,0 +1,37 @@
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import { INGREDIENT_API_RESPONSE } from "tests/api/ingredientInfoEndpoint";
+
+
+describe('Test the ingredient model', () => {
+
+    // Note that this also indirectly tests the submodels like IngredientImage
+    test('correctly creates an ingredient from the API response', () => {
+
+        // Act
+        const ingredient = Ingredient.fromJson(INGREDIENT_API_RESPONSE.results[0]);
+
+        // Assert
+        expect(ingredient.id).toBe(59197);
+        expect(ingredient.uuid).toBe("c85abb5d-2325-42fa-b497-a0a73f38bc1e");
+        expect(ingredient.name).toBe("10 Fischstäbchen");
+        expect(ingredient.code).toBe("4250241203517");
+        expect(ingredient.energy).toBe(195);
+        expect(ingredient.protein).toBe(13.0);
+        expect(ingredient.carbohydrates).toBe(18.0);
+        expect(ingredient.carbohydratesSugar).toBe(0.8);
+        expect(ingredient.fat).toBe(7.7);
+        expect(ingredient.fatSaturated).toBe(0.6);
+        expect(ingredient.fiber).toBe(0.8);
+        expect(ingredient.sodium).toBe(0.356);
+
+        expect(ingredient.image!.url).toBe("http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg");
+        expect(ingredient.image!.uuid).toBe("7f4120cd-a5c1-4a3a-b31b-974e62478222");
+        expect(ingredient.image!.size).toBe(304802);
+        expect(ingredient.image!.width).toBe(2050);
+        expect(ingredient.image!.height).toBe(993);
+
+        expect(ingredient.thumbnails!.small!).toBe("http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.200x200_q85.jpg");
+        expect(ingredient.thumbnails!.medium!).toBe("http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.400x400_q85.jpg");
+        expect(ingredient.thumbnails!.large!).toBe("http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.800x800_q90.jpg");
+    });
+});

package/src/components/Nutrition/models/meal.test.ts

@@ -0,0 +1,54 @@
+import { Meal } from "components/Nutrition/models/meal";
+import { TEST_MEAL_1 } from "tests/nutritionTestdata";
+
+
+describe('Test the meal model', () => {
+
+    test('correctly creates a meal from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            id: 111,
+            plan: 1234,
+            order: 22,
+            time: '22:31',
+            name: 'bla bla'
+        };
+
+        // Act
+        const meal = Meal.fromJson(apiResponse);
+
+        // Assert
+        expect(meal.id).toBe(111);
+        expect(meal.planId).toBe(1234);
+        expect(meal.order).toBe(22);
+        expect(meal.name).toBe('bla bla');
+        expect(meal.timeHHMMLocale).toBe('10:31 PM');
+    });
+
+    test('correctly creates a meal from the API response - no time', () => {
+        // Arrange
+        const apiResponse = {
+            id: 111,
+            plan: 1234,
+            order: 22,
+            time: null,
+            name: 'bla bla'
+        };
+
+        // Act
+        const meal = Meal.fromJson(apiResponse);
+
+        // Assert
+        expect(meal.timeHHMMLocale).toBe(null);
+    });
+
+    test('correctly creates a JSON response from a meal', () => {
+
+        // Act
+        const json = TEST_MEAL_1.toJson();
+
+        // Assert
+        expect(json.time).toBe('12:30');
+    });
+
+});