add firestore database

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rockethelp-thorvi",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo-google-fonts/roboto": "^0.2.2",
+    "@react-native-firebase/app": "^15.1.1",
+    "@react-native-firebase/auth": "^15.1.1",
+    "@react-native-firebase/firestore": "^15.1.1",
+    "@react-navigation/native": "^6.0.11",
+    "@react-navigation/native-stack": "^6.7.0",
+    "expo": "~45.0.0",
+    "expo-font": "~10.1.0",
+    "expo-splash-screen": "~0.15.1",
+    "expo-status-bar": "~1.3.0",
+    "native-base": "^3.4.9",
+    "phosphor-react-native": "^1.1.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.11.1",
+    "react-native-svg": "12.3.0",
+    "react-native-svg-transformer": "^1.0.0",
+    "react-native-web": "0.17.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.67.6",
+    "typescript": "~4.3.5"
+  },
+  "private": true
+}

rockethelp-thorvi/src/DTOs/OrderFirestoreDTO.ts

@@ -0,0 +1,11 @@
+// DTO = data transfer object
+import {FirebaseFirestoreTypes} from "@react-native-firebase/firestore";
+
+export type OrderFirestoreDTO = {
+    patrimony: string;
+    description: string;
+    status: 'open' | 'closed',
+    created_at: FirebaseFirestoreTypes.Timestamp;
+    solution?: string;
+    closed_at?: FirebaseFirestoreTypes.Timestamp;
+}

rockethelp-thorvi/src/components/CardDetails.tsx

@@ -0,0 +1,7 @@
+import {VStack} from "native-base";
+
+export function CardDetails() {
+    return(
+        <VStack></VStack>
+    );
+}

rockethelp-thorvi/src/screens/Home.tsx

@@ -1,35 +1,68 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
+import {Alert} from 'react-native';
+import auth from '@react-native-firebase/auth';
 import {useNavigation} from "@react-navigation/native";
 import {HStack, IconButton, VStack, useTheme, Text, Heading, FlatList, Center} from "native-base";
 import {SignOut, ChatTeardropText} from "phosphor-react-native";
 
+import {dateFormat} from "../utils/firestoreDateFormat";
+
 import Logo from "../assets/logo_secondary.svg";
 
 import {Filter} from "../components/Filter";
 import {Button} from "../components/Button";
 import {Order, OrderProps} from "../components/Order";
+import {Loading} from "../components/Loading";
+import firestore from "@react-native-firebase/firestore";
 
 export function Home() {
+    const [isloading, setIsLoading] = useState(true);
     const [statusSelected, setStatusSelected] = useState<'open' | 'closed'>('open');
-    const [orders, setOrders] = useState<OrderProps[]>([
-        {
-            id: '123',
-            patrimony: 'asdf1234',
-            when: '18/02/2022 às 20:00',
-            status: 'open'
-        },
-    ]);
+    const [orders, setOrders] = useState<OrderProps[]>([]);
     const navigation = useNavigation();
     const {colors} = useTheme();
 
-    function handleNewOrder(){
+    function handleNewOrder() {
         navigation.navigate('new')
     }
 
     function handleOpenDetails(orderId: string) {
         navigation.navigate('details', {orderId})
     }
 
+    function handleLogout() {
+        auth().signOut()
+            .catch(error => {
+                console.log(error);
+                return Alert.alert('Sair', 'Não foi possível sair da aplicação.');
+            });
+    }
+
+    useEffect(() => {
+        setIsLoading(true);
+        const subscriber = firestore()
+            .collection('orders')
+            .where('status', '==', statusSelected)
+            .onSnapshot(snapshot => {
+                const data = snapshot.docs.map(doc => {
+                    const {patrimony, description, status, created_at} = doc.data()
+
+                    return {
+                        id: doc.id,
+                        patrimony,
+                        description,
+                        status,
+                        created_at,
+                        when: dateFormat(created_at)
+                    }
+                })
+                setOrders(data);
+                setIsLoading(false);
+            });
+
+        return subscriber;
+    }, [statusSelected]);
+
     return (
         <VStack flex={1} pb={6} bg="gray.700">
             <HStack
@@ -44,6 +77,7 @@ export function Home() {
                 <Logo/>
                 <IconButton
                     icon={<SignOut size={26} color={colors.gray[300]}/>}
+                    onPress={handleLogout}
                 />
             </HStack>
 
@@ -72,23 +106,25 @@ export function Home() {
                     />
                 </HStack>
 
-                <FlatList
-                    data={orders}
-                    keyExtractor={item => item.id}
-                    renderItem={({item}) => <Order data={item} onPress={() => handleOpenDetails(item.id)}/>}
-                    showsVerticalScrollIndicator={false}
-                    contentContainerStyle={{paddingBottom: 100}}
-                    ListEmptyComponent={() => (
-                        <Center>
-                            <ChatTeardropText color={colors.gray[300]} size={40}/>
-                            <Text color={'gray.300'} fontSize={'xl'} mt={6} textAlign={'center'}>
-                                Você ainda não tem {'\n'}
-                                solicitações {statusSelected === 'open' ? 'em andamento' : 'finalizadas'}
-                            </Text>
-                        </Center>
-                    )}
-                />
-                <Button title={"Nova solicitação"} onPress={handleNewOrder} />
+                {
+                    isloading ? <Loading /> :
+                    <FlatList
+                        data={orders}
+                        keyExtractor={item => item.id}
+                        renderItem={({item}) => <Order data={item} onPress={() => handleOpenDetails(item.id)}/>}
+                        showsVerticalScrollIndicator={false}
+                        contentContainerStyle={{paddingBottom: 100}}
+                        ListEmptyComponent={() => (
+                            <Center>
+                                <ChatTeardropText color={colors.gray[300]} size={40}/>
+                                <Text color={'gray.300'} fontSize={'xl'} mt={6} textAlign={'center'}>
+                                    Você ainda não tem {'\n'}
+                                    solicitações {statusSelected === 'open' ? 'em andamento' : 'finalizadas'}
+                                </Text>
+                            </Center>
+                        )}
+                    />}
+                <Button title={"Nova solicitação"} onPress={handleNewOrder}/>
             </VStack>
         </VStack>
     );

rockethelp-thorvi/src/screens/Register.tsx

@@ -1,25 +1,66 @@
+import {useState} from "react";
 import {VStack} from "native-base";
 import {Header} from "../components/Header";
 import {Input} from "../components/Input";
 import {Button} from "../components/Button";
-
+import {Alert} from "react-native";
+import firestore from '@react-native-firebase/firestore'
+import {useNavigation} from "@react-navigation/native";
 
 export function Register() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [patrimony, setPatrimony] = useState('');
+    const [description, setDescription] = useState('');
+    const navigation = useNavigation();
+
+    function handleNewOrderRegister() {
+        if (!patrimony || !description) {
+            return Alert.alert('Registrar', 'Preencha todos os campos antes de continuar.')
+        }
+
+        setIsLoading(true);
+
+        firestore()
+            .collection('orders')
+            .add({
+                patrimony,
+                description,
+                status: 'open',
+                created_at: firestore.FieldValue.serverTimestamp()
+            })
+            .then(() => {
+                Alert.alert('Solicitação', 'Solicitação registrada com sucesso.');
+                navigation.goBack();
+            })
+            .catch((error => {
+                console.log(error);
+                setIsLoading(false);
+                return Alert.alert('Solicitação', 'Não foi possível registrar o pedido.');
+            }));
+    }
+
     return (
         <VStack flex={1} p={6} bg='gray.600'>
-            <Header title="Nova solicitação" />
+            <Header title="Nova solicitação"/>
             <Input
-            placeholder="Número de patrimônio"
-            mt={4}
+                placeholder="Número de patrimônio"
+                mt={4}
+                onChangeText={setPatrimony}
             />
             <Input
-            placeholder="Descrição do problema"
-            mt={5}
-            flex={1}
-            multiline
-            textAlignVertical="top"
+                placeholder="Descrição do problema"
+                mt={5}
+                flex={1}
+                multiline
+                textAlignVertical="top"
+                onChangeText={setDescription}
+            />
+            <Button
+                title="Cadastrar"
+                mt={5}
+                isLoading={isLoading}
+                onPress={handleNewOrderRegister}
             />
-            <Button title="Cadastrar" mt={5} />
         </VStack>
     );
 }

rockethelp-thorvi/src/screens/SignIn.tsx

@@ -21,6 +21,7 @@ export function SignIn() {
             return Alert.alert('Entrar', 'Informe e-mail e senha');
         }
         setIsLoading(true);
+
         auth().signInWithEmailAndPassword(email, password)
             .catch((error) => {
                console.log(error.code);
@@ -35,6 +36,7 @@ export function SignIn() {
                if(error.code === 'auth/user-not-found') {
                    return Alert.alert('Entrar', 'Usuário não cadastrado.');
                }
+               return Alert.alert('Entrar', 'Houve um erro inesperado durante o processo de login.')
             });
     }
 

rockethelp-thorvi/src/utils/firestoreDateFormat.ts

@@ -0,0 +1,12 @@
+import {FirebaseFirestoreTypes} from "@react-native-firebase/firestore";
+
+export function dateFormat(timestamp: FirebaseFirestoreTypes.Timestamp) {
+    if(timestamp) {
+        const date = new Date(timestamp.toDate());
+
+        const day = date.toLocaleDateString('pt-BR');
+        const hour = date.toLocaleTimeString('pt-BR');
+
+        return `${day} às ${hour}`;
+    }
+}