feature: added mobile version of project

BeTheHero/mobile/.env.example

@@ -0,0 +1,5 @@
+# Basic
+LOCALE='WORK'
+HOME_API=192.168.0.1:3333
+WORK_API=192.168.2.5:3333
+PROD_API='https://'

BeTheHero/mobile/.gitignore

@@ -0,0 +1,19 @@
+/node_modules
+/.expo*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# misc
+.DS_Store
+.env
+.env.development.local
+.env.test.local
+.env.production
+.env.production.local

BeTheHero/mobile/App.js

@@ -0,0 +1,10 @@
+import "intl";
+import "intl/locale-data/jsonp/pt-BR";
+
+import React from "react";
+
+import Routes from "./src/routes";
+
+export default function App() {
+  return <Routes />;
+}

BeTheHero/mobile/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "Be The Hero",
+    "slug": "bethehero",
+    "privacy": "public",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#e02041"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

BeTheHero/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo", "module:react-native-dotenv"]
+  };
+};

BeTheHero/mobile/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "mobile",
+  "version": "0.1.0",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/native": "^5.1.3",
+    "@react-navigation/stack": "^5.2.8",
+    "axios": "^0.26.0",
+    "expo": "44.0.6",
+    "expo-constants": "~13.0.1",
+    "expo-mail-composer": "~11.1.0",
+    "intl": "^1.2.5",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-appearance": "~0.3.3",
+    "react-native-dotenv": "^0.2.0",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
+    "react-native-web": "0.17.1",
+    "styled-components": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "babel-preset-expo": "9.0.2"
+  }
+}

BeTheHero/mobile/src/pages/Detail/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { Linking } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import { useNavigation, useRoute } from "@react-navigation/native";
+import * as MailComposer from "expo-mail-composer";
+
+import * as S from "./styles";
+
+import logoImg from "../../assets/logo.png";
+
+export default function Detail() {
+  const navigation = useNavigation();
+  const route = useRoute();
+
+  const incident = route.params.incident;
+  const value = Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL"
+  }).format(incident.value);
+
+  let message = `Olá ${incident.name}, estou entrando em contato pois eu gostaria de ajudar com o caso "${incident.title}" com o valor de ${value}`;
+
+  function navigateBack() {
+    navigation.goBack();
+  }
+
+  function sendMail() {
+    MailComposer.composeAsync({
+      subject: `Herói do caso: ${incident.title}`,
+      recipients: [incident.email],
+      body: message
+    });
+  }
+
+  function sendWhatsApp() {
+    Linking.openURL(`whatsapp://send?phone=55${incident.whatsapp}=${message}`);
+  }
+
+  return (
+    <S.Container>
+      <S.Header>
+        <S.Image source={logoImg} />
+        <S.Button onPress={navigateBack}>
+          <Feather name="arrow-left" size={28} color="#e02041" />
+        </S.Button>
+      </S.Header>
+      <S.Incident>
+        <S.Property>ONG:</S.Property>
+        <S.Value>
+          {incident.name} de {incident.city}/{incident.uf}
+        </S.Value>
+        <S.Property>CASO:</S.Property>
+        <S.Value>{incident.title}</S.Value>
+        <S.Property>VALOR:</S.Property>
+        <S.Value>{value}</S.Value>
+      </S.Incident>
+      <S.Contact>
+        <S.Title>Salve o dia!</S.Title>
+        <S.Title>Seja o herói desse caso.</S.Title>
+        <S.Description>Entre em contato</S.Description>
+        <S.Actions>
+          <S.Action onPress={sendWhatsApp}>
+            <S.ActionText>WhatsApp</S.ActionText>
+          </S.Action>
+          <S.Action onPress={sendMail}>
+            <S.ActionText>E-mail</S.ActionText>
+          </S.Action>
+        </S.Actions>
+      </S.Contact>
+    </S.Container>
+  );
+}

BeTheHero/mobile/src/pages/Detail/styles.js

@@ -0,0 +1,84 @@
+import styled from "styled-components/native";
+import Constants from "expo-constants";
+
+export const Container = styled.SafeAreaView`
+  flex: 1;
+  padding-horizontal: 24px;
+  padding-top: ${Constants.statusBarHeight + 20}px;
+  background-color: ${props => props.theme.colors.background};
+`;
+
+export const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Image = styled.Image``;
+
+export const Button = styled.TouchableOpacity`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Incident = styled.View`
+  padding: 24px;
+  border-radius: 8px;
+  background-color: ${props => props.theme.colors.card};
+  margin: 48px 0 16px 0;
+`;
+
+export const Property = styled.Text`
+  color: ${props => props.theme.colors.support};
+  font-size: 14px;
+  font-weight: bold;
+`;
+
+export const Value = styled.Text`
+  color: ${props => props.theme.colors.text};
+  font-size: 15px;
+  margin: 8px 0 16px 0;
+`;
+
+export const Contact = styled.View`
+  padding: 24px;
+  border-radius: 8px;
+  background-color: ${props => props.theme.colors.card};
+  margin-bottom: 16px;
+`;
+
+export const Title = styled.Text`
+  color: ${props => props.theme.colors.foreground};
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 30px;
+`;
+
+export const Description = styled.Text`
+  color: ${props => props.theme.colors.text};
+  font-size: 15px;
+  margin-top: 16px;
+`;
+
+export const Actions = styled.View`
+  margin-top: 16px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Action = styled.TouchableOpacity`
+  background-color: #e02041;
+  border-radius: 8px;
+  height: 50px;
+  width: 48%;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ActionText = styled.Text`
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+`;

BeTheHero/mobile/src/pages/Incidents/index.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import { FlatList } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+
+import * as S from "./styles";
+
+import logoImg from "../../assets/logo.png";
+import api from "../../services/api";
+
+export default function Incidents() {
+  const [incidents, setIncidents] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    loadIncidents();
+  });
+
+  async function loadIncidents() {
+    if (loading) {
+      return;
+    }
+    if (total > 0 && incidents.length === total) {
+      return;
+    }
+    setLoading(true);
+
+    api
+      .get("/incidents", { params: { page } })
+      .then((response) => {
+        setIncidents([...incidents, ...response.data]);
+        setTotal(response.headers["x-total-count"]);
+        setPage(page + 1);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error({ ...error });
+      });
+  }
+
+  function navigateToDetail(incident) {
+    navigation.navigate("Detail", { incident });
+  }
+
+  return (
+    <S.Container>
+      <S.Header>
+        <S.Image source={logoImg} />
+        <S.HeaderText>
+          Total de <S.Bold>{total} Casos</S.Bold>.
+        </S.HeaderText>
+      </S.Header>
+      <S.Title>Bem vindo!</S.Title>
+      <S.Description>Escolha um dos casos abaixo e salve o dia.</S.Description>
+
+      <S.IncidentList showsVerticalScrollIndicator={false}>
+        <FlatList
+          data={incidents}
+          keyExtractor={(incident) => String(incident.id)}
+          showsVerticalScrollIndicator={false}
+          onEndReached={loadIncidents}
+          onEndReachedThreshold={0.2}
+          renderItem={({ item: incident }) => (
+            <S.Incident>
+              <S.Property>ONG:</S.Property>
+              <S.Value>
+                {incident.name} de{" "}
+                <S.Bold>
+                  {incident.city}/{incident.uf}
+                </S.Bold>
+              </S.Value>
+              <S.Property>CASO:</S.Property>
+              <S.Value>{incident.title}</S.Value>
+              <S.Property>VALOR:</S.Property>
+              <S.Value>
+                {Intl.NumberFormat("pt-BR", {
+                  style: "currency",
+                  currency: "BRL",
+                }).format(incident.value)}
+              </S.Value>
+              <S.Button onPress={() => navigateToDetail(incident)}>
+                <S.ButtonText>Ver mais detalhes</S.ButtonText>
+                <Feather name="arrow-right" size={16} color="#e02041" />
+              </S.Button>
+            </S.Incident>
+          )}
+        />
+      </S.IncidentList>
+    </S.Container>
+  );
+}