@hedia/recommendation-screen 2.0.1 → 2.1.0

package/src/__tests__/utils.tsx

@@ -1,116 +0,0 @@
-import { Activity, BloodGlucoseUnit, BloodKetonesUnit, Languages, UserSettings } from "@hedia/types";
-import { I18nProvider } from "@lingui/react";
-import React from "react";
-import { RenderAPI } from "react-native-testing-library";
-import { ReactTestInstance } from "react-test-renderer";
-import { i18n } from "../locale/i18nUtils";
-import { IRecommendationProps } from "../RecommendationScreen";
-import { TestIdEnum } from "../types/enum";
-import { IActivityParams, IRecommendationParams } from "../types/types";
-
-const ActivityEnum = Activity.Enums.ActivityEnum;
-const ActivityIntensity = Activity.Enums.ActivityIntensity;
-const InjectionMethod = UserSettings.Enums.InjectionMethod;
-
-const { Run } = ActivityEnum;
-const { moderate } = ActivityIntensity;
-const { PenHalf } = InjectionMethod;
-
-export function getRecommendationProps(partials?: Partial<IRecommendationProps>): IRecommendationProps {
-	return {
-		currentBKL: partials?.currentBKL ?? 0.1,
-		bloodKetoneUnit: partials?.bloodKetoneUnit ?? BloodKetonesUnit.MMOL_L,
-		bloodGlucoseUnit: partials?.bloodGlucoseUnit ?? BloodGlucoseUnit.MMOL_L,
-		language: partials?.language ?? Languages.en,
-		userReminder: partials?.userReminder ?? 1.5,
-		latestLogbookFrom6Hours: partials?.latestLogbookFrom6Hours ?? null,
-		calculatorParams: partials?.calculatorParams ?? generateDefaultCalculatorParams(),
-		injectionMethod: partials?.injectionMethod ?? PenHalf,
-		transferToLogbook: partials?.transferToLogbook ?? jest.fn(),
-		onError: partials?.onError ?? jest.fn(),
-		onRecentInsulinYes: partials?.onRecentInsulinYes ?? jest.fn(),
-		exitCallback: partials?.exitCallback ?? jest.fn(),
-		closeCalculationCallback: partials?.closeCalculationCallback ?? jest.fn(),
-		carbRecommendationAnswer: partials?.carbRecommendationAnswer ?? jest.fn(),
-		showBolusBar: partials?.showBolusBar ?? jest.fn(),
-		restartCalculation: partials?.restartCalculation ?? jest.fn(),
-		activityDisplayProps: partials?.activityDisplayProps ?? {
-			activityTitle: `Activity Title Test`,
-			activityType: Run,
-		},
-	};
-}
-
-export function generateDefaultCalculatorParams(): IRecommendationParams {
-	return {
-		carbohydrateRatio: 10,
-		carbohydrates: 4,
-		currentBGL: 5,
-		insulinSensitivity: 4,
-		targetBGL: 6,
-		recentBoluses: [
-			{
-				insulinDose: 2,
-				secondsPassed: 1000,
-			},
-			{
-				insulinDose: 1.7,
-				secondsPassed: 10000,
-			},
-		],
-		activity: null,
-	};
-}
-
-export function generateActivityProps(): IActivityParams {
-	return {
-		activityDate: new Date(),
-		activityDuration: 30,
-		activityIntensity: moderate,
-		activitySettings: {
-			hard: { fromFortysix: null, fromThirty: 0.25, fromZero: 1 },
-			light: { fromFortysix: 0.5, fromThirty: 0.75, fromZero: 1 },
-			moderate: { fromFortysix: 0.25, fromThirty: 0.5, fromZero: 1 },
-			post: { fromFortysix: 0.5, fromThirty: 0.5, fromZero: 1 },
-			target: 9,
-		},
-	};
-}
-
-export function expectTextExists(component: RenderAPI, text: string | RegExp): void {
-	const element = component.queryByText(text);
-	/*
-    if (!element) {
-		throw Error(`element with text: ${text} does not exist`);
-    }
-    */
-	return expect(element).not.toBeNull();
-}
-
-export function queryTextFromComponent(wrapper: RenderAPI, testID: TestIdEnum): string {
-	const component = wrapper.getByTestId(testID);
-	const values = component.children;
-	return values.join(``);
-}
-
-export function expectTextNotExists(component: RenderAPI, text: string | RegExp): void {
-	const element = component.queryByText(text);
-	/*
-    if (element) {
-		throw Error(`element with text: ${text} should not exist`);
-    }
-    */
-	return expect(element).toBeNull();
-}
-
-export function i18nProvided(element: JSX.Element): JSX.Element {
-	return (
-		<I18nProvider language={i18n.language} i18n={i18n}>
-			{element}
-		</I18nProvider>
-	);
-}
-
-export function getIcon(wrapper: RenderAPI, name: string, active: boolean): ReactTestInstance | null {
-	return wrapper.queryByA11yLabel(`${name}_${active}`);
-}

package/src/components/Header.tsx

@@ -1,89 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { HeaderTestIds } from "../types/enum";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
-import Icon from "./Icon";
-
-interface IProps {
-	exitCallback(): void;
-}
-
-export default class Header extends React.Component<IProps> {
-	public render(): JSX.Element {
-		return (
-			<React.Fragment>
-				<SafeAreaView style={headerStyles.backgroundColour} />
-				<View style={headerStyles.headerContainer}>
-					<View style={headerStyles.margin}>
-						<View style={headerStyles.exitButtonContainer}>
-							<View style={headerStyles.exitButton}>
-								<TouchableOpacity
-									testID={HeaderTestIds.ExitCalculation}
-									accessibilityLabel="exitButton"
-									style={headerStyles.exitButton}
-									onPress={this.props.exitCallback}
-								>
-									<Icon
-										iconIdentifier={`Ionicons/ios-close-circle-outline`}
-										style={headerStyles.iconStyle}
-									/>
-								</TouchableOpacity>
-								<View style={headerStyles.headerFiller} />
-							</View>
-						</View>
-						<View style={headerStyles.headerTextContainer}>
-							<Text style={headerStyles.headerText} testID="headerText">
-								{i18n._(t`INSULIN${`\n`}RECOMMENDATION`)}
-							</Text>
-						</View>
-						<View style={headerStyles.headerFiller} />
-					</View>
-				</View>
-			</React.Fragment>
-		);
-	}
-}
-
-export const headerStyles = StyleSheet.create({
-	backgroundColour: {
-		backgroundColor: BACKGROUND_COLOUR_PURPLE,
-	},
-	margin: {
-		margin: `1%`,
-		marginBottom: `3%`,
-		flexDirection: `row`,
-		flex: 1,
-	},
-	headerContainer: {
-		flexDirection: `row`,
-		flex: 1,
-	},
-	exitButtonContainer: {
-		alignItems: `center`,
-		flex: 1,
-	},
-	exitButton: {
-		flex: 1,
-	},
-	iconStyle: {
-		fontSize: Dimensions.get(`screen`).width / 12,
-		color: BORDER_COLOUR_GREY,
-	},
-	headerTextContainer: {
-		flex: 6,
-		justifyContent: `center`,
-		alignItems: `center`,
-		marginTop: `5%`,
-	},
-	headerText: {
-		fontSize: Dimensions.get(`screen`).width / 18,
-		fontWeight: `bold`,
-		textAlign: `center`,
-		color: `white`,
-	},
-	headerFiller: {
-		flex: 1,
-	},
-});

package/src/components/Icon.js

@@ -1,41 +0,0 @@
-import React from "react";
-
-const IconSets = {
-	AntDesign: require(`react-native-vector-icons/AntDesign`),
-	Feather: require(`react-native-vector-icons/Feather`),
-	EvilIcons: require(`react-native-vector-icons/EvilIcons`),
-	Ionicons: require(`react-native-vector-icons/Ionicons`),
-	FontAwesome: require(`react-native-vector-icons/FontAwesome`),
-	Entypo: require(`react-native-vector-icons/Entypo`),
-};
-
-export default class Icon extends React.Component {
-	setNativeProps(nativeProps) {
-		this._root.setNativeProps(nativeProps);
-	}
-
-	render() {
-		const iconParts = this.props.iconIdentifier.split(`/`);
-		let iconPackageName = iconParts[0];
-		let iconName = iconParts[1];
-		if (!IconSets[iconPackageName]) {
-			iconPackageName = `FontAwesome`;
-			iconName = `question`;
-		}
-		const IconClass = IconSets[iconPackageName].default;
-		const clonedProps = { ...this.props, name: iconName };
-		delete clonedProps.iconIdentifier;
-
-		// Support FontAwesome5's solid/light/brand
-		if (clonedProps.iconStyle) {
-			clonedProps[clonedProps.iconStyle] = true;
-		}
-		delete clonedProps.iconStyle;
-
-		return <IconClass {...clonedProps} ref={(component) => (this._root = component)} />;
-	}
-}
-
-Icon.defaultProps = {
-	iconIdentifier: `FontAwesome/question`,
-};

package/src/components/InfoBars.tsx

@@ -1,108 +0,0 @@
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { BORDER_COLOUR_GREY } from "../utils/Constants";
-import { Utils } from "../utils/Utils";
-
-export interface IProps {
-	label: string;
-	value: string | null;
-	unit: string | BloodGlucoseUnit | BloodKetonesUnit;
-	showNullAsDash: boolean;
-}
-
-export default class InfoBars extends React.Component<IProps> {
-	public displayValue = (): string => {
-		const { showNullAsDash, unit, value } = this.props;
-		const noDecimal = unit === BloodGlucoseUnit.MG_DL || unit === BloodKetonesUnit.MG_DL;
-		const nullPlaceholder = noDecimal ? `-` : `-.-`;
-		return value ?? (showNullAsDash ? nullPlaceholder : `0`);
-	};
-
-	public displayUnit = (): string => {
-		const { unit } = this.props;
-		return unit === i18n._(t`units`) ? unit : Utils.formatUnit(unit as BloodGlucoseUnit | BloodKetonesUnit);
-	};
-
-	public render(): JSX.Element {
-		return (
-			<View style={infoStyles.container}>
-				<View style={infoStyles.margin}>
-					<View style={infoStyles.border}>
-						<View style={infoStyles.borderContainer}>
-							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{this.props.label}</Text>
-							</View>
-							<View style={infoStyles.valueUnitContainer}>
-								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value}>{this.displayValue()}</Text>
-								</View>
-								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units}>{this.displayUnit()}</Text>
-								</View>
-							</View>
-						</View>
-					</View>
-				</View>
-			</View>
-		);
-	}
-}
-
-export const infoStyles = StyleSheet.create({
-	container: { flex: 1 },
-	margin: {
-		flex: 1,
-		margin: `3%`,
-		marginBottom: 0,
-	},
-	border: {
-		borderWidth: 2,
-		borderColor: BORDER_COLOUR_GREY,
-		borderRadius: 5,
-		paddingVertical: `1%`,
-	},
-	borderContainer: {
-		flex: 1,
-		flexDirection: `row`,
-		justifyContent: `space-between`,
-		paddingHorizontal: `3%`,
-	},
-	labelContainer: {
-		flex: 7,
-		justifyContent: `center`,
-	},
-	label: {
-		color: `white`,
-		fontSize: Dimensions.get(`screen`).width / 22,
-		fontWeight: `bold`,
-	},
-	valueUnitContainer: {
-		flex: 6.5,
-		justifyContent: `flex-end`,
-		flexDirection: `row`,
-	},
-	valueContainer: {
-		flex: 5,
-		justifyContent: `flex-end`,
-	},
-	value: {
-		color: `white`,
-		fontSize: Dimensions.get(`screen`).width / 15,
-		fontWeight: `bold`,
-		textAlign: `right`,
-	},
-	unitContainer: {
-		flex: 3,
-		justifyContent: `flex-end`,
-		paddingBottom: `3%`,
-	},
-	units: {
-		color: `white`,
-		fontSize: Dimensions.get(`screen`).width / 30,
-		textAlign: `left`,
-		paddingLeft: `5%`,
-	},
-});

package/src/components/InvisibleNumberInput.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { StyleSheet, TextInput } from "react-native";
-
-interface IProps {
-	startValue?: string;
-	decimalPlaces: number;
-	cleanPartialInput: boolean;
-	negativeAllowed: boolean;
-	maxLength?: number;
-	testID: string;
-	visible(toggle: () => void): void;
-	onEnd?(value: number): void;
-	partialInput?(value: string): void;
-}
-
-interface IState {
-	value: string;
-}
-
-export default class InvisibleNumberInput extends React.Component<IProps, IState> {
-	public textInput?: TextInput;
-
-	public state: IState = {
-		value: `0`,
-	};
-
-	public componentDidMount(): void {
-		this.setState({
-			value: this.props.startValue ?? `0`,
-		});
-		this.props.visible((): void => {
-			this.setState({
-				value: this.props.startValue ?? `0`,
-			});
-			return this.textInput?.focus();
-		});
-	}
-
-	public cleanInput = (text: string): string => {
-		const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
-		const round = (value: string): string => {
-			const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
-			const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
-			return rounded.toFixed(this.props.decimalPlaces);
-		};
-		if (!isNaN(Number(replaced))) {
-			return round(replaced);
-		}
-		return `0`;
-	};
-
-	public handleOnChangeText = (text: string): void => {
-		const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
-		let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
-		if (!this.props.negativeAllowed) {
-			replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
-		}
-		this.setState({
-			value: `${replacedSeparator}`,
-		});
-		this.props.partialInput?.(`${replacedSeparator}`);
-	};
-
-	public onEndEdit = (): void => {
-		const cleaned = this.cleanInput(this.state.value);
-		this.props.onEnd?.(Number(cleaned));
-	};
-
-	public render(): JSX.Element {
-		const { testID } = this.props;
-		return (
-			<TextInput
-				testID={testID}
-				accessibilityLabel="InvisibleNumberInput"
-				value={`${this.state.value}`}
-				ref={(textInput): void => {
-					if (textInput !== null) {
-						this.textInput = textInput;
-					}
-				}}
-				style={inputStyles.textInput}
-				keyboardType="numeric"
-				onChangeText={this.handleOnChangeText}
-				onEndEditing={this.onEndEdit}
-				maxLength={this.props.maxLength}
-				selectTextOnFocus
-			/>
-		);
-	}
-}
-
-const inputStyles = StyleSheet.create({
-	textInput: {
-		width: 0,
-		height: 0,
-		padding: 0.2,
-	},
-});

package/src/components/LimitationMessage.tsx

@@ -1,38 +0,0 @@
-import { t } from "@lingui/macro";
-import * as React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { LimitationMessageTestIds } from "../types/enum";
-import { AttentionMessage } from "../utils/AttentionMessages";
-import { stylesModal } from "./RecommendationModal";
-
-export interface ILimitationMessageProps {
-	limitationMessage: AttentionMessage | null;
-	onPressNextButton(): void;
-}
-
-export default class LimitationMessage extends React.Component<ILimitationMessageProps> {
-	public render = (): JSX.Element => {
-		const { limitationMessage } = this.props;
-		return (
-			<React.Fragment>
-				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t`Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
-				</View>
-				<View style={stylesModal.containerAcceptButton}>
-					<TouchableOpacity
-						testID={LimitationMessageTestIds.OkButton}
-						accessibilityLabel="nextButtonModal"
-						style={stylesModal.okButton}
-						onPress={this.props.onPressNextButton}
-					>
-						<Text style={stylesModal.buttonText}>{i18n._(t`OK`)}</Text>
-					</TouchableOpacity>
-				</View>
-			</React.Fragment>
-		);
-	};
-}

package/src/components/LineSeparator.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-
-interface IProps {
-	color: string;
-}
-
-export default class LineSeparator extends React.Component<IProps> {
-	public render(): JSX.Element {
-		return (
-			<React.Fragment>
-				<View style={[lineSeparatorStyles.lineStyle, { borderBottomColor: this.props.color }]} />
-			</React.Fragment>
-		);
-	}
-}
-
-const lineSeparatorStyles = StyleSheet.create({
-	lineStyle: {
-		marginHorizontal: `3%`,
-		marginVertical: `2%`,
-		borderBottomWidth: 1,
-	},
-});

package/src/components/RecentInsulin.tsx

@@ -1,101 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { RecentInsulinTestIds } from "../types/enum";
-import { infoStyles } from "./InfoBars";
-
-interface IProps {
-	onRecentInsulinYes(): void;
-	onRecentInsulinNo(): void;
-}
-
-export default class RecentInsulin extends React.Component<IProps> {
-	public render = (): JSX.Element => {
-		return (
-			<View style={recentInsulinStyles.container}>
-				<View style={recentInsulinStyles.titleContainer}>
-					<Text style={recentInsulinStyles.recommended}>{i18n._(t`Recommended amount of insulin`)}</Text>
-				</View>
-				<View style={recentInsulinStyles.takenInsulinContainer}>
-					<Text style={recentInsulinStyles.takenInsulin}>
-						{i18n._(t`Have you taken insulin within the last 4 hours?`)}
-					</Text>
-				</View>
-				<View style={recentInsulinStyles.buttonContainer}>
-					<View style={recentInsulinStyles.filler} />
-					<TouchableOpacity
-						testID={RecentInsulinTestIds.Yes}
-						onPress={this.props.onRecentInsulinYes}
-						style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}
-					>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t`Yes`)}</Text>
-					</TouchableOpacity>
-					<TouchableOpacity
-						testID={RecentInsulinTestIds.No}
-						onPress={this.props.onRecentInsulinNo}
-						style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}
-					>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t`No`)}</Text>
-					</TouchableOpacity>
-					<View style={recentInsulinStyles.filler} />
-				</View>
-			</View>
-		);
-	};
-}
-
-const recentInsulinStyles = StyleSheet.create({
-	container: {
-		...infoStyles.margin,
-		backgroundColor: `rgba(118, 82, 255, 0.5)`,
-		borderRadius: 5,
-	},
-	titleContainer: {
-		flex: 1,
-		justifyContent: `center`,
-		alignItems: `center`,
-		marginTop: `4%`,
-		marginBottom: `4%`,
-	},
-	recommended: {
-		...infoStyles.label,
-	},
-	takenInsulinContainer: {
-		flex: 1,
-		justifyContent: `center`,
-		alignItems: `center`,
-		marginTop: `2%`,
-	},
-	takenInsulin: {
-		...infoStyles.label,
-		fontSize: Dimensions.get(`screen`).width / 27,
-		textAlign: `center`,
-	},
-	buttonContainer: {
-		flex: 1,
-		flexDirection: `row`,
-		justifyContent: `space-evenly`,
-		marginTop: `4%`,
-		marginBottom: `5%`,
-	},
-	yesNoContainer: {
-		flex: 1,
-		borderColor: `white`,
-		borderRadius: 100,
-		borderWidth: 2,
-		paddingHorizontal: `2%`,
-		paddingVertical: `1%`,
-	},
-	yesNoText: {
-		textAlign: `center`,
-		paddingTop: `1%`,
-		paddingBottom: `1%`,
-		color: `white`,
-		fontSize: Dimensions.get(`screen`).width / 25,
-		fontWeight: `bold`,
-	},
-	filler: {
-		flex: 1,
-	},
-});