DishNDish/App.js at main · C8IT/DishNDish · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  TextInput,
  ActivityIndicator,
  FlatList,
  Image,
} from 'react-native';

const API_ENDPOINT = ''; // API goes here
// const API_ENDPOINT = 'https://randomuser.me/api/?results=30';

export default function App() {

  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [fullData, setFullData] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");

  // useEffect(() => { // Causing the search filter to disappear
  //   setIsLoading(true);
  //   fetchData(API_ENDPOINT);
  // }, []);

  const fetchData = async(url) => {
    try {
      const response = await fetch(url);
      const json = await response.json();
      setData(json.results);

      console.log(json.results);

      setIsLoading(false);

    }
    catch (error) {
      setError(error);
      console.log(error);
    }
  }

  const handleSearch = (query) => {
    setSearchQuery(query);
  }

  // if (isLoading) {
  //   return (
  //     <View style = {{flex:1, justifyContent:'center', alignItems:'center'}}>
  //       <ActivityIndicator size={"large"} color ="#5500dc" />
  //     </View>
  //   );
  // }

  // if (error) { // Handles error
  //   return (
  //     <View style = {{flex:1, justifyContent:'center',alignItems:'center'}}>
  //       <Text>
  //         Error in fetching data...
  //       </Text>
  //     </View>
  //   );
  // }

  return (
    <SafeAreaView style={{flex:1, marginhorizontal:20}}>
      <TextInput
        placeholder='Search'
        clearButtonMode='always'
        style={styles.searchBox}
        autoCapitalize='none'
        autoCorrect={false}
        value={searchQuery}
        onChangeText={(query) => handleSearch(query)}
      />

      <FlatList
        data={data}
        keyExtractor={(item) => item.login.username}
        renderItem={({item}) => (
          <View style={styles.itemContainer}>
            <Image source={{uri: item.picture.thumbnail}} />
            <View>
              <Text style={styles.textName}>{item.name.first} {item.name.last}</Text>
              <Text style={styles.textEmail}>{item.email}</Text>
            </View>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  searchBox: {
    paddingHorizontal:20,
    paddingVertical:10,
    borderColor:'#ccc',
    borderWidth:1,
    borderRadius:8,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    flexDirection: "row",
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  // image: {
  //   width: 50,
  //   height: 50,
  //   borderRadius: 25,
  // },
  // textName: {
  //   fontSize: 17,
  //   marginLeft: 10,
  //   fontWeight: "600",
  // },
  // textEmail: {
  //   fontSize: 14,
  //   marginLeft: 10,
  //   color: "gray",
  // },
});