@hedia/recommendation-screen 2.0.2 → 2.1.0

package/src/components/RecommendationModal.tsx

@@ -1,224 +0,0 @@
-import { t } from "@lingui/macro";
-import * as React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import ReactNativeModal from "react-native-modal";
-import { i18n } from "../locale/i18nUtils";
-import { RecommendationModalTestIds } from "../types/enum";
-import { AttentionMessage } from "../utils/AttentionMessages";
-import { BORDER_COLOUR_TEAL } from "../utils/Constants";
-import LimitationMessage from "./LimitationMessage";
-
-interface IModalProps {
-	isVisible: boolean;
-	suggestedCarbohydrates: number | null;
-	attentionMessage: AttentionMessage | null;
-	limitationMessage: AttentionMessage | null;
-	onClickOkButton(): void;
-	onAcceptCarbohydrates(): void;
-	onDeclineCarbohydrates(): void;
-}
-interface IModalState {
-	firstPageVisible: boolean;
-}
-export default class RecommendationModal extends React.Component<IModalProps, IModalState> {
-	constructor(props: IModalProps) {
-		super(props);
-		this.state = {
-			firstPageVisible: !!this.props.limitationMessage,
-		};
-	}
-
-	public onPressNextButton = (): void => {
-		const { attentionMessage, suggestedCarbohydrates } = this.props;
-		const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
-		return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
-	};
-
-	public recommendationButtons = (): JSX.Element => {
-		return (
-			<View style={stylesModal.recommendationButtonsContainer}>
-				<TouchableOpacity
-					testID={RecommendationModalTestIds.AcceptCarbs}
-					accessibilityLabel="yesButtonModal"
-					style={stylesModal.affirmativeCarbsButton}
-					onPress={this.props.onAcceptCarbohydrates}
-				>
-					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t`OK`)}</Text>
-				</TouchableOpacity>
-				<TouchableOpacity
-					testID={RecommendationModalTestIds.DeclineCarbs}
-					accessibilityLabel="noButtonModal"
-					style={stylesModal.negativeCarbsButton}
-					onPress={this.props.onDeclineCarbohydrates}
-				>
-					<Text style={stylesModal.negativeCarbsText}>{i18n._(t`NO`)}</Text>
-				</TouchableOpacity>
-			</View>
-		);
-	};
-
-	public recommendCarbohydrates = (suggestedCarbohydrates: number): JSX.Element => {
-		const displayCarbs = Math.round(suggestedCarbohydrates);
-
-		return (
-			<React.Fragment>
-				<View style={stylesModal.innerView}>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>
-							{i18n._(t`We recommend eating an additional:`)}
-						</Text>
-					</View>
-					<View style={stylesModal.suggestedContainer}>
-						<Text style={stylesModal.textCenter}>
-							<Text
-								style={stylesModal.suggestedCarbs}
-								testID={RecommendationModalTestIds.SuggestedCarbs}
-							>{`${displayCarbs} `}</Text>
-							<Text style={stylesModal.carbohydrateText}>{i18n._(t`grams of carbohydrates`)}</Text>
-						</Text>
-					</View>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>{i18n._(t`Instead of taking insulin`)}</Text>
-					</View>
-				</View>
-				<View style={stylesModal.addToCalculationContainer}>
-					<Text style={stylesModal.addToCalculation}>
-						{i18n._(t`Would you like to add this to your current calculation?`)}
-					</Text>
-					{this.recommendationButtons()}
-				</View>
-			</React.Fragment>
-		);
-	};
-
-	public secondPage = (): JSX.Element => {
-		const { attentionMessage, suggestedCarbohydrates } = this.props;
-		const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
-
-		return (
-			<React.Fragment>
-				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t`Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
-					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates!) : null}
-				</View>
-				{willRecommendCarbs ? null : (
-					<View style={stylesModal.containerAcceptButton}>
-						<TouchableOpacity
-							testID={RecommendationModalTestIds.OkButton}
-							accessibilityLabel="okayButtonModal"
-							style={stylesModal.okButton}
-							onPress={this.props.onClickOkButton}
-						>
-							<Text style={stylesModal.buttonText}>{i18n._(t`OK`)}</Text>
-						</TouchableOpacity>
-					</View>
-				)}
-			</React.Fragment>
-		);
-	};
-
-	public firstPage = (): JSX.Element => {
-		return (
-			<LimitationMessage
-				limitationMessage={this.props.limitationMessage}
-				onPressNextButton={this.onPressNextButton}
-			/>
-		);
-	};
-
-	public render(): JSX.Element {
-		const { isVisible } = this.props;
-		const { firstPageVisible } = this.state;
-		return (
-			<ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle}>
-				{firstPageVisible ? this.firstPage() : this.secondPage()}
-			</ReactNativeModal>
-		);
-	}
-}
-
-const { height, width } = Dimensions.get(`screen`);
-const buttonHeight = height / 20;
-const buttonWidth = width / 2.5;
-const buttonFontSize = width / 22;
-const buttonBorderRadius = height / 30;
-const buttonBorderWidth = height / 500;
-const sugestionFontSize = width / 19;
-const recommendEatingFontSize = height / 45;
-const textFontSize = width / 20;
-const titleFontSize = width / 13;
-
-export const stylesModal = StyleSheet.create({
-	modalStyle: { margin: 0 },
-	container: {
-		flex: 4,
-		backgroundColor: `rgba(30, 35, 87, 0.9)`,
-		justifyContent: `center`,
-		paddingHorizontal: `4%`,
-	},
-	containerAcceptButton: {
-		flex: 1,
-		backgroundColor: `rgba(30, 35, 87, 0.9)`,
-		justifyContent: `flex-start`,
-	},
-	titleContainer: { marginBottom: `5%` },
-	recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
-	textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
-	textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-	buttonText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
-	addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
-	innerView: {
-		alignContent: `center`,
-		paddingVertical: `5%`,
-		paddingHorizontal: `3%`,
-		marginTop: `5%`,
-		borderRadius: height / 80,
-		borderWidth: height / 300,
-		borderColor: BORDER_COLOUR_TEAL,
-	},
-
-	suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
-	suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold` },
-	textCenter: { textAlign: `center` },
-	recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
-	carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
-	addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-	recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-	affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
-	negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
-	affirmativeCarbsButton: {
-		marginTop: `2%`,
-		borderRadius: buttonBorderRadius,
-		borderWidth: buttonBorderWidth,
-		borderColor: BORDER_COLOUR_TEAL,
-		width: buttonWidth,
-		height: buttonHeight,
-		alignSelf: `center`,
-		justifyContent: `center`,
-		marginRight: `2%`,
-	},
-	negativeCarbsButton: {
-		marginTop: `2%`,
-		borderRadius: buttonBorderRadius,
-		borderWidth: buttonBorderWidth,
-		borderColor: `white`,
-		width: buttonWidth,
-		height: buttonHeight,
-		alignSelf: `center`,
-		justifyContent: `center`,
-		marginLeft: `2%`,
-	},
-	okButton: {
-		marginTop: `6%`,
-		borderRadius: buttonBorderRadius,
-		borderWidth: buttonBorderWidth,
-		borderColor: BORDER_COLOUR_TEAL,
-		width: buttonWidth,
-		height: buttonHeight,
-		alignSelf: `center`,
-		justifyContent: `center`,
-	},
-});

package/src/components/RecommendedCarbs.tsx

@@ -1,259 +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 { RecommendedCarbsTestIds } 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";
-
-interface ICalculationRow {
-	label: string;
-	value: string;
-	units: string;
-}
-
-interface IProps {
-	// Values
-	recommendedCarbs?: string;
-	enteredCarbs: string;
-
-	// Callbacks
-	removeRecommendedCarbs(): void;
-	changedRecommendedCarbs(value: number): void;
-}
-
-interface IState {
-	partialInput?: string;
-}
-
-export default class RecommendedCarbs extends React.Component<IProps, IState> {
-	public state: IState = {
-		partialInput: undefined,
-	};
-
-	public callbackInput?: () => void;
-
-	public showTextInput = (): void => {
-		this.callbackInput?.();
-	};
-
-	public handlePartialInput = (partialInput: string): void => {
-		this.setState({
-			partialInput,
-		});
-	};
-
-	public handleChangedCarbs = (carbs: number): void => {
-		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);
-		}
-	};
-
-	public renderRecommendedCarbs = (): JSX.Element => {
-		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): (() => void) => (this.callbackInput = callback)}
-					partialInput={this.handlePartialInput}
-					onEnd={this.handleChangedCarbs}
-					startValue={this.props.recommendedCarbs}
-					maxLength={3}
-				/>
-			</React.Fragment>
-		);
-	};
-
-	public renderRow = (row: ICalculationRow, testID: RecommendedCarbsTestIds): JSX.Element => {
-		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>
-		);
-	};
-
-	public render(): JSX.Element {
-		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.tsx

@@ -1,175 +0,0 @@
-import { BolusCalculator, UserSettings } 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 { RecommendedInsulinTestIds } 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";
-
-interface IProps {
-	// Values
-	insulinRecommendation: number;
-	enteredInsulin: number | null;
-	activityReduction: number | null;
-	injectionMethod: UserSettings.Enums.InjectionMethod;
-
-	// Callbacks
-	updateRecommendedInsulin(value: number): void;
-}
-
-interface IState {
-	partialInput?: string;
-}
-
-const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
-
-export default class RecommendedInsulin extends React.Component<IProps, IState> {
-	public callbackInput?: () => void;
-
-	constructor(props: IProps) {
-		super(props);
-
-		this.state = {
-			partialInput: undefined,
-		};
-	}
-
-	public componentDidUpdate(prevProps: IProps): void {
-		const { enteredInsulin } = this.props;
-		if (prevProps.enteredInsulin !== enteredInsulin) {
-			this.setState({ partialInput: enteredInsulin?.toString() });
-		}
-	}
-
-	public handleOnPress = (): void => {
-		this.callbackInput?.();
-	};
-
-	public updatePartially = (insulin: string): string => {
-		const replacedZero =
-			insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
-		this.setState({
-			partialInput: replacedZero,
-		});
-		return replacedZero;
-	};
-
-	public handleUpdatedInsulin = (value: number): void => {
-		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);
-	};
-
-	public render = (): JSX.Element => {
-		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): (() => void) => (this.callbackInput = visible)}
-					startValue={`${shownInsulin}`}
-				/>
-			</React.Fragment>
-		);
-	};
-}
-
-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%`,
-	},
-});