2024-04-04 17:06:42 +02:00
|
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
|
|
import { Controller, useForm } from "react-hook-form"
|
|
|
|
import { Appbar, Button, HelperText, TextInput } from "react-native-paper"
|
2024-04-04 12:31:56 +02:00
|
|
|
import { SafeAreaView } from "react-native-safe-area-context"
|
2024-04-04 17:06:42 +02:00
|
|
|
import ColorPicker, {
|
|
|
|
HueSlider,
|
|
|
|
Panel1,
|
|
|
|
Preview,
|
|
|
|
} from "reanimated-color-picker"
|
2024-04-04 12:31:56 +02:00
|
|
|
|
|
|
|
import type { HabitCreateData } from "@/domain/entities/Habit"
|
2024-04-04 17:06:42 +02:00
|
|
|
import { HabitCreateSchema } from "@/domain/entities/Habit"
|
2024-04-04 12:31:56 +02:00
|
|
|
import type { User } from "@/domain/entities/User"
|
|
|
|
|
|
|
|
export interface HabitCreateFormProps {
|
|
|
|
user: User
|
|
|
|
}
|
|
|
|
|
|
|
|
export const HabitCreateForm: React.FC<HabitCreateFormProps> = ({ user }) => {
|
2024-04-04 17:06:42 +02:00
|
|
|
// const {createHabit, habitPresenter} = useHabitCreate()
|
|
|
|
|
|
|
|
const onSubmit = async (data: HabitCreateData): Promise<void> => {
|
|
|
|
// await habitPresenter.createHabit(data)
|
|
|
|
console.log(data)
|
|
|
|
}
|
|
|
|
|
|
|
|
const {
|
|
|
|
control,
|
|
|
|
handleSubmit,
|
|
|
|
formState: { errors },
|
|
|
|
} = useForm<HabitCreateData>({
|
|
|
|
mode: "onChange",
|
|
|
|
resolver: zodResolver(HabitCreateSchema),
|
2024-04-04 12:31:56 +02:00
|
|
|
defaultValues: {
|
|
|
|
userId: user.id,
|
|
|
|
name: "",
|
|
|
|
color: "#006CFF",
|
|
|
|
icon: "lightbulb",
|
|
|
|
goal: {
|
|
|
|
frequency: "daily",
|
|
|
|
target: {
|
|
|
|
type: "boolean",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SafeAreaView>
|
|
|
|
<Appbar.Header>
|
|
|
|
<Appbar.Content
|
|
|
|
title="New Habit"
|
|
|
|
style={{
|
|
|
|
alignItems: "center",
|
|
|
|
justifyContent: "center",
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Appbar.Header>
|
2024-04-04 17:06:42 +02:00
|
|
|
|
|
|
|
<Controller
|
|
|
|
control={control}
|
|
|
|
render={({ field: { onChange, onBlur, value } }) => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<TextInput
|
|
|
|
placeholder="Name"
|
|
|
|
onBlur={onBlur}
|
|
|
|
onChangeText={onChange}
|
|
|
|
value={value}
|
|
|
|
style={[styles.input]}
|
|
|
|
mode="outlined"
|
|
|
|
/>
|
|
|
|
{errors.name != null ? (
|
|
|
|
<HelperText type="error" visible>
|
|
|
|
{errors.name.type === "too_big"
|
|
|
|
? "Name is too long"
|
|
|
|
: "Name is required"}
|
|
|
|
</HelperText>
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
name="name"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Controller
|
|
|
|
control={control}
|
|
|
|
render={({ field: { onChange, value } }) => {
|
|
|
|
return (
|
|
|
|
<ColorPicker
|
|
|
|
style={{ width: "70%" }}
|
|
|
|
value={value}
|
|
|
|
onChange={(value) => {
|
|
|
|
onChange(value.hex)
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Preview hideInitialColor />
|
|
|
|
<Panel1 />
|
|
|
|
<HueSlider />
|
|
|
|
</ColorPicker>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
name="color"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Controller
|
|
|
|
control={control}
|
|
|
|
render={({ field: { onChange, onBlur, value } }) => {
|
|
|
|
return (
|
|
|
|
<TextInput
|
|
|
|
placeholder="Icon"
|
|
|
|
onBlur={onBlur}
|
|
|
|
onChangeText={onChange}
|
|
|
|
value={value}
|
|
|
|
style={[styles.input]}
|
|
|
|
mode="outlined"
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
name="icon"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Controller
|
|
|
|
control={control}
|
|
|
|
render={({ field: { onChange, onBlur, value } }) => {
|
|
|
|
return (
|
|
|
|
<TextInput
|
|
|
|
placeholder="Goal Frequency"
|
|
|
|
onBlur={onBlur}
|
|
|
|
onChangeText={onChange}
|
|
|
|
value={value}
|
|
|
|
style={[styles.input]}
|
|
|
|
mode="outlined"
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
name="goal.frequency"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Controller
|
|
|
|
control={control}
|
|
|
|
render={({ field: { onChange, onBlur, value } }) => {
|
|
|
|
return (
|
|
|
|
<TextInput
|
|
|
|
placeholder="Goal Target Type"
|
|
|
|
onBlur={onBlur}
|
|
|
|
onChangeText={onChange}
|
|
|
|
value={value}
|
|
|
|
style={[styles.input]}
|
|
|
|
mode="outlined"
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
name="goal.target.type"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
mode="contained"
|
|
|
|
onPress={handleSubmit(onSubmit)}
|
|
|
|
// loading={createHabit.state === "loading"}
|
|
|
|
// disabled={createHabit.state === "loading"}
|
|
|
|
>
|
|
|
|
Create your habit
|
|
|
|
</Button>
|
2024-04-04 12:31:56 +02:00
|
|
|
</SafeAreaView>
|
|
|
|
)
|
|
|
|
}
|
2024-04-04 17:06:42 +02:00
|
|
|
|
|
|
|
const styles = {
|
|
|
|
input: {
|
|
|
|
margin: 8,
|
|
|
|
},
|
|
|
|
}
|