Merge pull request #1 from ajubin/first-step

remove useless style

App.tsx

@@ -9,14 +9,14 @@
  */
 
 import React, { Component } from "react";
-import { StyleSheet, SafeAreaView } from "react-native";
+import { StyleSheet, SafeAreaView, Text } from "react-native";
 import { SearchBox, InfiniteHits } from "./src/components";
 import {
   ALGOLIA_APP_ID,
   ALGOLIA_INDEX_NAME,
   ALGOLIA_SEARCH_KEY,
 } from "react-native-dotenv";
-import { InstantSearch } from "react-instantsearch-native";
+import { InstantSearch, connectStats } from "react-instantsearch-native";
 
 interface Props {}
 export class App extends Component<Props> {
@@ -29,17 +29,23 @@ export class App extends Component<Props> {
           indexName={ALGOLIA_INDEX_NAME}
         >
           <SearchBox />
+          <ConnectedStats />
           <InfiniteHits />
         </InstantSearch>
       </SafeAreaView>
     );
   }
 }
 
+const ConnectedStats = connectStats(({ nbHits }) => (
+  <Text style={{ paddingLeft: 16 }}>
+    {nbHits.toLocaleString()} wine matching !
+  </Text>
+));
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
     justifyContent: "flex-start",
     backgroundColor: "white",
   },

src/components/InfiniteHits.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { StyleSheet, Text, View, FlatList } from "react-native";
-import { Hit } from "../interfaces/algolia";
 import { connectInfiniteHits } from "react-instantsearch-native";
 
 interface Props {

src/components/SearchBox.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInput, StyleSheet, View } from "react-native";
+import { TextInput, StyleSheet } from "react-native";
 import { connectSearchBox } from "react-instantsearch/connectors";
 
 interface Props {
@@ -11,19 +11,17 @@ export const SearchBoxComponent: React.FC<Props> = ({
   onChangeText,
   value,
 }) => (
-  <View style={styles.searchTextContainer}>
-    <TextInput
-      onChangeText={onChangeText}
-      value={value}
-      style={styles.textBox}
-      placeholder="fruity red and spicy"
-      placeholderTextColor="#BBBBBB"
-      clearButtonMode="always"
-      spellCheck={true}
-      autoCorrect={true}
-      autoFocus={true}
-    />
-  </View>
+  <TextInput
+    onChangeText={onChangeText}
+    value={value}
+    style={styles.textBox}
+    placeholder="fruity red and spicy"
+    placeholderTextColor="#BBBBBB"
+    clearButtonMode="always"
+    spellCheck={true}
+    autoCorrect={true}
+    autoFocus={true}
+  />
 );
 
 export const SearchBox = connectSearchBox(({ refine, currentRefinement }) => {
@@ -42,7 +40,4 @@ const styles = StyleSheet.create({
     color: "#6E6E6E",
     fontSize: 14,
   },
-  searchTextContainer: {
-    alignSelf: "stretch",
-  },
 });

src/interfaces/algolia.ts → src/interfaces/Hit.d.ts

@@ -1,4 +1,4 @@
-export interface Hit {
+interface Hit {
   points: number;
   title: string;
   description: string;