Merge pull request #6 from LeleDallas/feat/no-data

feat: no data view

__tests__/NoData.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react-native";
+import NoData from "../src/components/NoData";
+
+
+describe('NoData', () => {
+    it('should render correctly', () => {
+        const { queryByTestId } = render(<NoData length={0} loading={false} />);
+        expect(queryByTestId('loading')).toBeNull();
+    });
+
+
+    it('should render nothing', () => {
+        const { queryByTestId } = render(<NoData length={1} loading={false} />);
+        expect(queryByTestId('loading')).toBeNull();
+        expect(queryByTestId('no-data')).toBeNull();
+    });
+})

src/components/NoData/index.tsx

@@ -0,0 +1,15 @@
+import { Image, Text, View } from "react-native";
+import { globalStyle } from "../../styles";
+
+type Props = {
+    length: number;
+    loading: boolean;
+}
+
+export default ({ length, loading }: Props) =>
+    length === 0 && !loading &&
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Image source={require('../../../assets/noData.png')} style={{ width: 200, height: 200, alignSelf: 'center' }} />
+        <Text style={globalStyle.text}>No data found</Text>
+    </View>
+

src/components/Spinner/index.tsx

@@ -1,12 +1,26 @@
 import LottieView from "lottie-react-native";
-import { View } from "react-native";
+import { ActivityIndicator, Platform, View } from "react-native";
+import { colors } from "../../styles";
 
 export default () =>
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <LottieView
-            style={{ width: "100%", height: "100%" }}
-            source={require("../../../assets/spinner2.json")}
-            autoPlay
-            loop
-        />
-    </View>
+    Platform.OS === "ios" ? (
+        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+            <LottieView
+                style={{ width: "100%", height: "100%" }}
+                source={require("../../../assets/spinner2.json")}
+                autoPlay
+                loop
+            />
+        </View>) : (
+        <View style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center'
+        }}>
+            <ActivityIndicator size={200} color={colors.buttonActive} />
+        </View>
+    );

src/screens/Home.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { TextInput, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Octicons from 'react-native-vector-icons/Octicons';
 import api from '../api';
 import UserList from '../components/List/UserList';
 import { colors, globalStyle } from '../styles';
 import { User } from '../types/response';
+import NoData from '../components/NoData';
 
 export default () => {
     const [name, setName] = useState('');
@@ -37,6 +38,7 @@ export default () => {
                     <Octicons name="search" color={colors.text} size={20} />
                 </TouchableOpacity>
             </View>
+            <NoData length={data.length} loading={loading} />
             <UserList users={data} loading={loading} />
         </>
     );