Merge pull request #1 from TheWidlarzGroup/project-init

Mock api

App.tsx

@@ -8,23 +8,48 @@
  * @format
  */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import {StyleSheet, StatusBar} from 'react-native';
 import {ApplicationProvider, Layout, Text, Button} from '@ui-kitten/components';
 import {mapping, dark as darkTheme} from '@eva-design/eva';
+import {getUser, updateUser} from './src/data/Api';
+import {UserData} from './src/types/UserData.types';
 
 const App = () => {
+  const [user, setUser] = useState<UserData | null>(null);
+
+  useEffect(() => {
+    console.log(user);
+  }, [user]);
+
+  const fetchData = async () => {
+    setUser(user ? await getUser({...user}) : await getUser());
+  };
+
+  const updateData = async () => {
+    if (user) {
+      setUser(await updateUser({...user, name: 'Kathy'}));
+    }
+  };
+
   return (
     <ApplicationProvider mapping={mapping} theme={darkTheme}>
-      <StatusBar barStyle="dark-content" />
+      <StatusBar barStyle="light-content" />
       <Layout style={styles.container}>
         <Text category="h1">Form App</Text>
         <Button
-          style={styles.button}
           size="large"
           appearance="ghost"
-          status="basic">
-          Update you data
+          status="basic"
+          onPress={fetchData}>
+          Get user
+        </Button>
+        <Button
+          size="large"
+          appearance="ghost"
+          status="success"
+          onPress={updateData}>
+          Update user
         </Button>
       </Layout>
     </ApplicationProvider>
@@ -37,9 +62,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  button: {
-    margin: 8,
-  },
 });
 
 export default App;

src/data/Api.ts

@@ -0,0 +1,95 @@
+import {UserData} from 'src/types/UserData.types';
+import {getRandomNumber} from '../utils/getRandomNumber';
+
+const userEmpty: UserData = {
+  name: 'John',
+  surname: 'Doe',
+  email: null,
+  phone: null,
+  street: null,
+  city: null,
+  code: null,
+  country: null,
+  account: null,
+  creaditCardNo: null,
+  creditCardExp: null,
+  creditCardCvv: null,
+};
+
+const userWithContact: UserData = {
+  name: 'John',
+  surname: 'Doe',
+  email: '[email protected]',
+  phone: '857 254 712',
+  street: null,
+  city: null,
+  code: null,
+  country: null,
+  account: null,
+  creaditCardNo: null,
+  creditCardExp: null,
+  creditCardCvv: null,
+};
+
+const userWithAddress: UserData = {
+  name: 'John',
+  surname: 'Doe',
+  email: '[email protected]',
+  phone: '857 254 712',
+  street: '18th Dev Street',
+  city: 'South Dev City',
+  code: '99-888',
+  country: 'Devburg',
+  account: null,
+  creaditCardNo: null,
+  creditCardExp: null,
+  creditCardCvv: null,
+};
+
+const userComplete: UserData = {
+  name: 'John',
+  surname: 'Doe',
+  email: '[email protected]',
+  phone: '857 254 712',
+  street: '18th Dev Street',
+  city: 'South Dev City',
+  code: '99-888',
+  country: 'Devburg',
+  account: '23 4444 2222 3333 1112 2342',
+  creaditCardNo: '1231 2312 3123 1231',
+  creditCardExp: '01/23',
+  creditCardCvv: '123',
+};
+
+export const getUser = async (prevUser?: UserData) => {
+  console.log('Pending...');
+
+  const scenario = getRandomNumber(1, 4);
+
+  await new Promise(res => setTimeout(res, 1000));
+
+  if (prevUser) {
+    return prevUser;
+  } else {
+    switch (scenario) {
+      case 1:
+        return userEmpty;
+      case 2:
+        return userWithContact;
+      case 3:
+        return userWithAddress;
+      case 4:
+        return userComplete;
+      default:
+        return userEmpty;
+    }
+  }
+};
+
+export const updateUser = async (updated: UserData) => {
+  console.log('Updating...');
+
+  await new Promise(res => setTimeout(res, 1000));
+
+  return updated;
+};

src/types/UserData.types.ts

@@ -0,0 +1,17 @@
+export interface UserData {
+  name: string | null;
+  surname: string | null;
+  // contact
+  email: string | null;
+  phone: string | null;
+  // address
+  street: string | null;
+  city: string | null;
+  code: string | null;
+  country: string | null;
+  // billing
+  account: string | null;
+  creaditCardNo: string | null;
+  creditCardExp: string | null;
+  creditCardCvv: string | null;
+}

src/utils/getRandomNumber.ts

@@ -0,0 +1,3 @@
+export const getRandomNumber = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max + 1 - min) + min);
+};