@hedia/recommendation-screen 2.0.2 → 2.1.0

package/src/RecommendationScreen.tsx

@@ -1,461 +0,0 @@
-import React from "react";
-import { AppState, AppStateStatus, ScrollView, StyleSheet, View, YellowBox } from "react-native";
-
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
-
-import Header from "./components/Header";
-import InfoBars, { infoStyles } from "./components/InfoBars";
-import RecentInsulin from "./components/RecentInsulin";
-import RecommendedCarbs from "./components/RecommendedCarbs";
-import RecommendedInsulin from "./components/RecommendedInsulin";
-import Remeasure from "./components/Remeasure";
-
-import * as Calculator from "@hedia/recommendation-calculator";
-import { BloodGlucoseUnit, BloodKetonesUnit, Languages, Logbook, Milliseconds, UserSettings } from "@hedia/types";
-import { I18nProvider } from "@lingui/react";
-import Emotion from "./components/mood/Emotion";
-import TransferToLogbook from "./components/TransferToLogbook";
-import { RecommendationError } from "./utils/RecommendationError";
-
-import { t } from "@lingui/macro";
-
-import Activity from "./components/activity/Activity";
-import LimitationMessage from "./components/LimitationMessage";
-import RecommendationModal from "./components/RecommendationModal";
-import TwoOptionModal, { modalStyle } from "./components/TwoOptionModal";
-import { changeLanguage, i18n } from "./locale/i18nUtils";
-import { IActivityDisplayProps, IRecommendationParams, logbookEntry } from "./types/types";
-import { AttentionMessage, Messages } from "./utils/AttentionMessages";
-import { getAttentionMessage, getBGLevel, getLimitationMessage, getReminder } from "./utils/RecommendationUtils";
-import { Utils } from "./utils/Utils";
-import { validateParams } from "./utils/Validations";
-
-// Ignoring long timer warnings
-// https://github.com/facebook/react-native/issues/12981#issuecomment-652745831
-YellowBox.ignoreWarnings([`Setting a timer`]);
-
-interface IResult {
-	suggested: number;
-	entered: number | null;
-}
-
-export interface IRecommendationProps {
-	// Values
-	bloodGlucoseUnit: BloodGlucoseUnit;
-	language: Languages;
-	userReminder: number;
-	calculatorParams: IRecommendationParams;
-	injectionMethod: UserSettings.Enums.InjectionMethod;
-	currentBKL: number;
-	bloodKetoneUnit: BloodKetonesUnit;
-	latestLogbookFrom6Hours: logbookEntry | null;
-	activityDisplayProps: IActivityDisplayProps | null;
-
-	// Callbacks
-	carbRecommendationAnswer(carbRecommendationAnswer: boolean): void;
-	closeCalculationCallback(): void;
-	exitCallback(): void;
-	onRecentInsulinYes(): void;
-	transferToLogbook(
-		carbs: IResult,
-		insulin: IResult,
-		reminder: number,
-		recommendationDate: Date,
-		mood: Logbook.Enums.MoodEnum | null,
-	): void;
-	onError(error: RecommendationError): void;
-	showBolusBar(toggle: boolean): void;
-	restartCalculation(): void;
-}
-
-interface IState {
-	remeasureTime: number;
-	isRecommendationDisplayed: boolean;
-	insulinRecommendation: number;
-	activityReduction: number | null;
-	wasLimited: boolean;
-	carbRecommendation: number | null;
-	activeInsulin: number;
-	selectedMood: Logbook.Enums.MoodEnum | null;
-	enteredCarbs: number | null;
-	enteredInsulin: number | null;
-	recommendationModal: boolean;
-	showExitModal: boolean;
-	showLimitationMessage: boolean;
-	showTimeoutModal: boolean;
-}
-
-export default class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
-	private readonly timer!: ReturnType<typeof setTimeout>;
-	private readonly suggestedCarbs!: number;
-	private readonly hasError: boolean = false;
-	private readonly recommendationDate!: Date;
-	private scrollView?: ScrollView;
-
-	constructor(props: IRecommendationProps) {
-		super(props);
-		try {
-			validateParams(props);
-			this.recommendationDate = new Date(global.Date.now());
-
-			changeLanguage(props.language);
-			const { recentBoluses } = props.calculatorParams;
-			const {
-				bolus,
-				carbRecommendation,
-				activityReduction,
-				wasLimited,
-				activeInsulin,
-			} = Calculator.calculateRecommendation(props.calculatorParams);
-
-			this.suggestedCarbs = carbRecommendation;
-
-			this.state = {
-				remeasureTime: this.getBGLevelRemeasurementReminder(),
-				isRecommendationDisplayed: recentBoluses?.length !== 0,
-				insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
-				wasLimited,
-				activityReduction,
-				carbRecommendation,
-				activeInsulin,
-				enteredCarbs: null,
-				enteredInsulin: null,
-				selectedMood: null,
-				recommendationModal:
-					wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
-				showExitModal: false,
-				showLimitationMessage: false,
-				showTimeoutModal: false,
-			};
-
-			this.timer = setTimeout(this.showTimeoutModal, Milliseconds.Minute * 15);
-		} catch (error) {
-			this.hasError = true;
-			props.onError(error);
-		}
-	}
-
-	public componentDidMount(): void {
-		AppState.addEventListener(`change`, this.handleAppStateChange);
-	}
-
-	public componentWillUnmount(): void {
-		if (this.timer !== undefined) {
-			clearTimeout(this.timer);
-		}
-		AppState.removeEventListener(`change`, this.handleAppStateChange);
-	}
-
-	public handleAppStateChange = (nextAppState: AppStateStatus): void => {
-		const time = this.recommendationDate.getTime();
-		const isOlderThan15Minutes = global.Date.now() - time > Milliseconds.Minute * 15;
-		if (nextAppState === `active` && isOlderThan15Minutes) {
-			this.showTimeoutModal();
-		}
-	};
-
-	public showTimeoutModal = (): void => {
-		this.setState({ showTimeoutModal: true }, (): void => this.props.showBolusBar(!this.state.showTimeoutModal));
-	};
-
-	public recalculateInsulin = (calculatorParams: IRecommendationParams): void => {
-		const { bolus, wasLimited, activityReduction } = Calculator.calculateRecommendation(calculatorParams);
-		this.setState({
-			insulinRecommendation: Utils.roundValue(bolus, this.props.injectionMethod),
-			enteredInsulin: null,
-			wasLimited,
-			activityReduction,
-			showLimitationMessage: wasLimited,
-		});
-	};
-
-	public onExit = (): void => {
-		if (this.state.isRecommendationDisplayed) {
-			this.setState({ showExitModal: true }, (): void => this.props.showBolusBar(!this.state.showExitModal));
-		} else {
-			this.props.exitCallback();
-		}
-	};
-
-	public hideAttentionModal = (): void => {
-		this.setState({ recommendationModal: false });
-	};
-
-	public hideLimitationMessage = (): void => {
-		this.setState({ showLimitationMessage: false });
-	};
-
-	public hideExitModal = (): void => {
-		this.setState({ showExitModal: false }, (): void => this.props.showBolusBar(!this.state.showExitModal));
-	};
-
-	public hideTimeoutModal = (): void => {
-		this.setState({ showTimeoutModal: false }, (): void => this.props.showBolusBar(!this.state.showTimeoutModal));
-	};
-
-	public updateRemeasureTime = (remeasureTime: number): void => {
-		this.setState({ remeasureTime });
-	};
-
-	public handleNoRecentInsulin = (): void => {
-		this.setState({ isRecommendationDisplayed: true }, (): void => {
-			setTimeout((): void => {
-				this.scrollView?.scrollToEnd({ animated: true });
-			}, 0);
-		});
-	};
-
-	public updateCarbRecommendation = (enteredCarbs: number): void => {
-		const providedCarbs = this.props.calculatorParams.carbohydrates;
-		this.setState({ enteredCarbs }, (): void => {
-			this.recalculateInsulin({ ...this.props.calculatorParams, carbohydrates: providedCarbs + enteredCarbs });
-		});
-	};
-
-	public removeCarbRecommendation = (): void => {
-		this.setState({ enteredCarbs: null, carbRecommendation: null }, (): void =>
-			this.recalculateInsulin({ ...this.props.calculatorParams }),
-		);
-	};
-
-	public declineCarbRecommendation = (): void => {
-		this.hideAttentionModal();
-		this.removeCarbRecommendation();
-		this.props.carbRecommendationAnswer(false);
-	};
-
-	public acceptCarbRecommendation = (): void => {
-		this.hideAttentionModal();
-		this.props.carbRecommendationAnswer(true);
-	};
-
-	public closeCalculation = (): void => {
-		this.state.showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
-		this.props.closeCalculationCallback();
-	};
-
-	public restartCalculation = (): void => {
-		this.hideTimeoutModal();
-		this.props.restartCalculation();
-	};
-
-	public handleMoodSelected = (selectedMood: IState["selectedMood"]): void => {
-		this.setState({ selectedMood });
-	};
-
-	public updateInsulinRecommendation = (enteredInsulin: number): void => {
-		this.setState({ enteredInsulin });
-	};
-
-	public handleTransfer = (): void => {
-		const {
-			enteredCarbs,
-			enteredInsulin,
-			insulinRecommendation,
-			remeasureTime,
-			showExitModal,
-			selectedMood,
-		} = this.state;
-		const carbs: IResult = { suggested: this.suggestedCarbs, entered: enteredCarbs };
-		const insulin: IResult = { suggested: insulinRecommendation, entered: enteredInsulin };
-
-		showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
-		this.props.transferToLogbook(carbs, insulin, remeasureTime, this.recommendationDate, selectedMood);
-	};
-
-	public getBGLevelAttentionMessage = (): AttentionMessage | null => {
-		const { calculatorParams, latestLogbookFrom6Hours } = this.props;
-		const { currentBGL, activity } = calculatorParams;
-		const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
-
-		return getAttentionMessage(bgLevel, activity);
-	};
-
-	public getBGLevelRemeasurementReminder = (): number => {
-		const { calculatorParams, userReminder, latestLogbookFrom6Hours } = this.props;
-		const { currentBGL, activity, carbohydrates } = calculatorParams;
-		const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
-
-		return getReminder(bgLevel, carbohydrates, userReminder, activity);
-	};
-
-	public getLimitationAttentionMessage = (): AttentionMessage | null => {
-		const { wasLimited, activityReduction } = this.state;
-
-		return getLimitationMessage(wasLimited, activityReduction);
-	};
-
-	public render(): JSX.Element {
-		if (this.hasError) {
-			return <View style={containerStyles.container} />;
-		}
-
-		const {
-			activeInsulin,
-			recommendationModal,
-			carbRecommendation: carbRecommendationProp,
-			enteredCarbs,
-			enteredInsulin,
-			insulinRecommendation,
-			activityReduction,
-			isRecommendationDisplayed,
-		} = this.state;
-
-		const carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
-		const recommendedCarbs = enteredCarbs ?? carbRecommendation;
-
-		const { calculatorParams, bloodGlucoseUnit, currentBKL, bloodKetoneUnit } = this.props;
-		const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
-		const displayedBGL = Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit);
-		const displayedBKL = Utils.displayedBKLValue(currentBKL, bloodKetoneUnit);
-
-		return (
-			<I18nProvider language={this.props.language} i18n={i18n}>
-				<ScrollView
-					style={containerStyles.container}
-					ref={(view): void => {
-						if (view !== null) {
-							this.scrollView = view;
-						}
-					}}
-				>
-					<Header exitCallback={this.onExit} />
-					<InfoBars
-						label={i18n._(t`Active Insulin`)}
-						value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null}
-						unit={i18n._(t`units`)}
-						showNullAsDash={false}
-					/>
-					<InfoBars
-						label={i18n._(t`Blood Glucose Level`)}
-						value={currentBGL ? `${displayedBGL}` : null}
-						unit={this.props.bloodGlucoseUnit}
-						showNullAsDash={true}
-					/>
-					<InfoBars
-						label={i18n._(t`Blood Ketone Level`)}
-						value={currentBKL !== null ? `${displayedBKL}` : null}
-						unit={this.props.bloodKetoneUnit}
-						showNullAsDash={true}
-					/>
-					<View style={containerStyles.calcContainer}>
-						<View style={containerStyles.calcMargin}>
-							<View
-								style={[
-									containerStyles.calcBorder,
-									{
-										borderColor: recommendedCarbs ? BORDER_COLOUR_TEAL : BORDER_COLOUR_GREY,
-									},
-								]}
-							>
-								<RecommendedCarbs
-									enteredCarbs={`${providedCarbs}`}
-									changedRecommendedCarbs={this.updateCarbRecommendation}
-									recommendedCarbs={`${recommendedCarbs}`}
-									removeRecommendedCarbs={this.removeCarbRecommendation}
-								/>
-							</View>
-						</View>
-					</View>
-					{this.props.calculatorParams.activity && this.props.activityDisplayProps ? (
-						<Activity
-							activity={this.props.calculatorParams.activity}
-							activityType={this.props.activityDisplayProps.activityType}
-							activityTitle={this.props.activityDisplayProps.activityTitle}
-							activityReduction={this.state.activityReduction}
-						/>
-					) : null}
-					<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime} />
-					{!this.state.isRecommendationDisplayed ? (
-						<RecentInsulin
-							onRecentInsulinYes={this.props.onRecentInsulinYes}
-							onRecentInsulinNo={this.handleNoRecentInsulin}
-						/>
-					) : (
-						<RecommendedInsulin
-							injectionMethod={this.props.injectionMethod}
-							insulinRecommendation={insulinRecommendation}
-							enteredInsulin={enteredInsulin}
-							activityReduction={activityReduction}
-							updateRecommendedInsulin={this.updateInsulinRecommendation}
-						/>
-					)}
-					<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood} />
-					<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer} />
-					<RecommendationModal
-						isVisible={recommendationModal}
-						suggestedCarbohydrates={carbRecommendationProp}
-						attentionMessage={this.getBGLevelAttentionMessage()}
-						limitationMessage={this.getLimitationAttentionMessage()}
-						onClickOkButton={this.hideAttentionModal}
-						onAcceptCarbohydrates={this.acceptCarbRecommendation}
-						onDeclineCarbohydrates={this.declineCarbRecommendation}
-					/>
-				</ScrollView>
-				{this.state.showExitModal ? (
-					<TwoOptionModal
-						title={i18n._(t`Save data before closing?`)}
-						message={i18n._(t`Your saved data will be used for future calculations.`)}
-						textFirstOption={i18n._(t`Save to logbook`)}
-						textSecondOption={i18n._(t`Close calculation`)}
-						isCancelable={true}
-						rowAsButtonLayout={true}
-						firstOption={this.handleTransfer}
-						secondOption={this.closeCalculation}
-						onClose={this.hideExitModal}
-					/>
-				) : null}
-				{this.state.showLimitationMessage ? (
-					<View style={modalStyle.container}>
-						<LimitationMessage
-							limitationMessage={this.getLimitationAttentionMessage()}
-							onPressNextButton={this.hideLimitationMessage}
-						/>
-					</View>
-				) : null}
-				{this.state.showTimeoutModal ? (
-					this.state.isRecommendationDisplayed ? (
-						<TwoOptionModal
-							title={Messages.TimeoutPrompTitle()}
-							message={Messages.TimeoutRecommendationVisible(this.recommendationDate)}
-							textFirstOption={i18n._(t`Yes, save to logbook`)}
-							textSecondOption={i18n._(t`No, return to dashboard`)}
-							rowAsButtonLayout={false}
-							firstOption={this.handleTransfer}
-							secondOption={this.closeCalculation}
-						/>
-					) : (
-						<TwoOptionModal
-							title={Messages.TimeoutPrompTitle()}
-							message={Messages.TimeoutRecommendationNotVisible()}
-							textFirstOption={i18n._(t`Start new calculation`)}
-							textSecondOption={i18n._(t`Return to dashboard`)}
-							rowAsButtonLayout={false}
-							firstOption={this.restartCalculation}
-							secondOption={this.closeCalculation}
-						/>
-					)
-				) : null}
-			</I18nProvider>
-		);
-	}
-}
-
-const containerStyles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: BACKGROUND_COLOUR_PURPLE,
-	},
-	calcContainer: {
-		flex: 1,
-	},
-	calcMargin: {
-		flex: 1,
-		marginBottom: 0,
-		margin: `3%`,
-	},
-	calcBorder: {
-		...infoStyles.border,
-		borderColor: BORDER_COLOUR_TEAL,
-	},
-});