@hedia/recommendation-screen 2.1.14 → 2.1.16

package/src/components/RecommendedCarbs.js

@@ -10,20 +10,51 @@ import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
 import LineSeparator from "./LineSeparator";
 const { RecommendedCarbsTestIds } = Testing.Id;
+/**
+ * The contents of the RecommendedCarbs component may vary quite a bit depending on data that was entered by the user
+ * and on the result of the recommendation calculation.
+ * For instance the part of the component that displays any recommendation of eating additional carbohydrates
+ * (composed by the renderRecommendedCarbs() method) will only be visible if it is actually recommended that the user eats additional carbohydrates.
+ */
 export default class RecommendedCarbs extends React.Component {
     constructor() {
         super(...arguments);
+        /** Initialise the state partialInput variable with undefined */
         this.state = {
             partialInput: undefined,
         };
+        /**
+         * Handle what should happen when the additional carbohydrates amount has been pressed.
+         *  Uses the InvisibleNumberInput child component to enable the user to input the amount of additional carbohydrates that they are taking.
+         */
         this.showTextInput = () => {
             this.callbackInput?.();
         };
+        /**
+         * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+         *
+         * Steps:
+         * 1. Save partialInput argument to the partialInput state variable.
+         * @param partialInput The contents of the input field.
+         */
         this.handlePartialInput = (partialInput) => {
             this.setState({
                 partialInput,
             });
         };
+        /**
+         * Handle what happens when input in the InvisibleNumberInput child component is completed.
+         *
+         * Steps:
+         * 1. If the carbs argument is greater than or equal to 0:
+         * 	- If the carbs argument is greater than 300:
+         * 		- Set the partialInput state variable to the value of the recommemdedCarbs prop.
+         * 		- Return - An alert message with the message of CarbohydrateLimitError() and with an OK button for closing it.
+         * 	- Use carbs as argument to call the changedRecommendedCarbs prop callback function.
+    
+         * @param carbs The numerical value of the input field at completion.
+         * @returns void
+         */
         this.handleChangedCarbs = (carbs) => {
             if (carbs >= 0) {
                 if (carbs > 300) {
@@ -37,6 +68,19 @@ export default class RecommendedCarbs extends React.Component {
                 this.props.changedRecommendedCarbs(carbs);
             }
         };
+        /**
+         * Render the section of the component that displays the extra carbs that the user should eat
+         * and allows the user to change the contents to indicate how many extra carbs they are actually going to eat.
+         *
+         * Steps:
+         * 1. Set a variable named shownCarbs to the partialInput state if it is set, or to the recommendedCarbs prop rounded to the nearest integer otherwise.
+         * 2. Set a variable named totalCarbs to the sum of the enteredCarbs prop and shownCarbs rounded to the nearest integer.
+         * 3. Compose and return a JSX element consisting of the following sub-components
+         * 	- A cancel button to remove recommended carbs from the calculation - When tapped, call the removeRecommendedCarbs prop callback function.
+         * 	- The text from the shownCarbs variable from step 1 - When tapped, call the showTextInput() method.
+         * 	- Use renderRow() to display the value of totalCarbs.
+         * 	- InvisibleNumberInput for showing the keyboard to enable the user to enter a number.
+         */
         this.renderRecommendedCarbs = () => {
             const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
             const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
@@ -81,6 +125,12 @@ export default class RecommendedCarbs extends React.Component {
 				<InvisibleNumberInput testID={RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
 			</React.Fragment>);
         };
+        /**
+         * Display a row of information for the user. Specifically used to display the amount of carbohydrates that the user has entered.
+         * @param row The values to display
+         * @param testID Id used for component testing
+         * @returns A JSX element to display 3 strings on the screen: label, value, and a unit.
+         */
         this.renderRow = (row, testID) => {
             return (<View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
 				<View style={calculationStyles.rowContainer}>
@@ -99,6 +149,12 @@ export default class RecommendedCarbs extends React.Component {
 			</View>);
         };
     }
+    /**
+     * Steps:
+     * 1. Convert the recommendedCarbs prop to a number and save that as a variable named carbs.
+     * 2. Use renderRow() to display the user’s entered amount of carbohydrates
+     * 3. If carbs is not a NaN-value and it is positive, call renderRecommendedCarbs() to display the carbohydrate recommendation.
+     */
     render() {
         const carbs = Number(this.props.recommendedCarbs);
         return (<React.Fragment>

package/src/components/RecommendedInsulin.d.ts

@@ -1,22 +1,84 @@
 import { UserSettings } from "@hedia/types";
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** The amount of insulin in units to display to the user as a recommendation. */
     insulinRecommendation: number;
+    /** The amount of insulin introduced by the user. */
     enteredInsulin: number | null;
+    /**
+     * The factor by which the recommendation was multiplied to get the reduced insulin amount.
+     * Used by the RecommendedInsulin component to check that the user’s input doesn’t exceed the maximum allowed.
+     * If no activity has been entered, this prop should be null.
+     * */
     activityReduction: number | null;
+    /** Used to determine how the insulin amount should be rounded. */
     injectionMethod: UserSettings.Enums.InjectionMethod;
+    /**
+     * Callback function taking a number as argument and giving no return value.
+     * To be called with the new value every time the content of the insulin input field gets changed.
+     */
     updateRecommendedInsulin(value: number): void;
 }
-interface IState {
+export interface IState {
+    /** The entered amount of insulin as a string. */
     partialInput?: string;
 }
+/** Input field for displaying the entered amount of insulin (which defaults to HDA’s recommendation) and allowing the user to edit it. */
 export default class RecommendedInsulin extends React.Component<IProps, IState> {
+    /** Initialise the state partialInput variable with undefined */
+    state: IState;
+    /**
+     *  Function taking no arguments and returning no value.
+     *  Will be bound to the function that activates input for InvisibleNumberInput when that component has been mounted.
+     */
     callbackInput?: () => void;
-    constructor(props: IProps);
+    /**
+     * Called immediately after updating occurs. Not called for the initial render.
+     * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+     *
+     * Steps:
+     * 1. If the value of the enteredInsulin prop was changed, set the partialInput state variable to the new value.
+     * @param prevProps The previous component props
+     */
     componentDidUpdate(prevProps: IProps): void;
+    /**
+     * Handle what should happen when the InsulinRecommendation component has been pressed.
+     * Uses the InvisibleNumberInput child component to enable the user to input the amount of insulin that hey are taking.
+     *
+     * Steps:
+     * 1. Call the callbackInput() member method.
+     */
     handleOnPress: () => void;
+    /**
+     * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+     *
+     * Steps:
+     * 1. Assign a new local variable, replacedZero, with the value of the insulin argument string
+     * except for the first character if insulin is longer than 1 character and starts with a '0' but doesn’t start with ‘0.’.
+     * Otherwise set it to insulin. This would be better handled by converting it to a number: replacedZero = Number(insulin);
+     * 2. Save replacedZero to the partialInput state variable.
+     * 3. Return replacedZero
+     * @param insulin  The contents of the input field.
+     * @returns The partially cleaned input.
+     */
     updatePartially: (insulin: string) => string;
+    /**
+     * Handle what happens when input in the InvisibleNumberInput child component is completed.
+     *
+     * Steps:
+     * 1. Get the rounded insulin amount using the value argument and the injectionMethod prop as arguments for the Utils.roundValue() function.
+     * 2. Get the adjusted safety insulin limit (due to activity) by multiplying the activity reduction factor (which is 1 minus the activityReduction prop) with the SAFETY_INSULIN_LIMIT constant.
+     * 3. If the rounded value exceeds the adjusted safety threshold:
+     * 	- Call the updatePartially() method with the adjusted safety threshold to set the insulin amount to the capped value.
+     * 	- Return an Alert with a message about the insulin limit.
+     * 4. Call the updatePartially() method with the rounded value to set the entered insulin value.
+     * 5. Call the updateRecommendedInsulin callback function prop with rounded as the argument to report back the updated insulin amount to the parent RecommendationScreen component.
+     * @param value The numerical value of the input field at completion.
+     */
     handleUpdatedInsulin: (value: number) => void;
+    /**
+     * Render a JSX element to display the insulin input field with the current insulin amount value
+     * and using an InvisibleNumberInput component to enable input when the insulin amount is tapped.
+     */
     render: () => JSX.Element;
 }
-export {};

package/src/components/RecommendedInsulin.js

@@ -12,12 +12,36 @@ import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
 const { RecommendedInsulinTestIds } = Testing.Id;
 const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
+/** Input field for displaying the entered amount of insulin (which defaults to HDA’s recommendation) and allowing the user to edit it. */
 export default class RecommendedInsulin extends React.Component {
-    constructor(props) {
-        super(props);
+    constructor() {
+        super(...arguments);
+        /** Initialise the state partialInput variable with undefined */
+        this.state = {
+            partialInput: undefined,
+        };
+        /**
+         * Handle what should happen when the InsulinRecommendation component has been pressed.
+         * Uses the InvisibleNumberInput child component to enable the user to input the amount of insulin that hey are taking.
+         *
+         * Steps:
+         * 1. Call the callbackInput() member method.
+         */
         this.handleOnPress = () => {
             this.callbackInput?.();
         };
+        /**
+         * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+         *
+         * Steps:
+         * 1. Assign a new local variable, replacedZero, with the value of the insulin argument string
+         * except for the first character if insulin is longer than 1 character and starts with a '0' but doesn’t start with ‘0.’.
+         * Otherwise set it to insulin. This would be better handled by converting it to a number: replacedZero = Number(insulin);
+         * 2. Save replacedZero to the partialInput state variable.
+         * 3. Return replacedZero
+         * @param insulin  The contents of the input field.
+         * @returns The partially cleaned input.
+         */
         this.updatePartially = (insulin) => {
             const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
             this.setState({
@@ -25,6 +49,19 @@ export default class RecommendedInsulin extends React.Component {
             });
             return replacedZero;
         };
+        /**
+         * Handle what happens when input in the InvisibleNumberInput child component is completed.
+         *
+         * Steps:
+         * 1. Get the rounded insulin amount using the value argument and the injectionMethod prop as arguments for the Utils.roundValue() function.
+         * 2. Get the adjusted safety insulin limit (due to activity) by multiplying the activity reduction factor (which is 1 minus the activityReduction prop) with the SAFETY_INSULIN_LIMIT constant.
+         * 3. If the rounded value exceeds the adjusted safety threshold:
+         * 	- Call the updatePartially() method with the adjusted safety threshold to set the insulin amount to the capped value.
+         * 	- Return an Alert with a message about the insulin limit.
+         * 4. Call the updatePartially() method with the rounded value to set the entered insulin value.
+         * 5. Call the updateRecommendedInsulin callback function prop with rounded as the argument to report back the updated insulin amount to the parent RecommendationScreen component.
+         * @param value The numerical value of the input field at completion.
+         */
         this.handleUpdatedInsulin = (value) => {
             const rounded = Utils.roundValue(value, this.props.injectionMethod);
             // https://hedia.atlassian.net/browse/HDA-795
@@ -41,6 +78,10 @@ export default class RecommendedInsulin extends React.Component {
             this.updatePartially(`${rounded}`);
             this.props.updateRecommendedInsulin(rounded);
         };
+        /**
+         * Render a JSX element to display the insulin input field with the current insulin amount value
+         * and using an InvisibleNumberInput component to enable input when the insulin amount is tapped.
+         */
         this.render = () => {
             const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
             const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
@@ -66,10 +107,15 @@ export default class RecommendedInsulin extends React.Component {
 				<InvisibleNumberInput testID={RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
 			</React.Fragment>);
         };
-        this.state = {
-            partialInput: undefined,
-        };
     }
+    /**
+     * Called immediately after updating occurs. Not called for the initial render.
+     * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+     *
+     * Steps:
+     * 1. If the value of the enteredInsulin prop was changed, set the partialInput state variable to the new value.
+     * @param prevProps The previous component props
+     */
     componentDidUpdate(prevProps) {
         const { enteredInsulin } = this.props;
         if (prevProps.enteredInsulin !== enteredInsulin) {

package/src/components/Remeasure.d.ts

@@ -1,13 +1,49 @@
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** The initial time (in hours) after which the user should be reminded to measure their BGL. */
     remeasureTime: number;
+    /**
+     * Callback function taking a single number (the new remeasurement time) as argument
+     *  Function to be called every time the slider component is changed to a new value.
+     */
     onSliderChange(value: number): void;
 }
+/**
+ * The Remeasure component has a slider child component that the user can drag to change
+ * when they will get a reminder notification about measuring their BGL again.
+ */
 export default class Remeasure extends React.Component<IProps> {
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
     private slider?;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
     componentDidMount(): void;
+    /**
+     * Steps:
+     * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
+     * 2. Call the onSliderChange prop callback function with the limited value as argument.
+     * @param remeasureTime The value of the remeasurement slider.
+     */
     handleSliderChange: (remeasureTime: number) => void;
+    /**
+     * Steps:
+     * 1.Use Math.min() and Math.max() to clamp remeasureTime in the range 0 to 6 and return the result.
+     * @param remeasureTime The value of the remeasurement slider.
+     * @returns The limited remeasurement time in hours
+     */
     limitTime: (remeasureTime: number) => number;
+    /**
+     * Compose a JSX element for displaying the currently selected remeasurement time along
+     * with a horizontal slider for changing it in increments of 0.5 hours in the range 0 to 6.
+     */
     render(): JSX.Element;
 }
-export {};

package/src/components/Remeasure.js

@@ -6,22 +6,53 @@ import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
+/**
+ * The Remeasure component has a slider child component that the user can drag to change
+ * when they will get a reminder notification about measuring their BGL again.
+ */
 export default class Remeasure extends React.Component {
     constructor() {
         super(...arguments);
+        /**
+         * Steps:
+         * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
+         * 2. Call the onSliderChange prop callback function with the limited value as argument.
+         * @param remeasureTime The value of the remeasurement slider.
+         */
         this.handleSliderChange = (remeasureTime) => {
             const limited = this.limitTime(remeasureTime);
             this.props.onSliderChange(limited);
         };
+        /**
+         * Steps:
+         * 1.Use Math.min() and Math.max() to clamp remeasureTime in the range 0 to 6 and return the result.
+         * @param remeasureTime The value of the remeasurement slider.
+         * @returns The limited remeasurement time in hours
+         */
         this.limitTime = (remeasureTime) => {
             return Math.min(Math.max(0, remeasureTime), 6);
         };
     }
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
     componentDidMount() {
         this.slider?.setNativeProps({
             value: this.props.remeasureTime,
         });
     }
+    /**
+     * Compose a JSX element for displaying the currently selected remeasurement time along
+     * with a horizontal slider for changing it in increments of 0.5 hours in the range 0 to 6.
+     */
     render() {
         const measure = this.props.remeasureTime > 0;
         const limited = this.limitTime(this.props.remeasureTime);

package/src/components/TransferToLogbook.d.ts

@@ -1,14 +1,34 @@
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** Whether or not the transfer button shall be visible on the screen. */
     visible: boolean;
+    /** To be called when the button is pressed. */
     transfer(): void;
 }
-interface IState {
+export interface IState {
+    /**  Keeps track of whether the button was already pressed and thus should be displayed in the inactive visually distinct pressed state. */
     pressed: boolean;
 }
+/**
+ * Render a button for transferring the recommendation to a logbook entry.
+ * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
+ */
 export default class TransferToLogbook extends React.Component<IProps, IState> {
+    /** Initialise the state pressed variable with false */
     state: IState;
+    /**
+     * Handle what happens when the button is pressed.
+     *
+     * Steps:
+     * 1. Toggle the pressed state to the opposite of its current value.
+     * 2. Call the transfer prop callback function.
+     */
     handlePress: () => void;
+    /**
+     * Steps:
+     * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
+     * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
+     * @returns JSX element for displaying the transfer button
+     */
     render(): JSX.Element;
 }
-export {};

package/src/components/TransferToLogbook.js

@@ -4,12 +4,24 @@ import { t } from "@lingui/macro";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import Icon from "./Icon";
+/**
+ * Render a button for transferring the recommendation to a logbook entry.
+ * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
+ */
 export default class TransferToLogbook extends React.Component {
     constructor() {
         super(...arguments);
+        /** Initialise the state pressed variable with false */
         this.state = {
             pressed: false,
         };
+        /**
+         * Handle what happens when the button is pressed.
+         *
+         * Steps:
+         * 1. Toggle the pressed state to the opposite of its current value.
+         * 2. Call the transfer prop callback function.
+         */
         this.handlePress = () => {
             this.setState({
                 pressed: !this.state.pressed,
@@ -17,6 +29,12 @@ export default class TransferToLogbook extends React.Component {
             this.props.transfer();
         };
     }
+    /**
+     * Steps:
+     * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
+     * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
+     * @returns JSX element for displaying the transfer button
+     */
     render() {
         if (!this.props.visible) {
             return <View style={addToLogbookStyles.marginContainer}/>;

package/src/components/TwoOptionModal.d.ts

@@ -1,19 +1,30 @@
 import * as React from "react";
 export interface ITwoOptionModalProps {
+    /** The title of the modal. */
     title: string;
+    /** The message to show in the modal. */
     message: string;
+    /** The label of the first option. */
     textFirstOption: string;
+    /**  The label of the second option. */
     textSecondOption: string;
+    /** Whether or not the modal shall have a cancel button in the corner to close the modal. */
     isCancelable?: boolean;
+    /**  If true the buttons will be displayed side-by-side. If false the buttons will be displayed on top of each other. */
     rowAsButtonLayout: boolean;
+    /** To be called if the user taps the first option button. */
     firstOption(): void;
+    /** To be called if the user taps the second option button. */
     secondOption(): void;
+    /** To be called if the user taps the optionally shown close button. */
     onClose?(): void;
 }
+/** Display a modal with two buttons for the user to choose between. */
 export default class TwoOptionModal extends React.Component<ITwoOptionModalProps> {
-    constructor(props: ITwoOptionModalProps);
+    /** Compose a JSX element for displaying the modal. */
     render(): JSX.Element;
 }
+/** @internal */
 export declare const modalStyle: {
     container: {
         justifyContent: "center";

package/src/components/TwoOptionModal.js

@@ -5,10 +5,9 @@ import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from
 import Icon from "./Icon";
 import { stylesModal } from "./RecommendationModal";
 const { TwoOptionModalTestIds } = Testing.Id;
+/** Display a modal with two buttons for the user to choose between. */
 export default class TwoOptionModal extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+    /** Compose a JSX element for displaying the modal. */
     render() {
         const { rowAsButtonLayout, isCancelable } = this.props;
         return (<View style={modalStyle.container}>
@@ -41,6 +40,7 @@ export default class TwoOptionModal extends React.Component {
     }
 }
 const { height, width } = Dimensions.get(`screen`);
+/** @internal */
 export const modalStyle = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,

package/src/components/activity/Activity.d.ts

@@ -1,10 +1,26 @@
+import { Activity as ActivityTypes, BolusCalculator } from "@hedia/types";
 import React from "react";
-import { IActivityDisplayProps, IActivityParams, ReductionType } from "../../types/types";
-interface IProps extends IActivityDisplayProps {
-    activity: IActivityParams;
-    activityReduction: ReductionType;
+import { IActivityDisplayProps } from "../../types/types";
+export interface IProps extends IActivityDisplayProps {
+    /** Details about the activity that affect the calculation */
+    activity: BolusCalculator.Types.IActivityParams;
+    /** The fraction (in the interval [0; 1]) by which the insulin recommendation is being reduced due to physical activity */
+    activityReduction: ActivityTypes.Types.ReductionType;
 }
+/**
+ * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
+ */
 export default class Activity extends React.Component<IProps> {
+    /**
+     * Steps:
+     * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
+     * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
+     * 3. Generate and return the JSX element to display the following on the screen:
+     * 	- Print the activity duration.
+     * 	- Display the ActivityIcon that corresponds to the type of activity.
+     * 	- Display the ActivityIntensity for the activity.
+     * 	- Print the reductionPercentage.
+     * @returns JSX Element containing all the user's physical activity details
+     */
     render(): JSX.Element;
 }
-export {};

package/src/components/activity/Activity.js

@@ -6,7 +6,21 @@ import { Testing } from "../../types/enum";
 import { infoStyles } from "../InfoBars";
 import ActivityIcon from "./ActivityIcon";
 import ActivityIntensity from "./ActivityIntensity";
+/**
+ * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
+ */
 export default class Activity extends React.Component {
+    /**
+     * Steps:
+     * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
+     * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
+     * 3. Generate and return the JSX element to display the following on the screen:
+     * 	- Print the activity duration.
+     * 	- Display the ActivityIcon that corresponds to the type of activity.
+     * 	- Display the ActivityIntensity for the activity.
+     * 	- Print the reductionPercentage.
+     * @returns JSX Element containing all the user's physical activity details
+     */
     render() {
         const { activity, activityType, activityReduction, activityTitle } = this.props;
         const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);

package/src/components/activity/ActivityIcon.d.ts

@@ -1,7 +1,22 @@
+import { Activity } from "@hedia/types";
 import React from "react";
 import { ImageURISource } from "react-native";
 import { IActivityDisplayProps } from "../../types/types";
+/** Mapping from ActivityEnums to corresponding image resource. */
+export declare const ACTIVITY_ICONS: Record<Activity.Enums.ActivityEnum, ImageURISource>;
+/** Component used to displat the user's physical activity type icon */
 export default class ActivityIcon extends React.Component<IActivityDisplayProps> {
+    /**
+     * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
+     */
     getActivityIcon: () => ImageURISource;
+    /**
+     * Steps:
+     * 1. Unpack activityType and activityTitle from props.
+     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
+     * @returns A JSX element including the following:
+     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
+     * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
+     */
     render(): JSX.Element | null;
 }

package/src/components/activity/ActivityIcon.js

@@ -4,20 +4,33 @@ import React from "react";
 import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
 const { Other } = Activity.Enums.ActivityEnum;
-const ACTIVITY_ICONS = {
+/** Mapping from ActivityEnums to corresponding image resource. */
+export const ACTIVITY_ICONS = {
     Run: require(`../../assets/activity/Runner.png`),
     Walk: require(`../../assets/activity/Walk.png`),
     Cycling: require(`../../assets/activity/Cyclist.png`),
     Swim: require(`../../assets/activity/Swimmer.png`),
     Other: require(`../../assets/activity/Other.png`),
 };
+/** 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];
         };
     }
+    /**
+     * Steps:
+     * 1. Unpack activityType and activityTitle from props.
+     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
+     * @returns A JSX element including the following:
+     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
+     * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
+     */
     render() {
         const { activityType, activityTitle } = this.props;
         const label = `${Activity.Enums.ActivityEnum[activityType ?? Other]}_activity`;

package/src/components/activity/ActivityIntensity.d.ts

@@ -1,9 +1,16 @@
+import { BolusCalculator } from "@hedia/types";
 import React from "react";
-import { IActivityParams } from "../../types/types";
-interface IProps {
-    activityIntensity: IActivityParams["activityIntensity"];
+export interface IProps {
+    /** - Indicates the intensity of the activity. */
+    activityIntensity: BolusCalculator.Types.IActivityParams["activityIntensity"];
 }
+/** Component used to display the users's physical activity intensity on its corresponding background color */
 export default class ActivityIntensity extends React.Component<IProps> {
+    /**
+     * 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: () => JSX.Element;
 }
-export {};