89 lines
3.1 KiB
JavaScript
89 lines
3.1 KiB
JavaScript
|
import Layout from "../components/screens/layout";
|
||
|
|
import {Pressable, Text, View} from "react-native";
|
||
|
|
import Chevron from "../assets/bi_chevron.svg"
|
||
|
|
import {useEffect, useState} from "react";
|
||
|
|
import Button from "../components/button";
|
||
|
|
import {useNavigation, useRoute} from "@react-navigation/native";
|
||
|
|
import {useSnapshot} from "valtio";
|
||
|
|
import EventStore, {getEvents} from "../store/eventStore";
|
||
|
|
import Api from "../services/api";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const EventSelect = ({selected, setSelected}) => {
|
||
|
|
const {events} = useSnapshot(EventStore)
|
||
|
|
const [isOpened, setIsOpened] = useState(false);
|
||
|
|
const navigation = useNavigation()
|
||
|
|
|
||
|
|
return (
|
||
|
|
|
||
|
|
<View style={{marginBottom: 16}}>
|
||
|
|
|
||
|
|
<Pressable onPress={() => setIsOpened(!isOpened)}>
|
||
|
|
<View style={{
|
||
|
|
backgroundColor: "#EAEAEA",
|
||
|
|
borderRadius: 20,
|
||
|
|
borderBottomLeftRadius: isOpened ? 0 : 20,
|
||
|
|
borderBottomRightRadius: isOpened ? 0 : 20,
|
||
|
|
borderStyle: "solid",
|
||
|
|
borderBottomColor: "rgba(0,0,0,0.2)",
|
||
|
|
borderBottomWidth: isOpened ? 1 : 0,
|
||
|
|
paddingTop: 16,
|
||
|
|
paddingBottom: 16,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
}}>
|
||
|
|
<Text style={{fontSize: 16}}>{selected.title}</Text>
|
||
|
|
<Chevron/>
|
||
|
|
</View>
|
||
|
|
</Pressable>
|
||
|
|
|
||
|
|
{isOpened && events.map(event => (
|
||
|
|
<Pressable onPress={() => {setSelected(event); setIsOpened(false)}} key={event.id}>
|
||
|
|
<View style={{
|
||
|
|
backgroundColor: "#EAEAEA",
|
||
|
|
paddingRight: 20,
|
||
|
|
paddingTop: 16,
|
||
|
|
paddingBottom: 16,
|
||
|
|
paddingLeft: 20,
|
||
|
|
borderBottomColor: "rgba(0,0,0,0.2)",
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
}}>
|
||
|
|
<Text>{event.title}</Text>
|
||
|
|
</View>
|
||
|
|
</Pressable>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
const InputScreen = ({title, content}) => {
|
||
|
|
|
||
|
|
const {taskId} = useRoute().params
|
||
|
|
const [selected, setSelected] = useState({})
|
||
|
|
const navigation = useNavigation()
|
||
|
|
return (
|
||
|
|
<Layout title={title}>
|
||
|
|
|
||
|
|
<View style={{padding: 20}}>
|
||
|
|
<Text style={{
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 16
|
||
|
|
}}>{content || "Добавьте новое событие"}</Text>
|
||
|
|
|
||
|
|
|
||
|
|
<EventSelect selected={selected} setSelected={setSelected}/>
|
||
|
|
|
||
|
|
<Button text={"Добавить"} onPress={() => {
|
||
|
|
Api.createNewEvent({task_id: taskId, event_id: selected.id})
|
||
|
|
.then(() => getEvents()).then(navigation.navigate('Event', {id: taskId}))
|
||
|
|
}} />
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</Layout>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default InputScreen
|