@hedia/recommendation-screen 2.1.75 → 2.2.0-alpha.1

package/src/components/TimeoutModal.tsx

@@ -1,121 +0,0 @@
-import * as React from "react";
-import { StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
-import ReactNativeModal from "react-native-modal";
-
-import { Testing } from "../types/enum";
-import { colors } from "../utils/Constants";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
-
-const { TimeOutModalTestIds } = Testing.Id;
-
-export interface ITimeoutModalProps {
-	/** Whether the modal is visible or not. */
-	isVisible: boolean;
-	/** The title of the modal. */
-	title: string;
-	/** The message to show in the modal. */
-	message: string;
-	/** The label of the first option. */
-	textFirstOption: string;
-	/**  The label of the second option. */
-	textSecondOption: string;
-	/** To be called if the user taps the first option button. */
-	firstOption(): void;
-	/** To be called if the user taps the second option button. */
-	secondOption(): void;
-	/** To be called when the modal is hidden. */
-	onModalHide(): void;
-}
-
-/** Display a modal with two buttons for the user to choose between. */
-export default class TimeoutModal extends React.Component<ITimeoutModalProps> {
-	/** Compose a JSX element for displaying the modal. */
-	public render(): JSX.Element {
-		return (
-			<ReactNativeModal
-				style={style.container}
-				isVisible={this.props.isVisible}
-				onModalHide={this.props.onModalHide}
-				animationIn={`fadeIn`}
-				animationOut={`fadeOut`}
-			>
-				<StatusBar backgroundColor={colors.black} />
-				<View style={style.modalContainer}>
-					<View style={style.textContainer}>
-						<Text style={style.title}>{this.props.title}</Text>
-						<Text style={style.message}>{this.props.message}</Text>
-					</View>
-					<View style={style.buttonContainer}>
-						<TouchableOpacity
-							testID={TimeOutModalTestIds.FirstOption}
-							onPress={this.props.firstOption}
-							style={[style.button, { backgroundColor: colors.teal, marginBottom: 16 }]}
-						>
-							<Text style={style.textFirstButton}>{this.props.textFirstOption}</Text>
-						</TouchableOpacity>
-						<TouchableOpacity
-							testID={TimeOutModalTestIds.SecondOption}
-							onPress={this.props.secondOption}
-							style={style.button}
-						>
-							<Text style={style.textSecondButton}>{this.props.textSecondOption}</Text>
-						</TouchableOpacity>
-					</View>
-				</View>
-			</ReactNativeModal>
-		);
-	}
-}
-/** @internal */
-const style = StyleSheet.create({
-	container: {
-		margin: 0,
-		justifyContent: `center`,
-		backgroundColor: colors.transparentBlack,
-	},
-	modalContainer: {
-		margin: 16,
-		padding: 24,
-		backgroundColor: colors.semiDarkBlue,
-		borderRadius: 24,
-	},
-	textContainer: {
-		alignSelf: `flex-start`,
-		marginBottom: 24,
-	},
-	title: {
-		...FONTS.Poppins.bold_XL,
-		color: colors.white,
-		textAlign: `center`,
-		marginBottom: 24,
-	},
-	message: {
-		...FONTS.Poppins.regular_Base,
-		color: colors.lightBlue,
-		textAlign: `center`,
-	},
-	buttonContainer: {
-		flexDirection: `column`,
-		justifyContent: `space-around`,
-	},
-	button: {
-		borderRadius: 50,
-		borderWidth: 1,
-		borderColor: colors.teal,
-	},
-	textFirstButton: {
-		...FONTS.Poppins.bold_LG,
-		textAlign: `center`,
-		color: colors.black,
-		paddingHorizontal: 16,
-		paddingVertical: 12,
-	},
-	textSecondButton: {
-		...FONTS.Poppins.bold_LG,
-		textAlign: `center`,
-		color: colors.teal,
-		paddingHorizontal: 16,
-		paddingVertical: 12,
-	},
-});

package/src/components/TransferToLogbook.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-
-import { t } from "../locales/translate";
-import { Testing } from "../types/enum";
-import { colors } from "../utils/Constants";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
-
-export interface IProps {
-	/** Whether or not the transfer button shall be visible on the screen. */
-	visible: boolean;
-	/** To be called when the button is pressed. */
-	transfer(): void;
-}
-
-export interface IState {
-	/**  Keeps track of whether the button was already pressed and thus should be displayed in the inactive visually distinct pressed state. */
-	pressed: boolean;
-}
-
-/**
- * Render a button for transferring the recommendation to a logbook entry.
- * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
- */
-export default class TransferToLogbook extends React.Component<IProps, IState> {
-	/** Initialise the state pressed variable with false */
-	public state: IState = {
-		pressed: false,
-	};
-
-	/**
-	 * Handle what happens when the button is pressed.
-	 *
-	 * Steps:
-	 * 1. Toggle the pressed state to the opposite of its current value.
-	 * 2. Call the transfer prop callback function.
-	 */
-	public handlePress = (): void => {
-		this.setState({
-			pressed: !this.state.pressed,
-		});
-		this.props.transfer();
-	};
-
-	/**
-	 * Steps:
-	 * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
-	 * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
-	 * @returns JSX element for displaying the transfer button
-	 */
-	public render() {
-		if (!this.props.visible) {
-			return;
-		}
-
-		return (
-			<TouchableOpacity
-				testID={Testing.Id.TransferToLogbookTestIds.TransferButton}
-				onPress={this.handlePress}
-				disabled={this.state.pressed}
-				style={addToLogbookStyles.container}
-			>
-				<View style={addToLogbookStyles.textContainer}>
-					<Text style={addToLogbookStyles.transferText}>{t(`Transfer to logbook`)}</Text>
-				</View>
-			</TouchableOpacity>
-		);
-	}
-}
-
-const addToLogbookStyles = StyleSheet.create({
-	container: {
-		minWidth: 230,
-		borderRadius: 50,
-		backgroundColor: colors.teal,
-		marginBottom: 32,
-		justifyContent: `center`,
-		alignSelf: `center`,
-	},
-	textContainer: {
-		flexDirection: `row`,
-		justifyContent: `center`,
-	},
-	transferText: {
-		...FONTS.Poppins.bold_Base,
-		color: colors.black,
-		paddingVertical: 12,
-		paddingHorizontal: 16,
-		textAlign: `center`,
-	},
-});

package/src/components/activity/Activity.tsx

@@ -1,107 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-
-import { Activity as ActivitySettings, BolusCalculator } from "@hedia/types";
-
-import { t } from "../../locales/translate";
-import { Testing } from "../../types/enum";
-import { IActivityDisplayProps } from "../../types/types";
-import { colors } from "../../utils/Constants";
-import { infoStyles } from "../InfoBars";
-import { FONTS } from "../styles/fonts";
-import Text from "../Text";
-import ActivityIcon from "./ActivityIcon";
-import ActivityIntensity from "./ActivityIntensity";
-
-export interface IProps extends IActivityDisplayProps {
-	/** Details about the activity that affect the calculation */
-	activity: BolusCalculator.Types.IActivityParams;
-	/** The fraction (in the interval [0; 1]) by which the insulin recommendation is being reduced due to physical activity */
-	activityReduction: ActivitySettings.Types.ReductionType;
-}
-
-/**
- * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
- */
-export default class Activity extends React.Component<IProps> {
-	/**
-	 * Steps:
-	 * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
-	 * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
-	 * 3. Generate and return the JSX element to display the following on the screen:
-	 * 	- Print the activity duration.
-	 * 	- Display the ActivityIcon that corresponds to the type of activity.
-	 * 	- Display the ActivityIntensity for the activity.
-	 * 	- Print the reductionPercentage.
-	 * @returns JSX Element containing all the user's physical activity details
-	 */
-	public render(): JSX.Element {
-		const { activity, activityType, activityReduction, activityTitle } = this.props;
-		const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);
-
-		return (
-			<View style={styles.container}>
-				<View style={styles.activityTextContainer}>
-					<View style={infoStyles.labelContainer}>
-						<Text style={styles.label}>{t(`Activity`)}</Text>
-					</View>
-					<View style={infoStyles.valueUnitContainer}>
-						<Text style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
-							{activity.activityDuration}
-						</Text>
-						<Text style={infoStyles.units}>{t(`min`)}</Text>
-					</View>
-				</View>
-				<ActivityIcon activityType={activityType} activityTitle={activityTitle} />
-				<ActivityIntensity activityIntensity={activity.activityIntensity} />
-				<Text style={styles.infoText}>
-					{t(`Based on the selected activity your insulin recommendation is reduced by:`)}
-				</Text>
-				<View style={styles.reductionContainer}>
-					<Text style={styles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
-						{reductionPercentage}
-					</Text>
-					<Text style={styles.percentage}>{`%`}</Text>
-				</View>
-			</View>
-		);
-	}
-}
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		marginTop: 8,
-		padding: 16,
-		borderWidth: 1,
-		borderColor: colors.dustyDarkBlue,
-		borderRadius: 5,
-	},
-	activityTextContainer: {
-		flex: 1,
-		flexDirection: `row`,
-		marginBottom: 6,
-		alignItems: `center`,
-	},
-	infoText: {
-		...FONTS.Poppins.regular_Base,
-		color: colors.lightBlue,
-		marginBottom: 4,
-	},
-	reductionContainer: {
-		flexDirection: `row`,
-		alignItems: `baseline`,
-	},
-	reductionPercentage: {
-		...FONTS.Poppins.medium_2XL,
-		color: colors.white,
-	},
-	percentage: {
-		...FONTS.Poppins.regular_XS,
-		color: colors.white,
-		marginLeft: 4,
-	},
-	label: {
-		...FONTS.Poppins.regular_Base,
-		color: colors.white,
-	},
-});

package/src/components/activity/ActivityIcon.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { SvgProps } from "react-native-svg";
-
-import { Activity } from "@hedia/types";
-
-import Cycling from "../../assets/IconsSVG/activity/Cycling";
-import Running from "../../assets/IconsSVG/activity/Running";
-import Stretching from "../../assets/IconsSVG/activity/Stretching";
-import Swimming from "../../assets/IconsSVG/activity/Swimming";
-import Walking from "../../assets/IconsSVG/activity/Walking";
-import { t } from "../../locales/translate";
-import { IActivityDisplayProps } from "../../types/types";
-import { colors } from "../../utils/Constants";
-import { FONTS } from "../styles/fonts";
-import Text from "../Text";
-
-const { Other } = Activity.Enums.ActivityEnum;
-
-/**
-Component used to displat the user's physical activity type icon
-Mapping from ActivityEnums to corresponding image resource.
-*/
-
-export default class ActivityIcon extends React.Component<IActivityDisplayProps> {
-	/**
-	 * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
-	 */
-	public getActivityIcon = (props?: SvgProps): JSX.Element => {
-		const ACTIVITY_ICONS: Record<Activity.Enums.ActivityEnum, JSX.Element> = {
-			Run: Running(props),
-			Walk: Walking(props),
-			Cycling: Cycling(props),
-			Swim: Swimming(props),
-			Other: Stretching(props),
-		};
-		return ACTIVITY_ICONS[this.props.activityType ?? Other];
-	};
-
-	/**
-	 * Steps:
-	 * 1. Unpack activityType and activityTitle from props.
-	 * 2. Create a testID string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
-	 * @returns A JSX element including the following:
-	 * 1. An svg component with the generated testID displaying the icon from getActivityIcon().
-	 * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
-	 */
-	public render(): JSX.Element | null {
-		const { activityType, activityTitle } = this.props;
-		const testID = `${Activity.Enums.ActivityEnum[activityType ?? Other]}-icon`.toLowerCase();
-
-		return (
-			<View style={styles.container}>
-				{this.getActivityIcon({ testID, style: styles.icon })}
-				<Text style={styles.activityTitle}>{activityTitle || t(`Untitled Activity`)}</Text>
-			</View>
-		);
-	}
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: `row`,
-		alignItems: `center`,
-		marginBottom: 6,
-	},
-	activityTitle: {
-		...FONTS.Poppins.regular_SM,
-		color: colors.white,
-		marginLeft: 4,
-	},
-	icon: {
-		width: 20,
-		height: 20,
-	},
-});

package/src/components/activity/ActivityIntensity.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-
-import { Activity, BolusCalculator } from "@hedia/types";
-
-import {} from "../../types/types";
-import { colors } from "../../utils/Constants";
-import { ActivityIntensityTranslations } from "../../utils/Translations";
-import { FONTS } from "../styles/fonts";
-import Text from "../Text";
-
-export interface IProps {
-	/** - Indicates the intensity of the activity. */
-	activityIntensity: BolusCalculator.Types.IActivityParams["activityIntensity"];
-}
-
-/** Component used to display the users's physical activity intensity on its corresponding background color */
-export default class ActivityIntensity extends React.Component<IProps> {
-	/**
-	 * Steps:
-	 * 1. Set intensity to the activityIntensity prop.
-	 * 2. Set the style variable to the style that correspond to the intensity.
-	 * @returns JSX element that displays the intensity of the user’s activity along with the associated color coding
-	 */
-	public render = (): JSX.Element => {
-		const intensity = this.props.activityIntensity;
-		const style = activityIntensityStyles[intensity];
-
-		return (
-			<View style={activityIntensityStyles.row}>
-				<View style={[activityIntensityStyles.intensityTextContainer, style]}>
-					<Text style={activityIntensityStyles.text} testID={`intensity-${intensity}`}>
-						{ActivityIntensityTranslations[intensity]()}
-					</Text>
-				</View>
-			</View>
-		);
-	};
-}
-
-const activityIntensityStyles = StyleSheet.create({
-	row: {
-		flexDirection: `row`,
-		marginBottom: 6,
-		minHeight: 24,
-	},
-	intensityTextContainer: {
-		alignItems: `center`,
-		justifyContent: `center`,
-		borderRadius: 5,
-		paddingVertical: 4,
-		paddingHorizontal: 17.5,
-	},
-	[Activity.Enums.ActivityIntensity.light]: {
-		backgroundColor: colors.activityGreen,
-	},
-	[Activity.Enums.ActivityIntensity.moderate]: {
-		backgroundColor: colors.activityOrange,
-	},
-	[Activity.Enums.ActivityIntensity.hard]: {
-		backgroundColor: colors.activityRed,
-	},
-	text: {
-		...FONTS.Poppins.medium_XS,
-		color: colors.black,
-	},
-});

package/src/components/mood/Emotion.tsx

@@ -1,97 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-
-import { Logbook } from "@hedia/types";
-
-import { t } from "../../locales/translate";
-import { colors } from "../../utils/Constants";
-import { FONTS } from "../styles/fonts";
-import Text from "../Text";
-import MoodIcon from "./MoodIcon";
-
-const MoodEnum = Logbook.Enums.MoodEnum;
-
-export interface IProps {
-	/** Indicates which mood if any that is currently selected. */
-	currentMood: Logbook.Enums.MoodEnum | null;
-	/**
-	 * Callback function to call when the selected icon changes. Takes a single optional argument, mood, which is a {@link Logbook.Enums.MoodEnum} | null.
-	 * Doesn’t have a return value.
-	 * */
-	moodSelected(mood: Logbook.Enums.MoodEnum | null): void;
-}
-
-/** The Emotion component displays a horizontally arranged set of icons representing various moods and allows the user to select one. */
-export default class Emotion extends React.Component<IProps> {
-	/**
-	 * Handle what should happen when the user picks taps on one of the mood icons.
-	 *
-	 * Steps:
-	 * 1. Call the moodSelected prop callback function with selected as argument if toggle is true and null as argument otherwise.
-	 * @param selected Integer number that represents the icon that was tapped.
-	 * @param toggle Boolean indicating whether the icon should be deselected.
-	 */
-	public handleIconPress = (selected: Logbook.Enums.MoodEnum, toggle: boolean): void => {
-		this.props.moodSelected(toggle ? selected : null);
-	};
-
-	/**
-	 * Compose a sequence of MoodIcons
-	 *
-	 * Steps:
-	 * 1. Make a sequence of MoodEnum values from the properties of the MoodEnum object and save the sequence as a variable named values.
-	 * 2. Map each of the elements of the values sequence to a MoodIcon.
-	 * @returns JSX Element consisting of an array of MoodIcon components.
-	 */
-	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}
-				/>
-			);
-		});
-	};
-
-	/**
-	 * @returns JSX element to display the mood icons from mappedMoods() in a horizontal arrangement.
-	 */
-	public render(): JSX.Element {
-		return (
-			<View style={emotionStyles.container}>
-				<Text style={emotionStyles.feelingText} maxFontSizeMultiplier={1}>
-					{t(`How are you feeling?`)}
-				</Text>
-				<View style={emotionStyles.moodIconContainer}>{this.mappedMoods()}</View>
-			</View>
-		);
-	}
-}
-
-const emotionStyles = StyleSheet.create({
-	container: {
-		flex: 1,
-		paddingHorizontal: 40,
-		marginBottom: 32,
-	},
-	feelingText: {
-		...FONTS.Poppins.regular_Base,
-		textAlign: `center`,
-		color: colors.white,
-		marginBottom: 8,
-	},
-	moodIconContainer: {
-		flex: 1,
-		flexDirection: `row`,
-		justifyContent: `center`,
-		paddingHorizontal: 40,
-	},
-});

package/src/components/mood/MoodIcon.tsx

@@ -1,91 +0,0 @@
-import React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
-
-import { Logbook } from "@hedia/types";
-
-import Happy from "../../assets/IconsSVG/mood/Happy";
-import Neutral from "../../assets/IconsSVG/mood/Neutral";
-import Sad from "../../assets/IconsSVG/mood/Sad";
-import SemiHappy from "../../assets/IconsSVG/mood/SemiHappy";
-import SemiSad from "../../assets/IconsSVG/mood/SemiSad";
-
-const MoodEnum = Logbook.Enums.MoodEnum;
-
-export interface IProps {
-	/** Which mood the mood component should represent. */
-	mood: Logbook.Enums.MoodEnum;
-	/** Boolean indicating whether the mood component represents the currently active mood. */
-	active: boolean;
-	/**
-	 * Callback function to be called when the mood icon is pressed.
-	 * The function has no return value.
-	 * @param toggle  Boolean value to indicate whether the icon should be turned on (if true) or off (if false).
-	 */
-	onPress(toggle: boolean): void;
-}
-const styles = StyleSheet.create({
-	icon: {
-		flex: 1,
-		width: 40,
-		height: 40,
-		marginHorizontal: 6,
-	},
-});
-
-/** Mapping from {@link Logbook.Enums.MoodEnum} to corresponding image resources */
-export const MOODS_INACTIVE: Record<number, JSX.Element> = {
-	1: Sad(false, { style: styles.icon }),
-	2: SemiSad(false, { style: styles.icon }),
-	3: Neutral(false, { style: styles.icon }),
-	4: SemiHappy(false, { style: styles.icon }),
-	5: Happy(false, { style: styles.icon }),
-};
-
-/** Mapping from {@link Logbook.Enums.MoodEnum} to corresponding image resources */
-export const MOODS_ACTIVE: Record<number, JSX.Element> = {
-	1: Sad(true, { style: styles.icon }),
-	2: SemiSad(true, { style: styles.icon }),
-	3: Neutral(true, { style: styles.icon }),
-	4: SemiHappy(true, { style: styles.icon }),
-	5: Happy(true, { style: styles.icon }),
-};
-
-/** Component to display a mood icon base on its props. */
-export default class MoodIcon extends React.Component<IProps> {
-	/**
-	 * Get the icon image resource that should be displayed for the mood icon.
-	 *
-	 * Steps:
-	 * 1. If the active prop is true, return the value from the MOODS_ACTIVE constant that corresponds to the value of the mood prop.
-	 * 2. (Only reached if the active prop is false) Return the value from the MOODS_INACTIVE constant that corresponds to the value of the mood prop.
-	 * @returns Image resource that should be displayed for the mood icon.
-	 */
-	public getMoodIcon = (): JSX.Element => {
-		if (this.props.active) {
-			return MOODS_ACTIVE[this.props.mood];
-		}
-		return MOODS_INACTIVE[this.props.mood];
-	};
-
-	/**
-	 * Handle what happens when the mood icon is pressed.
-	 *
-	 * Steps:
-	 * 1. Call the onPress prop callback function with the toggle argument set to the inverse value of the active prop.
-	 */
-	public handleOnPress = (): void => {
-		this.props.onPress(!this.props.active);
-	};
-
-	/** JSX element to display the mood icon retrieved using the getMoodIcon() method. */
-	public render(): JSX.Element {
-		const { mood, active } = this.props;
-		const testID = `${MoodEnum[mood]}-${active}`;
-
-		return (
-			<TouchableOpacity onPress={this.handleOnPress} testID={testID}>
-				{this.getMoodIcon()}
-			</TouchableOpacity>
-		);
-	}
-}