· 5 years ago · Mar 04, 2021, 02:30 PM
1import React, { useEffect, useState } from "react";
2import {
3 ScrollView,
4 StyleSheet,
5 Text,
6 TouchableOpacity,
7 View
8} from "react-native";
9import { useForm } from "react-hook-form";
10import axios from "axios";
11import { useDispatch, useSelector } from "react-redux";
12import Spinner from "react-native-loading-spinner-overlay";
13import { setInventory } from "../redux/actions";
14import HeaderVehicle from "../components/HeaderVehicle";
15import Form from "../components/Form";
16import validation from "../validationAuth";
17import Input from "../components/Input";
18import InputDate from "../components/InputDate";
19import { RootState } from "../redux/reducers";
20
21declare const $berry: string;
22declare const $dark: string;
23declare const $white: string;
24
25type FormData = {
26 mileage: string;
27 cleaningDateDay: number;
28 cleaningDateMonth: number;
29 cleaningDateYear: number;
30 pneumaticCondition: string;
31 brakeCondition: string;
32 report: string;
33};
34
35const ResponsibleMaintenance = ({ route }: any) => {
36 const { vehicleId } = route.params;
37 const dispatch = useDispatch();
38 const { api, token } = useSelector((state: RootState) => ({
39 api: state.main.api,
40 token: state.main.token
41 }));
42 const { handleSubmit, register, setValue, errors } = useForm<FormData>();
43 const [isLoading, setIsLoading] = useState(true);
44 const [vehicleData, setVehicleData] = useState(null);
45 const [mileage, setMileage] = useState(null);
46
47 useEffect(() => {
48 const fetchData = async () => {
49 try {
50 const res = await axios.get(`${api}/me/inventories`, {
51 headers: {
52 Authorization: `Bearer ${token}`
53 }
54 });
55 const arrDataReverse = res.data.data.reverse();
56 const dataInventory = arrDataReverse.find(
57 (e: any) => e.vehicle.data.id === vehicleId
58 );
59 dispatch(setInventory(dataInventory));
60 setVehicleData(dataInventory.vehicle.data);
61
62 const arrInventory = dataInventory.inventory_data.find(
63 (e: any) => e.title === "responsible_maintenance"
64 );
65 const dataMileage = arrInventory.information.find(
66 (e: any) => e.label === "mileage"
67 );
68 setMileage(dataMileage.value);
69 setIsLoading(false);
70 } catch (e) {
71 console.error(e);
72 }
73 };
74 fetchData();
75 }, []);
76
77 const onSubmit = async (data: FormData) => {
78 try {
79 await axios.post(
80 `${api}/vehicles/1/inventories`,
81 {
82 begin_at: "2021-02-11 12:30:00",
83 end_at: "2021-02-12 18:30:00",
84 inventory_data: [
85 {
86 title: "responsible_maintenance",
87 information: [
88 {
89 label: "mileage",
90 value: data.mileage
91 }
92 ]
93 }
94 ]
95 },
96 {
97 headers: {
98 Authorization: `Bearer ${token}`
99 }
100 }
101 );
102 } catch (e) {
103 console.error(e);
104 }
105 };
106
107 return (
108 <View style={styles.container}>
109 {isLoading ? (
110 <Spinner visible={isLoading} />
111 ) : (
112 <ScrollView>
113 <View style={styles.scrollViewContainer}>
114 <HeaderVehicle
115 key={1}
116 id={1}
117 name={vehicleData.name}
118 plate_number={vehicleData.plate_number}
119 initial_picture_url={vehicleData.initial_picture_url}
120 />
121 <Text style={styles.title}>
122 RESPONSABLE <Text style={styles.endOfTitle}>ENTRETIEN</Text>
123 </Text>
124 <View style={styles.formContainer}>
125 <Form
126 {...{
127 register,
128 errors,
129 setValue,
130 validation
131 }}
132 >
133 <Input
134 name="mileage"
135 label="Kilométrages"
136 placeholder="230 000 km"
137 white
138 value={mileage}
139 />
140 <Text style={styles.cleaningDateLabel}>Date du nettoyage</Text>
141 <View style={styles.cleaningDateContainer}>
142 <Form
143 {...{
144 register,
145 errors,
146 setValue,
147 validation
148 }}
149 >
150 <InputDate
151 name="cleaningDateDay"
152 placeholder="10"
153 white
154 numeric
155 />
156 <InputDate
157 name="cleaningDateMonth"
158 placeholder="12"
159 white
160 numeric
161 margin
162 />
163 <InputDate
164 name="cleaningDateYear"
165 placeholder="1996"
166 white
167 numeric
168 year
169 />
170 </Form>
171 </View>
172
173 <Input
174 name="pneumaticCondition"
175 label="État pneumatiques"
176 placeholder="Bon"
177 white
178 />
179 <Input
180 name="brakeCondition"
181 label="État plaquettes de frein"
182 placeholder="Inexistantes"
183 white
184 />
185 <Input
186 name="report"
187 label="Quelque chose à signaler ?"
188 placeholder="Détails"
189 white
190 textArea
191 />
192 <TouchableOpacity
193 style={styles.buttonContainer}
194 onPress={handleSubmit(onSubmit)}
195 >
196 <Text style={styles.buttonText}>SUIVANT</Text>
197 </TouchableOpacity>
198 </Form>
199 </View>
200 </View>
201 </ScrollView>
202 )}
203 </View>
204 );
205};
206
207const styles = StyleSheet.create({
208 container: {
209 flex: 1,
210 backgroundColor: $white
211 },
212 scrollViewContainer: {
213 alignItems: "center",
214 paddingBottom: 30
215 },
216 title: {
217 marginTop: 54,
218 fontSize: 30,
219 color: $berry,
220 fontFamily: "HelveticaNeueLTStd-BdCn"
221 },
222 endOfTitle: {
223 color: $dark
224 },
225 formContainer: {
226 marginTop: 30,
227 flex: 1,
228 width: "90%"
229 },
230 cleaningDateLabel: {
231 marginTop: 8,
232 fontSize: 16,
233 color: $dark,
234 fontFamily: "HelveticaNeueLTStd-BdCn"
235 },
236 cleaningDateContainer: {
237 flexDirection: "row",
238 justifyContent: "space-between"
239 },
240 buttonContainer: {
241 marginTop: 10,
242 marginBottom: 20,
243 flex: 1,
244 height: 55,
245 backgroundColor: $berry,
246 justifyContent: "center",
247 alignItems: "center",
248 borderBottomLeftRadius: 22,
249 borderTopRightRadius: 22
250 },
251 buttonText: {
252 color: $white,
253 fontFamily: "HelveticaNeueLTStd-MdCn",
254 fontSize: 19
255 }
256});
257
258export default ResponsibleMaintenance;
259