2 |

3 |

6 | 🚀 Semana OmniStack 11.0 7 |

10 |

11 | 12 | License

13 |

26 |

27 |

Be The Hero

10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /frontend/src/assets/heroes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/frontend/src/assets/heroes.png -------------------------------------------------------------------------------- /frontend/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /frontend/src/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | outline: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | font: 400 14px Roboto, sans-serif; 12 | background: #f0f0f5; 13 | -webkit-font-smoothing: antialiased; 14 | } 15 | 16 | input, button, textarea { 17 | font: 400 18px Roboto, sans-serif; 18 | } 19 | 20 | button { 21 | cursor: pointer; 22 | } 23 | 24 | form input { 25 | width: 100%; 26 | height: 60px; 27 | color: #333; 28 | border: 1px solid #dcdce6; 29 | border-radius: 8px; 30 | padding: 0 24px; 31 | } 32 | 33 | form textarea { 34 | width: 100%; 35 | resize: vertical; 36 | min-height: 140px; 37 | color: #333; 38 | border: 1px solid #dcdce6; 39 | border-radius: 8px; 40 | padding: 16px 24px; 41 | line-height: 24px; 42 | } 43 | 44 | .button { 45 | width: 100%; 46 | height: 60px; 47 | background: #e02041; 48 | border: 0; 49 | border-radius: 8px; 50 | color: #FFF; 51 | font-weight: 700; 52 | margin-top: 16px; 53 | display: inline-block; 54 | text-align: center; 55 | text-decoration: none; 56 | font-size: 18px; 57 | line-height: 60px; 58 | transition: filter 0.2s; 59 | } 60 | 61 | .button:hover { 62 | filter: brightness(90%); 63 | } 64 | 65 | .back-link { 66 | display: flex; 67 | align-items: center; 68 | margin-top: 40px; 69 | color: #41414d; 70 | font-size: 18px; 71 | text-decoration: none; 72 | font-weight: 500; 73 | transition: opacity 0.2s; 74 | } 75 | 76 | .back-link svg { 77 | margin-right: 8px; 78 | } 79 | 80 | .back-link:hover { 81 | opacity: 0.8; 82 | } -------------------------------------------------------------------------------- /frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /frontend/src/pages/Logon/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Link, useHistory } from 'react-router-dom'; 3 | import { FiLogIn } from 'react-icons/fi'; 4 | 5 | import api from '../../services/api'; 6 | 7 | import './styles.css'; 8 | 9 | import logoImg from '../../assets/logo.svg'; 10 | import heroesImg from '../../assets/heroes.png'; 11 | 12 | export default function Logon() { 13 | const [id, setId] = useState(''); 14 | const history = useHistory(); 15 | 16 | async function handleLogin(e) { 17 | e.preventDefault(); 18 | 19 | try { 20 | const response = await api.post('sessions', { id }); 21 | 22 | localStorage.setItem('ongId', id); 23 | localStorage.setItem('ongName', response.data.name); 24 | 25 | history.push('/profile'); 26 | } catch (err) { 27 | alert('Falha no login, tente novamente.'); 28 | } 29 | } 30 | 31 | return ( 32 |

33 |

34 |

35 | 36 |

53 | 54 | Heroes

55 |

56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /frontend/src/pages/Logon/styles.css: -------------------------------------------------------------------------------- 1 | .logon-container { 2 | width: 100%; 3 | max-width: 1120px; 4 | height: 100vh; 5 | margin: 0 auto; 6 | 7 | display: flex; 8 | align-items: center; 9 | justify-content: space-between; 10 | } 11 | 12 | .logon-container section.form { 13 | width: 100%; 14 | max-width: 350px; 15 | margin-right: 30px; 16 | } 17 | 18 | .logon-container section.form form { 19 | margin-top: 100px; 20 | } 21 | 22 | .logon-container section.form form h1 { 23 | font-size: 32px; 24 | margin-bottom: 32px; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /frontend/src/pages/NewIncident/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Link, useHistory } from 'react-router-dom'; 3 | import { FiArrowLeft } from 'react-icons/fi' 4 | 5 | import api from '../../services/api'; 6 | 7 | import './styles.css'; 8 | 9 | import logoImg from '../../assets/logo.svg'; 10 | 11 | export default function NewIncident() { 12 | const [title, setTitle] = useState(''); 13 | const [description, setDescription] = useState(''); 14 | const [value, setValue] = useState(''); 15 | 16 | const history = useHistory(); 17 | 18 | const ongId = localStorage.getItem('ongId'); 19 | 20 | async function handleNewIncident(e) { 21 | e.preventDefault(); 22 | 23 | const data = { 24 | title, 25 | description, 26 | value, 27 | }; 28 | 29 | try { 30 | await api.post('incidents', data, { 31 | headers: { 32 | Authorization: ongId, 33 | } 34 | }) 35 | 36 | history.push('/profile'); 37 | } catch (err) { 38 | alert('Erro ao cadastrar caso, tente novamente.'); 39 | } 40 | } 41 | 42 | return ( 43 |

44 |

45 |

46 |

47 | 48 |

Cadastrar novo caso

49 |

Descreva o caso detalhadamente para encontrar um herói para resolver isso.

50 | 51 | 52 | 53 | Voltar para home 54 | 55 |

56 | 57 |

58 | setTitle(e.target.value)} 62 | /> 63 | 64 |

setDescription(e.target.value)}
68 |           />
69 | 
70 |           <input 
71 |             placeholder="Valor em reais"
72 |             value={value}
73 |             onChange={e => setValue(e.target.value)}
74 |           />
75 | 
76 |           <button className="button" type="submit">Cadastrar</button>
77 |         </form>
78 |       </div>
79 |     </div>
80 |   )
81 | }

--------------------------------------------------------------------------------
/frontend/src/pages/NewIncident/styles.css:
--------------------------------------------------------------------------------
 1 | .new-incident-container {
 2 |   width: 100%;
 3 |   max-width: 1120px;
 4 |   height: 100vh;
 5 |   margin: 0 auto;
 6 | 
 7 |   display: flex;
 8 |   align-items: center;
 9 |   justify-content: center;
10 | }
11 | 
12 | .new-incident-container .content {
13 |   width: 100%;
14 |   padding: 96px;
15 |   background: #f0f0f5;
16 |   box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
17 |   border-radius: 8px;
18 | 
19 |   display: flex;
20 |   justify-content: space-between;
21 |   align-items: center;
22 | }
23 | 
24 | .new-incident-container .content section {
25 |   width: 100%;
26 |   max-width: 380px;
27 | }
28 | 
29 | .new-incident-container .content section h1 {
30 |   margin: 64px 0 32px;
31 |   font-size: 32px;
32 | }
33 | 
34 | .new-incident-container .content section p {
35 |   font-size: 18px;
36 |   color: #737380;
37 |   line-height: 32px;
38 | }
39 | 
40 | .new-incident-container .content form {
41 |   width: 100%;
42 |   max-width: 450px;
43 | }
44 | 
45 | .new-incident-container .content form input,
46 | .new-incident-container .content form textarea {
47 |   margin-top: 8px;
48 | }

--------------------------------------------------------------------------------
/frontend/src/pages/Profile/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Link, useHistory } from 'react-router-dom';
 3 | import { FiPower, FiTrash2 } from 'react-icons/fi';
 4 | 
 5 | import api from '../../services/api';
 6 | 
 7 | import './styles.css';
 8 | 
 9 | import logoImg from '../../assets/logo.svg';
10 | 
11 | export default function Profile() {
12 |   const [incidents, setIncidents] = useState([]);
13 | 
14 |   const history = useHistory();
15 | 
16 |   const ongId = localStorage.getItem('ongId');
17 |   const ongName = localStorage.getItem('ongName');
18 | 
19 |   useEffect(() => {
20 |     api.get('profile', {
21 |       headers: {
22 |         Authorization: ongId,
23 |       }
24 |     }).then(response => {
25 |       setIncidents(response.data);
26 |     })
27 |   }, [ongId]);
28 | 
29 |   async function handleDeleteIncident(id) {
30 |     try {
31 |       await api.delete(`incidents/${id}`, {
32 |         headers: {
33 |           Authorization: ongId,
34 |         }
35 |       });
36 | 
37 |       setIncidents(incidents.filter(incident => incident.id !== id));
38 |     } catch (err) {
39 |       alert('Erro ao deletar caso, tente novamente.');
40 |     }
41 |   }
42 | 
43 |   function handleLogout() {
44 |     localStorage.clear();
45 | 
46 |     history.push('/');
47 |   }
48 | 
49 |   return (
50 |     <div className="profile-container">
51 |       <header>
52 |         <img src={logoImg} alt="Be the Hero" />
53 |         <span>Bem vinda, {ongName}</span>
54 | 
55 |         <Link className="button" to="/incidents/new">Cadastrar novo caso</Link>
56 |         <button onClick={handleLogout} type="button">
57 |           <FiPower size={18} color="#E02041" />
58 |         </button>
59 |       </header>
60 | 
61 |       <h1>Casos cadastrados</h1>
62 | 
63 |       <ul>
64 |         {incidents.map(incident => (
65 |           <li key={incident.id}>
66 |             <strong>CASO:</strong>
67 |             <p>{incident.title}</p>
68 | 
69 |             <strong>DESCRIÇÃO:</strong>
70 |             <p>{incident.description}</p>
71 | 
72 |             <strong>VALOR:</strong>
73 |             <p>{Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)}</p>
74 | 
75 |             <button onClick={() => handleDeleteIncident(incident.id)} type="button">
76 |               <FiTrash2 size={20} color="#a8a8b3" />
77 |             </button>
78 |           </li>
79 |         ))}
80 |       </ul>
81 |     </div>
82 |   );
83 | }

--------------------------------------------------------------------------------
/frontend/src/pages/Profile/styles.css:
--------------------------------------------------------------------------------
 1 | .profile-container {
 2 |   width: 100%;
 3 |   max-width: 1180px;
 4 |   padding: 0 30px;
 5 |   margin: 32px auto;
 6 | }
 7 | 
 8 | .profile-container header {
 9 |   display: flex;
10 |   align-items: center;
11 | }
12 | 
13 | .profile-container header span {
14 |   font-size: 20px;
15 |   margin-left: 24px;
16 | }
17 | 
18 | .profile-container header img {
19 |   height: 64px;
20 | }
21 | 
22 | .profile-container header a {
23 |   width: 260px;
24 |   margin-left: auto;
25 |   margin-top: 0;
26 | }
27 | 
28 | .profile-container header button {
29 |   height: 60px;
30 |   width: 60px;
31 |   border-radius: 4px;
32 |   border: 1px solid #dcdce6;
33 |   background: transparent;
34 |   margin-left: 16px;
35 |   transition: border-color 0.2s;
36 | }
37 | 
38 | .profile-container header button:hover {
39 |   border-color: #999;
40 | }
41 | 
42 | .profile-container h1 {
43 |   margin-top: 80px;
44 |   margin-bottom: 24px;
45 | }
46 | 
47 | .profile-container ul {
48 |   display: grid;
49 |   grid-template-columns: repeat(2, 1fr);
50 |   grid-gap: 24px;
51 |   list-style: none;
52 | }
53 | 
54 | .profile-container ul li {
55 |   background: #FFF;
56 |   padding: 24px;
57 |   border-radius: 8px;
58 |   position: relative;
59 | }
60 | 
61 | .profile-container ul li button {
62 |   position: absolute;
63 |   right: 24px;
64 |   top: 24px;
65 |   border: 0;
66 | }
67 | 
68 | .profile-container ul li button:hover {
69 |   opacity: 0.8;
70 | }
71 | 
72 | .profile-container ul li strong {
73 |   display: block;
74 |   margin-bottom: 16px;
75 |   color: #41414d;
76 | }
77 | 
78 | .profile-container ul li p + strong {
79 |   margin-top: 32px;
80 | }
81 | 
82 | .profile-container ul li p {
83 |   color: #737380;
84 |   line-height: 21px;
85 |   font-size: 16px;
86 | }

--------------------------------------------------------------------------------
/frontend/src/pages/Register/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Link, useHistory } from 'react-router-dom';
 3 | import { FiArrowLeft } from 'react-icons/fi';
 4 | 
 5 | import api from '../../services/api';
 6 | import './styles.css';
 7 | 
 8 | import logoImg from '../../assets/logo.svg';
 9 | 
10 | export default function Register() {
11 |   const [name, setName] = useState('');
12 |   const [email, setEmail] = useState('');
13 |   const [whatsapp, setWhatsapp] = useState('');
14 |   const [city, setCity] = useState('');
15 |   const [uf, setUf] = useState('');
16 | 
17 |   const history = useHistory();
18 | 
19 |   async function handleRegister(e) {
20 |     e.preventDefault();
21 | 
22 |     const data = {
23 |       name,
24 |       email,
25 |       whatsapp,
26 |       city,
27 |       uf,
28 |     };
29 | 
30 |     try {
31 |       const response = await api.post('ongs', data);
32 | 
33 |       alert(`Seu ID de acesso: ${response.data.id}`);
34 | 
35 |       history.push('/');
36 |     } catch (err) {
37 |       alert('Erro no cadastro, tente novamente.');
38 |     }
39 |   }
40 | 
41 |   return (
42 |     <div className="register-container">
43 |       <div className="content">
44 |         <section>
45 |           <img src={logoImg} alt="Be The Hero"/>
46 | 
47 |           <h1>Cadastro</h1>
48 |           <p>Faça seu cadastro, entre na plataforma e ajude pessoas a encontrarem os casos da sua ONG.</p>
49 | 
50 |           <Link className="back-link" to="/">
51 |             <FiArrowLeft size={16} color="#E02041" />
52 |             Não tenho cadastro
53 |           </Link>
54 |         </section>
55 | 
56 |         <form onSubmit={handleRegister}>
57 |           <input 
58 |             placeholder="Nome da ONG"
59 |             value={name}
60 |             onChange={e => setName(e.target.value)}
61 |           />
62 | 
63 |           <input 
64 |             type="email" 
65 |             placeholder="E-mail"
66 |             value={email}
67 |             onChange={e => setEmail(e.target.value)}
68 |           />
69 | 
70 |           <input 
71 |             placeholder="WhatsApp"
72 |             value={whatsapp}
73 |             onChange={e => setWhatsapp(e.target.value)}
74 |           />
75 | 
76 |           <div className="input-group">
77 |             <input 
78 |               placeholder="Cidade"
79 |               value={city}
80 |               onChange={e => setCity(e.target.value)}
81 |             />
82 | 
83 |             <input 
84 |               placeholder="UF" 
85 |               style={{ width: 80 }}
86 |               value={uf}
87 |               onChange={e => setUf(e.target.value)}
88 |             />
89 |           </div>
90 | 
91 |           <button className="button" type="submit">Cadastrar</button>
92 |         </form>
93 |       </div>
94 |     </div>
95 |   );
96 | }

--------------------------------------------------------------------------------
/frontend/src/pages/Register/styles.css:
--------------------------------------------------------------------------------
 1 | .register-container {
 2 |   width: 100%;
 3 |   max-width: 1120px;
 4 |   height: 100vh;
 5 |   margin: 0 auto;
 6 | 
 7 |   display: flex;
 8 |   align-items: center;
 9 |   justify-content: center;
10 | }
11 | 
12 | .register-container .content {
13 |   width: 100%;
14 |   padding: 96px;
15 |   background: #f0f0f5;
16 |   box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
17 |   border-radius: 8px;
18 | 
19 |   display: flex;
20 |   justify-content: space-between;
21 |   align-items: center;
22 | }
23 | 
24 | .register-container .content section {
25 |   width: 100%;
26 |   max-width: 380px;
27 | }
28 | 
29 | .register-container .content section h1 {
30 |   margin: 64px 0 32px;
31 |   font-size: 32px;
32 | }
33 | 
34 | .register-container .content section p {
35 |   font-size: 18px;
36 |   color: #737380;
37 |   line-height: 32px;
38 | }
39 | 
40 | .register-container .content form {
41 |   width: 100%;
42 |   max-width: 450px;
43 | }
44 | 
45 | .register-container .content form input {
46 |   margin-top: 8px;
47 | }
48 | 
49 | .register-container .content form .input-group {
50 |   display: flex;
51 | }
52 | 
53 | .register-container .content form .input-group input + input {
54 |   margin-left: 8px;
55 | }

--------------------------------------------------------------------------------
/frontend/src/routes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BrowserRouter, Route, Switch } from 'react-router-dom';
 3 | 
 4 | import Logon from './pages/Logon';
 5 | import Register from './pages/Register';
 6 | import Profile from './pages/Profile';
 7 | import NewIncident from './pages/NewIncident';
 8 | 
 9 | export default function Routes() {
10 |   return (
11 |     <BrowserRouter>
12 |       <Switch>
13 |         <Route path="/" exact component={Logon} />
14 |         <Route path="/register" component={Register} />
15 | 
16 |         <Route path="/profile" component={Profile} />
17 |         <Route path="/incidents/new" component={NewIncident} />
18 |       </Switch>
19 |     </BrowserRouter>
20 |   );
21 | }

--------------------------------------------------------------------------------
/frontend/src/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | const api = axios.create({
4 |   baseURL: 'http://localhost:3333',
5 | })
6 | 
7 | export default api;

--------------------------------------------------------------------------------
/mobile/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
3 |   "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
4 | }

--------------------------------------------------------------------------------
/mobile/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | web-report/
12 | 
13 | # macOS
14 | .DS_Store
15 |

--------------------------------------------------------------------------------
/mobile/App.js:
--------------------------------------------------------------------------------
 1 | import 'intl';
 2 | import 'intl/locale-data/jsonp/pt-BR';
 3 | 
 4 | import React from 'react';
 5 | 
 6 | import Routes from './src/routes';
 7 | 
 8 | export default function App() {
 9 |   return (
10 |     <Routes />
11 |   );
12 | }

--------------------------------------------------------------------------------
/mobile/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Be The Hero",
 4 |     "slug": "bethehero",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "36.0.0",
 7 |     "platforms": [
 8 |       "ios",
 9 |       "android",
10 |       "web"
11 |     ],
12 |     "version": "1.0.0",
13 |     "orientation": "portrait",
14 |     "icon": "./assets/icon.png",
15 |     "splash": {
16 |       "image": "./assets/splash.png",
17 |       "resizeMode": "contain",
18 |       "backgroundColor": "#E02041"
19 |     },
20 |     "updates": {
21 |       "fallbackToCacheTimeout": 0
22 |     },
23 |     "assetBundlePatterns": [
24 |       "**/*"
25 |     ],
26 |     "ios": {
27 |       "supportsTablet": true
28 |     }
29 |   }
30 | }
31 |

--------------------------------------------------------------------------------
/mobile/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/mobile/assets/icon.png

--------------------------------------------------------------------------------
/mobile/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/mobile/assets/splash.png

--------------------------------------------------------------------------------
/mobile/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 |

--------------------------------------------------------------------------------
/mobile/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@react-native-community/masked-view": "0.1.5",
12 |     "@react-navigation/native": "^5.1.1",
13 |     "@react-navigation/stack": "^5.2.3",
14 |     "axios": "^0.19.2",
15 |     "expo": "~36.0.0",
16 |     "expo-constants": "~8.0.0",
17 |     "expo-mail-composer": "~8.0.0",
18 |     "intl": "^1.2.5",
19 |     "react": "~16.9.0",
20 |     "react-dom": "~16.9.0",
21 |     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
22 |     "react-native-gesture-handler": "~1.5.0",
23 |     "react-native-reanimated": "~1.4.0",
24 |     "react-native-safe-area-context": "0.6.0",
25 |     "react-native-screens": "2.0.0-alpha.12",
26 |     "react-native-web": "~0.11.7"
27 |   },
28 |   "devDependencies": {
29 |     "babel-preset-expo": "~8.0.0",
30 |     "@babel/core": "^7.0.0"
31 |   },
32 |   "private": true
33 | }
34 |

--------------------------------------------------------------------------------
/mobile/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/mobile/src/assets/logo.png

--------------------------------------------------------------------------------
/mobile/src/assets/logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/mobile/src/assets/logo@2x.png

--------------------------------------------------------------------------------
/mobile/src/assets/logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-omnistack-11/70cf1ff9441b82ba95634fc7396730947b6675c4/mobile/src/assets/logo@3x.png

--------------------------------------------------------------------------------
/mobile/src/pages/Detail/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Feather } from '@expo/vector-icons';
 3 | import { useNavigation, useRoute } from '@react-navigation/native';
 4 | import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';
 5 | import * as MailComposer from 'expo-mail-composer';
 6 | 
 7 | import logoImg from '../../assets/logo.png';
 8 | 
 9 | import styles from './styles';
10 | 
11 | export default function Detail() {
12 |   const navigation = useNavigation();
13 |   const route = useRoute();
14 | 
15 |   const incident = route.params.incident;
16 |   const message = `Olá ${incident.name}, estou entrando em contato pois gostaria de ajudar no caso "${incident.title}" com o valor de ${Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)}`;
17 | 
18 |   function navigateBack() {
19 |     navigation.goBack()
20 |   }
21 | 
22 |   function sendMail() {
23 |     MailComposer.composeAsync({
24 |       subject: `Herói do caso: ${incident.title}`,
25 |       recipients: [incident.email],
26 |       body: message,
27 |     })
28 |   }
29 | 
30 |   function sendWhatsapp() {
31 |     Linking.openURL(`whatsapp://send?phone=${incident.whatsapp}&text=${message}`);
32 |   }
33 | 
34 |   return (
35 |     <View style={styles.container}>
36 |       <View style={styles.header}>
37 |         <Image source={logoImg} />
38 | 
39 |         <TouchableOpacity onPress={navigateBack}>
40 |           <Feather name="arrow-left" size={28} color="#E82041" />
41 |         </TouchableOpacity>
42 |       </View>
43 | 
44 |       <View style={styles.incident}>
45 |         <Text style={[styles.incidentProperty, { marginTop: 0 }]}>ONG:</Text>
46 |         <Text style={styles.incidentValue}>{incident.name} de {incident.city}/{incident.uf}</Text>
47 | 
48 |         <Text style={styles.incidentProperty}>CASO:</Text>
49 |         <Text style={styles.incidentValue}>{incident.title}</Text>
50 | 
51 |         <Text style={styles.incidentProperty}>VALOR:</Text>
52 |         <Text style={styles.incidentValue}>
53 |           {Intl.NumberFormat('pt-BR', { 
54 |             style: 'currency', 
55 |             currency: 'BRL' 
56 |           }).format(incident.value)}
57 |         </Text>
58 |       </View>
59 | 
60 |       <View style={styles.contactBox}>
61 |         <Text style={styles.heroTitle}>Salve o dia!</Text>
62 |         <Text style={styles.heroTitle}>Seja o herói desse caso.</Text>
63 | 
64 |         <Text style={styles.heroDescription}>Entre em contato:</Text>
65 | 
66 |         <View style={styles.actions}>
67 |           <TouchableOpacity style={styles.action} onPress={sendWhatsapp}>
68 |             <Text style={styles.actionText}>WhatsApp</Text>
69 |           </TouchableOpacity>
70 | 
71 |           <TouchableOpacity style={styles.action} onPress={sendMail}>
72 |             <Text style={styles.actionText}>E-mail</Text>
73 |           </TouchableOpacity>
74 |         </View>
75 |       </View>
76 |     </View>
77 |   );
78 | }
79 |

--------------------------------------------------------------------------------
/mobile/src/pages/Detail/styles.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | import Constants from 'expo-constants';
 3 | 
 4 | export default StyleSheet.create({
 5 |   container: {
 6 |     flex: 1,
 7 |     paddingHorizontal: 24,
 8 |     paddingTop: Constants.statusBarHeight + 20,
 9 |   },
10 | 
11 |   header: {
12 |     flexDirection: 'row',
13 |     justifyContent: 'space-between',
14 |     alignItems: 'center',
15 |   },
16 | 
17 |   incident: {
18 |     padding: 24,
19 |     borderRadius: 8,
20 |     backgroundColor: '#FFF',
21 |     marginBottom: 16,
22 |     marginTop: 48,
23 |   },
24 | 
25 |   incidentProperty: {
26 |     fontSize: 14,
27 |     color: '#41414d',
28 |     fontWeight: 'bold',
29 |     marginTop: 24,
30 |   },
31 | 
32 |   incidentValue: {
33 |     marginTop: 8,
34 |     fontSize: 15,
35 |     color: '#737380'
36 |   },
37 | 
38 |   contactBox: {
39 |     padding: 24,
40 |     borderRadius: 8,
41 |     backgroundColor: '#FFF',
42 |     marginBottom: 16,
43 |   },
44 | 
45 |   heroTitle: {
46 |     fontWeight: 'bold',
47 |     fontSize: 20,
48 |     color: '#13131a',
49 |     lineHeight: 30,
50 |   },
51 | 
52 |   heroDescription: {
53 |     fontSize: 15,
54 |     color: '#737380',
55 |     marginTop: 16,
56 |   },
57 | 
58 |   actions: {
59 |     marginTop: 16,
60 |     flexDirection: 'row',
61 |     justifyContent: 'space-between',
62 |   },
63 | 
64 |   action: {
65 |     backgroundColor: '#e02041',
66 |     borderRadius: 8,
67 |     height: 50,
68 |     width: '48%',
69 |     justifyContent: 'center',
70 |     alignItems: 'center'
71 |   },
72 | 
73 |   actionText: {
74 |     color: '#FFF',
75 |     fontSize: 15,
76 |     fontWeight: 'bold'
77 |   },
78 | });

--------------------------------------------------------------------------------
/mobile/src/pages/Incidents/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Feather } from '@expo/vector-icons';
 3 | import { useNavigation } from '@react-navigation/native';
 4 | import { View, FlatList, Image, Text, TouchableOpacity } from 'react-native';
 5 | 
 6 | import api from '../../services/api';
 7 | 
 8 | import logoImg from '../../assets/logo.png';
 9 | 
10 | import styles from './styles';
11 | 
12 | export default function Incidents() {
13 |   const [incidents, setIncidents] = useState([]);
14 |   const [total, setTotal] = useState(0);
15 | 
16 |   const [page, setPage] = useState(1);
17 |   const [loading, setLoading] = useState(false);
18 | 
19 |   const navigation = useNavigation();
20 | 
21 |   function navigateToDetail(incident) {
22 |     navigation.navigate('Detail', { incident });
23 |   }
24 | 
25 |   async function loadIncidents() {
26 |     if (loading) {
27 |       return;
28 |     }
29 | 
30 |     if (total > 0 && incidents.length === total) {
31 |       return;
32 |     }
33 | 
34 |     setLoading(true);
35 | 
36 |     const response = await api.get('incidents', {
37 |       params: { page }
38 |     });
39 | 
40 |     setIncidents([...incidents, ...response.data]);
41 |     setTotal(response.headers['x-total-count']);
42 |     setPage(page + 1);
43 |     setLoading(false);
44 |   }
45 | 
46 |   useEffect(() => {
47 |     loadIncidents();
48 |   }, []);
49 |  
50 |   return (
51 |     <View style={styles.container}>
52 |       <View style={styles.header}>
53 |         <Image source={logoImg} />
54 |         <Text style={styles.headerText}>
55 |           Total de <Text style={styles.headerTextBold}>{total} casos</Text>.
56 |         </Text>
57 |       </View>
58 | 
59 |       <Text style={styles.title}>Bem-vindo!</Text>
60 |       <Text style={styles.description}>Escolha um dos casos abaixo e salve o dia.</Text>
61 | 
62 |       <FlatList
63 |         data={incidents}
64 |         style={styles.incidentList}
65 |         keyExtractor={incident => String(incident.id)}
66 |         // showsVerticalScrollIndicator={false}
67 |         onEndReached={loadIncidents}
68 |         onEndReachedThreshold={0.2}
69 |         renderItem={({ item: incident }) => (
70 |           <View style={styles.incident}>
71 |             <Text style={styles.incidentProperty}>ONG:</Text>
72 |             <Text style={styles.incidentValue}>{incident.name}</Text>
73 | 
74 |             <Text style={styles.incidentProperty}>CASO:</Text>
75 |             <Text style={styles.incidentValue}>{incident.title}</Text>
76 | 
77 |             <Text style={styles.incidentProperty}>VALOR:</Text>
78 |             <Text style={styles.incidentValue}>
79 |               {Intl.NumberFormat('pt-BR', { 
80 |                 style: 'currency', 
81 |                 currency: 'BRL' 
82 |               }).format(incident.value)}
83 |             </Text>
84 | 
85 |             <TouchableOpacity 
86 |               style={styles.detailsButton} 
87 |               onPress={() => navigateToDetail(incident)}
88 |             >
89 |               <Text style={styles.detailsButtonText}>Ver mais detalhes</Text>
90 |               <Feather name="arrow-right" size={16} color="#E02041" />            
91 |             </TouchableOpacity>
92 |           </View>
93 |         )}
94 |       />
95 |     </View>
96 |   );
97 | }
98 |

--------------------------------------------------------------------------------
/mobile/src/pages/Incidents/styles.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | import Constants from 'expo-constants';
 3 | 
 4 | export default StyleSheet.create({
 5 |   container: {
 6 |     flex: 1,
 7 |     paddingHorizontal: 24,
 8 |     paddingTop: Constants.statusBarHeight + 20,
 9 |   },
10 | 
11 |   header: {
12 |     flexDirection: 'row',
13 |     justifyContent: 'space-between',
14 |     alignItems: 'center'
15 |   },
16 | 
17 |   headerText: {
18 |     fontSize: 15,
19 |     color: '#737380',
20 |   },
21 | 
22 |   headerTextBold: {
23 |     fontWeight: 'bold'
24 |   },
25 | 
26 |   title: {
27 |     fontSize: 30,
28 |     marginBottom: 16,
29 |     marginTop: 48,
30 |     color: '#13131a',
31 |     fontWeight: 'bold'
32 |   },
33 | 
34 |   description: {
35 |     fontSize: 16,
36 |     lineHeight: 24,
37 |     color: '#737380'
38 |   },
39 | 
40 |   incidentList: {
41 |     marginTop: 32,
42 |   },
43 | 
44 |   incident: {
45 |     padding: 24,
46 |     borderRadius: 8,
47 |     backgroundColor: '#FFF',
48 |     marginBottom: 16,
49 |   },
50 | 
51 |   incidentProperty: {
52 |     fontSize: 14,
53 |     color: '#41414d',
54 |     fontWeight: 'bold'
55 |   },
56 | 
57 |   incidentValue: {
58 |     marginTop: 8,
59 |     fontSize: 15,
60 |     marginBottom: 24,
61 |     color: '#737380'
62 |   },
63 | 
64 |   detailsButton: {
65 |     flexDirection: 'row',
66 |     justifyContent: 'space-between',
67 |     alignItems: 'center'
68 |   },
69 | 
70 |   detailsButtonText: {
71 |     color: '#e02041',
72 |     fontSize: 15,
73 |     fontWeight: 'bold'
74 |   },
75 | });

--------------------------------------------------------------------------------
/mobile/src/routes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { NavigationContainer } from '@react-navigation/native';
 3 | import { createStackNavigator } from '@react-navigation/stack';
 4 | 
 5 | const AppStack = createStackNavigator();
 6 | 
 7 | import Incidents from './pages/Incidents';
 8 | import Detail from './pages/Detail';
 9 | 
10 | export default function Routes() {
11 |   return (
12 |     <NavigationContainer>
13 | 
14 |       <AppStack.Navigator screenOptions={{ headerShown: false }}>
15 |         <AppStack.Screen name="Incidents" component={Incidents} />
16 |         <AppStack.Screen name="Detail" component={Detail} />
17 |       </AppStack.Navigator>
18 | 
19 |     </NavigationContainer>
20 |   );
21 | }

--------------------------------------------------------------------------------
/mobile/src/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | const api = axios.create({
4 |   baseURL: 'http://192.168.0.103:3333'
5 | });
6 | 
7 | export default api;

--------------------------------------------------------------------------------

2 | 3 |

6 | 🚀 Semana OmniStack 11.0 7 |

Faça seu logon

Cadastrar novo caso