dWf59Usn

1/* eslint-disable no-unused-vars */
2/* eslint-disable no-console */
3/* eslint-disable import/first */
4/* eslint-disable react/no-unused-state */
5import React from 'react';
6import {
7  View,
8  Image,
9  Text,
10  TouchableOpacity,
11  TextInput,
12  ScrollView,
13  FlatList,
14  StatusBar
15} from 'react-native';
16import SearchIconPink from '../../components/elements/Input/SearchIconPink';
17import { Card } from 'native-base';
18import IMAGES from '../../configs/images';
19import Header from '../../components/elements/Header';
20import I18n from '../../i18n';
21import styles from './styles';
22import PropTypes from 'prop-types';
23import Checkout from '../../../assets/svgs/checkout';
24import { openDatabase } from 'react-native-sqlite-storage';
25import { COLOR_WHITE, COLOR_GREY, COLOR_BASE_PRIMARY_MAIN } from '../../styles';
26import Svg from 'react-native-svg';
27import { ENDPOINT } from '../../configs';
28
29const db = openDatabase({ name: 'menu.db' });
30
31export default class Component extends React.Component {
32  constructor(props) {
33    super(props);
34    this.state = {
35      search: '',
36      refreshing: true,
37      menu: [],
38      category: ''
39    };
40  }
41
42  componentDidMount() {
43    this._getDataApi();
44  }
45  onPress = () => {
46    this.props.navigation.navigate('DetailMenu');
47  };
48
49  _onPress = () => {
50    this.props.navigation.navigate('Chek');
51  };
52
53  updateSearch = search => {
54    this.setState({ search });
55  };
56
57  _openDb = () => {
58    db.transaction(txn => {
59      txn.executeSql(
60        'CREATE TABLE IF NOT EXISTS favorite_menu(id INTEGER PRIMARY KEY AUTOINCREMENT, menuName VARCHAR(20), imageMenu VARCHAR(20), descMenu VARCHAR(100))',
61        []
62      );
63    });
64  };
65
66  _getDataApi = async () => {
67    try {
68      const { params } = this.props.navigation.state;
69      const getCategory = params ? params.category : 'Junkfood';
70      console.log(getCategory);
71      const result = await ENDPOINT.menu(getCategory);
72      console.log(result);
73      this.setState({ menu: result.data, category: getCategory });
74      console.log(this.state.menu);
75    } catch (error) {
76      console.log(error);
77    }
78  };
79  render() {
80    const { search } = this.state;
81    return (
82      <View backgroundColor={COLOR_WHITE} style={styles.backgroundContainer}>
83        <Header
84          title={this.state.category}
85          containerStyle={{ backgroundColor: COLOR_WHITE }}
86          back={false}
87          backpink
88        />
89        <ScrollView>
90          <View style={styles.containerInput}>
91            <SearchIconPink
92              label=""
93              placeholder={I18n.t('inputMenu')}
94              editable
95              colorInput={{ color: COLOR_BASE_PRIMARY_MAIN }}
96              onChangeText={this.updateSearch}
97              value={search}
98            />
99          </View>
100          <FlatList
101            data={this.state.menu}
102            keyExtractor={item => item.menuId}
103            renderItem={({ item }) => (
104              <View>
105                <TouchableOpacity onPress={this.onPress}>
106                  <View style={styles.container}>
107                    <View style={styles.imageContainer}>
108                      <Image
109                        style={{ flex: 1, width: undefined, height: undefined }}
110                        resizeMode="cover"
111                        source={{
112                          uri: `http://${item.picture}`
113                        }}
114                      />
115                    </View>
116                    <Card style={styles.card}>
117                      <View style={styles.cardContainer}>
118                        <View style={styles.wordContainer}>
119                          <Text style={styles.wordTitle}>{item.name}</Text>
120                          <Text style={styles.wordDesc}>{item.description}</Text>
121                          <Text style={styles.wordPrice}>{item.price}</Text>
122                        </View>
123                      </View>
124                    </Card>
125                  </View>
126                </TouchableOpacity>
127              </View>
128            )}
129          />
130        </ScrollView>
131        <View style={styles.actionContainer}>
132          <TouchableOpacity style={styles.fab} onPress={this._onPress}>
133            <Checkout />
134          </TouchableOpacity>
135        </View>
136      </View>
137    );
138  }
139}
140
141Component.propTypes = {
142  navigation: PropTypes.object.isRequired
143};