fix: add some bare styles to make use of the app

aerogear · May 26, 2020 · 60d870f · 60d870f
1 parent 3def143
commit 60d870f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/examples/react-native/src/App.js b/examples/react-native/src/App.js
@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { useOfflineMutation, useNetworkStatus } from 'react-offix-hooks';
-import { AddTodo, TodoList, TodoModal, Loading, Error } from './components';
-import { GET_TODOS, ADD_TODO } from './gql/queries';
-import { mutateOptions } from './helpers';
-import { View, Text, Button } from 'react-native';
+import React, {useState} from 'react';
+import {useQuery} from '@apollo/react-hooks';
+import {useOfflineMutation, useNetworkStatus} from 'react-offix-hooks';
+import {AddTodo, TodoList, TodoModal, Loading, Error} from './components';
+import {GET_TODOS, ADD_TODO} from './gql/queries';
+import {mutateOptions} from './helpers';
+import {View, Text, Button, StyleSheet} from 'react-native';
 
 const App = () => {
-  const { loading, error, data, subscribeToMore } = useQuery(GET_TODOS);
+  const {loading, error, data, subscribeToMore} = useQuery(GET_TODOS);
   const [addTodo] = useOfflineMutation(ADD_TODO, mutateOptions.add);
   const [modalActive, setModalActive] = useState(false);
 
@@ -22,11 +22,11 @@ const App = () => {
   if (error) return <Error error={error} />;
 
   return (
-    <View>
+    <View style={styles.container}>
       <View>
-        <Text>OFFIX TODO</Text>
-        <Text>A simple todo app using offix & graphback</Text>
-        <Text>Network status: {(isOnline) ? 'Online' : 'Offline'}</Text>
+        <Text>OFFIX TODO React</Text>
+        <Text>A simple todo app using offix and graphback</Text>
+        <Text>Network status: {isOnline ? 'Online' : 'Offline'}</Text>
       </View>
 
       <TodoModal
@@ -48,4 +48,11 @@ const App = () => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 75,
+    alignItems: 'center',
+  }
+});
+
 export default App;
diff --git a/examples/react-native/src/components/AddTodo.js b/examples/react-native/src/components/AddTodo.js
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { View, Button, TextInput } from 'react-native';
+import React, {useState} from 'react';
+import {View, Button, TextInput, StyleSheet} from 'react-native';
 
-export const AddTodo = ({ addTodo, cancel }) => {
+export const AddTodo = ({addTodo, cancel}) => {
   const [title, setTitle] = useState();
   const [description, setDescription] = useState();
 
-  const handleSubmit = (e) => {
+  const handleSubmit = e => {
     e.preventDefault();
 
     addTodo({
@@ -15,22 +15,23 @@ export const AddTodo = ({ addTodo, cancel }) => {
         version: 1,
         completed: false,
       },
-    }).then(cancel)
-    .catch(handleError);
+    })
+      .then(cancel)
+      .catch(handleError);
   };
 
-  const handleError = (error) => {
+  const handleError = error => {
     // if (error.offline) {
     //   error.watchOfflineChange();
     // } else {
     //   console.log(error);
     // }
     console.log(error);
     cancel();
-  }
+  };
 
   return (
-    <View>
+    <View style={styles.container}>
       <TextInput
         type="text"
         name="title"
@@ -42,13 +43,17 @@ export const AddTodo = ({ addTodo, cancel }) => {
         placeholder="Description"
         onChangeText={text => setDescription(text)}
       />
-      <Button
-        title="Close"
-        onPress={cancel}
-      />
+      <Button title="Close" onPress={cancel} />
       {/* <i className="icon icon-cross" /> */}
       <Button title="Submit" onPress={handleSubmit} />
       {/* <i className="icon icon-check" /> */}
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 75,
+    alignItems: 'center',
+  },
+});