1
1
mirror of https://github.com/theoludwig/p61-project.git synced 2024-07-17 07:00:12 +02:00
p61-project/presentation/react-native/components/HabitsMainPage/HabitCard.tsx

119 lines
3.3 KiB
TypeScript
Raw Normal View History

2024-05-02 23:48:47 +02:00
import type { IconName } from "@fortawesome/free-solid-svg-icons"
2024-04-12 23:13:38 +02:00
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"
2024-03-24 23:41:23 +01:00
import { useRouter } from "expo-router"
2024-05-02 23:48:47 +02:00
import type LottieView from "lottie-react-native"
2024-04-11 12:32:09 +02:00
import { useState } from "react"
2024-04-11 23:03:45 +02:00
import { View } from "react-native"
import { Checkbox, List, Text } from "react-native-paper"
2024-03-24 23:41:23 +01:00
2024-04-11 23:03:45 +02:00
import type { GoalBoolean } from "@/domain/entities/Goal"
import { GoalBooleanProgress } from "@/domain/entities/Goal"
import type { HabitHistory } from "@/domain/entities/HabitHistory"
2024-04-12 23:13:38 +02:00
import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
2024-05-02 23:48:47 +02:00
import { getColorRGBAFromHex } from "@/utils/colors"
2024-03-24 23:41:23 +01:00
export interface HabitCardProps {
2024-04-11 23:03:45 +02:00
habitHistory: HabitHistory
selectedDate: Date
confettiRef: React.MutableRefObject<LottieView | null>
2024-03-24 23:41:23 +01:00
}
export const HabitCard: React.FC<HabitCardProps> = (props) => {
2024-04-11 23:03:45 +02:00
const { habitHistory, selectedDate, confettiRef } = props
const { habit } = habitHistory
2024-03-24 23:41:23 +01:00
const router = useRouter()
2024-04-11 23:03:45 +02:00
const { habitsTrackerPresenter } = useHabitsTracker()
const goalProgress = habitHistory.getGoalProgressByDate(selectedDate)
const [checked, setChecked] = useState(goalProgress.isCompleted())
2024-03-24 23:41:23 +01:00
const habitColor = getColorRGBAFromHex({
hexColor: habit.color,
opacity: 0.4,
})
return (
<List.Item
onPress={() => {
router.push({
pathname: "/application/habits/[habitId]/",
params: {
habitId: habit.id,
},
})
}}
title={habit.name}
style={[
{
paddingVertical: 20,
paddingHorizontal: 10,
marginVertical: 10,
borderRadius: 10,
backgroundColor: habitColor,
},
]}
contentStyle={[
{
paddingLeft: 12,
},
]}
titleStyle={[
{
fontSize: 18,
},
]}
left={() => {
return (
2024-04-11 23:03:45 +02:00
<View style={{ justifyContent: "center", alignItems: "center" }}>
2024-04-12 23:13:38 +02:00
<FontAwesomeIcon
2024-04-11 23:03:45 +02:00
size={24}
2024-04-12 23:13:38 +02:00
icon={habit.icon as IconName}
2024-04-11 23:03:45 +02:00
style={[
{
width: 30,
},
]}
/>
</View>
2024-03-24 23:41:23 +01:00
)
}}
right={() => {
if (goalProgress.isNumeric()) {
return (
<View>
<Text>
{goalProgress.progress.toLocaleString()} /{" "}
{goalProgress.goal.target.value.toLocaleString()}{" "}
{goalProgress.goal.target.unit}
</Text>
</View>
)
}
return (
2024-04-11 23:03:45 +02:00
<Checkbox
color="black"
status={checked ? "checked" : "unchecked"}
onPress={async () => {
const isCheckedNew = !checked
setChecked(isCheckedNew)
if (isCheckedNew) {
confettiRef.current?.play()
}
await habitsTrackerPresenter.habitUpdateProgress({
date: selectedDate,
habitHistory,
goalProgress: new GoalBooleanProgress({
goal: habit.goal as GoalBoolean,
progress: isCheckedNew,
}),
})
}}
/>
)
}}
2024-03-24 23:41:23 +01:00
/>
)
}