· 6 years ago · Sep 27, 2019, 06:48 AM
1/* eslint-disable import/first */
2/* eslint-disable no-unused-expressions */
3/* eslint-disable no-undef */
4/* eslint-disable no-console */
5/* eslint-disable no-alert */
6import React from 'react';
7import NumericInput from 'react-native-numeric-input';
8import { View, Text, TouchableOpacity, Share } from 'react-native';
9import ReactNativeParallaxHeader from 'react-native-parallax-header';
10import styles from './styles';
11// import { IMAGES } from '../../configs';
12import ShareBtn from '../../../assets/svgs/Share';
13import Love from '../../../assets/svgs/Love';
14import Header from '../../components/elements/Header';
15import Button from '../../components/elements/Button';
16import { COLOR_TRANSPARENT, COLOR_WHITE, COLOR_BASE_PRIMARY_MAIN } from '../../styles';
17import I18n from '../../i18n';
18import { scale } from '../../utils/scaling';
19// import arrays from '../../constants/arrays';
20import { openDatabase } from 'react-native-sqlite-storage';
21
22const db = openDatabase({ name: 'menu.db' });
23
24export default class Component extends React.Component {
25 constructor(props) {
26 super(props);
27 this.state = {
28 value: 0,
29 isFav: false,
30 name: '',
31 category: '',
32 photo: '',
33 description: '',
34 price: '',
35 id: ''
36 };
37 }
38 componentDidMount() {
39 this._getparams();
40 }
41 _getparams = () => {
42 const { params } = this.props.navigation.state;
43 const getCategory = params ? params.category : 'Junkfood';
44 const getNama = params ? params.nama : 'Nama';
45 const getPhoto = params ? params.photo : 'http://';
46 const getDescription = params ? params.description : 'dasdasda';
47 const getPrice = params ? params.price : 100;
48 const getId = params ? params.id : 'sdasd01';
49 this.setState({
50 id: getId,
51 name: getNama,
52 category: getCategory,
53 photo: getPhoto,
54 description: getDescription,
55 price: getPrice
56 });
57 };
58 _openDbFav = () => {
59 db.transaction(txn => {
60 txn.executeSql(
61 'CREATE TABLE IF NOT EXISTS favorite_menu(id INTEGER PRIMARY KEY AUTOINCREMENT, menuName VARCHAR(20), imageMenu VARCHAR(20), descMenu VARCHAR(100))',
62 []
63 );
64 });
65 };
66 _openDbCheckOut = () => {
67 db.transaction(txn => {
68 txn.executeSql(
69 'CREATE TABLE IF NOT EXISTS checkout_menu(menuId VARCHAR(255) PRIMARY KEY, menuName VARCHAR(20), imageMenu VARCHAR(20), qty INTEGER, price INTEGER)',
70 []
71 );
72 });
73 };
74 _onPressFav = () => {
75 try {
76 this.state.isFav ? this._delete(this.state.name) : this._searchById();
77 } catch (error) {
78 console.log(error);
79 }
80 };
81 _searchById = () => {
82 this._openDbFav();
83 db.transaction(tx => {
84 tx.executeSql(
85 'SELECT * FROM favorite_menu where menuName = ?',
86 // data ini nantinya di rubah dengan props
87 [this.state.name],
88 (txn, result) => {
89 console.log(result.rows.length);
90 // eslint-disable-next-line no-lone-blocks
91 {
92 result.rows.length > 0 ? console.log('data udah ada') : this._insertToFav();
93 }
94 }
95 );
96 });
97 };
98 _delete = index => {
99 // Alert.alert(index);
100 this._openDbFav();
101 db.transaction(tx => {
102 tx.executeSql('DELETE FROM favorite_menu where menuName=?', [index], (txn, result) => {
103 console.log(index);
104 console.log(txn);
105 console.log(result);
106 this.setState({ isFav: false });
107 });
108 });
109 };
110 _insertToFav = () => {
111 this._openDbFav();
112 db.transaction(tx => {
113 tx.executeSql(
114 'INSERT INTO favorite_menu (menuName, descMenu, imageMenu) VALUES (?,?,?)',
115 // data ini nantinya di rubah dengan props
116 [this.state.nama, this.state.description, this.state.photo],
117 (txn, result) => {
118 console.log('result', result.rowsAffected);
119 this.setState({ isFav: true });
120 }
121 );
122 });
123 };
124
125 _searchByName = () => {
126 this._openDbCheckOut();
127 db.transaction(tx => {
128 tx.executeSql(
129 'SELECT * FROM checkout_menu where menuName = ?',
130 // data ini nantinya di rubah dengan props
131 [this.state.name],
132 (txn, result) => {
133 console.log(result.rows.length);
134 // eslint-disable-next-line no-lone-blocks
135 {
136 result.rows.length > 0 ? this._updateQtyCheckOut : this._insertToCheckout;
137 }
138 }
139 );
140 });
141 };
142
143 _updateQtyCheckOut = () => {
144 this._openDbCheckOut();
145 db.transaction(tx => {
146 tx.executeSql('UPDATE checkout_menu set qty=? where menuName=?', [this.state.value], (txn, result) => {
147 console.log(`resultupdae${result.rowsAffected}`);
148 });
149 });
150 };
151
152 _insertToCheckout = () => {
153 this._openDbCheckOut();
154 db.transaction(tx => {
155 tx.executeSql(
156 'INSERT INTO checkout_menu(menuId,menuName,imageMenu,qty,price) VALUES (?,?,?,?,?)',
157 [this.state.id, this.state.name, this.state.photo, this.state.value, this.state.price],
158 (txn, result) => {
159 console.log(`result${result.rowsAffected}`);
160 }
161 );
162 });
163 };
164 _onPressShare = async () => {
165 try {
166 await Share.share({
167 message: `http://${this.state.photo} *${this.state.nama}*
168 ${this.state.description}`
169 });
170 } catch (error) {
171 alert(error.message);
172 }
173 };
174
175 _onPressButtonAdd = () => {
176 try {
177 this.setState({ value: 1 });
178 console.log('Add Item');
179 } catch (error) {
180 console.log(error.message);
181 }
182 };
183
184 renderNavBar = () => (
185 <View style={styles.navContainer}>
186 <Header containerStyle={{ backgroundColor: COLOR_TRANSPARENT }} />
187 <View style={styles.statusBar} />
188 </View>
189 );
190
191 renderContent = () => (
192 <View style={styles.container}>
193 <View style={styles.contentDetail}>
194 <View style={styles.titleDetail}>
195 <Text style={styles.txtTitle}>{this.state.nama}</Text>
196 </View>
197 <View style={styles.categoryDetail}>
198 <Text style={styles.txtCategory}>{this.state.category}</Text>
199 </View>
200 <View style={styles.descDetail}>
201 <Text style={styles.txtDesc}>{this.state.description}</Text>
202 </View>
203 <View style={styles.containerPrice}>
204 <View style={styles.priceDetail}>
205 <Text style={styles.txtPrice}>{I18n.t('price')}</Text>
206 </View>
207 <View style={styles.btnAdd}>
208 <Button
209 title="OK"
210 isUpperCase={false}
211 onPress={this._insertToCheckout}
212 customContainer={{
213 backgroundColor: COLOR_BASE_PRIMARY_MAIN,
214 borderRadius: scale(5),
215 width: scale(50),
216 height: scale(30)
217 }}
218 customText={{ color: COLOR_WHITE, fontWeight: '500' }}
219 />
220 </View>
221 </View>
222 <View style={styles.numDetail}>
223 <Text style={styles.txtNum}>{this.state.price}</Text>
224 </View>
225 </View>
226 <View style={styles.containerAddMenu}>
227 <TouchableOpacity onPress={this._onPressShare} style={styles.containerShare}>
228 <ShareBtn width={scale(25)} height={scale(27)} />
229 </TouchableOpacity>
230 {this.state.value === 0 ? (
231 <Button
232 title="Tambah"
233 isUpperCase={false}
234 onPress={this._onPressButtonAdd}
235 customContainer={{
236 backgroundColor: COLOR_BASE_PRIMARY_MAIN,
237 borderRadius: scale(5),
238 height: scale(40),
239 width: scale(180)
240 }}
241 customText={{ color: COLOR_WHITE, fontWeight: '500' }}
242 />
243 ) : (
244 <NumericInput
245 value={this.state.value}
246 onChange={value => this.setState({ value })}
247 totalWidth={scale(180)}
248 totalHeight={scale(40)}
249 iconSize={25}
250 step={1}
251 valueType="real"
252 rounded
253 textColor={COLOR_BASE_PRIMARY_MAIN}
254 iconStyle={{ color: COLOR_WHITE }}
255 rightButtonBackgroundColor={COLOR_BASE_PRIMARY_MAIN}
256 leftButtonBackgroundColor={COLOR_BASE_PRIMARY_MAIN}
257 />
258 )}
259 <TouchableOpacity onPress={this._onPressFav} style={styles.containerShare}>
260 {this.state.isFav ? (
261 <Love active width={scale(25)} height={scale(27)} />
262 ) : (
263 <Love width={scale(25)} height={scale(27)} />
264 )}
265 </TouchableOpacity>
266 </View>
267 </View>
268 );
269
270 render() {
271 return (
272 <View style={styles.container}>
273 <ReactNativeParallaxHeader
274 headerMinHeight={scale(50)}
275 headerMaxHeight={scale(250)}
276 extraScrollHeight={scale(20)}
277 navbarColor={COLOR_BASE_PRIMARY_MAIN}
278 titleStyle={styles.titleStyle}
279 backgroundImage={{ uri: `http://${this.state.photo}` }}
280 backgroundImageScale={1.2}
281 renderNavBar={this.renderNavBar}
282 renderContent={this.renderContent}
283 containerStyle={styles.container}
284 contentContainerStyle={styles.contentContainer}
285 innerContainerStyle={styles.container}
286 />
287 </View>
288 );
289 }
290}