@hedia/recommendation-screen 2.0.2 → 2.1.0

package/src/components/Remeasure.tsx

@@ -1,120 +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 { RemeasureTestIds } from "../types/enum";
-import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
-import { infoStyles } from "./InfoBars";
-
-interface IProps {
-	remeasureTime: number;
-	onSliderChange(value: number): void;
-}
-
-export default class Remeasure extends React.Component<IProps> {
-	private slider?: Slider;
-
-	public componentDidMount(): void {
-		this.slider?.setNativeProps({
-			value: this.props.remeasureTime,
-		});
-	}
-
-	public handleSliderChange = (remeasureTime: number): void => {
-		const limited = this.limitTime(remeasureTime);
-		this.props.onSliderChange(limited);
-	};
-
-	public limitTime = (remeasureTime: number): number => {
-		return Math.min(Math.max(0, remeasureTime), 6);
-	};
-
-	public render(): JSX.Element {
-		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): void => {
-						if (slider !== null) {
-							this.slider = slider;
-						}
-					}}
-					testID={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`,
-	},
-});

package/src/components/TransferToLogbook.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-
-import { t } from "@lingui/macro";
-import { i18n } from "../locale/i18nUtils";
-import { TransferToLogbookTestIds } from "../types/enum";
-import Icon from "./Icon";
-
-interface IProps {
-	visible: boolean;
-	transfer(): void;
-}
-
-interface IState {
-	pressed: boolean;
-}
-
-export default class TransferToLogbook extends React.Component<IProps, IState> {
-	public state: IState = {
-		pressed: false,
-	};
-
-	public handlePress = (): void => {
-		this.setState({
-			pressed: !this.state.pressed,
-		});
-		this.props.transfer();
-	};
-
-	public render(): JSX.Element {
-		if (!this.props.visible) {
-			return <View style={addToLogbookStyles.marginContainer} />;
-		}
-
-		return (
-			<TouchableOpacity
-				testID={TransferToLogbookTestIds.TransferButton}
-				onPress={this.handlePress}
-				disabled={this.state.pressed}
-				style={addToLogbookStyles.container}
-				accessibilityLabel="transferToLogbook"
-			>
-				{!this.state.pressed ? (
-					<View style={addToLogbookStyles.textContainer}>
-						<Text style={addToLogbookStyles.transferText}>{i18n._(t`Transfer to logbook`)}</Text>
-					</View>
-				) : (
-					<View style={addToLogbookStyles.textContainerActive}>
-						<Icon style={addToLogbookStyles.icon} iconIdentifier={`Feather/check`} />
-						<Text style={addToLogbookStyles.transferTextActive}>{i18n._(t`Transferred to logbook`)}</Text>
-					</View>
-				)}
-			</TouchableOpacity>
-		);
-	}
-}
-
-const addToLogbookStyles = StyleSheet.create({
-	marginContainer: {
-		marginVertical: `3%`,
-	},
-	container: {
-		flex: 1,
-		margin: `5%`,
-	},
-	textContainer: {
-		flexDirection: `row`,
-		justifyContent: `center`,
-		borderWidth: 1,
-		borderRadius: 100,
-		marginHorizontal: `4%`,
-		paddingVertical: `4%`,
-		borderColor: `#01FFFC`,
-	},
-	transferText: {
-		color: `#01FFFC`,
-		fontSize: Dimensions.get(`screen`).width / 22,
-		fontWeight: `bold`,
-	},
-	textContainerActive: {
-		flexDirection: `row`,
-		backgroundColor: `#01FFFC`,
-		justifyContent: `center`,
-		borderWidth: 1,
-		borderRadius: 100,
-		marginHorizontal: `4%`,
-		paddingVertical: `4%`,
-	},
-	icon: {
-		paddingTop: `1.3%`,
-		color: `#1B1F48`,
-		fontSize: Dimensions.get(`screen`).width / 22,
-		marginRight: `1%`,
-	},
-	transferTextActive: {
-		color: `#1B1F48`,
-		fontSize: Dimensions.get(`screen`).width / 22,
-		fontWeight: `bold`,
-	},
-});

package/src/components/TwoOptionModal.tsx

@@ -1,185 +0,0 @@
-import * as React from "react";
-import { Dimensions, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { TwoOptionModalTestIds } from "../types/enum";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
-import Icon from "./Icon";
-import { stylesModal } from "./RecommendationModal";
-
-export interface ITwoOptionModalProps {
-	title: string;
-	message: string;
-	textFirstOption: string;
-	textSecondOption: string;
-	isCancelable?: boolean;
-	rowAsButtonLayout: boolean;
-	firstOption(): void;
-	secondOption(): void;
-	onClose?(): void;
-}
-
-export default class TwoOptionModal extends React.Component<ITwoOptionModalProps> {
-	constructor(props: ITwoOptionModalProps) {
-		super(props);
-	}
-
-	public render(): JSX.Element {
-		const { rowAsButtonLayout, isCancelable } = this.props;
-		return (
-			<View style={modalStyle.container}>
-				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`} />
-				<View style={modalStyle.modalContainer}>
-					{isCancelable ? (
-						<TouchableOpacity
-							onPress={this.props.onClose}
-							testID={TwoOptionModalTestIds.ExitButton}
-							style={modalStyle.iconWrapper}
-						>
-							<Icon
-								accessibilityLabel="ModalExitIcon"
-								iconIdentifier={`Ionicons/ios-close-circle-outline`}
-								style={modalStyle.icon}
-							/>
-						</TouchableOpacity>
-					) : null}
-
-					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
-						<Text style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
-							{this.props.title}
-						</Text>
-						<Text style={modalStyle.message}>{this.props.message}</Text>
-					</View>
-					<View style={rowAsButtonLayout ? modalStyle.buttonContainerRow : modalStyle.buttonContainerColumn}>
-						<TouchableOpacity
-							testID={TwoOptionModalTestIds.FirstOption}
-							accessibilityLabel="firstOptionButton"
-							onPress={this.props.firstOption}
-							style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}
-						>
-							<Text
-								style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}
-							>
-								{this.props.textFirstOption}
-							</Text>
-						</TouchableOpacity>
-						<TouchableOpacity
-							testID={TwoOptionModalTestIds.SecondOption}
-							accessibilityLabel="secondOptionButton"
-							onPress={this.props.secondOption}
-							style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}
-						>
-							<Text
-								style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}
-							>
-								{this.props.textSecondOption}
-							</Text>
-						</TouchableOpacity>
-					</View>
-				</View>
-			</View>
-		);
-	}
-}
-const { height, width } = Dimensions.get(`screen`);
-export const modalStyle = StyleSheet.create({
-	container: {
-		...StyleSheet.absoluteFillObject,
-		justifyContent: `center`,
-		backgroundColor: `rgba(0, 0, 0, 0.9)`,
-	},
-	modalContainer: {
-		margin: `4%`,
-		backgroundColor: BACKGROUND_COLOUR_PURPLE,
-		borderRadius: width / 25,
-	},
-	iconWrapper: {
-		alignSelf: `flex-end`,
-		marginRight: `4%`,
-		marginTop: `3%`,
-	},
-	icon: {
-		color: BORDER_COLOUR_GREY,
-		fontSize: width / 12,
-	},
-	textContainer: {
-		marginHorizontal: `4%`,
-		marginBottom: `5%`,
-		marginTop: `2%`,
-		alignSelf: `flex-start`,
-	},
-	textContainerNotCancelable: {
-		marginHorizontal: `4%`,
-		marginVertical: `5%`,
-		alignSelf: `flex-start`,
-	},
-	titleRowLayout: {
-		fontFamily: `Roboto-Regular`,
-		color: `rgba(139, 144, 196, 1)`,
-		fontSize: width / 17,
-		fontWeight: `bold`,
-		textAlign: `center`,
-		marginBottom: `10%`,
-	},
-	titleColumnLayout: {
-		fontFamily: `Roboto-Regular`,
-		color: `rgba(139, 144, 196, 1)`,
-		fontSize: width / 17,
-		fontWeight: `bold`,
-		textAlign: `center`,
-		marginBottom: `5%`,
-	},
-	message: {
-		fontFamily: `Roboto-Regular`,
-		color: `rgba(245, 242, 242, 1)`,
-		fontSize: width / 22,
-		textAlign: `center`,
-	},
-	buttonContainerRow: {
-		flexDirection: `row`,
-		justifyContent: `space-around`,
-		marginHorizontal: `4%`,
-		marginVertical: `6%`,
-	},
-	buttonContainerColumn: {
-		flexDirection: `column`,
-		justifyContent: `space-around`,
-		margin: `4%`,
-	},
-	buttonRow: {
-		...stylesModal.okButton,
-		height: height / 16,
-		marginTop: 0,
-	},
-	firstButtonColumn: {
-		...stylesModal.okButton,
-		height: height / 18,
-		width: width / 1.5,
-		marginTop: 0,
-		backgroundColor: BORDER_COLOUR_TEAL,
-	},
-	secondButtonColumn: {
-		alignSelf: `center`,
-		justifyContent: `center`,
-		height: height / 18,
-		width: width / 1.5,
-		marginTop: `2%`,
-	},
-	textButtonRow: {
-		fontFamily: `Roboto-Regular`,
-		textAlign: `center`,
-		fontSize: width / 24,
-		color: `white`,
-	},
-	textFirstButtonColumn: {
-		fontFamily: `Roboto-Regular`,
-		textAlign: `center`,
-		fontSize: width / 22,
-		paddingHorizontal: 15,
-	},
-	textSecondButtonColumn: {
-		fontFamily: `Roboto-Regular`,
-		textAlign: `center`,
-		fontSize: width / 26,
-		color: BORDER_COLOUR_TEAL,
-		fontWeight: `bold`,
-	},
-});

package/src/components/activity/Activity.tsx

@@ -1,77 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../../locale/i18nUtils";
-import { ActivityTestIds } from "../../types/enum";
-import { IActivityDisplayProps, IActivityParams, ReductionType } from "../../types/types";
-import { infoStyles } from "../InfoBars";
-import ActivityIcon from "./ActivityIcon";
-import ActivityIntensity from "./ActivityIntensity";
-
-interface IProps extends IActivityDisplayProps {
-	activity: IActivityParams;
-	activityReduction: ReductionType;
-}
-
-export default class Activity extends React.Component<IProps> {
-	public render(): JSX.Element {
-		const { activity, activityType, activityReduction, activityTitle } = this.props;
-		const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);
-
-		return (
-			<View style={[infoStyles.container, activityStyles.botMargin]}>
-				<View style={infoStyles.margin}>
-					<View style={infoStyles.border}>
-						<View style={infoStyles.borderContainer}>
-							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{i18n._(t`Activity`)}</Text>
-							</View>
-							<View style={infoStyles.valueUnitContainer}>
-								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value}>{activity.activityDuration}</Text>
-								</View>
-								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units}>{i18n._(t`min`)}</Text>
-								</View>
-							</View>
-						</View>
-						<ActivityIcon activityType={activityType} activityTitle={activityTitle} />
-						<ActivityIntensity activityIntensity={activity.activityIntensity} />
-						<View style={[infoStyles.borderContainer, activityStyles.topMargin]}>
-							<Text style={activityStyles.infoText}>
-								{i18n._(t`Based on the selected activity your insulin recommendation is reduced by:`)}
-							</Text>
-						</View>
-						<View style={[infoStyles.borderContainer, activityStyles.verticalMargin]}>
-							<Text style={activityStyles.reductionPercentage} testID={ActivityTestIds.ActivityReduction}>
-								{reductionPercentage}%
-							</Text>
-						</View>
-					</View>
-				</View>
-			</View>
-		);
-	}
-}
-
-const activityStyles = StyleSheet.create({
-	topMargin: {
-		marginTop: `2%`,
-	},
-	botMargin: {
-		marginBottom: `2%`,
-	},
-	verticalMargin: {
-		marginBottom: `2%`,
-	},
-	infoText: {
-		color: `rgba(160, 180, 240, 1)`,
-		fontSize: Dimensions.get(`screen`).width / 24,
-	},
-	reductionPercentage: {
-		color: `white`,
-		marginTop: `2%`,
-		fontSize: Dimensions.get(`screen`).width / 18,
-		fontWeight: `bold`,
-	},
-});

package/src/components/activity/ActivityIcon.tsx

@@ -1,54 +0,0 @@
-import { Activity } from "@hedia/types";
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, Image, ImageURISource, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../../locale/i18nUtils";
-import { IActivityDisplayProps } from "../../types/types";
-
-const { Other } = Activity.Enums.ActivityEnum;
-
-const ACTIVITY_ICONS: Record<Activity.Enums.ActivityEnum, ImageURISource> = {
-	Run: require(`../../assets/activity/Runner.png`),
-	Walk: require(`../../assets/activity/Walk.png`),
-	Cycling: require(`../../assets/activity/Cyclist.png`),
-	Swim: require(`../../assets/activity/Swimmer.png`),
-	Other: require(`../../assets/activity/Other.png`),
-};
-
-export default class ActivityIcon extends React.Component<IActivityDisplayProps> {
-	public getActivityIcon = (): ImageURISource => {
-		return ACTIVITY_ICONS[this.props.activityType ?? Other];
-	};
-
-	public render(): JSX.Element | null {
-		const { activityType, activityTitle } = this.props;
-		const label = `${Activity.Enums.ActivityEnum[activityType ?? Other]}_activity`;
-		return (
-			<View style={activityIconStyles.container}>
-				<Image
-					style={activityIconStyles.activityIcon}
-					source={this.getActivityIcon()}
-					accessibilityLabel={label}
-				/>
-				<Text style={activityIconStyles.activityTitle}>{activityTitle || i18n._(t`Untitled Activity`)}</Text>
-			</View>
-		);
-	}
-}
-
-const activityIconStyles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: `row`,
-		alignItems: `center`,
-		marginTop: `1%`,
-	},
-	activityIcon: {
-		resizeMode: `contain`,
-		height: Dimensions.get(`screen`).width / 16,
-	},
-	activityTitle: {
-		color: `white`,
-		fontSize: Dimensions.get(`screen`).width / 25,
-	},
-});

package/src/components/activity/ActivityIntensity.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { IActivityParams } from "../../types/types";
-import { ActivityIntensityTranslations } from "../../utils/Translations";
-import { infoStyles } from "../InfoBars";
-
-interface IProps {
-	activityIntensity: IActivityParams["activityIntensity"];
-}
-
-export default class ActivityIntensity extends React.Component<IProps> {
-	public render = (): JSX.Element => {
-		const intensity = this.props.activityIntensity;
-		const style = activityIntensityStyles[intensity];
-
-		return (
-			<View style={[infoStyles.margin, activityIntensityStyles.row]}>
-				<View style={activityIntensityStyles.intensityContainer}>
-					<View style={[activityIntensityStyles.intensityTextContainer, style]}>
-						<Text style={activityIntensityStyles.bold}>{ActivityIntensityTranslations[intensity]()}</Text>
-					</View>
-				</View>
-				<View style={activityIntensityStyles.intensityContainerOffset} />
-			</View>
-		);
-	};
-}
-
-const activityIntensityStyles = StyleSheet.create({
-	row: {
-		flexDirection: `row`,
-	},
-	intensityTextContainer: {
-		alignItems: `center`,
-		justifyContent: `center`,
-		padding: `5%`,
-		borderRadius: 5,
-	},
-	Light: {
-		backgroundColor: `#A5D871`,
-	},
-	Moderate: {
-		backgroundColor: `#F9BD5A`,
-	},
-	Hard: {
-		backgroundColor: `#EC5466`,
-	},
-	intensityContainer: {
-		flex: 5,
-	},
-	intensityContainerOffset: {
-		flex: 16,
-	},
-	bold: {
-		fontWeight: `bold`,
-		fontSize: Dimensions.get(`screen`).width / 30,
-	},
-});

package/src/components/mood/Emotion.tsx

@@ -1,66 +0,0 @@
-import { Logbook } 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 MoodIcon from "./MoodIcon";
-
-const MoodEnum = Logbook.Enums.MoodEnum;
-
-interface IProps {
-	currentMood: Logbook.Enums.MoodEnum | null;
-	moodSelected(mood: Logbook.Enums.MoodEnum | null): void;
-}
-
-export default class Emotion extends React.Component<IProps> {
-	public handleIconPress = (selected: Logbook.Enums.MoodEnum, toggle: boolean): void => {
-		this.props.moodSelected(toggle ? selected : null);
-	};
-
-	public mappedMoods = (): Array<JSX.Element> => {
-		const values = Object.values(MoodEnum).filter((val): boolean => isNaN(Number(val))) as Array<
-			keyof typeof MoodEnum
-		>;
-
-		return values.map(
-			(key): JSX.Element => {
-				const moodValue = MoodEnum[key];
-				return (
-					<MoodIcon
-						onPress={(toggle): void => this.handleIconPress(moodValue, toggle)}
-						active={moodValue === this.props.currentMood}
-						mood={moodValue}
-						key={moodValue}
-					/>
-				);
-			},
-		);
-	};
-
-	public render(): JSX.Element {
-		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}>{this.mappedMoods()}</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` },
-});