@hedia/recommendation-screen 2.1.42 → 2.1.43-alpha.0

package/dist/src/components/activity/ActivityIcon.js

@@ -1,8 +1,9 @@
 import { Activity } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import { Dimensions, Image, StyleSheet, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
+import TextRegular from "../text/TextRegular";
 const { Other } = Activity.Enums.ActivityEnum;
 /** Mapping from ActivityEnums to corresponding image resource. */
 export const ACTIVITY_ICONS = {
@@ -14,15 +15,12 @@ export const ACTIVITY_ICONS = {
 };
 /** Component used to displat the user's physical activity type icon */
 export default class ActivityIcon extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
-         */
-        this.getActivityIcon = () => {
-            return ACTIVITY_ICONS[this.props.activityType ?? Other];
-        };
-    }
+    /**
+     * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
+     */
+    getActivityIcon = () => {
+        return ACTIVITY_ICONS[this.props.activityType ?? Other];
+    };
     /**
      * Steps:
      * 1. Unpack activityType and activityTitle from props.
@@ -36,7 +34,9 @@ export default class ActivityIcon extends React.Component {
         const testID = `${Activity.Enums.ActivityEnum[activityType ?? Other]}-icon`.toLowerCase();
         return (<View style={activityIconStyles.container}>
 				<Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} testID={testID}/>
-				<Text style={activityIconStyles.activityTitle}>{activityTitle || i18n._(t `Untitled Activity`)}</Text>
+				<TextRegular style={activityIconStyles.activityTitle}>
+					{activityTitle || i18n._(t `Untitled Activity`)}
+				</TextRegular>
 			</View>);
     }
 }

package/dist/src/components/activity/ActivityIntensity.js

@@ -1,33 +1,31 @@
 import { Activity } from "@hedia/types";
 import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, StyleSheet, View } from "react-native";
 import { ActivityIntensityTranslations } from "../../utils/Translations";
 import { infoStyles } from "../InfoBars";
+import TextBold from "../text/TextBold";
 /** Component used to display the users's physical activity intensity on its corresponding background color */
 export default class ActivityIntensity extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Steps:
-         * 1. Set intensity to the activityIntensity prop.
-         * 2. Set the style variable to the style that correspond to the intensity.
-         * @returns JSX element that displays the intensity of the user’s activity along with the associated color coding
-         */
-        this.render = () => {
-            const intensity = this.props.activityIntensity;
-            const style = activityIntensityStyles[intensity];
-            return (<View style={[infoStyles.margin, activityIntensityStyles.row]}>
+    /**
+     * Steps:
+     * 1. Set intensity to the activityIntensity prop.
+     * 2. Set the style variable to the style that correspond to the intensity.
+     * @returns JSX element that displays the intensity of the user’s activity along with the associated color coding
+     */
+    render = () => {
+        const intensity = this.props.activityIntensity;
+        const style = activityIntensityStyles[intensity];
+        return (<View style={[infoStyles.margin, activityIntensityStyles.row]}>
 				<View style={activityIntensityStyles.intensityContainer}>
 					<View style={[activityIntensityStyles.intensityTextContainer, style]}>
-						<Text style={activityIntensityStyles.bold} testID={`intensity-${intensity}`}>
+						<TextBold style={activityIntensityStyles.text} testID={`intensity-${intensity}`}>
 							{ActivityIntensityTranslations[intensity]()}
-						</Text>
+						</TextBold>
 					</View>
 				</View>
 				<View style={activityIntensityStyles.intensityContainerOffset}/>
 			</View>);
-        };
-    }
+    };
 }
 const activityIntensityStyles = StyleSheet.create({
     row: {
@@ -54,8 +52,7 @@ const activityIntensityStyles = StyleSheet.create({
     intensityContainerOffset: {
         flex: 16,
     },
-    bold: {
-        fontWeight: `bold`,
+    text: {
         fontSize: Dimensions.get(`screen`).width / 30,
     },
 });

package/dist/src/components/mood/Emotion.js

@@ -1,48 +1,46 @@
 import { Logbook } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
+import TextBold from "../text/TextBold";
 import MoodIcon from "./MoodIcon";
 const MoodEnum = Logbook.Enums.MoodEnum;
 /** The Emotion component displays a horizontally arranged set of icons representing various moods and allows the user to select one. */
 export default class Emotion extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Handle what should happen when the user picks taps on one of the mood icons.
-         *
-         * Steps:
-         * 1. Call the moodSelected prop callback function with selected as argument if toggle is true and null as argument otherwise.
-         * @param selected Integer number that represents the icon that was tapped.
-         * @param toggle Boolean indicating whether the icon should be deselected.
-         */
-        this.handleIconPress = (selected, toggle) => {
-            this.props.moodSelected(toggle ? selected : null);
-        };
-        /**
-         * Compose a sequence of MoodIcons
-         *
-         * Steps:
-         * 1. Make a sequence of MoodEnum values from the properties of the MoodEnum object and save the sequence as a variable named values.
-         * 2. Map each of the elements of the values sequence to a MoodIcon.
-         * @returns JSX Element consisting of an array of MoodIcon components.
-         */
-        this.mappedMoods = () => {
-            const values = Object.values(MoodEnum).filter((val) => isNaN(Number(val)));
-            return values.map((key) => {
-                const moodValue = MoodEnum[key];
-                return (<MoodIcon onPress={(toggle) => this.handleIconPress(moodValue, toggle)} active={moodValue === this.props.currentMood} mood={moodValue} key={moodValue}/>);
-            });
-        };
-    }
+    /**
+     * Handle what should happen when the user picks taps on one of the mood icons.
+     *
+     * Steps:
+     * 1. Call the moodSelected prop callback function with selected as argument if toggle is true and null as argument otherwise.
+     * @param selected Integer number that represents the icon that was tapped.
+     * @param toggle Boolean indicating whether the icon should be deselected.
+     */
+    handleIconPress = (selected, toggle) => {
+        this.props.moodSelected(toggle ? selected : null);
+    };
+    /**
+     * Compose a sequence of MoodIcons
+     *
+     * Steps:
+     * 1. Make a sequence of MoodEnum values from the properties of the MoodEnum object and save the sequence as a variable named values.
+     * 2. Map each of the elements of the values sequence to a MoodIcon.
+     * @returns JSX Element consisting of an array of MoodIcon components.
+     */
+    mappedMoods = () => {
+        const values = Object.values(MoodEnum).filter((val) => isNaN(Number(val)));
+        return values.map((key) => {
+            const moodValue = MoodEnum[key];
+            return (<MoodIcon onPress={(toggle) => this.handleIconPress(moodValue, toggle)} active={moodValue === this.props.currentMood} mood={moodValue} key={moodValue}/>);
+        });
+    };
     /**
      * @returns JSX element to display the mood icons from mappedMoods() in a horizontal arrangement.
      */
     render() {
         return (<View style={emotionStyles.container}>
 				<View style={emotionStyles.feelingContainer}>
-					<Text style={emotionStyles.feelingText}>{i18n._(t `How are you feeling?`)}</Text>
+					<TextBold style={emotionStyles.feelingText}>{i18n._(t `How are you feeling?`)}</TextBold>
 				</View>
 				<View style={emotionStyles.moodIconContainer}>{this.mappedMoods()}</View>
 			</View>);
@@ -58,7 +56,6 @@ const emotionStyles = StyleSheet.create({
     feelingText: {
         textAlign: `center`,
         color: `white`,
-        fontWeight: `bold`,
         fontSize: Dimensions.get(`screen`).width / 26,
     },
     moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },

package/dist/src/components/mood/MoodIcon.js

@@ -20,32 +20,29 @@ export const MOODS_ACTIVE = {
 };
 /** Component to display a mood icon base on its props. */
 export default class MoodIcon extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Get the icon image resource that should be displayed for the mood icon.
-         *
-         * Steps:
-         * 1. If the active prop is true, return the value from the MOODS_ACTIVE constant that corresponds to the value of the mood prop.
-         * 2. (Only reached if the active prop is false) Return the value from the MOODS_INACTIVE constant that corresponds to the value of the mood prop.
-         * @returns Image resource that should be displayed for the mood icon.
-         */
-        this.getMoodIcon = () => {
-            if (this.props.active) {
-                return MOODS_ACTIVE[this.props.mood];
-            }
-            return MOODS_INACTIVE[this.props.mood];
-        };
-        /**
-         * Handle what happens when the mood icon is pressed.
-         *
-         * Steps:
-         * 1. Call the onPress prop callback function with the toggle argument set to the inverse value of the active prop.
-         */
-        this.handleOnPress = () => {
-            this.props.onPress(!this.props.active);
-        };
-    }
+    /**
+     * Get the icon image resource that should be displayed for the mood icon.
+     *
+     * Steps:
+     * 1. If the active prop is true, return the value from the MOODS_ACTIVE constant that corresponds to the value of the mood prop.
+     * 2. (Only reached if the active prop is false) Return the value from the MOODS_INACTIVE constant that corresponds to the value of the mood prop.
+     * @returns Image resource that should be displayed for the mood icon.
+     */
+    getMoodIcon = () => {
+        if (this.props.active) {
+            return MOODS_ACTIVE[this.props.mood];
+        }
+        return MOODS_INACTIVE[this.props.mood];
+    };
+    /**
+     * Handle what happens when the mood icon is pressed.
+     *
+     * Steps:
+     * 1. Call the onPress prop callback function with the toggle argument set to the inverse value of the active prop.
+     */
+    handleOnPress = () => {
+        this.props.onPress(!this.props.active);
+    };
     /** JSX element to display the mood icon retrieved using the getMoodIcon() method. */
     render() {
         const { mood, active } = this.props;

package/dist/src/components/text/TextBold.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextProps, TextStyle } from "react-native";
+interface IProps extends Omit<TextProps, `style`> {
+    style: TextStyle;
+}
+/** Component used to set the font family to Roboto-Bold */
+declare const TextBold: (props: IProps) => JSX.Element;
+export default TextBold;

package/dist/src/components/text/TextBold.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { StyleSheet, Text } from "react-native";
+/** Component used to set the font family to Roboto-Bold */
+const TextBold = (props) => (<Text {...props} style={[styles.defaultText, props.style]}>
+		{props.children}
+	</Text>);
+const styles = StyleSheet.create({
+    defaultText: {
+        fontFamily: `Roboto-Bold`,
+    },
+});
+export default TextBold;

package/dist/src/components/text/TextRegular.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextProps, TextStyle } from "react-native";
+interface IProps extends Omit<TextProps, `style`> {
+    style: TextStyle;
+}
+/** Component used to set the font family to Roboto-Regular */
+declare const TextRegular: (props: IProps) => JSX.Element;
+export default TextRegular;

package/dist/src/components/text/TextRegular.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { StyleSheet, Text } from "react-native";
+/** Component used to set the font family to Roboto-Regular */
+const TextRegular = (props) => (<Text {...props} style={[styles.defaultText, props.style]}>
+		{props.children}
+	</Text>);
+const styles = StyleSheet.create({
+    defaultText: {
+        fontFamily: `Roboto-Regular`,
+    },
+});
+export default TextRegular;

package/dist/src/utils/AttentionMessages.js

@@ -73,46 +73,46 @@ export function getLimitedValue(reduction) {
 }
 /** Provides methods for getting strings for composing attention messages and other important communications to the user. */
 export class Messages {
-}
-/** Inform the user that their BGL is very low and what they should do about it. */
-Messages.VeryLowBGL = () => i18n._(t `Your blood glucose level is very low. Take glucagon or eat carbohydrates if possible. Seek medical attention.`);
-/**  Inform the user that their BGL is very low. */
-Messages.LowBGL = () => i18n._(t `Your blood glucose level is very low.`);
-/** Inform the user that they will be reminded to remeasure their BGL soon. */
-Messages.Reminder15Minutes = () => i18n._(t `You will be reminded to measure your blood glucose level in 15 min.`);
-/** Encourages the user to postpone exercise. Specifically when their BGL is high. */
-Messages.PostponePhysicalActivity = () => i18n._(t `If it is possible, postpone your planned exercise.`);
-/** Encourages the user to postpone exercise. Specifically when their BGL is low. */
-Messages.PostponePhysicalActivityUnder5MMOL = () => i18n._(t `Consider not to initiate physical activity before your blood glucose level is within the recommended ranges prior to physical activity.`);
-/** Inform about high BGL. */
-Messages.HighBGL = () => i18n._(t `You have a high blood glucose level.`);
-/** Encourage user to measure ketones. */
-Messages.InsulinKetones = () => i18n._(t `You should take rapid-acting insulin and measure ketones.`);
-/** Inform the user that their insulin recommendation was limited for safety. */
-Messages.RecommendationWasLimited = () => i18n._(t `Your recommendation would have been higher than ${SAFETY_INSULIN_LIMIT} units of insulin, but it has been limited for safety reasons.
+    /** Inform the user that their BGL is very low and what they should do about it. */
+    static VeryLowBGL = () => i18n._(t `Your blood glucose level is very low. Take glucagon or eat carbohydrates if possible. Seek medical attention.`);
+    /**  Inform the user that their BGL is very low. */
+    static LowBGL = () => i18n._(t `Your blood glucose level is very low.`);
+    /** Inform the user that they will be reminded to remeasure their BGL soon. */
+    static Reminder15Minutes = () => i18n._(t `You will be reminded to measure your blood glucose level in 15 min.`);
+    /** Encourages the user to postpone exercise. Specifically when their BGL is high. */
+    static PostponePhysicalActivity = () => i18n._(t `If it is possible, postpone your planned exercise.`);
+    /** Encourages the user to postpone exercise. Specifically when their BGL is low. */
+    static PostponePhysicalActivityUnder5MMOL = () => i18n._(t `Consider not to initiate physical activity before your blood glucose level is within the recommended ranges prior to physical activity.`);
+    /** Inform about high BGL. */
+    static HighBGL = () => i18n._(t `You have a high blood glucose level.`);
+    /** Encourage user to measure ketones. */
+    static InsulinKetones = () => i18n._(t `You should take rapid-acting insulin and measure ketones.`);
+    /** Inform the user that their insulin recommendation was limited for safety. */
+    static RecommendationWasLimited = () => i18n._(t `Your recommendation would have been higher than ${SAFETY_INSULIN_LIMIT} units of insulin, but it has been limited for safety reasons.
 			Hedia never recommends more than ${SAFETY_INSULIN_LIMIT} units of insulin per calculation.`);
-/** Inform the user that their insulin recommendation was limited for safety in combination with an activity. */
-Messages.RecommendationWasLimitedActivity = (activityReduction) => i18n._(t `Your recommendation would have been higher than ${getLimitedValue(activityReduction)}
+    /** Inform the user that their insulin recommendation was limited for safety in combination with an activity. */
+    static RecommendationWasLimitedActivity = (activityReduction) => i18n._(t `Your recommendation would have been higher than ${getLimitedValue(activityReduction)}
 			units of insulin, but it has been limited for safety reasons.${`\n\n`}
 			Hedia never recommends more than ${SAFETY_INSULIN_LIMIT}
 			units of insulin per calculation, but because of the physical activity
 			you entered it has been further reduced by ${(activityReduction * 100).toFixed(0)}% to
 			${getLimitedValue(activityReduction)}.`);
-/** Inform the user that the insulin amount they entered is above HDA’s safety limit. */
-Messages.InsulinInputWasLimited = (activityReduction) => activityReduction
-    ? i18n._(t `Hedia doesn't support more than ${SAFETY_INSULIN_LIMIT} units of insulin per calculation, but because of the physical activity you entered it has been further reduced by
+    /** Inform the user that the insulin amount they entered is above HDA’s safety limit. */
+    static InsulinInputWasLimited = (activityReduction) => activityReduction
+        ? i18n._(t `Hedia doesn't support more than ${SAFETY_INSULIN_LIMIT} units of insulin per calculation, but because of the physical activity you entered it has been further reduced by
 			${(activityReduction * 100).toFixed(0)}% to ${getLimitedValue(activityReduction)} units for this calculation.`)
-    : i18n._(t `Hedia does not support more than ${SAFETY_INSULIN_LIMIT} units of insulin per calculation.`);
-/** Title for the modal that informs the user that their calculation is too old. */
-Messages.TimeoutPrompTitle = () => i18n._(t `More than 15 minutes has passed since this calculation was started.`);
-/**
- * Inform the user that their recommendation calculation is too old.
- * Variant to show when they didn’t see the actual insulin recommendation because they didn’t tell whether they injected insulin recently.
- */
-Messages.TimeoutRecommendationNotVisible = () => i18n._(t `Please go through the calculation steps with new measurements to ensure a safe recommendation.`);
-/** Inform the user that their recommendation calculation is too old.  */
-Messages.TimeoutRecommendationVisible = (date) => {
-    const day = moment(date).format(`LL`);
-    const time = moment(date).format(`HH:mm`);
-    return i18n._(t `Recommendation from ${day} at ${time} was not transfered to your logbook.${`\n`}Did you use the recommendation?`);
-};
+        : i18n._(t `Hedia does not support more than ${SAFETY_INSULIN_LIMIT} units of insulin per calculation.`);
+    /** Title for the modal that informs the user that their calculation is too old. */
+    static TimeoutPrompTitle = () => i18n._(t `More than 15 minutes has passed since this calculation was started.`);
+    /**
+     * Inform the user that their recommendation calculation is too old.
+     * Variant to show when they didn’t see the actual insulin recommendation because they didn’t tell whether they injected insulin recently.
+     */
+    static TimeoutRecommendationNotVisible = () => i18n._(t `Please go through the calculation steps with new measurements to ensure a safe recommendation.`);
+    /** Inform the user that their recommendation calculation is too old.  */
+    static TimeoutRecommendationVisible = (date) => {
+        const day = moment(date).format(`LL`);
+        const time = moment(date).format(`HH:mm`);
+        return i18n._(t `Recommendation from ${day} at ${time} was not transfered to your logbook.${`\n`}Did you use the recommendation?`);
+    };
+}

package/dist/src/utils/RecommendationError.js

@@ -11,6 +11,7 @@ const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
  * from getting a recommendation until the problem is solved.
  */
 export class RecommendationError extends Error {
+    type;
     constructor(message, type) {
         super(message);
         this.type = type;

package/dist/src/utils/Utils.js

@@ -109,6 +109,21 @@ export class Utils {
     static displayedBKLValue(value, unit) {
         return unit === BloodKetonesUnit.MMOL_L ? value.toFixed(1) : `${Utils.convertBKLToMGDL(value)}`;
     }
+    /**
+     * Format a measurement unit for displaying to the user. More concrete, it is used to display the litre symbol with uppercase "L".
+     *
+     * Steps:
+     * 1. Set unitWithoutLastLetter to be unit except for the last character.
+     * 2. Set lastLetterUppercase to be the last letter of unit converted to uppercase.
+     * 3. Return unitWithoutLastLetter concatenated with lastLetterUppercase.
+     * @param unit The measurement unit to format.
+     * @returns The measurement unit formatted for displaying to the user.
+     */
+    static formatUnit = (unit) => {
+        const unitWithoutLastLetter = unit.substring(0, unit.length - 1);
+        const lastLetterUppercase = unit.substring(unit.length - 1, unit.length).toUpperCase();
+        return `${unitWithoutLastLetter}${lastLetterUppercase}`;
+    };
     /**
      * Returns the key of key/value object when passing the key value as argument.
      *
@@ -124,18 +139,3 @@ export class Utils {
         return Object.keys(keys)[values.indexOf(value)];
     }
 }
-/**
- * Format a measurement unit for displaying to the user. More concrete, it is used to display the litre symbol with uppercase "L".
- *
- * Steps:
- * 1. Set unitWithoutLastLetter to be unit except for the last character.
- * 2. Set lastLetterUppercase to be the last letter of unit converted to uppercase.
- * 3. Return unitWithoutLastLetter concatenated with lastLetterUppercase.
- * @param unit The measurement unit to format.
- * @returns The measurement unit formatted for displaying to the user.
- */
-Utils.formatUnit = (unit) => {
-    const unitWithoutLastLetter = unit.substring(0, unit.length - 1);
-    const lastLetterUppercase = unit.substring(unit.length - 1, unit.length).toUpperCase();
-    return `${unitWithoutLastLetter}${lastLetterUppercase}`;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedia/recommendation-screen",
-  "version": "2.1.42",
+  "version": "2.1.43-alpha.0",
   "description": "Hedia Recommendation Screen for Bolus and Carbohydrates",
   "main": "dist/index.js",
   "files": [
@@ -54,8 +54,8 @@
     "@types/lingui__core": "2.7.0",
     "@types/lingui__macro": "2.7.3",
     "@types/lingui__react": "2.8.2",
-    "@types/react": "16.9.35",
-    "@types/react-native": "0.65.3",
+    "@types/react": "17.0.28",
+    "@types/react-native": "0.67.3",
     "@types/react-test-renderer": "17.0.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "26.0.1",
@@ -66,7 +66,7 @@
     "npm-package-json-lint": "5.4.1",
     "prettier": "2.5.1",
     "react": "17.0.2",
-    "react-native": "0.66.3",
+    "react-native": "0.67.3",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
     "react-native-linear-gradient": "2.5.6",
     "react-native-testing-library": "2.1.0",
@@ -76,7 +76,7 @@
     "tslint-config-prettier": "1.18.0",
     "typedoc": "0.21.10",
     "typedoc-plugin-no-inherit": "1.3.1",
-    "typescript": "4.1.5"
+    "typescript": "4.4.3"
   },
   "dependencies": {
     "@hedia/types": "2.2.1",