Merge pull request #1507 from ever-co/develop

Release
ever-co · Oct 5, 2023 · 38b91bf · 38b91bf
2 parents 52445c6 + 2aa5724
commit 38b91bf
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 70 deletions.
diff --git a/apps/mobile/app/components/HeaderTimer.tsx b/apps/mobile/app/components/HeaderTimer.tsx
@@ -1,11 +1,15 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
 import { observer } from "mobx-react-lite"
 import React from "react"
-import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native"
 import { ProgressBar } from "react-native-paper"
 import { pad } from "../helpers/number"
 import { useStores } from "../models"
 import { useTimer } from "../services/hooks/useTimer"
 import { typography, useAppTheme } from "../theme"
+import { SvgXml } from "react-native-svg"
+import { timerSmallPlayIcon, timerSmallStopIcon } from "./svgs/icons"
 
 const HeaderTimer = observer(() => {
 	const { colors } = useAppTheme()
@@ -50,9 +54,10 @@ const HeaderTimer = observer(() => {
 				onPress={() => handleTimer()}
 			>
 				{localTimerStatus.running ? (
-					<Image style={styles.btnImage} source={require("../../assets/icons/new/stop-blue.png")} />
+					// <Image style={styles.btnImage} source={require("../../assets/icons/new/stop-blue.png")} />
+					<SvgXml xml={timerSmallStopIcon} />
 				) : (
-					<Image style={styles.btnImage} source={require("../../assets/icons/new/play.png")} />
+					<SvgXml xml={timerSmallPlayIcon} />
 				)}
 			</TouchableOpacity>
 			<View style={styles.progressContainer}>
@@ -84,17 +89,18 @@ const styles = StyleSheet.create({
 		borderWidth: 1,
 		elevation: 10,
 		flexDirection: "row",
+		gap: 9,
 		height: 38,
-		justifyContent: "space-around",
+		justifyContent: "center",
 		shadowColor: "rgba(0, 0, 0, 0.1)",
 		shadowOffset: { width: 5, height: 5 },
 		shadowOpacity: 0.3,
 		shadowRadius: 1,
-		width: "100%",
+		width: 126,
 	},
 	progressContainer: {
 		height: 21,
-		width: "60%",
+		width: "65%",
 	},
 	smallTxt: {
 		fontSize: 8,

diff --git a/apps/mobile/app/components/TimerButton.tsx b/apps/mobile/app/components/TimerButton.tsx
@@ -1,23 +1,25 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
-import { LinearGradient } from "expo-linear-gradient"
+// import { LinearGradient } from "expo-linear-gradient"
 import { observer } from "mobx-react-lite"
 import React, { FC } from "react"
-import { View, StyleSheet, Image, ViewStyle, ImageStyle, Pressable } from "react-native"
+import { View, StyleSheet, ViewStyle, ImageStyle, Pressable } from "react-native"
 
 import { GLOBAL_STYLE as GS } from "../../assets/ts/styles"
 import { useStores } from "../models"
 import { useTimer } from "../services/hooks/useTimer"
 import { ITeamTask } from "../services/interfaces/ITask"
 import { useAppTheme } from "../theme"
+import { SvgXml } from "react-native-svg"
+import { timerLargePlayIcon, timerLargeStopIcon } from "./svgs/icons"
 
 type TimerButtonProps = {
 	task?: ITeamTask
 	containerStyle?: ViewStyle
 	iconStyle?: ImageStyle
 }
 
-const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle }) => {
+const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle }) => {
 	const {
 		TimerStore: { localTimerStatus },
 	} = useStores()
@@ -38,25 +40,15 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle
 							disabled={!canRunTimer}
 							onPress={() => startTimer()}
 						>
-							<Image
-								resizeMode="contain"
-								style={[styles.timerIcon, iconStyle]}
-								source={require("../../assets/icons/new/play.png")}
-							/>
+							<SvgXml xml={timerLargePlayIcon} />
 						</Pressable>
 					</>
 				) : (
-					<Pressable onPress={() => stopTimer()} style={[styles.timerBtnInactive, containerStyle]}>
-						<LinearGradient
-							colors={["#E93CB9", "#6A71E7"]}
-							style={[styles.timerBtnInactive, containerStyle]}
-						>
-							<Image
-								resizeMode="contain"
-								style={[styles.timerIcon, iconStyle]}
-								source={require("../../assets/icons/new/stop.png")}
-							/>
-						</LinearGradient>
+					<Pressable
+						onPress={() => stopTimer()}
+						style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]}
+					>
+						<SvgXml xml={timerLargeStopIcon} />
 					</Pressable>
 				)}
 			</View>
@@ -76,20 +68,15 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle
 						disabled={!canRunTimer}
 						onPress={() => (canRunTimer ? startTimer() : {})}
 					>
-						<Image
-							resizeMode="contain"
-							style={[styles.timerIcon, iconStyle]}
-							source={require("../../assets/icons/new/play.png")}
-						/>
+						<SvgXml xml={timerLargePlayIcon} />
 					</Pressable>
 				</>
 			) : (
-				<Pressable onPress={() => stopTimer()} style={[styles.timerBtnInactive, containerStyle]}>
-					<Image
-						resizeMode="contain"
-						style={[styles.timerIcon, iconStyle]}
-						source={require("../../assets/icons/new/stop.png")}
-					/>
+				<Pressable
+					onPress={() => stopTimer()}
+					style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]}
+				>
+					<SvgXml xml={timerLargeStopIcon} />
 				</Pressable>
 			)}
 		</View>
@@ -99,6 +86,22 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle
 export default TimerButton
 
 const styles = StyleSheet.create({
+	timerBtnActive: {
+		alignItems: "center",
+		backgroundColor: "#3826A6",
+		borderColor: "rgba(0, 0, 0, 0.1)",
+		borderRadius: 30,
+		borderWidth: 1,
+		elevation: 5,
+		height: 60,
+		justifyContent: "center",
+		marginHorizontal: 15,
+		shadowColor: "#e11d48",
+		shadowOffset: { width: 1, height: 1.5 },
+		shadowOpacity: 0.5,
+		shadowRadius: 5,
+		width: 60,
+	},
 	timerBtnInactive: {
 		alignItems: "center",
 		backgroundColor: "#3826A6",

diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx
@@ -175,3 +175,90 @@ export const userActive = `<svg width="18" height="18" viewBox="0 0 18 18" fill=
 <path d="M9 9C11.0711 9 12.75 7.32107 12.75 5.25C12.75 3.17893 11.0711 1.5 9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25C5.25 7.32107 6.92893 9 9 9Z" fill="#3826A6"/>
 <path d="M9.00012 10.875C5.24262 10.875 2.18262 13.395 2.18262 16.5C2.18262 16.71 2.34762 16.875 2.55762 16.875H15.4426C15.6526 16.875 15.8176 16.71 15.8176 16.5C15.8176 13.395 12.7576 10.875 9.00012 10.875Z" fill="#3826A6"/>
 </svg>`
+
+export const timerLargeStopIcon = `<svg
+			width="30"
+			height="30"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="white"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="white"
+			/>
+		</svg>`
+
+export const timerMediumStopIcon = `<svg
+			width="21"
+			height="21"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="white"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="white"
+			/>
+		</svg>`
+
+export const timerSmallStopIcon = `<svg
+			width="17"
+			height="17"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="#e11d48"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="#e11d48"
+			/>
+		</svg>`
+
+export const timerLargePlayIcon = `<svg
+			width="30"
+			height="30"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
+
+export const timerMediumPlayIcon = `<svg
+			width="21"
+			height="21"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
+
+export const timerSmallPlayIcon = `<svg
+			width="17"
+			height="17"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx
@@ -1,16 +1,18 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
 
-import React, { FC, useMemo } from "react"
+import React, { FC } from "react"
 import { LinearGradient } from "expo-linear-gradient"
-import { Image, StyleSheet } from "react-native"
+import { StyleSheet } from "react-native"
 import { useStores } from "../../../../models"
 import { useTimer } from "../../../../services/hooks/useTimer"
 import { observer } from "mobx-react-lite"
 import { ITeamTask } from "../../../../services/interfaces/ITask"
 import { useTeamTasks } from "../../../../services/hooks/features/useTeamTasks"
 import { TouchableOpacity } from "react-native-gesture-handler"
 import { useAppTheme } from "../../../../theme"
+import { SvgXml } from "react-native-svg"
+import { timerMediumPlayIcon, timerMediumStopIcon } from "../../../../components/svgs/icons"
 
 interface Props {
 	isActiveTask: boolean
@@ -44,39 +46,45 @@ const TimerButton: FC<Props> = observer(({ isActiveTask, task }) => {
 				style={[
 					styles.timerBtn,
 					{
-						backgroundColor: colors.background,
-						borderColor: colors.border,
+						backgroundColor:
+							localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background,
+						borderColor: localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background,
 					},
 				]}
 				onPress={() => handleStartTimer()}
 			>
-				<Image
-					resizeMode="contain"
-					style={styles.timerIcon}
-					source={
-						localTimerStatus.running && isActiveTask
-							? require("../../../../../assets/icons/new/stop-blue.png")
-							: require("../../../../../assets/icons/new/play.png")
-					}
-				/>
+				{localTimerStatus.running && isActiveTask ? (
+					<SvgXml xml={timerMediumStopIcon} />
+				) : (
+					<SvgXml xml={timerMediumPlayIcon} />
+				)}
 			</TouchableOpacity>
 		)
 	}
 
 	return (
-		<LinearGradient colors={["#E93CB9", "#6A71E7"]} style={styles.timerBtn}>
-			<TouchableOpacity onPress={() => handleStartTimer()}>
-				<Image
-					resizeMode="contain"
-					style={styles.timerIcon}
-					source={
-						localTimerStatus.running && isActiveTask
-							? require("../../../../../assets/icons/new/stop.png")
-							: require("../../../../../assets/icons/new/play-dark.png")
-					}
-				/>
-			</TouchableOpacity>
-		</LinearGradient>
+		<>
+			{localTimerStatus.running && isActiveTask ? (
+				<TouchableOpacity
+					style={[
+						styles.timerBtn,
+						{
+							backgroundColor: "#e11d48",
+							borderColor: "#e11d48",
+						},
+					]}
+					onPress={() => handleStartTimer()}
+				>
+					<SvgXml xml={timerMediumStopIcon} />
+				</TouchableOpacity>
+			) : (
+				<LinearGradient colors={["#E93CB9", "#6A71E7"]} style={styles.timerBtn}>
+					<TouchableOpacity onPress={() => handleStartTimer()}>
+						<SvgXml xml={timerMediumPlayIcon} />
+					</TouchableOpacity>
+				</LinearGradient>
+			)}
+		</>
 	)
 })
 

diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx
@@ -19,11 +19,17 @@ export const WorkedOnTask: FC<IProps> = observer(({ memberInfo, period }) => {
 	// Get current timer seconds
 	const { isAuthUser, memberTask } = memberInfo
 
-	const { getTaskStat, activeTaskDailyStat, activeTaskTotalStat } = useTaskStatistics()
+	// activeTaskDailyStat and activeTaskTotalStat removed from useTaskStatistics call
+	const { getTaskStat } = useTaskStatistics()
+
+	const { taskTotalStat, taskDailyStat } = getTaskStat(memberTask)
 
 	if (isAuthUser) {
-		const { h: th, m: tm } = secondsToTime(activeTaskTotalStat?.duration || 0)
-		const { h: dh, m: dm } = secondsToTime(activeTaskDailyStat?.duration || 0)
+		// const { h: th, m: tm } = secondsToTime(activeTaskTotalStat?.duration || 0)
+		// const { h: dh, m: dm } = secondsToTime(activeTaskDailyStat?.duration || 0)
+
+		const { h: th, m: tm } = secondsToTime(taskTotalStat?.duration || 0)
+		const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0)
 		return (
 			<>
 				{period === "Daily" ? (
@@ -45,8 +51,6 @@ export const WorkedOnTask: FC<IProps> = observer(({ memberInfo, period }) => {
 		)
 	}
 
-	const { taskTotalStat, taskDailyStat } = getTaskStat(memberTask)
-
 	const { h: th, m: tm } = secondsToTime(taskTotalStat?.duration || 0)
 	const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0)
 	return (

diff --git a/apps/mobile/app/services/hooks/features/useTaskStatics.ts b/apps/mobile/app/services/hooks/features/useTaskStatics.ts
@@ -89,6 +89,10 @@ export function useTaskStatistics(addSeconds = 0) {
 		return data
 	}, [activeTask]) // If there are a lot of tasks to load might cause slow load, as fetching a lot, depending on task count
 
+	/*
+   Commented the bellow function as it fetches often causing performance issues
+  */
+
 	// const debounceLoadActiveTaskStat = useCallback(debounce(getActiveTaskStatData, 100), [
 	// 	activeTaskId,
 	// ])