@hedia/recommendation-screen 2.1.33 → 2.1.34-alpha.0

package/src/components/RecommendedCarbs.js

@@ -1,251 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Alert, Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
-import { CarbohydrateLimitError } from "../utils/RecommendationError";
-import Icon from "./Icon";
-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) {
-                    this.setState({ partialInput: this.props.recommendedCarbs });
-                    return Alert.alert(i18n._(t `Attention`), CarbohydrateLimitError().message, [
-                        {
-                            text: i18n._(t `OK`),
-                        },
-                    ]);
-                }
-                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));
-            return (<React.Fragment>
-				<LineSeparator color={BORDER_COLOUR_GREY}/>
-				<View style={calculationStyles.borderContainer}>
-					<View style={calculationStyles.recommendedContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
-							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
-						</TouchableOpacity>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
-					</View>
-				</View>
-				<View style={calculationStyles.borderContainer}>
-					<View style={calculationStyles.recommendedContainer}>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</Text>
-					</View>
-					<View style={calculationStyles.valueUnitContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
-							<View style={calculationStyles.valueContainer}>
-								<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
-									{shownCarbs}
-								</Text>
-							</View>
-							<View style={[calculationStyles.unitContainer]}>
-								<View style={calculationStyles.editIconContainer}>
-									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
-								</View>
-								<Text style={[calculationStyles.units, { color: BORDER_COLOUR_TEAL }]}>
-									{i18n._(t `grams`)}
-								</Text>
-							</View>
-						</TouchableOpacity>
-					</View>
-				</View>
-				<LineSeparator color={BORDER_COLOUR_TEAL}/>
-				{this.renderRow({
-                label: i18n._(t `Total`),
-                value: totalCarbs.toString(),
-                units: i18n._(t `grams`),
-            }, RecommendedCarbsTestIds.TotalCarbs)}
-				<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}>
-					<Text style={calculationStyles.rowLabel}>{row.label}</Text>
-				</View>
-				<View style={calculationStyles.valueUnitContainer}>
-					<View style={calculationStyles.valueContainer}>
-						<Text testID={testID} style={calculationStyles.value}>
-							{row.value}
-						</Text>
-					</View>
-					<View style={calculationStyles.unitContainer}>
-						<Text style={calculationStyles.units}>{row.units}</Text>
-					</View>
-				</View>
-			</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>
-				<View style={calculationStyles.foodTitleContainer}>
-					<Text style={infoStyles.label}>{i18n._(t `Food`)}</Text>
-					<Text style={calculationStyles.foodUnitsLabel}>{`(${i18n._(t `Carbohydrates`)})`}</Text>
-				</View>
-				{this.renderRow({
-            label: i18n._(t `Entered`),
-            value: this.props.enteredCarbs,
-            units: i18n._(t `grams`),
-        }, RecommendedCarbsTestIds.EnteredCarbs)}
-				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
-			</React.Fragment>);
-    }
-}
-const calculationStyles = StyleSheet.create({
-    borderContainer: {
-        ...infoStyles.borderContainer,
-        alignItems: `center`,
-    },
-    foodTitleContainer: {
-        flex: infoStyles.borderContainer.flex,
-        flexDirection: infoStyles.borderContainer.flexDirection,
-        paddingHorizontal: infoStyles.borderContainer.paddingHorizontal,
-        alignItems: `center`,
-        paddingVertical: `2%`,
-    },
-    foodUnitsLabel: {
-        ...infoStyles.units,
-        color: `rgba(160, 180, 240, 1)`,
-        paddingLeft: `1%`,
-    },
-    rowContainer: {
-        flex: 7,
-    },
-    rowLabel: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
-    },
-    enteredContainer: {
-        flex: 3,
-        alignItems: `flex-end`,
-    },
-    entered: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 23,
-    },
-    valueUnitContainer: {
-        ...infoStyles.valueUnitContainer,
-    },
-    valueContainer: {
-        ...infoStyles.valueContainer,
-    },
-    value: {
-        ...infoStyles.value,
-    },
-    unitContainer: {
-        ...infoStyles.unitContainer,
-    },
-    units: {
-        ...infoStyles.units,
-    },
-    editIconContainer: {
-        justifyContent: `flex-end`,
-        paddingRight: `20%`,
-        flexDirection: `row`,
-    },
-    editIcon: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 30,
-    },
-    recommendedContainer: {
-        flex: 7,
-        flexDirection: `row`,
-    },
-    recommendedLabel: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 25,
-        alignSelf: `center`,
-        fontWeight: `bold`,
-    },
-    removeRecommended: {
-        justifyContent: `center`,
-        marginRight: `1%`,
-        marginTop: `1%`,
-    },
-    removeRecommendedIcon: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 20,
-        paddingBottom: `0.5%`,
-    },
-});

package/src/components/RecommendedInsulin.d.ts

@@ -1,84 +0,0 @@
-import { UserSettings } from "@hedia/types";
-import React from "react";
-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;
-}
-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;
-    /**
-     * 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;
-}

package/src/components/RecommendedInsulin.js

@@ -1,170 +0,0 @@
-import { BolusCalculator } from "@hedia/types";
-import { t } from "@lingui/macro";
-import React from "react";
-import { Alert, Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import { Messages } from "../utils/AttentionMessages";
-import { Utils } from "../utils/Utils";
-import Icon from "./Icon";
-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() {
-        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({
-                partialInput: replacedZero,
-            });
-            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
-            const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
-            if (rounded > limited) {
-                this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
-                this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
-                return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
-                    {
-                        text: i18n._(t `OK`),
-                    },
-                ]);
-            }
-            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`;
-            return (<React.Fragment>
-				<TouchableOpacity accessibilityLabel="editRecommendedInsulin" testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
-					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
-						<View style={recommendedInsulinStyles.recommendedTextContainer}>
-							<Text style={recommendedInsulinStyles.recommendedText}>
-								{i18n._(t `Recommended amount of insulin`)}
-							</Text>
-						</View>
-						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
-							<View style={recommendedInsulinStyles.valueContainer}>
-								<Text style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
-									{shownInsulin}
-								</Text>
-								<Text style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</Text>
-							</View>
-							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
-						</View>
-					</LinearGradient>
-				</TouchableOpacity>
-				<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>);
-        };
-    }
-    /**
-     * 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) {
-            this.setState({ partialInput: enteredInsulin?.toString() });
-        }
-    }
-}
-const recommendedInsulinStyles = StyleSheet.create({
-    container: {
-        marginHorizontal: infoStyles.margin.margin,
-        marginTop: infoStyles.margin.margin,
-        borderRadius: 5,
-    },
-    recommendedTextContainer: {
-        flex: 1,
-        alignItems: `center`,
-        marginTop: `3%`,
-    },
-    recommendedText: {
-        paddingTop: `1%`,
-        ...infoStyles.label,
-    },
-    recommendedContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        marginLeft: `10%`,
-    },
-    valueContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        justifyContent: `center`,
-        minHeight: Dimensions.get(`screen`).width / 4,
-    },
-    value: {
-        color: `white`,
-        fontWeight: `bold`,
-        fontSize: Dimensions.get(`screen`).width / 5,
-    },
-    units: {
-        alignSelf: `flex-end`,
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 28,
-        paddingBottom: `6%`,
-    },
-    editIcon: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 28,
-        textAlignVertical: `center`,
-        paddingBottom: `10%`,
-        marginRight: `5%`,
-    },
-});

package/src/components/Remeasure.d.ts

@@ -1,49 +0,0 @@
-import React from "react";
-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;
-}

package/src/components/Remeasure.js

@@ -1,125 +0,0 @@
-import { t } from "@lingui/macro";
-import Slider from "@react-native-community/slider";
-import React from "react";
-import { Dimensions, Platform, StyleSheet, Text, View } from "react-native";
-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);
-        const marginHorizontal = Platform.OS === `ios` ? `3%` : `0%`;
-        const valueContainer = measure ? remeasureStyles.valueContainer : variantStyles.centeredValueContainer;
-        return (<View style={remeasureStyles.container}>
-				<View style={remeasureStyles.borderContainer}>
-					<View style={remeasureStyles.remeasureContainer}>
-						<Text style={remeasureStyles.remeasureLabel}>{i18n._(t `Remind me to remeasure in`)}</Text>
-					</View>
-					<View style={remeasureStyles.valueUnitContainer}>
-						<View style={valueContainer}>
-							<Text style={remeasureStyles.value}>{measure ? limited : i18n._(t `OFF`)}</Text>
-						</View>
-						{measure ? (<View style={remeasureStyles.unitContainer}>
-								<Text style={remeasureStyles.units}>{i18n._(t `hours`)}</Text>
-							</View>) : null}
-					</View>
-				</View>
-				<Slider ref={(slider) => {
-            if (slider !== null) {
-                this.slider = slider;
-            }
-        }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} accessibilityLabel="remeasureSlider" maximumTrackTintColor={BORDER_COLOUR_GREY} minimumTrackTintColor={BORDER_COLOUR_TEAL} thumbTintColor={BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
-			</View>);
-    }
-}
-const remeasureStyles = StyleSheet.create({
-    container: {
-        flexDirection: `column`,
-        padding: `3%`,
-    },
-    borderContainer: {
-        ...infoStyles.borderContainer,
-        alignItems: `center`,
-    },
-    remeasureContainer: {
-        flex: 7,
-    },
-    remeasureLabel: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
-    },
-    valueUnitContainer: {
-        ...infoStyles.valueUnitContainer,
-    },
-    valueContainer: {
-        ...infoStyles.valueContainer,
-    },
-    value: {
-        ...infoStyles.value,
-    },
-    unitContainer: {
-        ...infoStyles.unitContainer,
-    },
-    units: {
-        ...infoStyles.units,
-    },
-    sliderStyle: {
-        marginTop: `3%`,
-        marginBottom: `2%`,
-    },
-});
-const variantStyles = StyleSheet.create({
-    centeredValueContainer: {
-        ...remeasureStyles.valueContainer,
-        alignItems: `center`,
-    },
-});