· 6 years ago · Feb 11, 2020, 06:34 AM
1import React, { Component, Fragment } from "react";
2import {
3 View,
4 Text,
5 TouchableOpacity,
6 Alert,
7 Button,
8 ScrollView,
9 Image,
10 AsyncStorage,
11 SafeAreaView
12} from "react-native";
13
14//Third party imports
15import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from "react-native-table-component";
16import { scale, verticalScale, moderateScale, ScaledSheet } from "react-native-size-matters";
17import _ from "lodash";
18import moment from "moment";
19import Bubbles from "react-native-loader/src/Bubbles";
20
21//Redux Imports
22import { bindActionCreators } from "redux";
23import { connect } from "react-redux";
24import * as UserDataAction from "../../actions/userDataActions";
25
26//Common components and helper methods
27import { Images } from "../../components/ImagesPath";
28import colors from "../../theme/colors";
29import { checkInternetAvailibility } from "../../helper/CheckInternet";
30import { postApi, putApi } from "../../config/HitApis";
31import { widthPercentageToDP } from "../../helper/deviceDimensions";
32import { API_SETTINGS } from "../../config/Urls";
33import styles from "./AvailabilityStyle";
34import { fontNames } from "../../theme/fontFamily";
35import strings from "../../constants/LocalizedStrings";
36import clearAsyncStorage from "../../helper/clearAsyncStorage";
37
38class Availablity extends Component {
39 state = {
40 tableHead: ["Head", "Head2", "Head3", "Head4"],
41 tableTitle: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
42 tableData: [
43 ["10", "10", "10", "10", "10", "10", "10"],
44 ["11", "11", "11", "11", "11", "11", "11"],
45 ["12", "12", "12", "12", "12", "12", "12"],
46 ["01", "01", "01", "01", "01", "01", "01"],
47 ["02", "02", "02", "02", "02", "02", "02"],
48 ["03", "03", "03", "03", "03", "03", "03"],
49 ["04", "04", "04", "04", "04", "04", "16"]
50 ],
51 selectedData: {},
52 data: {},
53 isLoading: false
54 };
55
56 componentDidMount() {
57 checkInternetAvailibility();
58 let data = {};
59 const availData = this.props.userDataReducer.userData.availabilitySlots;
60 _.forEach(availData, (val, key) => {
61 data[key] = val.slots;
62 });
63 this.setState({ data });
64 }
65
66 _onPress = (key, val) => {
67 this.addSelected(key, val);
68 };
69
70 onSave = () => {
71 const apiData = {};
72 _.forEach(this.state.data, (val, key) => {
73 apiData[key] = { slots: val };
74 });
75 this.setState({ isLoading: true });
76 putApi(
77 { availability: apiData },
78 API_SETTINGS,
79 null,
80 this.props.userDataReducer.userData.accessToken,
81 this.availabilityUpdateResponse
82 );
83
84 // console.log(apiData,'the apiData to send at server');
85 // console.log(this.state.data, "the data to send at server");
86 };
87
88 availabilityUpdateResponse = response => {
89
90 console.log(response,'hte response')
91 if (response) {
92 const statusCode = response.data.statusCode;
93 if (statusCode == 200 || statusCode == 201) {
94 Alert.alert("Success", "Slots updated successfully");
95 console.log(response.data.info, "api data repsonse value");
96 const availabilitySlots = response.data.info.availabilitySlots;
97 AsyncStorage.getItem("userData").then(res => {
98 const userData = JSON.parse(res);
99 userData.availabilitySlots = availabilitySlots;
100 AsyncStorage.setItem("userData", JSON.stringify(userData));
101 });
102 this.props.actions.updateAvaiability(availabilitySlots);
103 this.props.navigation.goBack(null);
104 return;
105 // console.log(response, "the repsone from the server which i get is ");
106 } else if (statusCode == 401) {
107 clearAsyncStorage();
108 this.props.navigation.navigate("signOut");
109 setTimeout(() => {
110 this.props.actions.clearReduxValues();
111 alert("Session Expired, please log in again to continue");
112 }, 500);
113 this.setState({ isLoading: false });
114 return;
115 } else {
116 this.setState({ isLoading: false });
117 alert(response.data.message);
118 return;
119 }
120 }
121 alert("Network Error");
122 };
123
124 minutesToHoursConvertor = m => {
125 return moment
126 .utc()
127 .startOf("day")
128 .add(m, "minutes")
129 .format("hh:mm A");
130 };
131 addSelected = (key, val) => {
132 let data = { ...this.state.data };
133 let keyArray = [...data[key]];
134 const selectedItemIndex = _.findIndex(keyArray, val);
135 if (selectedItemIndex !== -1) {
136 const selectedItem = { ...keyArray[selectedItemIndex] };
137 selectedItem.availability = !selectedItem.availability;
138 keyArray[selectedItemIndex] = selectedItem;
139 }
140
141 data[key] = keyArray;
142 this.setState({ data });
143
144 return;
145 };
146
147 renderCell = (key, data) => {
148 const { flexDirection } = this.props.userDataReducer;
149 const positionRightToggle = flexDirection == "row" ? "Right" : "Left";
150 const keyArray = this.state.data[key];
151 const selectedItemIndex = _.findIndex(keyArray, data);
152 const availability = keyArray[selectedItemIndex].availability;
153
154 return (
155 <TouchableOpacity activeOpacity={1} onPress={() => this._onPress(key, data)}>
156 <View style={{ borderRadius: 2, [`margin${positionRightToggle}`]: moderateScale(35.33) }}>
157 <Text style={{ ...styles.btnText, color: availability ? colors.tabsActiveColor : colors.unAvailabilityColor }}>
158 {this.minutesToHoursConvertor(data.time)}
159 </Text>
160 </View>
161 </TouchableOpacity>
162 );
163 };
164 render() {
165 const { flexDirection } = this.props.userDataReducer;
166 // const flexDirection="row-reverse"
167
168 const positionRightToggle = flexDirection == "row" ? "Right" : "Left";
169 const positionLeftToggle = flexDirection == "row" ? "Left" : "Right";
170 const state = this.state;
171
172 return (
173 <SafeAreaView style={styles.container}>
174 <View style={{ ...styles.header, flexDirection: flexDirection }}>
175 <TouchableOpacity
176 hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
177 onPress={() => {
178 this.props.navigation.goBack(null);
179 }}
180 >
181 <Image
182 style={{ transform: [{ scaleX: flexDirection === "row" ? 1 : -1 }] }}
183 source={Images.back}
184 />
185 </TouchableOpacity>
186
187 <Text style={{ fontSize: verticalScale(18), fontFamily: fontNames.boldFont }}>
188 {strings.availability}
189 </Text>
190
191 <View />
192 </View>
193 {this.state.isLoading ? (
194 <View style={{ ...styles.loader, backgroundColor: colors.white }}>
195 <Bubbles size={14} color={colors.tabsActiveColor} />
196 </View>
197 ) : (
198 <Fragment>
199 <View style={{ flex: 1, backgroundColor: colors.white }}>
200 <View style={{ flex: 1, flexDirection: flexDirection }}>
201 <Col
202 borderStyle={{ borderColor: "transparent" }}
203 data={state.tableTitle}
204 style={{
205 ...styles.title,
206 paddingTop: moderateScale(17),
207 [`margin${positionRightToggle}`]: widthPercentageToDP(6.39),
208 [`border${positionRightToggle}Width`]: moderateScale(1),
209 [`padding${positionLeftToggle}`]: widthPercentageToDP(4.44),
210 [`padding${positionRightToggle}`]: widthPercentageToDP(3.06)
211 }}
212 textStyle={{
213 color: colors.black,
214 lineHeight: moderateScale(56),
215 fontSize: moderateScale(14),
216 fontFamily: fontNames.boldFont
217 }}
218 />
219 <View style={{ width: widthPercentageToDP(75.55), paddingTop: moderateScale(17) }}>
220 <ScrollView horizontal={true} style={{ flex: 1 }}>
221 <TableWrapper
222 borderStyle={{ borderColor: "transparent" }}
223 style={{ flexDirection: "column" }}
224 >
225 {_.map(state.data, (rowData, index) => (
226 <TableWrapper key={index} style={{ ...styles.row, flexDirection }}>
227 {rowData.map((cellData, cellIndex) => (
228 <Cell
229 key={cellIndex}
230 data={this.renderCell(index, cellData)}
231 textStyle={styles.text}
232 />
233 ))}
234 </TableWrapper>
235 ))}
236 </TableWrapper>
237 </ScrollView>
238 </View>
239 </View>
240 <View
241 style={{
242 marginBottom: moderateScale(77),
243 marginTop: moderateScale(16),
244 height: moderateScale(20),
245 marginLeft: scale(65),
246 flexDirection
247 }}
248 >
249 <View style={{ [`margin${positionRightToggle}`]: scale(9) }}>
250 <Image source={Images.available} />
251 </View>
252 <Text style={styles.headerLabel}>{strings.available}</Text>
253
254 <View
255 style={{
256 [`margin${positionRightToggle}`]: scale(9),
257 [`margin${positionLeftToggle}`]: scale(42)
258 }}
259 >
260 <Image source={Images.notAvailable} />
261 </View>
262
263 <Text style={styles.headerLabel}>{strings.notAvailable}</Text>
264 </View>
265 </View>
266
267 <TouchableOpacity
268 style={{
269 height: verticalScale(48),
270 backgroundColor: colors.tabsActiveColor,
271 alignItems: "center",
272 justifyContent: "center"
273 }}
274 onPress={this.onSave}
275 >
276 <Text
277 style={{
278 color: "white",
279 fontSize: verticalScale(12),
280 textTransform: "uppercase",
281 fontFamily: fontNames.boldFont,
282 letterSpacing: scale(2)
283 }}
284 >
285 {strings.save}
286 </Text>
287 </TouchableOpacity>
288 </Fragment>
289 )}
290 </SafeAreaView>
291 );
292 }
293}
294
295function mapDispatchToProps(dispatch) {
296 return {
297 actions: bindActionCreators(UserDataAction, dispatch)
298 };
299}
300export default connect(
301 state => state,
302 mapDispatchToProps
303)(Availablity);