@hedia/recommendation-screen 1.0.7 → 1.1.1

package/src/components/activity/Activity.jsx

@@ -0,0 +1,68 @@
+"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 InfoBars_1 = require("../InfoBars");
+const ActivityIcon_1 = __importDefault(require("./ActivityIcon"));
+const ActivityIntensity_1 = __importDefault(require("./ActivityIntensity"));
+class Activity extends react_1.default.Component {
+    render() {
+        const { activity, activityType, activityReduction } = this.props;
+        const reductionPercentage = (activityReduction * 100).toFixed(0);
+        return (<react_native_1.View style={[InfoBars_1.infoStyles.container, activityStyles.botMargin]}>
+				<react_native_1.View style={InfoBars_1.infoStyles.margin}>
+					<react_native_1.View style={InfoBars_1.infoStyles.border}>
+						<react_native_1.View style={InfoBars_1.infoStyles.borderContainer}>
+							<react_native_1.View style={InfoBars_1.infoStyles.labelContainer}>
+								<react_native_1.Text style={InfoBars_1.infoStyles.label}>{i18nUtils_1.i18n._(macro_1.t `Activity`)}</react_native_1.Text>
+							</react_native_1.View>
+							<react_native_1.View style={InfoBars_1.infoStyles.valueUnitContainer}>
+								<react_native_1.View style={InfoBars_1.infoStyles.valueContainer}>
+									<react_native_1.Text style={InfoBars_1.infoStyles.value}>{activity.activityDuration}</react_native_1.Text>
+								</react_native_1.View>
+								<react_native_1.View style={InfoBars_1.infoStyles.unitContainer}>
+									<react_native_1.Text style={InfoBars_1.infoStyles.units}>{i18nUtils_1.i18n._(macro_1.t `min`)}</react_native_1.Text>
+								</react_native_1.View>
+							</react_native_1.View>
+						</react_native_1.View>
+						<ActivityIcon_1.default activityType={activityType} activityTitle={activity.activityTitle}/>
+						<ActivityIntensity_1.default activityIntensity={activity.activityIntensity}/>
+						<react_native_1.View style={[InfoBars_1.infoStyles.borderContainer, activityStyles.topMargin]}>
+							<react_native_1.Text style={activityStyles.infoText}>
+								{i18nUtils_1.i18n._(macro_1.t `Based on the selected activity your insulin recommendation is reduced by:`)}
+							</react_native_1.Text>
+						</react_native_1.View>
+						<react_native_1.View style={[InfoBars_1.infoStyles.borderContainer, activityStyles.verticalMargin]}>
+							<react_native_1.Text style={activityStyles.reductionPercentage}>{reductionPercentage}%</react_native_1.Text>
+						</react_native_1.View>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = Activity;
+const activityStyles = react_native_1.StyleSheet.create({
+    topMargin: {
+        marginTop: `2%`,
+    },
+    botMargin: {
+        marginBottom: `2%`,
+    },
+    verticalMargin: {
+        marginBottom: `2%`,
+    },
+    infoText: {
+        color: `rgba(160, 180, 240, 1)`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 24,
+    },
+    reductionPercentage: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 18,
+        fontWeight: `bold`,
+    },
+});

package/src/components/activity/Activity.tsx

@@ -0,0 +1,74 @@
+import { IRecommendationParams } from "@hedia/recommendation-calculator";
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { i18n } from "../../locale/i18nUtils";
+import { IActivityTitle, IActivityType } from "../../types/types";
+import { infoStyles } from "../InfoBars";
+import ActivityIcon from "./ActivityIcon";
+import ActivityIntensity from "./ActivityIntensity";
+
+interface IProps extends IActivityType {
+	activity: IRecommendationParams["activity"] & IActivityTitle;
+	activityReduction: number;
+}
+
+export default class Activity extends React.Component<IProps> {
+	public render(): JSX.Element {
+		const { activity, activityType, activityReduction } = this.props;
+		const reductionPercentage = (activityReduction * 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={activity.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}>{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`,
+		fontSize: Dimensions.get(`screen`).width / 18,
+		fontWeight: `bold`,
+	},
+});

package/src/components/activity/ActivityIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ImageURISource } from "react-native";
+import { IActivityTitle, IActivityType } from "../../types/types";
+export default class ActivityIcon extends React.Component<IActivityType & IActivityTitle> {
+    getActivityIcon: () => ImageURISource;
+    render(): JSX.Element;
+}

package/src/components/activity/ActivityIcon.jsx

@@ -0,0 +1,50 @@
+"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 ACTIVITY_ICONS = {
+    0: require(`../../assets/activity/Runner.png`),
+    1: require(`../../assets/activity/Walk.png`),
+    2: require(`../../assets/activity/Cyclist.png`),
+    3: require(`../../assets/activity/Swimmer.png`),
+    4: require(`../../assets/activity/Other.png`),
+};
+class ActivityIcon extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.getActivityIcon = () => {
+            return ACTIVITY_ICONS[this.props.activityType];
+        };
+    }
+    render() {
+        const { activityType, activityTitle } = this.props;
+        const label = `${enum_1.ActivityEnum[activityType]}_activity`;
+        return (<react_native_1.View style={activityIconStyles.container}>
+				<react_native_1.Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} accessibilityLabel={label}/>
+				<react_native_1.Text style={activityIconStyles.activityTitle}>{activityTitle ?? i18nUtils_1.i18n._(macro_1.t `Untitled Activity`)}</react_native_1.Text>
+			</react_native_1.View>);
+    }
+}
+exports.default = ActivityIcon;
+const activityIconStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: `row`,
+        alignItems: `center`,
+        marginTop: `1%`,
+    },
+    activityIcon: {
+        resizeMode: `contain`,
+        height: react_native_1.Dimensions.get(`screen`).width / 16,
+    },
+    activityTitle: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 25,
+    },
+});

package/src/components/activity/ActivityIcon.tsx

@@ -0,0 +1,52 @@
+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 { ActivityEnum } from "../../types/enum";
+import { IActivityTitle, IActivityType } from "../../types/types";
+
+const ACTIVITY_ICONS: Record<ActivityEnum, ImageURISource> = {
+	0: require(`../../assets/activity/Runner.png`),
+	1: require(`../../assets/activity/Walk.png`),
+	2: require(`../../assets/activity/Cyclist.png`),
+	3: require(`../../assets/activity/Swimmer.png`),
+	4: require(`../../assets/activity/Other.png`),
+};
+
+export default class ActivityIcon extends React.Component<IActivityType & IActivityTitle> {
+	public getActivityIcon = (): ImageURISource => {
+		return ACTIVITY_ICONS[this.props.activityType];
+	};
+
+	public render(): JSX.Element {
+		const { activityType, activityTitle } = this.props;
+		const label = `${ActivityEnum[activityType]}_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.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { IActivityIntensity } from "../../types/types";
+export default class ActivityIntensity extends React.Component<IActivityIntensity> {
+    render: () => JSX.Element;
+}

package/src/components/activity/ActivityIntensity.jsx

@@ -0,0 +1,67 @@
+"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 InfoBars_1 = require("../InfoBars");
+const Handler = {
+    Light: () => i18nUtils_1.i18n._(macro_1.t `Light`),
+    Moderate: () => i18nUtils_1.i18n._(macro_1.t `Moderate`),
+    Hard: () => i18nUtils_1.i18n._(macro_1.t `Hard`),
+    Post: () => i18nUtils_1.i18n._(macro_1.t `Post`),
+};
+class ActivityIntensity extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.render = () => {
+            const intensity = this.props.activityIntensity;
+            const style = activityIntensityStyles[intensity];
+            return (<react_native_1.View style={[InfoBars_1.infoStyles.margin, activityIntensityStyles.row]}>
+				<react_native_1.View style={activityIntensityStyles.intensityContainer}>
+					<react_native_1.View style={[activityIntensityStyles.intensityTextContainer, style]}>
+						<react_native_1.Text style={activityIntensityStyles.bold}>{Handler[this.props.activityIntensity]()}</react_native_1.Text>
+					</react_native_1.View>
+				</react_native_1.View>
+				<react_native_1.View style={activityIntensityStyles.intensityContainerOffset}/>
+			</react_native_1.View>);
+        };
+    }
+}
+exports.default = ActivityIntensity;
+const activityIntensityStyles = react_native_1.StyleSheet.create({
+    row: {
+        flexDirection: `row`,
+    },
+    intensityTextContainer: {
+        alignItems: `center`,
+        justifyContent: `center`,
+        padding: `5%`,
+        borderRadius: 5,
+    },
+    Light: {
+        backgroundColor: `#A5D871`,
+    },
+    Moderate: {
+        backgroundColor: `#F9BD5A`,
+    },
+    Hard: {
+        backgroundColor: `#EC5466`,
+    },
+    Post: {
+        backgroundColor: `#C5D0E7`,
+    },
+    intensityContainer: {
+        flex: 5,
+    },
+    intensityContainerOffset: {
+        flex: 16,
+    },
+    bold: {
+        fontWeight: `bold`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 30,
+    },
+});

package/src/components/activity/ActivityIntensity.tsx

@@ -0,0 +1,66 @@
+import { ActivityIntensity as Intensity } from "@hedia/recommendation-calculator/src/RecommendationCalculator";
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { i18n } from "../../locale/i18nUtils";
+import { IActivityIntensity } from "../../types/types";
+import { infoStyles } from "../InfoBars";
+
+const Handler: Record<Intensity, () => string> = {
+	Light: (): string => i18n._(t`Light`),
+	Moderate: (): string => i18n._(t`Moderate`),
+	Hard: (): string => i18n._(t`Hard`),
+	Post: (): string => i18n._(t`Post`),
+};
+
+export default class ActivityIntensity extends React.Component<IActivityIntensity> {
+	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}>{Handler[this.props.activityIntensity]()}</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`,
+	},
+	Post: {
+		backgroundColor: `#C5D0E7`,
+	},
+	intensityContainer: {
+		flex: 5,
+	},
+	intensityContainerOffset: {
+		flex: 16,
+	},
+	bold: {
+		fontWeight: `bold`,
+		fontSize: Dimensions.get(`screen`).width / 30,
+	},
+});

package/src/components/mood/Emotion.d.ts

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

package/src/components/{Emotion.jsx → mood/Emotion.jsx}

@@ -3,36 +3,32 @@ 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 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(toggle ? selected : null);
+        };
+        this.MappedMoods = () => {
+            const values = Object.values(enum_1.MoodEnum).filter((val) => isNaN(Number(val)));
+            return values.map((key) => {
+                const moodValue = enum_1.MoodEnum[key];
+                return (<MoodIcon_1.default onPress={(toggle) => this.handleIconPress(moodValue, toggle)} active={moodValue === this.props.currentMood} mood={moodValue} key={moodValue}/>);
             });
-            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._("How are you feeling?")}</react_native_1.Text>
+					<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 style={emotionStyles.moodIconContainer}>{this.MappedMoods()}</react_native_1.View>
 			</react_native_1.View>);
     }
 }

package/src/components/mood/Emotion.tsx

@@ -0,0 +1,64 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { i18n } from "../../locale/i18nUtils";
+import { MoodEnum } from "../../types/enum";
+import MoodIcon from "./MoodIcon";
+
+interface IProps {
+	currentMood?: MoodEnum;
+	moodSelected(mood?: MoodEnum): void;
+}
+
+type value = keyof typeof MoodEnum;
+
+export default class Emotion extends React.Component<IProps> {
+	public handleIconPress = (selected: number, 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<value>;
+
+		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` },
+});

package/src/components/{MoodIcon.d.ts → mood/MoodIcon.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 import { ImageURISource } from "react-native";
-import { MoodEnum } from "../types/enum";
+import { MoodEnum } from "../../types/enum";
 interface IProps {
     mood: MoodEnum;
     active: boolean;

package/src/components/{MoodIcon.jsx → mood/MoodIcon.jsx}

@@ -5,29 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
-const enum_1 = require("../types/enum");
-const moods_inactive = {
-    1: require(`../assets/sad.png`),
-    2: require(`../assets/semi_sad.png`),
-    3: require(`../assets/neutral.png`),
-    4: require(`../assets/semi_happy.png`),
-    5: require(`../assets/happy.png`),
+const enum_1 = require("../../types/enum");
+const MOODS_INACTIVE = {
+    1: require(`../../assets/mood/sad.png`),
+    2: require(`../../assets/mood/semi_sad.png`),
+    3: require(`../../assets/mood/neutral.png`),
+    4: require(`../../assets/mood/semi_happy.png`),
+    5: require(`../../assets/mood/happy.png`),
 };
-const moods_active = {
-    1: require(`../assets/sad_active.png`),
-    2: require(`../assets/semi_sad_active.png`),
-    3: require(`../assets/neutral_active.png`),
-    4: require(`../assets/semi_happy_active.png`),
-    5: require(`../assets/happy_active.png`),
+const MOODS_ACTIVE = {
+    1: require(`../../assets/mood/sad_active.png`),
+    2: require(`../../assets/mood/semi_sad_active.png`),
+    3: require(`../../assets/mood/neutral_active.png`),
+    4: require(`../../assets/mood/semi_happy_active.png`),
+    5: require(`../../assets/mood/happy_active.png`),
 };
 class MoodIcon extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.getMoodIcon = () => {
             if (this.props.active) {
-                return moods_active[this.props.mood];
+                return MOODS_ACTIVE[this.props.mood];
             }
-            return moods_inactive[this.props.mood];
+            return MOODS_INACTIVE[this.props.mood];
         };
         this.handleOnPress = () => {
             this.props.onPress(!this.props.active);

package/src/components/{MoodIcon.tsx → mood/MoodIcon.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dimensions, Image, ImageURISource, StyleSheet, TouchableOpacity } from "react-native";
-import { MoodEnum } from "../types/enum";
+import { MoodEnum } from "../../types/enum";
 
 interface IProps {
 	mood: MoodEnum;
@@ -8,35 +8,35 @@ interface IProps {
 	onPress(toggle: boolean): void;
 }
 
-const moods_inactive: Record<number, ImageURISource> = {
-	1: require(`../assets/sad.png`),
-	2: require(`../assets/semi_sad.png`),
-	3: require(`../assets/neutral.png`),
-	4: require(`../assets/semi_happy.png`),
-	5: require(`../assets/happy.png`),
+const MOODS_INACTIVE: Record<number, ImageURISource> = {
+	1: require(`../../assets/mood/sad.png`),
+	2: require(`../../assets/mood/semi_sad.png`),
+	3: require(`../../assets/mood/neutral.png`),
+	4: require(`../../assets/mood/semi_happy.png`),
+	5: require(`../../assets/mood/happy.png`),
 };
 
-const moods_active: Record<number, ImageURISource> = {
-	1: require(`../assets/sad_active.png`),
-	2: require(`../assets/semi_sad_active.png`),
-	3: require(`../assets/neutral_active.png`),
-	4: require(`../assets/semi_happy_active.png`),
-	5: require(`../assets/happy_active.png`),
+const MOODS_ACTIVE: Record<number, ImageURISource> = {
+	1: require(`../../assets/mood/sad_active.png`),
+	2: require(`../../assets/mood/semi_sad_active.png`),
+	3: require(`../../assets/mood/neutral_active.png`),
+	4: require(`../../assets/mood/semi_happy_active.png`),
+	5: require(`../../assets/mood/happy_active.png`),
 };
 
 export default class MoodIcon extends React.Component<IProps> {
 	public getMoodIcon = (): ImageURISource => {
 		if (this.props.active) {
-			return moods_active[this.props.mood];
+			return MOODS_ACTIVE[this.props.mood];
 		}
-		return moods_inactive[this.props.mood];
+		return MOODS_INACTIVE[this.props.mood];
 	};
 
-	public handleOnPress = () => {
+	public handleOnPress = (): void => {
 		this.props.onPress(!this.props.active);
 	};
 
-	public render() {
+	public render(): JSX.Element {
 		const { mood, active } = this.props;
 		const label = `${MoodEnum[mood]}_${active}`;
 		return (