@hedia/recommendation-screen 1.0.0

package/src/RecommendationScreen.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { BGUnit, InjectionMethod, Languages, MoodEnum } from "./types/enum";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_TEAL, BORDER_COLOUR_WHITE } from "./utils/Constants";
+
+import Header, { headerStyles } from "./components/Header";
+import InfoBars, { infoStyles, IProps } 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 { t } from "@lingui/macro";
+import { I18nProvider } from "@lingui/react";
+import Emotion from "./components/Emotion";
+import TransferToLogbook from "./components/TransferToLogbook";
+import { RecommendationError } from "./utils/RecommendationError";
+
+import { changeLanguage, i18n } from "./locale/i18nUtils";
+import { Utils } from "./utils/Utils";
+
+interface IResult {
+	suggested: number;
+	entered?: number;
+}
+
+export interface IRecommendationProps {
+	// Values
+	units: BGUnit;
+	language: Languages;
+
+	calculatorParams: Calculator.IRecommendationParams;
+	injectionMethod: InjectionMethod;
+
+	// Callbacks
+	exitCallback(): void;
+	removeRecommendedCarbs(): void;
+	onRecentInsulinYes(): void;
+
+	transferToLogbook(carbs: IResult, insulin: IResult, reminder: number): void;
+	onError(error: RecommendationError): void;
+}
+
+interface IState {
+	remeasureTime: number;
+	showRecentInsulin: boolean;
+	insulinRecommendation: number;
+	activityReduction?: number;
+	carbRecommendation: number;
+	activeInsulin: number;
+	selectedMood: MoodEnum | 0;
+	enteredCarbs?: number;
+	enteredInsulin?: number;
+}
+
+export default class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
+	constructor(props: IRecommendationProps) {
+		super(props);
+
+		changeLanguage(props.language);
+
+		const { bolus, carbRecommendation, activityReduction } = Calculator.calculateRecommendation(
+			props.calculatorParams,
+		);
+		this.state = {
+			remeasureTime: 1.5,
+			showRecentInsulin: true,
+			insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
+			activityReduction,
+			carbRecommendation,
+			activeInsulin: 0.0,
+			selectedMood: 0,
+		};
+	}
+
+	public updateRemeasureTime = (remeasureTime: number) => {
+		this.setState({
+			remeasureTime,
+		});
+	};
+
+	public handleNoRecentInsulin = () => {
+		this.setState({
+			showRecentInsulin: false,
+		});
+	};
+
+	public removeCarbRecommendation = () => {
+		this.setState({
+			enteredCarbs: null,
+			carbRecommendation: null,
+		});
+		this.props.removeRecommendedCarbs();
+	};
+
+	public handleMoodSelected = (selectedMood: IState["selectedMood"]) => {
+		this.setState({
+			selectedMood,
+		});
+	};
+
+	public updateCarbRecommendation = (enteredCarbs: number) => {
+		this.setState({
+			enteredCarbs,
+		});
+	};
+
+	public updateInsulinRecommendation = (enteredInsulin: number) => {
+		this.setState({
+			enteredInsulin,
+		});
+	};
+
+	public handleTransfer = () => {
+		this.props.transferToLogbook(
+			{
+				suggested: this.state.carbRecommendation,
+				entered: this.state.enteredCarbs,
+			},
+			{
+				suggested: this.state.insulinRecommendation,
+				entered: this.state.enteredInsulin,
+			},
+			this.state.remeasureTime,
+		);
+	};
+
+	public render() {
+		return (
+			<I18nProvider language={this.props.language} i18n={i18n}>
+				<ScrollView style={containerStyles.container}>
+					<Header exitCallback={this.props.exitCallback} />
+					<InfoBars
+						label={i18n._(t`Active Insulin`)}
+						value={`${this.state.activeInsulin}`}
+						units={i18n._(t`units`)}
+						showZeroAsDash={false}
+					/>
+					<InfoBars
+						label={i18n._(t`Blood Glucose Level`)}
+						value={`${this.props.calculatorParams.currentBGL}`}
+						units={this.props.units}
+						showZeroAsDash={true}
+					/>
+					<View style={containerStyles.calcContainer}>
+						<View style={containerStyles.calcMargin}>
+							<View
+								style={[
+									containerStyles.calcBorder,
+									{
+										borderColor: this.state.carbRecommendation
+											? BORDER_COLOUR_TEAL
+											: BORDER_COLOUR_WHITE,
+									},
+								]}
+							>
+								<RecommendedCarbs
+									enteredCarbs={`${this.props.calculatorParams.carbohydrates}`}
+									changedRecommendedCarbs={this.updateCarbRecommendation}
+									recommendedCarbs={`${this.state.enteredCarbs ?? this.state.carbRecommendation}`}
+									removeRecommendedCarbs={this.removeCarbRecommendation}
+									onError={this.props.onError}
+								/>
+								<Remeasure
+									onSliderChange={this.updateRemeasureTime}
+									remeasureTime={this.state.remeasureTime}
+								/>
+							</View>
+						</View>
+					</View>
+					{this.state.showRecentInsulin ? (
+						<RecentInsulin
+							onRecentInsulinYes={this.props.onRecentInsulinYes}
+							onRecentInsulinNo={this.handleNoRecentInsulin}
+						/>
+					) : (
+						<RecommendedInsulin
+							injectionMethod={this.props.injectionMethod}
+							insulinRecommendation={this.state.enteredInsulin ?? this.state.insulinRecommendation}
+							activityReduction={this.state.activityReduction}
+							updateRecommendedInsulin={this.updateInsulinRecommendation}
+							onError={this.props.onError}
+						/>
+					)}
+					<Emotion moodSelected={this.handleMoodSelected} />
+					<TransferToLogbook visible={!this.state.showRecentInsulin} transfer={this.handleTransfer} />
+				</ScrollView>
+			</I18nProvider>
+		);
+	}
+}
+
+const containerStyles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: BACKGROUND_COLOUR_PURPLE,
+	},
+	calcContainer: {
+		flex: 1,
+	},
+	calcMargin: {
+		flex: 1,
+		margin: headerStyles.margin.margin,
+	},
+	calcBorder: {
+		...infoStyles.border,
+		borderColor: BORDER_COLOUR_TEAL,
+	},
+});

package/src/components/Emotion.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { MoodEnum } from "../types/enum";
+interface IProps {
+    moodSelected(mood: MoodEnum | 0): void;
+}
+interface IState {
+    selected: MoodEnum | 0;
+}
+export default class Emotion extends React.Component<IProps, IState> {
+    state: IState;
+    handleIconPress: (selected: number, toggle: boolean) => void;
+    render(): JSX.Element;
+}
+export {};

package/src/components/Emotion.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const macro_1 = require("@lingui/macro");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
+const MoodIcon_1 = __importDefault(require("./MoodIcon"));
+class Emotion extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            selected: 0,
+        };
+        this.handleIconPress = (selected, toggle) => {
+            const select = toggle ? selected : 0;
+            this.setState({
+                selected: select,
+            });
+            this.props.moodSelected(select);
+        };
+    }
+    render() {
+        const values = Object.values(enum_1.MoodEnum).filter((val) => isNaN(Number(val)));
+        const mapped = values.map((key) => {
+            const moodValue = enum_1.MoodEnum[key];
+            return (<MoodIcon_1.default onPress={(toggle) => this.handleIconPress(moodValue, toggle)} active={moodValue === this.state.selected} mood={moodValue} key={moodValue}/>);
+        });
+        return (<react_native_1.View style={emotionStyles.container}>
+				<react_native_1.View style={emotionStyles.feelingContainer}>
+					<react_native_1.Text style={emotionStyles.feelingText}>{i18nUtils_1.i18n._(macro_1.t `How are you feeling?`)}</react_native_1.Text>
+				</react_native_1.View>
+				<react_native_1.View style={emotionStyles.moodIconContainer}>{mapped}</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = Emotion;
+const emotionStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    feelingContainer: {
+        marginVertical: `3%`,
+    },
+    feelingText: {
+        textAlign: `center`,
+        color: `white`,
+        fontWeight: `bold`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 26,
+    },
+    moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },
+});

package/src/components/Emotion.tsx

@@ -0,0 +1,71 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { MoodEnum } from "../types/enum";
+import MoodIcon from "./MoodIcon";
+
+interface IProps {
+	moodSelected(mood: MoodEnum | 0): void;
+}
+
+type value = keyof typeof MoodEnum;
+
+interface IState {
+	selected: MoodEnum | 0;
+}
+
+export default class Emotion extends React.Component<IProps, IState> {
+	public state: IState = {
+		selected: 0,
+	};
+
+	public handleIconPress = (selected: number, toggle: boolean) => {
+		const select = toggle ? selected : 0;
+		this.setState({
+			selected: select,
+		});
+		this.props.moodSelected(select);
+	};
+
+	public render() {
+		const values = Object.values(MoodEnum).filter((val) => isNaN(Number(val))) as Array<value>;
+
+		const mapped = values.map((key) => {
+			const moodValue = MoodEnum[key];
+			return (
+				<MoodIcon
+					onPress={(toggle) => this.handleIconPress(moodValue, toggle)}
+					active={moodValue === this.state.selected}
+					mood={moodValue}
+					key={moodValue}
+				/>
+			);
+		});
+
+		return (
+			<View style={emotionStyles.container}>
+				<View style={emotionStyles.feelingContainer}>
+					<Text style={emotionStyles.feelingText}>{i18n._(t`How are you feeling?`)}</Text>
+				</View>
+				<View style={emotionStyles.moodIconContainer}>{mapped}</View>
+			</View>
+		);
+	}
+}
+
+const emotionStyles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	feelingContainer: {
+		marginVertical: `3%`,
+	},
+	feelingText: {
+		textAlign: `center`,
+		color: `white`,
+		fontWeight: `bold`,
+		fontSize: Dimensions.get(`screen`).width / 26,
+	},
+	moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },
+});

package/src/components/Header.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { IRecommendationProps } from "../RecommendationScreen";
+interface IProps {
+    exitCallback: IRecommendationProps["exitCallback"];
+}
+interface IState {
+    hello: string;
+}
+export default class Header extends React.Component<IProps, IState> {
+    state: IState;
+    render(): JSX.Element;
+}
+export declare const headerStyles: {
+    backgroundColour: {
+        backgroundColor: string;
+    };
+    margin: {
+        margin: string;
+        flexDirection: "row";
+        flex: number;
+    };
+    headerContainer: {
+        flexDirection: "row";
+        flex: number;
+    };
+    exitButtonContainer: {
+        flex: number;
+    };
+    exitButton: {
+        flex: number;
+    };
+    iconStyle: {
+        fontSize: number;
+        color: string;
+    };
+    headerTextContainer: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        marginTop: string;
+    };
+    headerText: {
+        fontSize: number;
+        fontWeight: "bold";
+        textAlign: "center";
+        color: string;
+    };
+    headerFiller: {
+        flex: number;
+    };
+};
+export {};

package/src/components/Header.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerStyles = void 0;
+const macro_1 = require("@lingui/macro");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const i18nUtils_1 = require("../locale/i18nUtils");
+const Constants_1 = require("../utils/Constants");
+const Icon_1 = __importDefault(require("./Icon"));
+class Header extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hello: `World`,
+        };
+    }
+    render() {
+        return (<react_1.default.Fragment>
+				<react_native_1.SafeAreaView style={exports.headerStyles.backgroundColour}/>
+				<react_native_1.View style={exports.headerStyles.headerContainer}>
+					<react_native_1.View style={exports.headerStyles.margin}>
+						<react_native_1.View style={exports.headerStyles.exitButtonContainer}>
+							<react_native_1.View style={exports.headerStyles.exitButton}>
+								<react_native_1.TouchableOpacity accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
+									<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.headerStyles.iconStyle}/>
+								</react_native_1.TouchableOpacity>
+								<react_native_1.View style={exports.headerStyles.headerFiller}/>
+							</react_native_1.View>
+						</react_native_1.View>
+						<react_native_1.View style={exports.headerStyles.headerTextContainer}>
+							<react_native_1.Text style={exports.headerStyles.headerText} testID="headerText">
+								{i18nUtils_1.i18n._(macro_1.t `INSULIN\nRECOMMENDATION`)}
+							</react_native_1.Text>
+						</react_native_1.View>
+						<react_native_1.View style={exports.headerStyles.headerFiller}/>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_1.default.Fragment>);
+    }
+}
+exports.default = Header;
+exports.headerStyles = react_native_1.StyleSheet.create({
+    backgroundColour: {
+        backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE,
+    },
+    margin: {
+        margin: `3%`,
+        flexDirection: `row`,
+        flex: 1,
+    },
+    headerContainer: {
+        flexDirection: `row`,
+        flex: 1,
+    },
+    exitButtonContainer: {
+        flex: 1,
+    },
+    exitButton: {
+        flex: 1,
+    },
+    iconStyle: {
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 10,
+        color: Constants_1.BORDER_COLOUR_WHITE,
+    },
+    headerTextContainer: {
+        flex: 5,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `5%`,
+    },
+    headerText: {
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 14,
+        fontWeight: `bold`,
+        textAlign: `center`,
+        color: `white`,
+    },
+    headerFiller: {
+        flex: 1,
+    },
+});

package/src/components/Header.tsx

@@ -0,0 +1,94 @@
+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 { IRecommendationProps } from "../RecommendationScreen";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_WHITE } from "../utils/Constants";
+import Icon from "./Icon";
+
+interface IProps {
+	exitCallback: IRecommendationProps["exitCallback"];
+}
+
+interface IState {
+	hello: string;
+}
+
+export default class Header extends React.Component<IProps, IState> {
+	public state: IState = {
+		hello: `World`,
+	};
+
+	public render() {
+		return (
+			<React.Fragment>
+				<SafeAreaView style={headerStyles.backgroundColour} />
+				<View style={headerStyles.headerContainer}>
+					<View style={headerStyles.margin}>
+						<View style={headerStyles.exitButtonContainer}>
+							<View style={headerStyles.exitButton}>
+								<TouchableOpacity
+									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\nRECOMMENDATION`)}
+							</Text>
+						</View>
+						<View style={headerStyles.headerFiller} />
+					</View>
+				</View>
+			</React.Fragment>
+		);
+	}
+}
+
+export const headerStyles = StyleSheet.create({
+	backgroundColour: {
+		backgroundColor: BACKGROUND_COLOUR_PURPLE,
+	},
+	margin: {
+		margin: `3%`,
+		flexDirection: `row`,
+		flex: 1,
+	},
+	headerContainer: {
+		flexDirection: `row`,
+		flex: 1,
+	},
+	exitButtonContainer: {
+		flex: 1,
+	},
+	exitButton: {
+		flex: 1,
+	},
+	iconStyle: {
+		fontSize: Dimensions.get(`screen`).width / 10,
+		color: BORDER_COLOUR_WHITE,
+	},
+	headerTextContainer: {
+		flex: 5,
+		justifyContent: `center`,
+		alignItems: `center`,
+		marginTop: `5%`,
+	},
+	headerText: {
+		fontSize: Dimensions.get(`screen`).width / 14,
+		fontWeight: `bold`,
+		textAlign: `center`,
+		color: `white`,
+	},
+	headerFiller: {
+		flex: 1,
+	},
+});

package/src/components/Icon.js

@@ -0,0 +1,41 @@
+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`,
+};