yqgDVRpD

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 = (nama, category, photo, description, price) => {
46    this.props.navigation.navigate('DetailMenu', { nama, category, photo, description, price });
47  };
48
49  _onPress = () => {
50    this.props.navigation.navigate('Check');
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          style={styles.headerContainer}
89        />
90        <ScrollView>
91          <View style={styles.containerInput}>
92            <SearchIconPink
93              label=""
94              placeholder={I18n.t('inputMenu')}
95              editable
96              colorInput={{ color: COLOR_BASE_PRIMARY_MAIN }}
97              onChangeText={this.updateSearch}
98              value={search}
99            />
100          </View>
101          <FlatList
102            data={this.state.menu}
103            keyExtractor={item => item.menuId}
104            renderItem={({ item }) => (
105              <View>
106                <TouchableOpacity
107                  onPress={() =>
108                    this.onPress(item.name, this.state.category, item.picture, item.description, item.price)
109                  }
110                >
111                  <View style={styles.container}>
112                    <View style={styles.imageContainer}>
113                      <Image
114                        style={{ flex: 1, width: undefined, height: undefined }}
115                        resizeMode="cover"
116                        source={{
117                          uri: `http://${item.picture}`
118                        }}
119                      />
120                    </View>
121                    <Card style={styles.card}>
122                      <View style={styles.cardContainer}>
123                        <View style={styles.wordContainer}>
124                          <Text style={styles.wordTitle}>{item.name}</Text>
125                          <Text style={styles.wordDesc}>{item.description}</Text>
126                          <Text style={styles.wordPrice}>{item.price}</Text>
127                        </View>
128                      </View>
129                    </Card>
130                  </View>
131                </TouchableOpacity>
132              </View>
133            )}
134          />
135        </ScrollView>
136        <View style={styles.actionContainer}>
137          <TouchableOpacity style={styles.fab} onPress={this._onPress}>
138            <Checkout />
139          </TouchableOpacity>
140        </View>
141      </View>
142    );
143  }
144}
145
146Component.propTypes = {
147  navigation: PropTypes.object.isRequired
148};