From 449eef89d8b964a3289b4e6110fab938ce4aa811 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 6 Aug 2019 06:58:28 -0600
Subject: [PATCH 01/58] Create an AdoptionList folder

- Move AdoptionList component to new folder
- Create AdoptionList sass file
- Remove container class from jsx files
  - Move it to new front end file so we can clean new components
---
 app/javascript/components/App.js                          | 2 +-
 .../containers/{ => AdoptionList}/AdoptionList.jsx        | 8 ++++++--
 app/javascript/containers/AdoptionList/AdoptionList.sass  | 2 ++
 app/javascript/containers/NgoPage.jsx                     | 2 +-
 app/javascript/containers/NgosList.jsx                    | 2 +-
 app/views/layouts/new_front_end.html.erb                  | 4 +++-
 6 files changed, 14 insertions(+), 6 deletions(-)
 rename app/javascript/containers/{ => AdoptionList}/AdoptionList.jsx (61%)
 create mode 100644 app/javascript/containers/AdoptionList/AdoptionList.sass

diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
index 8478ca4e..23aee4bb 100644
--- a/app/javascript/components/App.js
+++ b/app/javascript/components/App.js
@@ -6,7 +6,7 @@ import configureStore from '../configureStore';
 import NgosList from "../containers/NgosList";
 import NgoPage from "../containers/NgoPage";
 import ErrorBoundary from "./ErrorBoundary";
-import AdoptionList from "../containers/AdoptionList";
+import AdoptionList from "../containers/AdoptionList/AdoptionList";
 
 const store = configureStore();
 
diff --git a/app/javascript/containers/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
similarity index 61%
rename from app/javascript/containers/AdoptionList.jsx
rename to app/javascript/containers/AdoptionList/AdoptionList.jsx
index b00646af..5c2886de 100644
--- a/app/javascript/containers/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -1,14 +1,18 @@
 import React from "react"
-import SimpleHeaderText from "../components/SimpleHeaderText/SimpleHeaderText";
+import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText";
+import styles from './AdoptionList.sass'
 
 class AdoptionList extends React.Component {
     render() {
         return (
-            <div className="container">
+            <div className={styles.AdoptionList}>
                 <SimpleHeaderText
                     title='Encontre seu animalzinho'
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
                 />
+                <div className={styles.filter}>
+
+                </div>
             </div>
         );
     }
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
new file mode 100644
index 00000000..be796b9f
--- /dev/null
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -0,0 +1,2 @@
+.AdoptionList
+
diff --git a/app/javascript/containers/NgoPage.jsx b/app/javascript/containers/NgoPage.jsx
index 755ba986..f77bb914 100644
--- a/app/javascript/containers/NgoPage.jsx
+++ b/app/javascript/containers/NgoPage.jsx
@@ -52,7 +52,7 @@ class NgoPage extends React.Component {
         if (!ngo) return (<div/>);
 
         return (
-            <div className="container">
+            <div>
                 <div className="jumbotron">
                     <div style={{width: '100%', height: '60px'}}>
                         <h1 style={{float: 'left', marginTop: '2px'}}>{ngo.fantasy_name}</h1>
diff --git a/app/javascript/containers/NgosList.jsx b/app/javascript/containers/NgosList.jsx
index decfe6a1..6a46a9e6 100644
--- a/app/javascript/containers/NgosList.jsx
+++ b/app/javascript/containers/NgosList.jsx
@@ -64,7 +64,7 @@ class NgosList extends React.Component {
         const {ngos} = this.props;
 
         return (
-            <div className="container">
+            <div>
                 <div className="jumbotron">
                     <h1 className="display-4">Conheça as ONGs que fazem parte</h1>
                     <p className="lead">Encontre aqui uma ONG para acompanhar suas atividades, consultar sua situação financeira e fazer doações.</p>
diff --git a/app/views/layouts/new_front_end.html.erb b/app/views/layouts/new_front_end.html.erb
index 75edfa76..c2d4d627 100644
--- a/app/views/layouts/new_front_end.html.erb
+++ b/app/views/layouts/new_front_end.html.erb
@@ -47,7 +47,9 @@
       </div>
     </nav>
 
-    <%= yield %>
+    <div class="container">
+      <%= yield %>
+    </div>
   </body>
 </html>
 

From 3ef01f63fc987e28ddaf0640cc7da715141e0268 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 6 Aug 2019 07:28:27 -0600
Subject: [PATCH 02/58] Create a SimpleSubmitButton component

To be used as a generic submit button
---
 .../SimpleSubmitButton/SimpleSubmitButton.jsx      | 10 ++++++++++
 .../SimpleSubmitButton/SimpleSubmitButton.sass     | 14 ++++++++++++++
 .../containers/AdoptionList/AdoptionList.jsx       |  9 ++++++++-
 .../containers/AdoptionList/AdoptionList.sass      |  1 -
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.jsx
 create mode 100644 app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass

diff --git a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.jsx b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.jsx
new file mode 100644
index 00000000..583d5bee
--- /dev/null
+++ b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './SimpleSubmitButton.sass';
+
+const SimpleSubmitButton = (props) => {
+    return (
+        <input className={styles.SimpleSubmitButton} type="submit" value={props.name} />
+    );
+};
+
+export default SimpleSubmitButton;
diff --git a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
new file mode 100644
index 00000000..f097896b
--- /dev/null
+++ b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
@@ -0,0 +1,14 @@
+.SimpleSubmitButton
+  width: 200px
+  height: 50px
+  border-radius: 4px
+  background-color: #ffa0a0
+  font-family: museo-sans, sans-serif
+  font-size: 16px
+  font-weight: normal
+  font-style: normal
+  font-stretch: normal
+  line-height: normal
+  letter-spacing: normal
+  color: #ffffff
+  text-transform: uppercase
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 5c2886de..6b39dfb0 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -1,6 +1,7 @@
 import React from "react"
 import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText";
 import styles from './AdoptionList.sass'
+import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmitButton";
 
 class AdoptionList extends React.Component {
     render() {
@@ -11,7 +12,13 @@ class AdoptionList extends React.Component {
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
                 />
                 <div className={styles.filter}>
-
+                    <form>
+                        <label>
+                            Cidade
+                            <input type="text" name="name" />
+                        </label>
+                        <SimpleSubmitButton name='Procurar' />
+                    </form>
                 </div>
             </div>
         );
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index be796b9f..a602e62f 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1,2 +1 @@
 .AdoptionList
-

From c5ca660321cd3b9c5710562a08d12f49549d5609 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 7 Aug 2019 06:49:36 -0600
Subject: [PATCH 03/58] Decrease font size of SimpleHeaderText

---
 .../components/SimpleHeaderText/SimpleHeaderText.sass         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass b/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
index 9c44c705..2a35afda 100644
--- a/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
+++ b/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
@@ -3,7 +3,7 @@
     width: 448px
     height: 49px
     font-family: museo-sans, sans-serif
-    font-size: 36px
+    font-size: 32px
     font-weight: bold
     font-style: normal
     font-stretch: normal
@@ -15,7 +15,7 @@
     width: 740px
     height: 26px
     font-family: museo-sans, sans-serif
-    font-size: 19px
+    font-size: 16px
     font-weight: 500
     font-style: normal
     font-stretch: normal

From 10ebd223f6966542b569b8c547c235e344c68d9c Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 8 Aug 2019 06:57:38 -0600
Subject: [PATCH 04/58] Create simple select component using new UI

---
 .../components/SelectInput/SelectInput.jsx    | 15 +++++++++++
 .../components/SelectInput/SelectInput.sass   | 26 +++++++++++++++++++
 .../containers/AdoptionList/AdoptionList.jsx  | 17 ++++++------
 .../containers/AdoptionList/AdoptionList.sass |  4 ++-
 4 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/components/SelectInput/SelectInput.jsx
 create mode 100644 app/javascript/components/SelectInput/SelectInput.sass

diff --git a/app/javascript/components/SelectInput/SelectInput.jsx b/app/javascript/components/SelectInput/SelectInput.jsx
new file mode 100644
index 00000000..69c70c85
--- /dev/null
+++ b/app/javascript/components/SelectInput/SelectInput.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './SelectInput.sass';
+
+const SelectInput = (props) => {
+    return (
+        <div className={styles.SelectInput}>
+            <label>{props.label}</label>
+            <select name="color">
+                <option value="">{props.placeholder}</option>
+            </select>
+        </div>
+    );
+};
+
+export default SelectInput;
diff --git a/app/javascript/components/SelectInput/SelectInput.sass b/app/javascript/components/SelectInput/SelectInput.sass
new file mode 100644
index 00000000..bba97ca5
--- /dev/null
+++ b/app/javascript/components/SelectInput/SelectInput.sass
@@ -0,0 +1,26 @@
+.SelectInput
+  border: 0
+  border-radius: 4px
+  margin-bottom: 10px
+  width: 200px
+  height: 50px
+  background-color: #ebebeb
+  font-size: 0
+  padding: 6px
+
+.SelectInput label
+  font-size: 10px
+  font-family: museo-sans, sans-serif
+  color: #9b9b9b
+  padding: 2px 8px 0
+  margin-bottom: 0
+
+.SelectInput select
+  color: #232628
+  font-size: 14px
+  font-family: museo-sans, sans-serif
+  border: 0
+  width: 100%
+  background: none
+  -webkit-appearance: none
+  padding-left: 8px
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 6b39dfb0..aa890c69 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -2,6 +2,7 @@ import React from "react"
 import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText";
 import styles from './AdoptionList.sass'
 import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmitButton";
+import SelectInput from "../../components/SelectInput/SelectInput";
 
 class AdoptionList extends React.Component {
     render() {
@@ -11,15 +12,13 @@ class AdoptionList extends React.Component {
                     title='Encontre seu animalzinho'
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
                 />
-                <div className={styles.filter}>
-                    <form>
-                        <label>
-                            Cidade
-                            <input type="text" name="name" />
-                        </label>
-                        <SimpleSubmitButton name='Procurar' />
-                    </form>
-                </div>
+                <form className={styles.filterBox}>
+                    <SelectInput
+                        label='Cidade'
+                        placeholder='Selecione uma cidade'
+                    />
+                    <SimpleSubmitButton name='Procurar' />
+                </form>
             </div>
         );
     }
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index a602e62f..a2a0c2b2 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1 +1,3 @@
-.AdoptionList
+.AdoptionList .filterBox
+  display: flex
+  flex-direction: row

From a357adbb2f2d9b949d11457e0e7900d7400acb2a Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 8 Aug 2019 07:01:55 -0600
Subject: [PATCH 05/58] Remove border from submit button

---
 .../components/SimpleSubmitButton/SimpleSubmitButton.sass        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
index f097896b..75e85a3e 100644
--- a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
+++ b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
@@ -12,3 +12,4 @@
   letter-spacing: normal
   color: #ffffff
   text-transform: uppercase
+  border: 0

From 68fe6af8155f9333c4541a61a2ae194efe23ac42 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 8 Aug 2019 07:24:00 -0600
Subject: [PATCH 06/58] Add text input component using new UI

- Change width and height of components by props
- Justify components on filter panel
---
 .../components/SelectInput/SelectInput.jsx      |  2 +-
 .../components/TextInput/TextInput.jsx          | 12 ++++++++++++
 .../components/TextInput/TextInput.sass         | 17 +++++++++++++++++
 .../containers/AdoptionList/AdoptionList.jsx    | 14 ++++++++++++++
 .../containers/AdoptionList/AdoptionList.sass   |  1 +
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/components/TextInput/TextInput.jsx
 create mode 100644 app/javascript/components/TextInput/TextInput.sass

diff --git a/app/javascript/components/SelectInput/SelectInput.jsx b/app/javascript/components/SelectInput/SelectInput.jsx
index 69c70c85..9a2fa97f 100644
--- a/app/javascript/components/SelectInput/SelectInput.jsx
+++ b/app/javascript/components/SelectInput/SelectInput.jsx
@@ -3,7 +3,7 @@ import styles from './SelectInput.sass';
 
 const SelectInput = (props) => {
     return (
-        <div className={styles.SelectInput}>
+        <div className={styles.SelectInput} style={{width: props.width, marginRight: props.marginRight}}>
             <label>{props.label}</label>
             <select name="color">
                 <option value="">{props.placeholder}</option>
diff --git a/app/javascript/components/TextInput/TextInput.jsx b/app/javascript/components/TextInput/TextInput.jsx
new file mode 100644
index 00000000..b1872049
--- /dev/null
+++ b/app/javascript/components/TextInput/TextInput.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './TextInput.sass';
+
+const TextInput = (props) => {
+    return (
+        <div className={styles.TextInput} style={{width: props.width, marginRight: props.marginRight}}>
+            <input placeholder={props.placeholder} />
+        </div>
+    );
+};
+
+export default TextInput;
diff --git a/app/javascript/components/TextInput/TextInput.sass b/app/javascript/components/TextInput/TextInput.sass
new file mode 100644
index 00000000..caab521a
--- /dev/null
+++ b/app/javascript/components/TextInput/TextInput.sass
@@ -0,0 +1,17 @@
+.TextInput
+  border: 0
+  border-radius: 4px
+  margin-bottom: 10px
+  width: 300px
+  height: 50px
+  background-color: #ebebeb
+  padding: 12px 6px
+
+.TextInput input
+  color: #232628
+  font-size: 14px
+  font-family: museo-sans, sans-serif
+  border: 0
+  width: 100%
+  background: none
+  padding-left: 8px
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index aa890c69..2f5a857b 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -3,6 +3,7 @@ import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText
 import styles from './AdoptionList.sass'
 import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmitButton";
 import SelectInput from "../../components/SelectInput/SelectInput";
+import TextInput from "../../components/TextInput/TextInput";
 
 class AdoptionList extends React.Component {
     render() {
@@ -16,6 +17,19 @@ class AdoptionList extends React.Component {
                     <SelectInput
                         label='Cidade'
                         placeholder='Selecione uma cidade'
+                        width='200px'
+                        marginRight='20px'
+                    />
+                    <SelectInput
+                        label='ONG'
+                        placeholder='Selecione uma ONG'
+                        width='300px'
+                        marginRight='20px'
+                    />
+                    <TextInput
+                        placeholder='Procure por palavras-chaves'
+                        width='350px'
+                        marginRight='20px'
                     />
                     <SimpleSubmitButton name='Procurar' />
                 </form>
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index a2a0c2b2..c4442769 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1,3 +1,4 @@
 .AdoptionList .filterBox
   display: flex
   flex-direction: row
+  justify-content: space-between

From fafc2d536de9a3cc3b80446ded9da484445839c2 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 19 Aug 2019 07:08:53 -0600
Subject: [PATCH 07/58] WIP: AdoptionCard container

---
 .../containers/AdoptionCard/AdoptionCard.jsx  | 27 ++++++++++
 .../containers/AdoptionCard/AdoptionCard.sass | 52 +++++++++++++++++++
 .../containers/AdoptionList/AdoptionList.jsx  |  8 +++
 .../containers/AdoptionList/AdoptionList.sass | 16 ++++--
 config/credentials.yml.enc                    |  1 +
 5 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/containers/AdoptionCard/AdoptionCard.jsx
 create mode 100644 app/javascript/containers/AdoptionCard/AdoptionCard.sass
 create mode 100644 config/credentials.yml.enc

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
new file mode 100644
index 00000000..a9c0a59e
--- /dev/null
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './AdoptionCard.sass'
+
+const AdoptionCard = () => {
+    return (
+      <div className={styles.AdoptionCard}>
+        <div className={styles.picture}>
+
+        </div>
+        <div className={styles.cardContent}>
+            <a className={styles.city}>Içara, SC</a>
+            <a className={styles.petName}>Marquinhos</a>
+            <a className={styles.petDescription}>
+                Marquinhos é um cachorro muito brincalhão,
+                adora comer e rolar na grama. As vezes faz xixi
+                no lugar errado, mas ele ainda é neném e vai
+                aprender.
+            </a>
+            <div className={styles.postDetail}>
+
+            </div>
+        </div>
+      </div>
+    );
+};
+
+export default AdoptionCard;
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
new file mode 100644
index 00000000..6718d35c
--- /dev/null
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -0,0 +1,52 @@
+.AdoptionCard
+  background-color: #ffffff
+  width: 350px
+  height: 540px
+  border-radius: 4px
+  margin-top: 30px
+
+  .picture
+    width: 100%
+    height: 240px
+    background-color: #1c2d3f
+
+  .cardContent
+    margin: 10px
+    display: flex
+    flex-direction: column
+
+  .city
+    height: 19px
+    font-family: museo-sans, sans-serif
+    font-size: 12px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #848484 !important
+
+  .petName
+    height: 32px
+    font-family: museo-sans, sans-serif
+    font-size: 18px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: 1.6
+    letter-spacing: normal
+    color: #1d1d1d !important
+
+  .petDescription
+    height: 88px
+    font-family: museo-sans, sans-serif
+    font-size: 14px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #232628 !important
+
+  .postDetail
+
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 2f5a857b..68c24b32 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -4,6 +4,7 @@ import styles from './AdoptionList.sass'
 import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmitButton";
 import SelectInput from "../../components/SelectInput/SelectInput";
 import TextInput from "../../components/TextInput/TextInput";
+import AdoptionCard from "../AdoptionCard/AdoptionCard";
 
 class AdoptionList extends React.Component {
     render() {
@@ -33,6 +34,13 @@ class AdoptionList extends React.Component {
                     />
                     <SimpleSubmitButton name='Procurar' />
                 </form>
+                <div className={styles.adoptionCards}>
+                    <AdoptionCard/>
+                    <AdoptionCard/>
+                    <AdoptionCard/>
+                    <AdoptionCard/>
+                    <AdoptionCard/>
+                </div>
             </div>
         );
     }
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index c4442769..d2035da6 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1,4 +1,12 @@
-.AdoptionList .filterBox
-  display: flex
-  flex-direction: row
-  justify-content: space-between
+.AdoptionList
+  .filterBox
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    margin: 40px 0 10px
+
+  .adoptionCards
+    display: flex
+    justify-content: space-between
+    flex-wrap: wrap
+
diff --git a/config/credentials.yml.enc b/config/credentials.yml.enc
new file mode 100644
index 00000000..6f791496
--- /dev/null
+++ b/config/credentials.yml.enc
@@ -0,0 +1 @@
+VfFKL9hwXfPldOaTwKThlbwD9CGsomzTz9TZgRd8g6jNoSd3cF/kt1ufVrYwsCmeCq95ACpAEeOmS0EezGmwPBiUuiutHBMX9TscXCFZw6F30+tm1kTlcDtqKOju1YPV3MvwH1u+GfqeQGNd/5KL89Mzmoi5bAMEPOm89gDMwAKd2Bu57qiC4FNKfN0KcbpMFVAPA0e61O/o80+4HG9CgXrBPvyTtJ/Z8iD+8aAOQijLy8bqld9v+GmQFxKAijVRCuSdbYcELISnqlaJ2RmmnU2WD9vvlCWaCTRixI1O/cI/gFFSIae+nPuR9DkRw72RjKubcTLgcOUjPzCVZW93cqow/VGEpVMBKU+VNo0BHcfAtr36ogF3bX88fiuRItDGXmyY8+g6h+noVpFJxVnbKT11Cb5uganIfnXd--8GtomlCv847BTtPb--BIdt730bq5RYQYYtufxlVA==
\ No newline at end of file

From 95147b212fd2fe41b0677d7547a9f25c7438c355 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 22 Aug 2019 06:47:47 -0600
Subject: [PATCH 08/58] Finish AdoptionCard container

- Add space for ngo picture, name and post time
---
 .../containers/AdoptionCard/AdoptionCard.jsx  |  9 ++++-
 .../containers/AdoptionCard/AdoptionCard.sass | 33 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index a9c0a59e..4f03144c 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -17,7 +17,14 @@ const AdoptionCard = () => {
                 aprender.
             </a>
             <div className={styles.postDetail}>
-
+                <div className={styles.ngoDetail}>
+                    <div className={styles.ngoPicture}>
+                    </div>
+                    <a className={styles.ngoName}>ONG Amigo Bicho</a>
+                </div>
+                <div>
+                    <a className={styles.postTime}>4 mêses atrás</a>
+                </div>
             </div>
         </div>
       </div>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 6718d35c..ba826b58 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -49,4 +49,37 @@
     color: #232628 !important
 
   .postDetail
+    display: flex
+    justify-content: space-between
+
+  .ngoDetail
+    display: flex
+    justify-content: space-between
+    margin: auto 0
 
+  .ngoPicture
+    background-color: #1c2d3f
+    width: 14px
+    height: 14px
+    border-radius: 100%
+    margin-right: 4px
+
+  .ngoName
+    font-family: museo-sans, sans-serif
+    font-size: 12px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #ffa0a0 !important
+
+  .postTime
+    font-family: museo-sans, sans-serif
+    font-size: 12px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #848484 !important

From 016670f5cf1575b0ed8ddfd36fa0786160c73d30 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 22 Aug 2019 07:03:57 -0600
Subject: [PATCH 09/58] Add adoption button component

---
 .../SimpleCircularButton/SimpleCircularButton.jsx | 10 ++++++++++
 .../SimpleCircularButton.sass                     | 15 +++++++++++++++
 .../containers/AdoptionCard/AdoptionCard.jsx      |  4 ++++
 .../containers/AdoptionCard/AdoptionCard.sass     |  5 +++++
 4 files changed, 34 insertions(+)
 create mode 100644 app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
 create mode 100644 app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass

diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
new file mode 100644
index 00000000..93805588
--- /dev/null
+++ b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './SimpleCircularButton.sass';
+
+const SimpleCircularButton = (props) => {
+    return (
+        <button className={styles.SimpleCircularButton}>{props.name}</button>
+    );
+};
+
+export default SimpleCircularButton;
diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
new file mode 100644
index 00000000..6befae63
--- /dev/null
+++ b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
@@ -0,0 +1,15 @@
+.SimpleCircularButton
+  width: 240px
+  height: 50px
+  border-radius: 29px
+  background-color: #83be7d
+  font-family: museo-sans, sans-serif
+  font-size: 16px
+  font-weight: normal
+  font-style: normal
+  font-stretch: normal
+  line-height: normal
+  letter-spacing: normal
+  color: #ffffff
+  text-transform: uppercase
+  border: 0
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 4f03144c..d2be9578 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './AdoptionCard.sass'
+import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCircularButton";
 
 const AdoptionCard = () => {
     return (
@@ -27,6 +28,9 @@ const AdoptionCard = () => {
                 </div>
             </div>
         </div>
+        <div className={styles.adoptionButton}>
+            <SimpleCircularButton name='Adote' />
+        </div>
       </div>
     );
 };
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index ba826b58..259369f2 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -83,3 +83,8 @@
     line-height: normal
     letter-spacing: normal
     color: #848484 !important
+
+  .adoptionButton
+    padding: 10px
+    height: 70px
+    text-align: center

From 9da981d4facc34a6c650c6ee81e0356e0a4b1390 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 22 Aug 2019 07:10:45 -0600
Subject: [PATCH 10/58] Fix adoption card size

---
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 259369f2..74733850 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -1,7 +1,7 @@
 .AdoptionCard
   background-color: #ffffff
   width: 350px
-  height: 540px
+  height: 500px
   border-radius: 4px
   margin-top: 30px
 

From a50224bf8e917b72a9c9c8c0689d5f7047c3b2cf Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 26 Aug 2019 06:17:46 -0600
Subject: [PATCH 11/58] Add labels

---
 .../containers/AdoptionCard/AdoptionCard.jsx  |  2 ++
 .../containers/AdoptionCard/AdoptionCard.sass | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index d2be9578..dc5b2e06 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -5,6 +5,8 @@ import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCi
 const AdoptionCard = () => {
     return (
       <div className={styles.AdoptionCard}>
+          <div className={styles.sexLabel}><a>Femea</a></div>
+          <div className={styles.ageLabel}><a>8 anos</a></div>
         <div className={styles.picture}>
 
         </div>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 74733850..3d7dfe82 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -88,3 +88,39 @@
     padding: 10px
     height: 70px
     text-align: center
+
+  .sexLabel
+    width: 56px
+    height: 20px
+    border-radius: 4px
+    background-color: #72b9d6
+    font-family: museo-sans, sans-serif
+    font-size: 11px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #ffffff
+    text-align: center
+    float: left
+    margin: 20px 0 0 20px
+    padding: 3px
+
+  .ageLabel
+    width: 66px
+    height: 20px
+    border-radius: 4px
+    background-color: #83be7d
+    font-family: museo-sans, sans-serif
+    font-size: 11px
+    font-weight: 500
+    font-style: normal
+    font-stretch: normal
+    line-height: normal
+    letter-spacing: normal
+    color: #ffffff
+    text-align: center
+    float: left
+    margin: 20px 0 0 8px
+    padding: 3px

From cfea49cc48e42120925d3a334b08397016affa1c Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 26 Aug 2019 06:56:17 -0600
Subject: [PATCH 12/58] Fix card list to end align to left

Without space between cards on the last line
---
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 2 +-
 app/javascript/containers/AdoptionList/AdoptionList.sass | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 3d7dfe82..b3f31aed 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -3,7 +3,7 @@
   width: 350px
   height: 500px
   border-radius: 4px
-  margin-top: 30px
+  margin: 10px 10px
 
   .picture
     width: 100%
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index d2035da6..bf226254 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -7,6 +7,6 @@
 
   .adoptionCards
     display: flex
-    justify-content: space-between
+    justify-content: flex-start
     flex-wrap: wrap
 

From 688eb7752281eb4ea6eb0d20df88ebfe5597c985 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 26 Aug 2019 07:02:28 -0600
Subject: [PATCH 13/58] Fix indentation for js class

---
 .../containers/AdoptionCard/AdoptionCard.jsx  | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index dc5b2e06..9876e585 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -4,36 +4,36 @@ import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCi
 
 const AdoptionCard = () => {
     return (
-      <div className={styles.AdoptionCard}>
-          <div className={styles.sexLabel}><a>Femea</a></div>
-          <div className={styles.ageLabel}><a>8 anos</a></div>
-        <div className={styles.picture}>
+        <div className={styles.AdoptionCard}>
+            <div className={styles.sexLabel}><a>Femea</a></div>
+            <div className={styles.ageLabel}><a>8 anos</a></div>
+            <div className={styles.picture}>
 
-        </div>
-        <div className={styles.cardContent}>
-            <a className={styles.city}>Içara, SC</a>
-            <a className={styles.petName}>Marquinhos</a>
-            <a className={styles.petDescription}>
-                Marquinhos é um cachorro muito brincalhão,
-                adora comer e rolar na grama. As vezes faz xixi
-                no lugar errado, mas ele ainda é neném e vai
-                aprender.
-            </a>
-            <div className={styles.postDetail}>
-                <div className={styles.ngoDetail}>
-                    <div className={styles.ngoPicture}>
+            </div>
+            <div className={styles.cardContent}>
+                <a className={styles.city}>Içara, SC</a>
+                <a className={styles.petName}>Marquinhos</a>
+                <a className={styles.petDescription}>
+                    Marquinhos é um cachorro muito brincalhão,
+                    adora comer e rolar na grama. As vezes faz xixi
+                    no lugar errado, mas ele ainda é neném e vai
+                    aprender.
+                </a>
+                <div className={styles.postDetail}>
+                    <div className={styles.ngoDetail}>
+                        <div className={styles.ngoPicture}>
+                        </div>
+                        <a className={styles.ngoName}>ONG Amigo Bicho</a>
+                    </div>
+                    <div>
+                        <a className={styles.postTime}>4 mêses atrás</a>
                     </div>
-                    <a className={styles.ngoName}>ONG Amigo Bicho</a>
-                </div>
-                <div>
-                    <a className={styles.postTime}>4 mêses atrás</a>
                 </div>
             </div>
+            <div className={styles.adoptionButton}>
+                <SimpleCircularButton name='Adote'/>
+            </div>
         </div>
-        <div className={styles.adoptionButton}>
-            <SimpleCircularButton name='Adote' />
-        </div>
-      </div>
     );
 };
 

From c4bdf52c54343f16dda3ca8127499c9c7e225928 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 4 Sep 2019 06:32:49 -0600
Subject: [PATCH 14/58] Fix .env variable syntax

---
 .env.sample | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.env.sample b/.env.sample
index 2b4467a5..e49c6a51 100644
--- a/.env.sample
+++ b/.env.sample
@@ -2,9 +2,9 @@ AWS_BUCKET=
 AWS_REGION=
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
-POSTGRES_USER: postgres
-POSTGRES_PASSWORD: postgres
-POSTGRES_PORT: 5434
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+POSTGRES_PORT=5434
 FACEBOOK_APP_ID=
 FACEBOOK_APP_SECRET=
 CALLBACK_URL=http://localhost:3000/users/auth/facebook/callback

From 0d851c84b94996ec19abbb231f421eb8cbedb436 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 4 Sep 2019 06:55:48 -0600
Subject: [PATCH 15/58] Add controller to return pets

---
 app/controllers/v1/pets_for_adoption_controller.rb  |  7 +++++++
 .../v1/pets_for_adoption_controller_spec.rb         | 13 +++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 app/controllers/v1/pets_for_adoption_controller.rb
 create mode 100644 spec/controllers/v1/pets_for_adoption_controller_spec.rb

diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
new file mode 100644
index 00000000..ee251a4d
--- /dev/null
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -0,0 +1,7 @@
+class V1::PetsForAdoptionController < ApplicationController
+  def index
+    render json: {
+      pets: Pet.actived
+    }.to_json
+  end
+end
diff --git a/spec/controllers/v1/pets_for_adoption_controller_spec.rb b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
new file mode 100644
index 00000000..3b144862
--- /dev/null
+++ b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+describe V1::PetsForAdoptionController do
+  describe 'GET #index' do
+    before do
+      get :index
+    end
+
+    it 'returns 200 code status' do
+      expect(response).to have_http_status(:ok)
+    end
+  end
+end

From 1614efd7ce5e3b041041ea9ce9780b2318cda859 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 4 Sep 2019 06:56:13 -0600
Subject: [PATCH 16/58] Configure redux store for adoption list

---
 app/javascript/configureStore.js              |  2 +
 .../containers/AdoptionList/AdoptionList.jsx  | 45 ++++++++++++++++---
 config/routes.rb                              |  1 +
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/app/javascript/configureStore.js b/app/javascript/configureStore.js
index e35505ac..7046024a 100644
--- a/app/javascript/configureStore.js
+++ b/app/javascript/configureStore.js
@@ -15,6 +15,8 @@ function rootReducer(state, action) {
             return { ngos: action.json.ngos };
         case "GET_NGO_SUCCESS":
             return { ngo: action.json.ngo };
+        case "GET_ADOPTION_SUCCESS":
+            return { pets: action.json.pets };
         default:
             return state;
     }
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 68c24b32..88215174 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -5,9 +5,38 @@ import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmit
 import SelectInput from "../../components/SelectInput/SelectInput";
 import TextInput from "../../components/TextInput/TextInput";
 import AdoptionCard from "../AdoptionCard/AdoptionCard";
+import {createStructuredSelector} from "reselect";
+import {connect} from "react-redux";
+
+const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
+const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
+
+function fetchPetsForAdoption() {
+    return dispatch => {
+        dispatch({type: GET_ADOPTION_REQUEST});
+        return fetch(`../v1/pets_for_adoption.json`)
+            .then(response => response.json())
+            .then(json => dispatch(fetchPetsForAdoptionSuccess(json)))
+            .catch(error => console.log(error));
+    }
+}
+
+export function fetchPetsForAdoptionSuccess(json) {
+    return {
+        type: GET_ADOPTION_SUCCESS,
+        json
+    };
+}
 
 class AdoptionList extends React.Component {
+    componentWillMount() {
+        const {fetchPetsForAdoption} = this.props;
+        fetchPetsForAdoption();
+    }
+
     render() {
+        const {pets} = this.props;
+
         return (
             <div className={styles.AdoptionList}>
                 <SimpleHeaderText
@@ -35,15 +64,19 @@ class AdoptionList extends React.Component {
                     <SimpleSubmitButton name='Procurar' />
                 </form>
                 <div className={styles.adoptionCards}>
-                    <AdoptionCard/>
-                    <AdoptionCard/>
-                    <AdoptionCard/>
-                    <AdoptionCard/>
-                    <AdoptionCard/>
+                    {pets && pets.map(ngo => {
+                        return <AdoptionCard />;
+                    })}
                 </div>
             </div>
         );
     }
 }
 
-export default AdoptionList;
+const structuredSelector = createStructuredSelector({
+    pets: state => state.pets,
+});
+
+const mapDispatchToProps = {fetchPetsForAdoption};
+
+export default connect(structuredSelector, mapDispatchToProps)(AdoptionList);
diff --git a/config/routes.rb b/config/routes.rb
index 85776934..58396da4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -19,6 +19,7 @@
     get 'things', to: 'things#index'
     get 'ngos', to: 'ngos#index'
     get 'ngo/:id', to: 'ngos#show'
+    get 'pets_for_adoption', to: 'pets_for_adoption#index'
   end
 
   get '*page', to: 'static#index', constraints: ->(req) do

From 084054d69ff2ac3648e0cbcb1fc416831c437b57 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 4 Sep 2019 07:04:46 -0600
Subject: [PATCH 17/58] Add pet details to adoption card

---
 .../containers/AdoptionCard/AdoptionCard.jsx        | 13 +++++--------
 .../containers/AdoptionList/AdoptionList.jsx        | 10 ++++++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 9876e585..4127bf87 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -2,22 +2,19 @@ import React from 'react';
 import styles from './AdoptionCard.sass'
 import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCircularButton";
 
-const AdoptionCard = () => {
+const AdoptionCard = (props) => {
     return (
         <div className={styles.AdoptionCard}>
-            <div className={styles.sexLabel}><a>Femea</a></div>
-            <div className={styles.ageLabel}><a>8 anos</a></div>
+            <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
+            <div className={styles.ageLabel}><a>{props.age} anos</a></div>
             <div className={styles.picture}>
 
             </div>
             <div className={styles.cardContent}>
                 <a className={styles.city}>Içara, SC</a>
-                <a className={styles.petName}>Marquinhos</a>
+                <a className={styles.petName}>{props.name}</a>
                 <a className={styles.petDescription}>
-                    Marquinhos é um cachorro muito brincalhão,
-                    adora comer e rolar na grama. As vezes faz xixi
-                    no lugar errado, mas ele ainda é neném e vai
-                    aprender.
+                    {props.description}
                 </a>
                 <div className={styles.postDetail}>
                     <div className={styles.ngoDetail}>
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 88215174..305b210f 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -64,8 +64,14 @@ class AdoptionList extends React.Component {
                     <SimpleSubmitButton name='Procurar' />
                 </form>
                 <div className={styles.adoptionCards}>
-                    {pets && pets.map(ngo => {
-                        return <AdoptionCard />;
+                    {pets && pets.map(pet => {
+                        return <AdoptionCard
+                            key={pet.id}
+                            name={pet.name}
+                            description={pet.description}
+                            age={pet.age}
+                            sex={pet.sex}
+                        />;
                     })}
                 </div>
             </div>

From 4afe8741bce66dcfa277c144b6fd9b4c4c090caf Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 4 Sep 2019 07:19:59 -0600
Subject: [PATCH 18/58] Codeclimate goodpractices tips

- Decrease number of lines on AdoptionCard
- Extract filter form to its own component to reduce number of lines
- Extract list of pets to a method to reduce number of lines
---
 .../containers/AdoptionCard/AdoptionCard.jsx  | 11 ++---
 .../containers/AdoptionList/AdoptionList.jsx  | 47 ++++++-------------
 .../containers/AdoptionList/AdoptionList.sass |  6 ---
 .../AdoptionList/FilterBox/FilterBox.jsx      | 33 +++++++++++++
 .../AdoptionList/FilterBox/FilterBox.sass     |  5 ++
 5 files changed, 56 insertions(+), 46 deletions(-)
 create mode 100644 app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx
 create mode 100644 app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 4127bf87..cd077b1e 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -7,19 +7,14 @@ const AdoptionCard = (props) => {
         <div className={styles.AdoptionCard}>
             <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
             <div className={styles.ageLabel}><a>{props.age} anos</a></div>
-            <div className={styles.picture}>
-
-            </div>
+            <div className={styles.picture}></div>
             <div className={styles.cardContent}>
                 <a className={styles.city}>Içara, SC</a>
                 <a className={styles.petName}>{props.name}</a>
-                <a className={styles.petDescription}>
-                    {props.description}
-                </a>
+                <a className={styles.petDescription}>{props.description}</a>
                 <div className={styles.postDetail}>
                     <div className={styles.ngoDetail}>
-                        <div className={styles.ngoPicture}>
-                        </div>
+                        <div className={styles.ngoPicture}></div>
                         <a className={styles.ngoName}>ONG Amigo Bicho</a>
                     </div>
                     <div>
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 305b210f..2511b797 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -1,12 +1,10 @@
 import React from "react"
 import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText";
 import styles from './AdoptionList.sass'
-import SimpleSubmitButton from "../../components/SimpleSubmitButton/SimpleSubmitButton";
-import SelectInput from "../../components/SelectInput/SelectInput";
-import TextInput from "../../components/TextInput/TextInput";
 import AdoptionCard from "../AdoptionCard/AdoptionCard";
 import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
+import FilterBox from "./FilterBox/FilterBox";
 
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
@@ -34,6 +32,18 @@ class AdoptionList extends React.Component {
         fetchPetsForAdoption();
     }
 
+    petList = (pets) => {
+        return pets.map(pet => {
+            return <AdoptionCard
+                key={pet.id}
+                name={pet.name}
+                description={pet.description}
+                age={pet.age}
+                sex={pet.sex}
+            />;
+        })
+    };
+
     render() {
         const {pets} = this.props;
 
@@ -43,36 +53,9 @@ class AdoptionList extends React.Component {
                     title='Encontre seu animalzinho'
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
                 />
-                <form className={styles.filterBox}>
-                    <SelectInput
-                        label='Cidade'
-                        placeholder='Selecione uma cidade'
-                        width='200px'
-                        marginRight='20px'
-                    />
-                    <SelectInput
-                        label='ONG'
-                        placeholder='Selecione uma ONG'
-                        width='300px'
-                        marginRight='20px'
-                    />
-                    <TextInput
-                        placeholder='Procure por palavras-chaves'
-                        width='350px'
-                        marginRight='20px'
-                    />
-                    <SimpleSubmitButton name='Procurar' />
-                </form>
+                <FilterBox/>
                 <div className={styles.adoptionCards}>
-                    {pets && pets.map(pet => {
-                        return <AdoptionCard
-                            key={pet.id}
-                            name={pet.name}
-                            description={pet.description}
-                            age={pet.age}
-                            sex={pet.sex}
-                        />;
-                    })}
+                    {pets && this.petList(pets)}
                 </div>
             </div>
         );
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index bf226254..2cb191dc 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1,10 +1,4 @@
 .AdoptionList
-  .filterBox
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    margin: 40px 0 10px
-
   .adoptionCards
     display: flex
     justify-content: flex-start
diff --git a/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx b/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx
new file mode 100644
index 00000000..62539f5d
--- /dev/null
+++ b/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./FilterBox.sass";
+import SelectInput from "../../../components/SelectInput/SelectInput";
+import TextInput from "../../../components/TextInput/TextInput";
+import SimpleSubmitButton from "../../../components/SimpleSubmitButton/SimpleSubmitButton";
+
+const FilterBox = () => {
+    return (
+        <form className={styles.FilterBox}>
+            <SelectInput
+                label='Cidade'
+                placeholder='Selecione uma cidade'
+                width='200px'
+                marginRight='20px'
+            />
+            <SelectInput
+                label='ONG'
+                placeholder='Selecione uma ONG'
+                width='300px'
+                marginRight='20px'
+            />
+            <TextInput
+                placeholder='Procure por palavras-chaves'
+                width='350px'
+                marginRight='20px'
+            />
+            <SimpleSubmitButton name='Procurar' />
+        </form>
+    );
+};
+
+export default FilterBox;
+
diff --git a/app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass b/app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass
new file mode 100644
index 00000000..3a6d25f5
--- /dev/null
+++ b/app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass
@@ -0,0 +1,5 @@
+.FilterBox
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    margin: 40px 0 10px

From ef97083c5b3451b8fa24e26088afafbbe2afc675 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 16 Sep 2019 07:19:22 -0600
Subject: [PATCH 19/58] Add Ngo attributes on Pet response

- Extract some class
---
 app/controllers/v1/ngos_controller.rb         | 28 -------------------
 .../v1/pets_for_adoption_controller.rb        |  2 +-
 app/lib/list_ngos.rb                          | 15 ++++++++++
 app/lib/list_pets.rb                          | 17 +++++++++++
 app/lib/ngo_response_attributes.rb            | 26 +++++++++++++++++
 app/lib/pet_list.rb                           |  1 +
 app/lib/pet_response_attributes.rb            | 14 ++++++++++
 7 files changed, 74 insertions(+), 29 deletions(-)
 create mode 100644 app/lib/list_ngos.rb
 create mode 100644 app/lib/list_pets.rb
 create mode 100644 app/lib/ngo_response_attributes.rb
 create mode 100644 app/lib/pet_response_attributes.rb

diff --git a/app/controllers/v1/ngos_controller.rb b/app/controllers/v1/ngos_controller.rb
index 31cd5d44..0fee4d7d 100644
--- a/app/controllers/v1/ngos_controller.rb
+++ b/app/controllers/v1/ngos_controller.rb
@@ -12,31 +12,3 @@ def show
   end
 end
 
-# TODO: extract to a class
-# TODO: add specs
-class ListNgos
-  def all
-    ngos = Ngo.actived
-    add_extra_fields(ngos)
-  end
-
-  private
-
-  def add_extra_fields(ngos)
-    ngos.map do |ngo|
-      ngo.attributes.merge(
-        logo_path: logo_path(ngo),
-        fantasy_name_url: ngo.fantasy_name_url
-      )
-    end
-  end
-
-  # TODO: this should have it's own class and maybe returned by the model
-  def logo_path(ngo)
-    if ngo.image.attached?
-      Rails.application.routes.url_helpers.rails_blob_path(ngo.image, only_path: true)
-    else
-      ActionController::Base.helpers.image_path('image_not_found.png')
-    end
-  end
-end
diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index ee251a4d..8ba421a0 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -1,7 +1,7 @@
 class V1::PetsForAdoptionController < ApplicationController
   def index
     render json: {
-      pets: Pet.actived
+      pets: ListPets.new.all
     }.to_json
   end
 end
diff --git a/app/lib/list_ngos.rb b/app/lib/list_ngos.rb
new file mode 100644
index 00000000..7b54c1d2
--- /dev/null
+++ b/app/lib/list_ngos.rb
@@ -0,0 +1,15 @@
+# TODO: add specs
+class ListNgos
+  def all
+    ngos = Ngo.actived
+    add_extra_fields(ngos)
+  end
+
+  private
+
+  def add_extra_fields(ngos)
+    ngos.map do |ngo|
+      NgoResponseAttributes.new(ngo).attributes
+    end
+  end
+end
diff --git a/app/lib/list_pets.rb b/app/lib/list_pets.rb
new file mode 100644
index 00000000..1dd73e21
--- /dev/null
+++ b/app/lib/list_pets.rb
@@ -0,0 +1,17 @@
+# TODO: add specs
+class ListPets
+  def all
+    pets = Pet.actived
+    add_extra_fields(pets)
+  end
+
+  private
+
+  def add_extra_fields(pets)
+    pets.map do |pet|
+      pet.attributes.merge(
+        ngo: NgoResponseAttributes.new(pet.ngo).attributes
+      )
+    end
+  end
+end
diff --git a/app/lib/ngo_response_attributes.rb b/app/lib/ngo_response_attributes.rb
new file mode 100644
index 00000000..e62634c2
--- /dev/null
+++ b/app/lib/ngo_response_attributes.rb
@@ -0,0 +1,26 @@
+# TODO: add specs
+class NgoResponseAttributes
+  attr_reader :ngo
+
+  def initialize(ngo)
+    @ngo = ngo
+  end
+
+  def attributes
+    ngo.attributes.merge(
+      logo_path: logo_path(ngo),
+      fantasy_name_url: ngo.fantasy_name_url
+    )
+  end
+
+  private
+
+  # TODO: this should have it's own class and maybe returned by the model
+  def logo_path(ngo)
+    if ngo.image.attached?
+      Rails.application.routes.url_helpers.rails_blob_path(ngo.image, only_path: true)
+    else
+      ActionController::Base.helpers.image_path('image_not_found.png')
+    end
+  end
+end
diff --git a/app/lib/pet_list.rb b/app/lib/pet_list.rb
index 766c0908..f48b569f 100644
--- a/app/lib/pet_list.rb
+++ b/app/lib/pet_list.rb
@@ -1,3 +1,4 @@
+# in process of being deprecated
 class PetList
   def self.execute(user)
     if user.admin?
diff --git a/app/lib/pet_response_attributes.rb b/app/lib/pet_response_attributes.rb
new file mode 100644
index 00000000..d82c36bd
--- /dev/null
+++ b/app/lib/pet_response_attributes.rb
@@ -0,0 +1,14 @@
+# TODO: add specs
+class PetResponseAttributes
+  attr_reader :pet
+
+  def initialize(pet)
+    @pet = pet
+  end
+
+  def attributes
+    pet.attributes.merge(
+      ngo: NgoResponseAttributes.new(pet.ngo).attributes
+    )
+  end
+end

From 49d1fb771d8c59a5d359506a57c7d20dbd93f75c Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 16 Sep 2019 07:24:43 -0600
Subject: [PATCH 20/58] Add address for ngos on seed

---
 db/seeds.rb | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/db/seeds.rb b/db/seeds.rb
index d5c80391..6472e2cc 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -15,7 +15,13 @@
   site: Faker::Internet.url,
   cnpj: CNPJ.generate,
   date_start: Faker::Date.backward(1000),
-  active: true
+  active: true,
+  city: Faker::Address.city,
+  state: Faker::Address.state,
+  zipcode: Faker::Address.zip_code,
+  address_number: Faker::Address.building_number,
+  address: Faker::Address.street_address,
+  neighborhood: Faker::Address.community,
 )
 
 Ngo.last.image.attach(io: File.open("public/images/ngo/amigobicho.png"), filename: 'amigobicho.png')

From 44c0552adc8345c718ec89edc68db20151b9ce2b Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 18 Sep 2019 06:52:04 -0600
Subject: [PATCH 21/58] Add Ngo real information on adoption card

---
 app/javascript/containers/AdoptionCard/AdoptionCard.jsx  | 5 +++--
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 1 -
 app/javascript/containers/AdoptionList/AdoptionList.jsx  | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index cd077b1e..859a58cc 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './AdoptionCard.sass'
 import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCircularButton";
+import {Link} from "react-router-dom";
 
 const AdoptionCard = (props) => {
     return (
@@ -14,8 +15,8 @@ const AdoptionCard = (props) => {
                 <a className={styles.petDescription}>{props.description}</a>
                 <div className={styles.postDetail}>
                     <div className={styles.ngoDetail}>
-                        <div className={styles.ngoPicture}></div>
-                        <a className={styles.ngoName}>ONG Amigo Bicho</a>
+                        <img className={styles.ngoPicture} src={props.ngo.logo_path} alt='Imagem da ONG' />
+                        <Link className={styles.ngoName} to={`/new/ong/${props.ngo.fantasy_name}`}>{props.ngo.fantasy_name}</Link>
                     </div>
                     <div>
                         <a className={styles.postTime}>4 mêses atrás</a>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index b3f31aed..6205a4de 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -58,7 +58,6 @@
     margin: auto 0
 
   .ngoPicture
-    background-color: #1c2d3f
     width: 14px
     height: 14px
     border-radius: 100%
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 2511b797..11023fbb 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -40,6 +40,7 @@ class AdoptionList extends React.Component {
                 description={pet.description}
                 age={pet.age}
                 sex={pet.sex}
+                ngo={pet.ngo}
             />;
         })
     };

From 05dac20530e24dc488755612e2f268bd99140f02 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 18 Sep 2019 07:10:37 -0600
Subject: [PATCH 22/58] Display postedAt on adoption card using humanized
 date/time

- Add moment and javascript-time-ago library to show humanized date/time
---
 .../containers/AdoptionCard/AdoptionCard.jsx         | 11 ++++++++++-
 .../containers/AdoptionList/AdoptionList.jsx         |  1 +
 package.json                                         | 12 +++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 859a58cc..66873b36 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -2,8 +2,17 @@ import React from 'react';
 import styles from './AdoptionCard.sass'
 import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCircularButton";
 import {Link} from "react-router-dom";
+import TimeAgo from 'javascript-time-ago'
+// Load pt-BR locale for time ago
+import br from 'javascript-time-ago/locale/pt'
+
+TimeAgo.addLocale(br);
 
 const AdoptionCard = (props) => {
+    var moment = require('moment');
+    const postedAtDateTime = moment(props.posted_at).toDate();
+    const timeAgo = new TimeAgo('pt-BR');
+
     return (
         <div className={styles.AdoptionCard}>
             <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
@@ -19,7 +28,7 @@ const AdoptionCard = (props) => {
                         <Link className={styles.ngoName} to={`/new/ong/${props.ngo.fantasy_name}`}>{props.ngo.fantasy_name}</Link>
                     </div>
                     <div>
-                        <a className={styles.postTime}>4 mêses atrás</a>
+                        <a className={styles.postTime}>{timeAgo.format(postedAtDateTime)}</a>
                     </div>
                 </div>
             </div>
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 11023fbb..ee315d0a 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -38,6 +38,7 @@ class AdoptionList extends React.Component {
                 key={pet.id}
                 name={pet.name}
                 description={pet.description}
+                posted_at={pet.created_at}
                 age={pet.age}
                 sex={pet.sex}
                 ngo={pet.ngo}
diff --git a/package.json b/package.json
index 74319c14..40a19c71 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,16 @@
     "@babel/preset-react": "^7.0.0",
     "@rails/webpacker": "^4.0.7",
     "@sentry/browser": "^5.4.3",
+    "autoprefixer": "^9.6.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-polyfill": "^6.26.0",
     "babel-preset-react": "^6.24.1",
+    "cssnano": "^4.1.10",
+    "javascript-time-ago": "^2.0.1",
+    "moment": "^2.24.0",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
@@ -18,12 +25,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "postcss-cssnext": "^3.1.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
     "sugarss": "^2.0.0",
-    "autoprefixer": "^9.6.1",
-    "cssnano": "^4.1.10",
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {

From d9752947d6b701e747c1c7fc0a5a787e06b9139b Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 18 Sep 2019 07:25:13 -0600
Subject: [PATCH 23/58] Add pet image on adoption card

---
 .../containers/AdoptionCard/AdoptionCard.jsx           |  6 ++++--
 .../containers/AdoptionCard/AdoptionCard.sass          |  9 ++++++++-
 .../containers/AdoptionList/AdoptionList.jsx           |  3 ++-
 app/lib/list_pets.rb                                   | 10 ++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 66873b36..64e410f5 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -10,14 +10,16 @@ TimeAgo.addLocale(br);
 
 const AdoptionCard = (props) => {
     var moment = require('moment');
-    const postedAtDateTime = moment(props.posted_at).toDate();
+    const postedAtDateTime = moment(props.postedAt).toDate();
     const timeAgo = new TimeAgo('pt-BR');
 
     return (
         <div className={styles.AdoptionCard}>
             <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
             <div className={styles.ageLabel}><a>{props.age} anos</a></div>
-            <div className={styles.picture}></div>
+            <div className={styles.pictureBox}>
+                <img className={styles.picture} src={props.petImage} alt='Imagem do pet' />
+            </div>
             <div className={styles.cardContent}>
                 <a className={styles.city}>Içara, SC</a>
                 <a className={styles.petName}>{props.name}</a>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 6205a4de..44996ba4 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -5,11 +5,16 @@
   border-radius: 4px
   margin: 10px 10px
 
-  .picture
+  .pictureBox
     width: 100%
     height: 240px
     background-color: #1c2d3f
 
+  .picture
+    width: 100%
+    height: 100%
+    margin: -40px 0
+
   .cardContent
     margin: 10px
     display: flex
@@ -105,6 +110,7 @@
     float: left
     margin: 20px 0 0 20px
     padding: 3px
+    position: relative
 
   .ageLabel
     width: 66px
@@ -123,3 +129,4 @@
     float: left
     margin: 20px 0 0 8px
     padding: 3px
+    position: relative
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index ee315d0a..23019230 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -38,7 +38,8 @@ class AdoptionList extends React.Component {
                 key={pet.id}
                 name={pet.name}
                 description={pet.description}
-                posted_at={pet.created_at}
+                postedAt={pet.created_at}
+                petImage={pet.logo_path}
                 age={pet.age}
                 sex={pet.sex}
                 ngo={pet.ngo}
diff --git a/app/lib/list_pets.rb b/app/lib/list_pets.rb
index 1dd73e21..fbabcb91 100644
--- a/app/lib/list_pets.rb
+++ b/app/lib/list_pets.rb
@@ -10,8 +10,18 @@ def all
   def add_extra_fields(pets)
     pets.map do |pet|
       pet.attributes.merge(
+        logo_path: logo_path(pet),
         ngo: NgoResponseAttributes.new(pet.ngo).attributes
       )
     end
   end
+
+  # TODO: extract this to a class
+  def logo_path(pet)
+    if pet.image.attached?
+      Rails.application.routes.url_helpers.rails_blob_path(pet.image, only_path: true)
+    else
+      ActionController::Base.helpers.image_path('image_not_found.png')
+    end
+  end
 end

From a04fc46cc58d3ff74920a73c108e12b232a328ed Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 18 Sep 2019 07:26:02 -0600
Subject: [PATCH 24/58] Updated Yarn lockfile

---
 yarn.lock | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 97ebf0aa..dcaf55c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3976,6 +3976,13 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+javascript-time-ago@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.0.1.tgz#11c85cac73f68eebf0256c9b1610e2ce2f429972"
+  integrity sha512-ec5m6x3eh2MloVvSd6Yy9ShqeQmWHl4GaKSZNF4UlRhqGMdxPtsAAjkhUmO/PHk7c13R8yfkSygNZkdi4QpBww==
+  dependencies:
+    relative-time-format "^0.1.3"
+
 js-base64@^2.1.8:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
@@ -4495,6 +4502,11 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdir
   dependencies:
     minimist "0.0.8"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6568,6 +6580,11 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+relative-time-format@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-0.1.3.tgz#d50f49d13f97c7f801afba600b1a4a0890755df2"
+  integrity sha512-0O6i4fKjsx8qhz57zorG+LrIDnF9pSvP5s7H9R1Nb5nSqih5dvRyKzNKs6MxhL3bv4iwsz4DuDwAyw+c47QFIA==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"

From b61ada446e342ceb3b0a8e17c0bab50508a05b9f Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 20 Sep 2019 06:58:20 -0600
Subject: [PATCH 25/58] Improvement on label for pet age

---
 .../containers/AdoptionCard/AdoptionCard.jsx         | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 64e410f5..f755f363 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -13,10 +13,20 @@ const AdoptionCard = (props) => {
     const postedAtDateTime = moment(props.postedAt).toDate();
     const timeAgo = new TimeAgo('pt-BR');
 
+    function ageLabelText(age) {
+        if (age == null) {
+            return "0 anos";
+        } else if (age === 1) {
+            return `${age} ano`;
+        } else {
+            return `${age} anos`;
+        }
+    }
+
     return (
         <div className={styles.AdoptionCard}>
             <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
-            <div className={styles.ageLabel}><a>{props.age} anos</a></div>
+            <div className={styles.ageLabel}><a>{ageLabelText(props.age)}</a></div>
             <div className={styles.pictureBox}>
                 <img className={styles.picture} src={props.petImage} alt='Imagem do pet' />
             </div>

From 2c2b3f315a7f8787ccc5f61fb8d2319004f70563 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 20 Sep 2019 07:19:09 -0600
Subject: [PATCH 26/58] Update seeds to select random sex and description size
 limit

---
 db/seeds.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/db/seeds.rb b/db/seeds.rb
index 6472e2cc..8b86fc40 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -68,8 +68,8 @@
   pet = Pet.create!(
       name: Faker::Name.first_name,
       age: Random.rand(10),
-      description: Faker::Lorem.sentence,
-      sex: 'f',
+      description: Faker::Lorem.paragraph_by_chars([100, 50, 200, 300, 500].sample),
+      sex: ['f', 'm'].sample,
       active: true,
       ngo_id: ngo_ids.sample
   )

From e738c70e7493f3a8d22c2560a79a79275cca6195 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 20 Sep 2019 07:39:12 -0600
Subject: [PATCH 27/58] Truncate text on adoption card

---
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 1 +
 app/javascript/containers/AdoptionList/AdoptionList.jsx  | 2 +-
 app/lib/list_pets.rb                                     | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 44996ba4..6907255a 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -52,6 +52,7 @@
     line-height: normal
     letter-spacing: normal
     color: #232628 !important
+    text-align: justify
 
   .postDetail
     display: flex
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 23019230..3d7a06f1 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -37,7 +37,7 @@ class AdoptionList extends React.Component {
             return <AdoptionCard
                 key={pet.id}
                 name={pet.name}
-                description={pet.description}
+                description={pet.description_truncated}
                 postedAt={pet.created_at}
                 petImage={pet.logo_path}
                 age={pet.age}
diff --git a/app/lib/list_pets.rb b/app/lib/list_pets.rb
index fbabcb91..dc4dc676 100644
--- a/app/lib/list_pets.rb
+++ b/app/lib/list_pets.rb
@@ -11,7 +11,8 @@ def add_extra_fields(pets)
     pets.map do |pet|
       pet.attributes.merge(
         logo_path: logo_path(pet),
-        ngo: NgoResponseAttributes.new(pet.ngo).attributes
+        ngo: NgoResponseAttributes.new(pet.ngo).attributes,
+        description_truncated: pet.description.truncate(240),
       )
     end
   end

From 99bb203447f89b1a3d43f74852a988b59a1b6ae2 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 20 Sep 2019 07:44:54 -0600
Subject: [PATCH 28/58] Show Ngo address on adoption card

---
 .../containers/AdoptionCard/AdoptionCard.jsx        | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index f755f363..4a7a1cb7 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -23,6 +23,17 @@ const AdoptionCard = (props) => {
         }
     }
 
+    function getCity(ngo) {
+        const city = ngo.city ? ngo.city : '';
+        const state = ngo.state ? ngo.state : '';
+
+        if (city === '' && state === '') {
+            return 'Endereço da ONG não cadastrado';
+        }
+
+        return city + ", " + state;
+    }
+
     return (
         <div className={styles.AdoptionCard}>
             <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
@@ -31,7 +42,7 @@ const AdoptionCard = (props) => {
                 <img className={styles.picture} src={props.petImage} alt='Imagem do pet' />
             </div>
             <div className={styles.cardContent}>
-                <a className={styles.city}>Içara, SC</a>
+                <a className={styles.city}>{getCity(props.ngo)}</a>
                 <a className={styles.petName}>{props.name}</a>
                 <a className={styles.petDescription}>{props.description}</a>
                 <div className={styles.postDetail}>

From 97d08e1bc99660af191af900c9965e045fefa09f Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 30 Sep 2019 07:12:24 -0600
Subject: [PATCH 29/58] Add list of ngo cities on city dropbox

- Rename component to be more
---
 app/controllers/v1/ngos_controller.rb         |  9 ++-
 .../components/SelectInput/SelectInput.jsx    |  3 +
 app/javascript/configureStore.js              |  2 +
 .../containers/AdoptionCard/AdoptionCard.jsx  |  1 +
 .../containers/AdoptionList/AdoptionList.jsx  |  9 +--
 .../FilterBox/AdoptionFilterBox.jsx           | 72 +++++++++++++++++++
 ...{FilterBox.sass => AdoptionFilterBox.sass} |  0
 .../AdoptionList/FilterBox/FilterBox.jsx      | 33 ---------
 config/routes.rb                              |  1 +
 9 files changed, 90 insertions(+), 40 deletions(-)
 create mode 100644 app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx
 rename app/javascript/containers/AdoptionList/FilterBox/{FilterBox.sass => AdoptionFilterBox.sass} (100%)
 delete mode 100644 app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx

diff --git a/app/controllers/v1/ngos_controller.rb b/app/controllers/v1/ngos_controller.rb
index 0fee4d7d..b5e76593 100644
--- a/app/controllers/v1/ngos_controller.rb
+++ b/app/controllers/v1/ngos_controller.rb
@@ -7,7 +7,14 @@ def index
 
   def show
     render json: {
-        ngo: Ngo.last
+      ngo: Ngo.last
+    }.to_json
+  end
+
+  def cities
+    # TODO: test
+    render json: {
+      cities: ListNgos.new.all.map { |ngo| ngo['city'] && { id: ngo['city'], name: ngo['city'] } }.uniq.compact
     }.to_json
   end
 end
diff --git a/app/javascript/components/SelectInput/SelectInput.jsx b/app/javascript/components/SelectInput/SelectInput.jsx
index 9a2fa97f..97330262 100644
--- a/app/javascript/components/SelectInput/SelectInput.jsx
+++ b/app/javascript/components/SelectInput/SelectInput.jsx
@@ -7,6 +7,9 @@ const SelectInput = (props) => {
             <label>{props.label}</label>
             <select name="color">
                 <option value="">{props.placeholder}</option>
+                {props.options && props.options.length > 0 && props.options.map(opt => {
+                    return <option key={opt.id} value={opt.id}>{opt.name}</option>
+                })}
             </select>
         </div>
     );
diff --git a/app/javascript/configureStore.js b/app/javascript/configureStore.js
index 7046024a..ef4b89bd 100644
--- a/app/javascript/configureStore.js
+++ b/app/javascript/configureStore.js
@@ -17,6 +17,8 @@ function rootReducer(state, action) {
             return { ngo: action.json.ngo };
         case "GET_ADOPTION_SUCCESS":
             return { pets: action.json.pets };
+        case "GET_NGO_CITIES_SUCCESS":
+            return { cities: action.json.cities };
         default:
             return state;
     }
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 4a7a1cb7..9ab8fc3b 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -28,6 +28,7 @@ const AdoptionCard = (props) => {
         const state = ngo.state ? ngo.state : '';
 
         if (city === '' && state === '') {
+            // TODO: should be required on ngos form
             return 'Endereço da ONG não cadastrado';
         }
 
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 3d7a06f1..637694b3 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -4,7 +4,7 @@ import styles from './AdoptionList.sass'
 import AdoptionCard from "../AdoptionCard/AdoptionCard";
 import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
-import FilterBox from "./FilterBox/FilterBox";
+import AdoptionFilterBox from "./FilterBox/AdoptionFilterBox";
 
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
@@ -27,10 +27,7 @@ export function fetchPetsForAdoptionSuccess(json) {
 }
 
 class AdoptionList extends React.Component {
-    componentWillMount() {
-        const {fetchPetsForAdoption} = this.props;
-        fetchPetsForAdoption();
-    }
+
 
     petList = (pets) => {
         return pets.map(pet => {
@@ -56,7 +53,7 @@ class AdoptionList extends React.Component {
                     title='Encontre seu animalzinho'
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
                 />
-                <FilterBox/>
+                <AdoptionFilterBox/>
                 <div className={styles.adoptionCards}>
                     {pets && this.petList(pets)}
                 </div>
diff --git a/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx b/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx
new file mode 100644
index 00000000..f4cb51a1
--- /dev/null
+++ b/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx
@@ -0,0 +1,72 @@
+import React from "react";
+import styles from "./AdoptionFilterBox.sass";
+import SelectInput from "../../../components/SelectInput/SelectInput";
+import TextInput from "../../../components/TextInput/TextInput";
+import SimpleSubmitButton from "../../../components/SimpleSubmitButton/SimpleSubmitButton";
+import {createStructuredSelector} from "reselect";
+import {connect} from "react-redux";
+
+const GET_NGO_CITIES_REQUEST = 'GET_NGO_CITIES_REQUEST';
+const GET_NGO_CITIES_SUCCESS = 'GET_NGO_CITIES_SUCCESS';
+
+function fetchCitiesForAdoption() {
+    return dispatch => {
+        dispatch({type: GET_NGO_CITIES_REQUEST});
+        return fetch(`../v1/ngo_cities.json`)
+            .then(response => response.json())
+            .then(json => dispatch(fetchCitiesForAdoptionSuccess(json)))
+            .catch(error => console.log(error));
+    }
+}
+
+export function fetchCitiesForAdoptionSuccess(json) {
+    return {
+        type: GET_NGO_CITIES_SUCCESS,
+        json
+    };
+}
+
+class AdoptionFilterBox extends React.Component {
+    componentWillMount() {
+        const {fetchCitiesForAdoption} = this.props;
+        fetchCitiesForAdoption();
+    }
+
+    render() {
+        const cities = this.props;
+        return (
+            <form className={styles.FilterBox}>
+                <SelectInput
+                    label='Cidade'
+                    placeholder='Selecione uma cidade'
+                    width='200px'
+                    marginRight='20px'
+                    options={cities.cities}
+                />
+                <SelectInput
+                    label='ONG'
+                    placeholder='Selecione uma ONG'
+                    width='300px'
+                    marginRight='20px'
+                />
+                <TextInput
+                    placeholder='Procure por palavras-chaves'
+                    width='350px'
+                    marginRight='20px'
+                />
+                <SimpleSubmitButton name='Procurar'/>
+            </form>
+        );
+    }
+}
+
+
+const structuredSelector = createStructuredSelector({
+    cities: state => state.cities,
+});
+
+const mapDispatchToProps = {fetchCitiesForAdoption};
+
+export default connect(structuredSelector, mapDispatchToProps)(AdoptionFilterBox);
+
+
diff --git a/app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass b/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.sass
similarity index 100%
rename from app/javascript/containers/AdoptionList/FilterBox/FilterBox.sass
rename to app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.sass
diff --git a/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx b/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx
deleted file mode 100644
index 62539f5d..00000000
--- a/app/javascript/containers/AdoptionList/FilterBox/FilterBox.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import styles from "./FilterBox.sass";
-import SelectInput from "../../../components/SelectInput/SelectInput";
-import TextInput from "../../../components/TextInput/TextInput";
-import SimpleSubmitButton from "../../../components/SimpleSubmitButton/SimpleSubmitButton";
-
-const FilterBox = () => {
-    return (
-        <form className={styles.FilterBox}>
-            <SelectInput
-                label='Cidade'
-                placeholder='Selecione uma cidade'
-                width='200px'
-                marginRight='20px'
-            />
-            <SelectInput
-                label='ONG'
-                placeholder='Selecione uma ONG'
-                width='300px'
-                marginRight='20px'
-            />
-            <TextInput
-                placeholder='Procure por palavras-chaves'
-                width='350px'
-                marginRight='20px'
-            />
-            <SimpleSubmitButton name='Procurar' />
-        </form>
-    );
-};
-
-export default FilterBox;
-
diff --git a/config/routes.rb b/config/routes.rb
index 58396da4..1c94e535 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -18,6 +18,7 @@
   namespace :v1, defaults: { format: 'json' } do
     get 'things', to: 'things#index'
     get 'ngos', to: 'ngos#index'
+    get 'ngo_cities', to: 'ngos#cities'
     get 'ngo/:id', to: 'ngos#show'
     get 'pets_for_adoption', to: 'pets_for_adoption#index'
   end

From 2e2de30198aa952d9a7a48e9bf9746256ca9f68d Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 30 Sep 2019 07:17:31 -0600
Subject: [PATCH 30/58] Remove border on SelectInput when on focus

---
 app/javascript/components/SelectInput/SelectInput.sass | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/javascript/components/SelectInput/SelectInput.sass b/app/javascript/components/SelectInput/SelectInput.sass
index bba97ca5..99941d78 100644
--- a/app/javascript/components/SelectInput/SelectInput.sass
+++ b/app/javascript/components/SelectInput/SelectInput.sass
@@ -8,6 +8,9 @@
   font-size: 0
   padding: 6px
 
+  *:focus
+    outline: none
+
 .SelectInput label
   font-size: 10px
   font-family: museo-sans, sans-serif

From f0f5a94c70bef5074bd2f3ca709042c5dd1a9175 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 7 Oct 2019 07:00:34 -0600
Subject: [PATCH 31/58] Fix AdoptionList to fetch pets for adoption

---
 app/javascript/containers/AdoptionList/AdoptionList.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 637694b3..feaa22ff 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -27,7 +27,10 @@ export function fetchPetsForAdoptionSuccess(json) {
 }
 
 class AdoptionList extends React.Component {
-
+    componentWillMount() {
+        const {fetchPetsForAdoption} = this.props;
+        fetchPetsForAdoption();
+    }
 
     petList = (pets) => {
         return pets.map(pet => {

From 17703aad8dc463eaa224fac891f2537ea91346b7 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 11 Oct 2019 07:08:29 -0600
Subject: [PATCH 32/58] Add a stronger color when hover buttons on adoption
 list page

---
 .../components/SimpleCircularButton/SimpleCircularButton.sass  | 3 +++
 .../components/SimpleSubmitButton/SimpleSubmitButton.sass      | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
index 6befae63..ab180f51 100644
--- a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
+++ b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
@@ -13,3 +13,6 @@
   color: #ffffff
   text-transform: uppercase
   border: 0
+
+.SimpleCircularButton:hover
+  background-color: #68af60
diff --git a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
index 75e85a3e..3406c955 100644
--- a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
+++ b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
@@ -13,3 +13,6 @@
   color: #ffffff
   text-transform: uppercase
   border: 0
+
+.SimpleSubmitButton:hover
+  background-color: #ff8a8a

From 5ea3a9f644aa8c59a2afcaa8ac4f47a3619551a2 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 11 Oct 2019 07:57:44 -0600
Subject: [PATCH 33/58] Add modal component to use on adoption flow

---
 .../components/Backdrop/Backdrop.jsx          |  8 +++++
 .../components/Backdrop/Backdrop.sass         |  8 +++++
 .../SimpleCircularButton.jsx                  |  2 +-
 .../components/SimpleModal/SimpleModal.jsx    | 32 +++++++++++++++++++
 .../components/SimpleModal/SimpleModal.sass   | 17 ++++++++++
 .../containers/AdoptionCard/AdoptionCard.jsx  |  2 +-
 .../containers/AdoptionList/AdoptionList.jsx  | 22 +++++++++++++
 7 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/components/Backdrop/Backdrop.jsx
 create mode 100644 app/javascript/components/Backdrop/Backdrop.sass
 create mode 100644 app/javascript/components/SimpleModal/SimpleModal.jsx
 create mode 100644 app/javascript/components/SimpleModal/SimpleModal.sass

diff --git a/app/javascript/components/Backdrop/Backdrop.jsx b/app/javascript/components/Backdrop/Backdrop.jsx
new file mode 100644
index 00000000..2ae33e5f
--- /dev/null
+++ b/app/javascript/components/Backdrop/Backdrop.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Backdrop.sass';
+
+const backdrop = (props) => (
+    props.show ? <div className={styles.Backdrop} onClick={props.clicked}></div> : null
+);
+
+export default backdrop;
diff --git a/app/javascript/components/Backdrop/Backdrop.sass b/app/javascript/components/Backdrop/Backdrop.sass
new file mode 100644
index 00000000..cb3173fc
--- /dev/null
+++ b/app/javascript/components/Backdrop/Backdrop.sass
@@ -0,0 +1,8 @@
+.Backdrop
+    width: 100%
+    height: 100%
+    position: fixed
+    z-index: 100
+    left: 0
+    top: 0
+    background-color: rgba(0, 0, 0, 0.5)
diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
index 93805588..97a0256e 100644
--- a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
+++ b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
@@ -3,7 +3,7 @@ import styles from './SimpleCircularButton.sass';
 
 const SimpleCircularButton = (props) => {
     return (
-        <button className={styles.SimpleCircularButton}>{props.name}</button>
+        <button onClick={props.clicked} className={styles.SimpleCircularButton}>{props.name}</button>
     );
 };
 
diff --git a/app/javascript/components/SimpleModal/SimpleModal.jsx b/app/javascript/components/SimpleModal/SimpleModal.jsx
new file mode 100644
index 00000000..27c6145b
--- /dev/null
+++ b/app/javascript/components/SimpleModal/SimpleModal.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './SimpleModal.sass';
+import Backdrop from '../Backdrop/Backdrop';
+
+class SimpleModal extends React.Component {
+    shouldComponentUpdate(nextProps) {
+        return nextProps.show !== this.props.show;
+    }
+
+    componentWillUpdate() {
+        console.log('[SimpleModal] WillUpdate')
+    }
+
+    render() {
+        return (
+            <div>
+                <Backdrop show={this.props.show} clicked={this.props.modalClosed}/>
+                <div
+                    className={styles.SimpleModal}
+                    style={{
+                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
+                        opacity: this.props.show ? '1' : '0'
+                    }}
+                >
+                    {this.props.children}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default SimpleModal;
diff --git a/app/javascript/components/SimpleModal/SimpleModal.sass b/app/javascript/components/SimpleModal/SimpleModal.sass
new file mode 100644
index 00000000..bec84218
--- /dev/null
+++ b/app/javascript/components/SimpleModal/SimpleModal.sass
@@ -0,0 +1,17 @@
+.SimpleModal
+    position: fixed
+    z-index: 500
+    background-color: white
+    width: 70%
+    border: 1px solid #ccc
+    box-shadow: 1px 1px 1px black
+    padding: 16px
+    left: 15%
+    top: 30%
+    box-sizing: border-box
+    transition: all 0.3s ease-out
+
+@media (min-width: 600px)
+    .SimpleModal
+        width: 500px
+        left: calc(50% - 250px)
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index 9ab8fc3b..e05e3c6d 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -57,7 +57,7 @@ const AdoptionCard = (props) => {
                 </div>
             </div>
             <div className={styles.adoptionButton}>
-                <SimpleCircularButton name='Adote'/>
+                <SimpleCircularButton clicked={props.modalOpen} name='Adote'/>
             </div>
         </div>
     );
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index feaa22ff..b1043643 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -5,6 +5,7 @@ import AdoptionCard from "../AdoptionCard/AdoptionCard";
 import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
 import AdoptionFilterBox from "./FilterBox/AdoptionFilterBox";
+import SimpleModal from "../../components/SimpleModal/SimpleModal";
 
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
@@ -27,11 +28,23 @@ export function fetchPetsForAdoptionSuccess(json) {
 }
 
 class AdoptionList extends React.Component {
+    state = {
+        adopting: false,
+    };
+
     componentWillMount() {
         const {fetchPetsForAdoption} = this.props;
         fetchPetsForAdoption();
     }
 
+    openAdoptingModalHandler = () => {
+        this.setState({adopting: true});
+    };
+
+    adoptingCancelHandler = () => {
+        this.setState({adopting: false});
+    };
+
     petList = (pets) => {
         return pets.map(pet => {
             return <AdoptionCard
@@ -43,6 +56,7 @@ class AdoptionList extends React.Component {
                 age={pet.age}
                 sex={pet.sex}
                 ngo={pet.ngo}
+                modalOpen={this.openAdoptingModalHandler}
             />;
         })
     };
@@ -52,6 +66,14 @@ class AdoptionList extends React.Component {
 
         return (
             <div className={styles.AdoptionList}>
+                <SimpleModal
+                    show={this.state.adopting}
+                    modalClosed={this.adoptingCancelHandler}
+                >
+                    <div>
+                        <h1>Modal</h1>
+                    </div>
+                </SimpleModal>
                 <SimpleHeaderText
                     title='Encontre seu animalzinho'
                     subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'

From 3a2afe952a475739db9eb6670ebacc248e78de83 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 16 Oct 2019 08:00:07 -0600
Subject: [PATCH 34/58] Get current_user from controller to use on react app

---
 app/javascript/components/App.js                        | 7 ++++++-
 app/javascript/containers/AdoptionCard/AdoptionCard.jsx | 3 +++
 app/javascript/containers/AdoptionList/AdoptionList.jsx | 1 +
 app/views/static/index.html.erb                         | 2 +-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
index 23aee4bb..525e3b75 100644
--- a/app/javascript/components/App.js
+++ b/app/javascript/components/App.js
@@ -11,6 +11,11 @@ import AdoptionList from "../containers/AdoptionList/AdoptionList";
 const store = configureStore();
 
 class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { currentUser: this.props.currentUser };
+    }
+
     render() {
         return (
             <ErrorBoundary>
@@ -21,7 +26,7 @@ class App extends React.Component {
                             <Route path="/hello" render={() => <HelloWorld greeting="Friend"/>}/>
                             <Route path="/new/ongs" render={() => <NgosList />}/>
                             <Route exact path="/new/ong/:id" component={NgoPage}/>
-                            <Route path="/new/adocao" render={() => <AdoptionList />}/>
+                            <Route path="/new/adocao" render={() => <AdoptionList currentUser={this.state.currentUser} />}/>
                         </Switch>
                     </BrowserRouter>
                 </Provider>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index e05e3c6d..e8ba0920 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -56,9 +56,12 @@ const AdoptionCard = (props) => {
                     </div>
                 </div>
             </div>
+            // TODO: implement behaviour of button when user is not logged in
+            { props.user ?
             <div className={styles.adoptionButton}>
                 <SimpleCircularButton clicked={props.modalOpen} name='Adote'/>
             </div>
+            : null}
         </div>
     );
 };
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index b1043643..ade721d8 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -56,6 +56,7 @@ class AdoptionList extends React.Component {
                 age={pet.age}
                 sex={pet.sex}
                 ngo={pet.ngo}
+                user={this.props.currentUser}
                 modalOpen={this.openAdoptingModalHandler}
             />;
         })
diff --git a/app/views/static/index.html.erb b/app/views/static/index.html.erb
index a588b4be..c521f718 100644
--- a/app/views/static/index.html.erb
+++ b/app/views/static/index.html.erb
@@ -1,3 +1,3 @@
 <%= javascript_pack_tag 'application' %>
 
-<%= react_component('App') %>
+<%= react_component('App', currentUser: current_user) %>

From 0564b3b6357ecf34d7763d27d0b83e94259482b1 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 07:35:30 -0600
Subject: [PATCH 35/58] Add a new adoption button

- Install roboto font for new UI
---
 app/javascript/components/App.js                  |  2 ++
 .../AdoptionButton/AdoptionButton.jsx             | 10 ++++++++++
 .../AdoptionButton/AdoptionButton.sass            | 15 +++++++++++++++
 .../containers/AdoptionCard/AdoptionCard.jsx      |  6 +++---
 .../containers/AdoptionCard/AdoptionCard.sass     |  5 -----
 package.json                                      |  1 +
 6 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx
 create mode 100644 app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass

diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
index 525e3b75..60f40352 100644
--- a/app/javascript/components/App.js
+++ b/app/javascript/components/App.js
@@ -8,6 +8,8 @@ import NgoPage from "../containers/NgoPage";
 import ErrorBoundary from "./ErrorBoundary";
 import AdoptionList from "../containers/AdoptionList/AdoptionList";
 
+require('typeface-roboto');
+
 const store = configureStore();
 
 class App extends React.Component {
diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx
new file mode 100644
index 00000000..4296a4d3
--- /dev/null
+++ b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './AdoptionButton.sass';
+
+const AdoptionButton = (props) => {
+    return (
+        <button onClick={props.clicked} className={styles.AdoptionButton}>{props.name}</button>
+    );
+};
+
+export default AdoptionButton;
diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
new file mode 100644
index 00000000..45c11185
--- /dev/null
+++ b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
@@ -0,0 +1,15 @@
+.AdoptionButton
+  width: 100%
+  height: 50px
+  background-color: #F2F3F3
+  color: #8FBC81
+  text-transform: uppercase
+  border: 0
+  font-family: Roboto, museo-sans, sans-serif
+  font-style: normal
+  font-weight: bold
+  font-size: 15px
+  line-height: 32px
+
+.AdoptionButton:hover
+  background-color: #EBEBEB
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index e8ba0920..b7bfb9ed 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './AdoptionCard.sass'
-import SimpleCircularButton from "../../components/SimpleCircularButton/SimpleCircularButton";
 import {Link} from "react-router-dom";
 import TimeAgo from 'javascript-time-ago'
 // Load pt-BR locale for time ago
 import br from 'javascript-time-ago/locale/pt'
+import AdoptionButton from "./AdoptionButton/AdoptionButton";
 
 TimeAgo.addLocale(br);
 
@@ -56,10 +56,10 @@ const AdoptionCard = (props) => {
                     </div>
                 </div>
             </div>
-            // TODO: implement behaviour of button when user is not logged in
+            {/*{ TODO: implement behaviour of button when user is not logged in }*/}
             { props.user ?
             <div className={styles.adoptionButton}>
-                <SimpleCircularButton clicked={props.modalOpen} name='Adote'/>
+                <AdoptionButton clicked={props.modalOpen} name='Adote'/>
             </div>
             : null}
         </div>
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 6907255a..91bbf4a3 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -89,11 +89,6 @@
     letter-spacing: normal
     color: #848484 !important
 
-  .adoptionButton
-    padding: 10px
-    height: 70px
-    text-align: center
-
   .sexLabel
     width: 56px
     height: 20px
diff --git a/package.json b/package.json
index 40a19c71..ce8d9fd2 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "sugarss": "^2.0.0",
+    "typeface-roboto": "0.0.75",
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {

From 7310e11381b45d14ae0edf9cbe2e7518cd628438 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 07:43:15 -0600
Subject: [PATCH 36/58] Change official font to Roboto

---
 .../components/SelectInput/SelectInput.sass        |  4 ++--
 .../SimpleCircularButton/SimpleCircularButton.sass |  2 +-
 .../SimpleHeaderText/SimpleHeaderText.sass         |  4 ++--
 .../SimpleSubmitButton/SimpleSubmitButton.sass     |  2 +-
 app/javascript/components/TextInput/TextInput.sass |  2 +-
 .../AdoptionButton/AdoptionButton.sass             |  2 +-
 .../containers/AdoptionCard/AdoptionCard.sass      | 14 +++++++-------
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/javascript/components/SelectInput/SelectInput.sass b/app/javascript/components/SelectInput/SelectInput.sass
index 99941d78..f2313390 100644
--- a/app/javascript/components/SelectInput/SelectInput.sass
+++ b/app/javascript/components/SelectInput/SelectInput.sass
@@ -13,7 +13,7 @@
 
 .SelectInput label
   font-size: 10px
-  font-family: museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   color: #9b9b9b
   padding: 2px 8px 0
   margin-bottom: 0
@@ -21,7 +21,7 @@
 .SelectInput select
   color: #232628
   font-size: 14px
-  font-family: museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   border: 0
   width: 100%
   background: none
diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
index ab180f51..d289180e 100644
--- a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
+++ b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
@@ -3,7 +3,7 @@
   height: 50px
   border-radius: 29px
   background-color: #83be7d
-  font-family: museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   font-size: 16px
   font-weight: normal
   font-style: normal
diff --git a/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass b/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
index 2a35afda..f7427286 100644
--- a/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
+++ b/app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass
@@ -2,7 +2,7 @@
   .title
     width: 448px
     height: 49px
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 32px
     font-weight: bold
     font-style: normal
@@ -14,7 +14,7 @@
   .subtitle
     width: 740px
     height: 26px
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 16px
     font-weight: 500
     font-style: normal
diff --git a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
index 3406c955..cbf01355 100644
--- a/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
+++ b/app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass
@@ -3,7 +3,7 @@
   height: 50px
   border-radius: 4px
   background-color: #ffa0a0
-  font-family: museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   font-size: 16px
   font-weight: normal
   font-style: normal
diff --git a/app/javascript/components/TextInput/TextInput.sass b/app/javascript/components/TextInput/TextInput.sass
index caab521a..371d7245 100644
--- a/app/javascript/components/TextInput/TextInput.sass
+++ b/app/javascript/components/TextInput/TextInput.sass
@@ -10,7 +10,7 @@
 .TextInput input
   color: #232628
   font-size: 14px
-  font-family: museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   border: 0
   width: 100%
   background: none
diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
index 45c11185..8175354e 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
@@ -5,7 +5,7 @@
   color: #8FBC81
   text-transform: uppercase
   border: 0
-  font-family: Roboto, museo-sans, sans-serif
+  font-family: Roboto, sans-serif
   font-style: normal
   font-weight: bold
   font-size: 15px
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 91bbf4a3..4a6d7c3d 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -22,7 +22,7 @@
 
   .city
     height: 19px
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 12px
     font-weight: 500
     font-style: normal
@@ -33,7 +33,7 @@
 
   .petName
     height: 32px
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 18px
     font-weight: 500
     font-style: normal
@@ -44,7 +44,7 @@
 
   .petDescription
     height: 88px
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 14px
     font-weight: 500
     font-style: normal
@@ -70,7 +70,7 @@
     margin-right: 4px
 
   .ngoName
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 12px
     font-weight: 500
     font-style: normal
@@ -80,7 +80,7 @@
     color: #ffa0a0 !important
 
   .postTime
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 12px
     font-weight: 500
     font-style: normal
@@ -94,7 +94,7 @@
     height: 20px
     border-radius: 4px
     background-color: #72b9d6
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 11px
     font-weight: 500
     font-style: normal
@@ -113,7 +113,7 @@
     height: 20px
     border-radius: 4px
     background-color: #83be7d
-    font-family: museo-sans, sans-serif
+    font-family: Roboto, sans-serif
     font-size: 11px
     font-weight: 500
     font-style: normal

From 031a25d16d33e56b1edfc3d0bd41a2b80a6a468a Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 07:49:19 -0600
Subject: [PATCH 37/58] Change style of pet description for new UI

---
 .../containers/AdoptionCard/AdoptionCard.sass          | 10 ++++------
 app/lib/list_pets.rb                                   |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 4a6d7c3d..f62fb5a2 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -46,13 +46,11 @@
     height: 88px
     font-family: Roboto, sans-serif
     font-size: 14px
-    font-weight: 500
+    color: rgba(0, 0, 0, 0.5438) !important
+    font-family: Roboto, sans-serif
     font-style: normal
-    font-stretch: normal
-    line-height: normal
-    letter-spacing: normal
-    color: #232628 !important
-    text-align: justify
+    font-weight: normal
+    line-height: 17px
 
   .postDetail
     display: flex
diff --git a/app/lib/list_pets.rb b/app/lib/list_pets.rb
index dc4dc676..31375c8f 100644
--- a/app/lib/list_pets.rb
+++ b/app/lib/list_pets.rb
@@ -12,7 +12,7 @@ def add_extra_fields(pets)
       pet.attributes.merge(
         logo_path: logo_path(pet),
         ngo: NgoResponseAttributes.new(pet.ngo).attributes,
-        description_truncated: pet.description.truncate(240),
+        description_truncated: pet.description.truncate(200),
       )
     end
   end

From ad170bb897d98887f3b83cff11e8132763c4a459 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 18:52:25 -0600
Subject: [PATCH 38/58] Fix style of ngo details

---
 .../containers/AdoptionCard/AdoptionCard.jsx  | 13 ++++------
 .../containers/AdoptionCard/AdoptionCard.sass | 26 +++++++++----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index b7bfb9ed..b7d82137 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -23,16 +23,16 @@ const AdoptionCard = (props) => {
         }
     }
 
-    function getCity(ngo) {
+    function getNgoDescription(ngo) {
         const city = ngo.city ? ngo.city : '';
         const state = ngo.state ? ngo.state : '';
 
         if (city === '' && state === '') {
             // TODO: should be required on ngos form
-            return 'Endereço da ONG não cadastrado';
+            return ngo.fantasy_name;
         }
 
-        return city + ", " + state;
+        return ngo.fantasy_name + ", " + city + "-" + state;
     }
 
     return (
@@ -43,17 +43,14 @@ const AdoptionCard = (props) => {
                 <img className={styles.picture} src={props.petImage} alt='Imagem do pet' />
             </div>
             <div className={styles.cardContent}>
-                <a className={styles.city}>{getCity(props.ngo)}</a>
                 <a className={styles.petName}>{props.name}</a>
                 <a className={styles.petDescription}>{props.description}</a>
                 <div className={styles.postDetail}>
                     <div className={styles.ngoDetail}>
                         <img className={styles.ngoPicture} src={props.ngo.logo_path} alt='Imagem da ONG' />
-                        <Link className={styles.ngoName} to={`/new/ong/${props.ngo.fantasy_name}`}>{props.ngo.fantasy_name}</Link>
-                    </div>
-                    <div>
-                        <a className={styles.postTime}>{timeAgo.format(postedAtDateTime)}</a>
+                        <Link className={styles.ngoName} to={`/new/ong/${props.ngo.fantasy_name}`}>{getNgoDescription(props.ngo)}</Link>
                     </div>
+                    <a className={styles.postTime}>{timeAgo.format(postedAtDateTime)}</a>
                 </div>
             </div>
             {/*{ TODO: implement behaviour of button when user is not logged in }*/}
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index f62fb5a2..fae015a2 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -24,12 +24,8 @@
     height: 19px
     font-family: Roboto, sans-serif
     font-size: 12px
-    font-weight: 500
-    font-style: normal
-    font-stretch: normal
-    line-height: normal
-    letter-spacing: normal
-    color: #848484 !important
+    color: rgba(0, 0, 0, 0.543846) !important
+    margin: 1px 0px 10px
 
   .petName
     height: 32px
@@ -55,6 +51,7 @@
   .postDetail
     display: flex
     justify-content: space-between
+    height: 14px
 
   .ngoDetail
     display: flex
@@ -65,27 +62,30 @@
     width: 14px
     height: 14px
     border-radius: 100%
-    margin-right: 4px
+    margin-right: 4px !important
+    margin: auto
 
   .ngoName
     font-family: Roboto, sans-serif
     font-size: 12px
-    font-weight: 500
     font-style: normal
     font-stretch: normal
-    line-height: normal
     letter-spacing: normal
-    color: #ffa0a0 !important
+    color: #9B9B9B !important
+    font-weight: normal
+    line-height: 20px
 
   .postTime
     font-family: Roboto, sans-serif
     font-size: 12px
-    font-weight: 500
     font-style: normal
     font-stretch: normal
-    line-height: normal
     letter-spacing: normal
-    color: #848484 !important
+    color: #9B9B9B !important
+    font-weight: normal
+    line-height: 20px
+    height: 14px
+    text-align: center
 
   .sexLabel
     width: 56px

From 9d9e073a6b49ae7d9cfcf98026230720bcc5dd36 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 19:03:50 -0600
Subject: [PATCH 39/58] Remove label with sex and age, and add on card details

---
 .../containers/AdoptionCard/AdoptionCard.jsx  | 15 +++++--
 .../containers/AdoptionCard/AdoptionCard.sass | 40 +++----------------
 2 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index b7d82137..e0bde6e4 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -35,22 +35,29 @@ const AdoptionCard = (props) => {
         return ngo.fantasy_name + ", " + city + "-" + state;
     }
 
+    function getPetDetail(sex, age) {
+        const sexDescription = sex === "f" ? "Fêmea" : "Macho";
+
+        return sexDescription + ", " + ageLabelText(age)
+    }
+
     return (
         <div className={styles.AdoptionCard}>
-            <div className={styles.sexLabel}><a>{props.sex === "f" ? "Fêmea" : "Macho"}</a></div>
-            <div className={styles.ageLabel}><a>{ageLabelText(props.age)}</a></div>
             <div className={styles.pictureBox}>
                 <img className={styles.picture} src={props.petImage} alt='Imagem do pet' />
             </div>
             <div className={styles.cardContent}>
                 <a className={styles.petName}>{props.name}</a>
+                <div className={styles.postDetail}>
+                    <a className={styles.smallText}>{getPetDetail(props.sex, props.age)}</a>
+                </div>
                 <a className={styles.petDescription}>{props.description}</a>
                 <div className={styles.postDetail}>
                     <div className={styles.ngoDetail}>
                         <img className={styles.ngoPicture} src={props.ngo.logo_path} alt='Imagem da ONG' />
-                        <Link className={styles.ngoName} to={`/new/ong/${props.ngo.fantasy_name}`}>{getNgoDescription(props.ngo)}</Link>
+                        <Link className={styles.smallText} to={`/new/ong/${props.ngo.fantasy_name}`}>{getNgoDescription(props.ngo)}</Link>
                     </div>
-                    <a className={styles.postTime}>{timeAgo.format(postedAtDateTime)}</a>
+                    <a className={styles.smallText}>{timeAgo.format(postedAtDateTime)}</a>
                 </div>
             </div>
             {/*{ TODO: implement behaviour of button when user is not logged in }*/}
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index fae015a2..53d26968 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -13,7 +13,6 @@
   .picture
     width: 100%
     height: 100%
-    margin: -40px 0
 
   .cardContent
     margin: 10px
@@ -47,6 +46,7 @@
     font-style: normal
     font-weight: normal
     line-height: 17px
+    margin-top: 10px
 
   .postDetail
     display: flex
@@ -87,40 +87,12 @@
     height: 14px
     text-align: center
 
-  .sexLabel
-    width: 56px
-    height: 20px
-    border-radius: 4px
-    background-color: #72b9d6
+  .smallText
     font-family: Roboto, sans-serif
-    font-size: 11px
-    font-weight: 500
-    font-style: normal
-    font-stretch: normal
-    line-height: normal
-    letter-spacing: normal
-    color: #ffffff
-    text-align: center
-    float: left
-    margin: 20px 0 0 20px
-    padding: 3px
-    position: relative
-
-  .ageLabel
-    width: 66px
-    height: 20px
-    border-radius: 4px
-    background-color: #83be7d
-    font-family: Roboto, sans-serif
-    font-size: 11px
-    font-weight: 500
+    font-size: 12px
     font-style: normal
     font-stretch: normal
-    line-height: normal
     letter-spacing: normal
-    color: #ffffff
-    text-align: center
-    float: left
-    margin: 20px 0 0 8px
-    padding: 3px
-    position: relative
+    color: #9B9B9B !important
+    font-weight: normal
+    line-height: 20px

From 61a52f1af390e4c4312d79c52079e09a842da7c7 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 20:26:33 -0600
Subject: [PATCH 40/58] Change card disposition to fix 6 in each line

---
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 8 +++++---
 app/javascript/containers/AdoptionList/AdoptionList.jsx  | 5 +++++
 app/javascript/containers/AdoptionList/AdoptionList.sass | 8 +++++++-
 app/views/layouts/new_front_end.html.erb                 | 4 +---
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 53d26968..1df2bf44 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -1,9 +1,11 @@
 .AdoptionCard
   background-color: #ffffff
-  width: 350px
   height: 500px
   border-radius: 4px
-  margin: 10px 10px
+  -webkit-box-flex: 0
+  display: block
+  margin: 25px
+  width: 300px
 
   .pictureBox
     width: 100%
@@ -24,7 +26,7 @@
     font-family: Roboto, sans-serif
     font-size: 12px
     color: rgba(0, 0, 0, 0.543846) !important
-    margin: 1px 0px 10px
+    margin: 1px 0 10px
 
   .petName
     height: 32px
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index ade721d8..15790acd 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -82,6 +82,11 @@ class AdoptionList extends React.Component {
                 <AdoptionFilterBox/>
                 <div className={styles.adoptionCards}>
                     {pets && this.petList(pets)}
+                    {/* Trick to align last row of cards with flexbox */}
+                    <i className={styles.fakeAdoptionCard} aria-hidden="true" />
+                    <i className={styles.fakeAdoptionCard} aria-hidden="true" />
+                    <i className={styles.fakeAdoptionCard} aria-hidden="true" />
+                    <i className={styles.fakeAdoptionCard} aria-hidden="true" />
                 </div>
             </div>
         );
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.sass b/app/javascript/containers/AdoptionList/AdoptionList.sass
index 2cb191dc..b832b65d 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.sass
+++ b/app/javascript/containers/AdoptionList/AdoptionList.sass
@@ -1,6 +1,12 @@
 .AdoptionList
   .adoptionCards
     display: flex
-    justify-content: flex-start
+    justify-content: center
+    flex-direction: row
     flex-wrap: wrap
+    margin: 0 25px
 
+  .fakeAdoptionCard
+    height: 500px
+    margin: 25px
+    width: 300px
diff --git a/app/views/layouts/new_front_end.html.erb b/app/views/layouts/new_front_end.html.erb
index c2d4d627..75edfa76 100644
--- a/app/views/layouts/new_front_end.html.erb
+++ b/app/views/layouts/new_front_end.html.erb
@@ -47,9 +47,7 @@
       </div>
     </nav>
 
-    <div class="container">
-      <%= yield %>
-    </div>
+    <%= yield %>
   </body>
 </html>
 

From 9fd0b85be4f5d94626298422fc1730fc2153f031 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 21 Oct 2019 20:29:40 -0600
Subject: [PATCH 41/58] Fix description size and comment stuff that don't make
 sense right now

---
 .../containers/AdoptionCard/AdoptionCard.sass          |  2 +-
 .../containers/AdoptionList/AdoptionList.jsx           | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 1df2bf44..7d9b6e2e 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -40,7 +40,7 @@
     color: #1d1d1d !important
 
   .petDescription
-    height: 88px
+    height: 106px
     font-family: Roboto, sans-serif
     font-size: 14px
     color: rgba(0, 0, 0, 0.5438) !important
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 15790acd..2abc6ed6 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -75,11 +75,11 @@ class AdoptionList extends React.Component {
                         <h1>Modal</h1>
                     </div>
                 </SimpleModal>
-                <SimpleHeaderText
-                    title='Encontre seu animalzinho'
-                    subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'
-                />
-                <AdoptionFilterBox/>
+                {/*<SimpleHeaderText*/}
+                {/*    title='Encontre seu animalzinho'*/}
+                {/*    subtitle='Encontre aqui os animais disponíveis para adoção. Clique em "Adote" para saber mais.'*/}
+                {/*/>*/}
+                {/*<AdoptionFilterBox/>*/}
                 <div className={styles.adoptionCards}>
                     {pets && this.petList(pets)}
                     {/* Trick to align last row of cards with flexbox */}

From 9826240e1977b99f54a7cb77b4d975a03ce0eb43 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 22 Oct 2019 07:00:18 -0600
Subject: [PATCH 42/58] Update yarn.lock

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index dcaf55c2..e181bcbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7563,6 +7563,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typeface-roboto@0.0.75:
+  version "0.0.75"
+  resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.75.tgz#98d5ba35ec234bbc7172374c8297277099cc712b"
+  integrity sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"

From ebacbf31e31674c68742d3b74048de4ed7d40879 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 22 Oct 2019 07:15:58 -0600
Subject: [PATCH 43/58] Change default background color to light grey and
 adoption button style

---
 .../AdoptionButton/AdoptionButton.sass          | 13 +++++++------
 .../containers/AdoptionCard/AdoptionCard.jsx    | 12 +++++++-----
 .../containers/AdoptionCard/AdoptionCard.sass   | 17 ++++++++++++++---
 app/views/layouts/new_front_end.html.erb        |  2 +-
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
index 8175354e..3f605cdb 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
@@ -1,15 +1,16 @@
 .AdoptionButton
-  width: 100%
-  height: 50px
-  background-color: #F2F3F3
-  color: #8FBC81
   text-transform: uppercase
   border: 0
   font-family: Roboto, sans-serif
   font-style: normal
-  font-weight: bold
+  font-weight: 500
   font-size: 15px
-  line-height: 32px
+  line-height: 10px
+  color: #FFFFFF
+  width: 85px
+  height: 35px
+  background: #8FBC81
+  border-radius: 22px
 
 .AdoptionButton:hover
   background-color: #EBEBEB
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index e0bde6e4..e575265f 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -60,12 +60,14 @@ const AdoptionCard = (props) => {
                     <a className={styles.smallText}>{timeAgo.format(postedAtDateTime)}</a>
                 </div>
             </div>
-            {/*{ TODO: implement behaviour of button when user is not logged in }*/}
-            { props.user ?
-            <div className={styles.adoptionButton}>
-                <AdoptionButton clicked={props.modalOpen} name='Adote'/>
+            <div className={styles.adoptionCardBottom}>
+                {/*{ TODO: implement behaviour of button when user is not logged in }*/}
+                { props.user ?
+                <div className={styles.adoptionButton}>
+                    <AdoptionButton clicked={props.modalOpen} name='Adote'/>
+                </div>
+                : null}
             </div>
-            : null}
         </div>
     );
 };
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 7d9b6e2e..3f9b5d91 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -1,11 +1,12 @@
 .AdoptionCard
-  background-color: #ffffff
-  height: 500px
-  border-radius: 4px
+  height: 486px
   -webkit-box-flex: 0
   display: block
   margin: 25px
   width: 300px
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12)
+  border-radius: 3px
+  background: #FAFAFA
 
   .pictureBox
     width: 100%
@@ -98,3 +99,13 @@
     color: #9B9B9B !important
     font-weight: normal
     line-height: 20px
+
+  .adoptionCardBottom
+    display: table-cell
+    width: 500px
+    height: 50px
+    vertical-align: middle
+    text-align: center
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12)
+    border-radius: 3px
+    background-color: #F2F3F3
diff --git a/app/views/layouts/new_front_end.html.erb b/app/views/layouts/new_front_end.html.erb
index 75edfa76..a0027783 100644
--- a/app/views/layouts/new_front_end.html.erb
+++ b/app/views/layouts/new_front_end.html.erb
@@ -12,7 +12,7 @@
     <%= stylesheet_link_tag 'ngos', media: 'all', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body>
+  <body style="background-color: #F2F3F3;">
     <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
       <a class="navbar-brand" href="<%=root_path%>"></a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

From d3563160cf08a76c0af9be943f2776ae9414ad7b Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 22 Oct 2019 07:41:37 -0600
Subject: [PATCH 44/58] Show adoption button when user is not logged in

- Justify description
---
 app/javascript/containers/AdoptionCard/AdoptionCard.jsx  | 2 --
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
index e575265f..8ecb6b91 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -62,11 +62,9 @@ const AdoptionCard = (props) => {
             </div>
             <div className={styles.adoptionCardBottom}>
                 {/*{ TODO: implement behaviour of button when user is not logged in }*/}
-                { props.user ?
                 <div className={styles.adoptionButton}>
                     <AdoptionButton clicked={props.modalOpen} name='Adote'/>
                 </div>
-                : null}
             </div>
         </div>
     );
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 3f9b5d91..84fbbcdc 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -50,6 +50,7 @@
     font-weight: normal
     line-height: 17px
     margin-top: 10px
+    text-align: justify
 
   .postDetail
     display: flex

From 7c22c3765f060c346165d645908cd464f55c9594 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 22 Oct 2019 07:52:40 -0600
Subject: [PATCH 45/58] Do not expose all user info in the html app tag

---
 app/javascript/components/App.js                        | 4 ++--
 app/javascript/containers/AdoptionList/AdoptionList.jsx | 2 +-
 app/views/static/index.html.erb                         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
index 60f40352..6fdd0534 100644
--- a/app/javascript/components/App.js
+++ b/app/javascript/components/App.js
@@ -15,7 +15,7 @@ const store = configureStore();
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { currentUser: this.props.currentUser };
+        this.state = { userEmail: this.props.userEmail };
     }
 
     render() {
@@ -28,7 +28,7 @@ class App extends React.Component {
                             <Route path="/hello" render={() => <HelloWorld greeting="Friend"/>}/>
                             <Route path="/new/ongs" render={() => <NgosList />}/>
                             <Route exact path="/new/ong/:id" component={NgoPage}/>
-                            <Route path="/new/adocao" render={() => <AdoptionList currentUser={this.state.currentUser} />}/>
+                            <Route path="/new/adocao" render={() => <AdoptionList userEmail={this.state.userEmail} />}/>
                         </Switch>
                     </BrowserRouter>
                 </Provider>
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 2abc6ed6..4e838ec3 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -56,7 +56,7 @@ class AdoptionList extends React.Component {
                 age={pet.age}
                 sex={pet.sex}
                 ngo={pet.ngo}
-                user={this.props.currentUser}
+                user={this.props.userEmail}
                 modalOpen={this.openAdoptingModalHandler}
             />;
         })
diff --git a/app/views/static/index.html.erb b/app/views/static/index.html.erb
index c521f718..4b67e562 100644
--- a/app/views/static/index.html.erb
+++ b/app/views/static/index.html.erb
@@ -1,3 +1,3 @@
 <%= javascript_pack_tag 'application' %>
 
-<%= react_component('App', currentUser: current_user) %>
+<%= react_component('App', userEmail: current_user.email) %>

From fda61f273917d35accf25f0e3594a9c0206d67ae Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 23 Oct 2019 07:32:45 -0600
Subject: [PATCH 46/58] Fix error when user is not logged in

---
 app/views/static/index.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/static/index.html.erb b/app/views/static/index.html.erb
index 4b67e562..67457fc9 100644
--- a/app/views/static/index.html.erb
+++ b/app/views/static/index.html.erb
@@ -1,3 +1,3 @@
 <%= javascript_pack_tag 'application' %>
 
-<%= react_component('App', userEmail: current_user.email) %>
+<%= react_component('App', userEmail: current_user&.email) %>

From 77a4f92bab44c3f5669348349d6326b36f4e5392 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 23 Oct 2019 07:35:12 -0600
Subject: [PATCH 47/58] Fix hover of adoption button to use a darker color

---
 .../containers/AdoptionCard/AdoptionButton/AdoptionButton.sass  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
index 3f605cdb..5baf0d01 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
@@ -13,4 +13,4 @@
   border-radius: 22px
 
 .AdoptionButton:hover
-  background-color: #EBEBEB
+  background-color: #7DA570

From 5bcf8395bdc63b04c0ede0fa6482b4a41905f65f Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 23 Oct 2019 07:50:39 -0600
Subject: [PATCH 48/58] Add a simple message to the user to login

---
 .../containers/AdoptionList/AdoptionList.jsx      | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index 4e838ec3..e983986d 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -63,7 +63,7 @@ class AdoptionList extends React.Component {
     };
 
     render() {
-        const {pets} = this.props;
+        const {pets, userEmail} = this.props;
 
         return (
             <div className={styles.AdoptionList}>
@@ -71,9 +71,16 @@ class AdoptionList extends React.Component {
                     show={this.state.adopting}
                     modalClosed={this.adoptingCancelHandler}
                 >
-                    <div>
-                        <h1>Modal</h1>
-                    </div>
+                    {userEmail ?
+                        <div>
+                            TODO
+                        </div>
+                    :
+                        <div>
+                            <p>Você precisa estar logado para adotar.</p>
+                            <a href="/users/sign_in">Ir para tela de login</a>
+                        </div>
+                    }
                 </SimpleModal>
                 {/*<SimpleHeaderText*/}
                 {/*    title='Encontre seu animalzinho'*/}

From 799a55de7cf9c083212fb909cfb12fed297b816f Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 29 Oct 2019 07:14:51 -0600
Subject: [PATCH 49/58] Style adjusts on adoption card

---
 app/javascript/containers/AdoptionCard/AdoptionCard.sass | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.sass b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
index 84fbbcdc..f615dc6d 100644
--- a/app/javascript/containers/AdoptionCard/AdoptionCard.sass
+++ b/app/javascript/containers/AdoptionCard/AdoptionCard.sass
@@ -2,8 +2,9 @@
   height: 486px
   -webkit-box-flex: 0
   display: block
-  margin: 25px
+  margin: 60px 25px
   width: 300px
+  min-width: 300px
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12)
   border-radius: 3px
   background: #FAFAFA
@@ -110,3 +111,6 @@
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12)
     border-radius: 3px
     background-color: #F2F3F3
+
+  @media only screen and (max-width: 600px)
+    width: 500px !important

From 984c324ba09644d936d722f492bee2380340b036 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 30 Oct 2019 07:40:00 -0600
Subject: [PATCH 50/58] Create endpoint to register adoption interest

---
 .../v1/pets_for_adoption_controller.rb         | 14 ++++++++++++++
 .../containers/AdoptionList/AdoptionList.jsx   | 16 ++++++++++++----
 config/routes.rb                               |  1 +
 package.json                                   |  1 +
 .../v1/pets_for_adoption_controller_spec.rb    | 18 +++++++++++++++++-
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index 8ba421a0..57e48433 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -4,4 +4,18 @@ def index
       pets: ListPets.new.all
     }.to_json
   end
+
+  def register_interest
+    ::RegisterAdoptionInterest.new.save!(params[:user_email], params[:pet_id])
+
+    render json: {}, status: :ok
+  end
+end
+
+
+class RegisterAdoptionInterest
+  def save!(user_email, pet_id)
+    puts "#{user_email} #{pet_id}"
+    # TODO
+  end
 end
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index e983986d..dc8d07ac 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -6,6 +6,7 @@ import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
 import AdoptionFilterBox from "./FilterBox/AdoptionFilterBox";
 import SimpleModal from "../../components/SimpleModal/SimpleModal";
+import axios from 'axios';
 
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
@@ -37,8 +38,15 @@ class AdoptionList extends React.Component {
         fetchPetsForAdoption();
     }
 
-    openAdoptingModalHandler = () => {
-        this.setState({adopting: true});
+    addAdoptionInterestHandler = (userEmail, petId) => {
+        axios.post(`../v1/pets_for_adoption/register_interest`, { user_email: userEmail, pet_id: petId })
+            .then(function () {
+                this.setState({adopting: true});
+            })
+            .catch(function (error) {
+                // TODO: handle error
+                console.log(error);
+            });
     };
 
     adoptingCancelHandler = () => {
@@ -57,7 +65,7 @@ class AdoptionList extends React.Component {
                 sex={pet.sex}
                 ngo={pet.ngo}
                 user={this.props.userEmail}
-                modalOpen={this.openAdoptingModalHandler}
+                modalOpen={() => this.addAdoptionInterestHandler(this.props.userEmail, pet.id)}
             />;
         })
     };
@@ -73,7 +81,7 @@ class AdoptionList extends React.Component {
                 >
                     {userEmail ?
                         <div>
-                            TODO
+                            <p>Você está a uma pata mais próxima de adotar o seu animalzinho. A ONG está sabendo do seu interesse e entrará em contato quando tiver mais informações.</p>
                         </div>
                     :
                         <div>
diff --git a/config/routes.rb b/config/routes.rb
index 1c94e535..ab747fec 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -21,6 +21,7 @@
     get 'ngo_cities', to: 'ngos#cities'
     get 'ngo/:id', to: 'ngos#show'
     get 'pets_for_adoption', to: 'pets_for_adoption#index'
+    post 'pets_for_adoption/register_interest', to: 'pets_for_adoption#register_interest'
   end
 
   get '*page', to: 'static#index', constraints: ->(req) do
diff --git a/package.json b/package.json
index ce8d9fd2..0f7c237a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "@rails/webpacker": "^4.0.7",
     "@sentry/browser": "^5.4.3",
     "autoprefixer": "^9.6.1",
+    "axios": "^0.19.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-polyfill": "^6.26.0",
     "babel-preset-react": "^6.24.1",
diff --git a/spec/controllers/v1/pets_for_adoption_controller_spec.rb b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
index 3b144862..ab11af32 100644
--- a/spec/controllers/v1/pets_for_adoption_controller_spec.rb
+++ b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
@@ -1,7 +1,7 @@
 require 'rails_helper'
 
 describe V1::PetsForAdoptionController do
-  describe 'GET #index' do
+  describe 'GET index' do
     before do
       get :index
     end
@@ -10,4 +10,20 @@
       expect(response).to have_http_status(:ok)
     end
   end
+
+  describe 'POST register_interest' do
+    before do
+      post :register_interest, params: { user_email: "someone@email.com", pet_id: 321 }
+    end
+
+    it 'returns 200 code status' do
+      expect(response).to have_http_status(:ok)
+    end
+
+    it 'calls RegisterAdoptionInterest behaviour' do
+      expect_any_instance_of(::RegisterAdoptionInterest).to receive(:save!).with("someone@email.com", "321")
+
+      post :register_interest, params: { user_email: "someone@email.com", pet_id: 321 }
+    end
+  end
 end

From 75ebf9f88a3108f606f377d76aefc667cab25ffd Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Wed, 30 Oct 2019 07:49:17 -0600
Subject: [PATCH 51/58] Create AdoptionInterest model

---
 app/models/adoption_interest.rb                        |  2 ++
 db/migrate/20191030134827_create_adoption_interests.rb | 10 ++++++++++
 db/schema.rb                                           | 10 +++++++++-
 spec/factories/adoption_interests.rb                   |  6 ++++++
 spec/models/adoption_interest_spec.rb                  |  5 +++++
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 app/models/adoption_interest.rb
 create mode 100644 db/migrate/20191030134827_create_adoption_interests.rb
 create mode 100644 spec/factories/adoption_interests.rb
 create mode 100644 spec/models/adoption_interest_spec.rb

diff --git a/app/models/adoption_interest.rb b/app/models/adoption_interest.rb
new file mode 100644
index 00000000..10e00fe1
--- /dev/null
+++ b/app/models/adoption_interest.rb
@@ -0,0 +1,2 @@
+class AdoptionInterest < ApplicationRecord
+end
diff --git a/db/migrate/20191030134827_create_adoption_interests.rb b/db/migrate/20191030134827_create_adoption_interests.rb
new file mode 100644
index 00000000..34defa3f
--- /dev/null
+++ b/db/migrate/20191030134827_create_adoption_interests.rb
@@ -0,0 +1,10 @@
+class CreateAdoptionInterests < ActiveRecord::Migration[5.2]
+  def change
+    create_table :adoption_interests do |t|
+      t.integer :user_id
+      t.integer :pet_id
+
+      t.timestamps
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 07ab7a77..f90e209f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_04_10_013351) do
+ActiveRecord::Schema.define(version: 2019_10_30_134827) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -36,6 +36,13 @@
     t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
   end
 
+  create_table "adoption_interests", force: :cascade do |t|
+    t.integer "user_id"
+    t.integer "pet_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
   create_table "bank_accounts", id: :serial, force: :cascade do |t|
     t.integer "account_number"
     t.integer "agency"
@@ -75,6 +82,7 @@
     t.string "state"
     t.string "payment_type"
     t.text "payment_form"
+    t.text "terms_and_conditions"
   end
 
   create_table "ngos_users", id: false, force: :cascade do |t|
diff --git a/spec/factories/adoption_interests.rb b/spec/factories/adoption_interests.rb
new file mode 100644
index 00000000..fd21c5b3
--- /dev/null
+++ b/spec/factories/adoption_interests.rb
@@ -0,0 +1,6 @@
+FactoryBot.define do
+  factory :adoption_interest do
+    user_id { 1 }
+    pet_id { 1 }
+  end
+end
diff --git a/spec/models/adoption_interest_spec.rb b/spec/models/adoption_interest_spec.rb
new file mode 100644
index 00000000..3f43428e
--- /dev/null
+++ b/spec/models/adoption_interest_spec.rb
@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe AdoptionInterest, type: :model do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

From d5bfc382553d1021070fae60872f6bf0c76e1f2e Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 31 Oct 2019 07:17:42 -0600
Subject: [PATCH 52/58] Create class to register adoption interest

- Fix controller test to stub the behaviour of RegisterAdoptionInterest class
---
 .../v1/pets_for_adoption_controller.rb           |  8 --------
 app/lib/register_adoption_interest.rb            |  6 ++++++
 .../v1/pets_for_adoption_controller_spec.rb      |  1 +
 spec/lib/register_adoption_interest_spec.rb      | 16 ++++++++++++++++
 4 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 app/lib/register_adoption_interest.rb
 create mode 100644 spec/lib/register_adoption_interest_spec.rb

diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index 57e48433..f44dac8a 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -11,11 +11,3 @@ def register_interest
     render json: {}, status: :ok
   end
 end
-
-
-class RegisterAdoptionInterest
-  def save!(user_email, pet_id)
-    puts "#{user_email} #{pet_id}"
-    # TODO
-  end
-end
diff --git a/app/lib/register_adoption_interest.rb b/app/lib/register_adoption_interest.rb
new file mode 100644
index 00000000..dcf510d1
--- /dev/null
+++ b/app/lib/register_adoption_interest.rb
@@ -0,0 +1,6 @@
+class RegisterAdoptionInterest
+  def save!(user_email, pet_id)
+    user = User.find_by(email: user_email)
+    AdoptionInterest.first_or_create!(user_id: user.id, pet_id: pet_id)
+  end
+end
diff --git a/spec/controllers/v1/pets_for_adoption_controller_spec.rb b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
index ab11af32..fed9a317 100644
--- a/spec/controllers/v1/pets_for_adoption_controller_spec.rb
+++ b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
@@ -13,6 +13,7 @@
 
   describe 'POST register_interest' do
     before do
+      allow_any_instance_of(::RegisterAdoptionInterest).to receive(:save!)
       post :register_interest, params: { user_email: "someone@email.com", pet_id: 321 }
     end
 
diff --git a/spec/lib/register_adoption_interest_spec.rb b/spec/lib/register_adoption_interest_spec.rb
new file mode 100644
index 00000000..31534c4e
--- /dev/null
+++ b/spec/lib/register_adoption_interest_spec.rb
@@ -0,0 +1,16 @@
+require 'rails_helper'
+
+describe RegisterAdoptionInterest do
+  let(:user) { FactoryBot.create(:user) }
+  let(:pet) { FactoryBot.create(:pet) }
+
+  subject { described_class.new }
+
+  describe "#save!" do
+    it "creates a AdoptionInterest record" do
+      expect { subject.save!(user.email, pet.id) }.to change { User.count }
+
+      expect(AdoptionInterest.where(user_id: user.id, pet_id: pet.id).count).to eq(1)
+    end
+  end
+end

From 030952ee31809b8647327ad0b03dcf1a996b1b8b Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Thu, 31 Oct 2019 07:58:37 -0600
Subject: [PATCH 53/58] Raise error when does not find the user

---
 app/lib/register_adoption_interest.rb       | 2 +-
 spec/lib/register_adoption_interest_spec.rb | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/lib/register_adoption_interest.rb b/app/lib/register_adoption_interest.rb
index dcf510d1..ad2aa0ce 100644
--- a/app/lib/register_adoption_interest.rb
+++ b/app/lib/register_adoption_interest.rb
@@ -1,6 +1,6 @@
 class RegisterAdoptionInterest
   def save!(user_email, pet_id)
-    user = User.find_by(email: user_email)
+    user = User.find_by!(email: user_email)
     AdoptionInterest.first_or_create!(user_id: user.id, pet_id: pet_id)
   end
 end
diff --git a/spec/lib/register_adoption_interest_spec.rb b/spec/lib/register_adoption_interest_spec.rb
index 31534c4e..50523518 100644
--- a/spec/lib/register_adoption_interest_spec.rb
+++ b/spec/lib/register_adoption_interest_spec.rb
@@ -12,5 +12,11 @@
 
       expect(AdoptionInterest.where(user_id: user.id, pet_id: pet.id).count).to eq(1)
     end
+
+    context "when user does not exists" do
+      it "raises an error" do
+        expect { subject.save!("undefined@email", pet.id) }.to raise_error(ActiveRecord::RecordNotFound, "Couldn't find User")
+      end
+    end
   end
 end

From 7f0ce13ac2ff657e51a438bcb006392b4dbd793e Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Sat, 2 Nov 2019 13:57:57 -0600
Subject: [PATCH 54/58] Register interest in adoption when clicking on adopt
 button

---
 .../v1/pets_for_adoption_controller.rb        | 20 ++++++++++--
 .../containers/AdoptionList/AdoptionList.jsx  | 31 ++++++++++++-------
 .../v1/pets_for_adoption_controller_spec.rb   | 25 +++++++++++++--
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index f44dac8a..968c54b3 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -1,4 +1,6 @@
 class V1::PetsForAdoptionController < ApplicationController
+  skip_before_action :verify_authenticity_token
+
   def index
     render json: {
       pets: ListPets.new.all
@@ -6,8 +8,22 @@ def index
   end
 
   def register_interest
-    ::RegisterAdoptionInterest.new.save!(params[:user_email], params[:pet_id])
+    response = { success: "Finished with success" }
+    status = :ok
+
+    begin
+      ::RegisterAdoptionInterest.new.save!(register_interest_params[:user_email], register_interest_params[:pet_id])
+    rescue ActiveRecord::RecordNotFound
+      response = { error: "User not found" }
+      status = :not_found
+    end
+
+    render json: response.to_json, status: status
+  end
+
+  private
 
-    render json: {}, status: :ok
+  def register_interest_params
+    params.require(:register_interest).permit(:user_email, :pet_id)
   end
 end
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
index dc8d07ac..a69c1991 100644
--- a/app/javascript/containers/AdoptionList/AdoptionList.jsx
+++ b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -6,7 +6,6 @@ import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
 import AdoptionFilterBox from "./FilterBox/AdoptionFilterBox";
 import SimpleModal from "../../components/SimpleModal/SimpleModal";
-import axios from 'axios';
 
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
@@ -30,7 +29,7 @@ export function fetchPetsForAdoptionSuccess(json) {
 
 class AdoptionList extends React.Component {
     state = {
-        adopting: false,
+        showAdoptingModal: false,
     };
 
     componentWillMount() {
@@ -39,18 +38,28 @@ class AdoptionList extends React.Component {
     }
 
     addAdoptionInterestHandler = (userEmail, petId) => {
-        axios.post(`../v1/pets_for_adoption/register_interest`, { user_email: userEmail, pet_id: petId })
-            .then(function () {
-                this.setState({adopting: true});
+        if (userEmail) {
+            let body = JSON.stringify({register_interest: {user_email: userEmail, pet_id: petId}});
+
+            fetch(`../v1/pets_for_adoption/register_interest`, {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: body,
             })
-            .catch(function (error) {
-                // TODO: handle error
-                console.log(error);
-            });
+                .then(response => console.log(response.json()))
+                .catch(function (error) {
+                    // TODO: handle error
+                    console.log(error);
+                });
+        }
+
+        this.setState({showAdoptingModal: true});
     };
 
     adoptingCancelHandler = () => {
-        this.setState({adopting: false});
+        this.setState({showAdoptingModal: false});
     };
 
     petList = (pets) => {
@@ -76,7 +85,7 @@ class AdoptionList extends React.Component {
         return (
             <div className={styles.AdoptionList}>
                 <SimpleModal
-                    show={this.state.adopting}
+                    show={this.state.showAdoptingModal}
                     modalClosed={this.adoptingCancelHandler}
                 >
                     {userEmail ?
diff --git a/spec/controllers/v1/pets_for_adoption_controller_spec.rb b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
index fed9a317..d9ba9d42 100644
--- a/spec/controllers/v1/pets_for_adoption_controller_spec.rb
+++ b/spec/controllers/v1/pets_for_adoption_controller_spec.rb
@@ -1,6 +1,8 @@
 require 'rails_helper'
 
 describe V1::PetsForAdoptionController do
+  let(:register_interest_params) {{ register_interest: { user_email: "someone@email.com", pet_id: 321 } }}
+
   describe 'GET index' do
     before do
       get :index
@@ -14,17 +16,36 @@
   describe 'POST register_interest' do
     before do
       allow_any_instance_of(::RegisterAdoptionInterest).to receive(:save!)
-      post :register_interest, params: { user_email: "someone@email.com", pet_id: 321 }
+      post :register_interest, params: register_interest_params
     end
 
     it 'returns 200 code status' do
       expect(response).to have_http_status(:ok)
     end
 
+    it 'returns success message' do
+      expect(response.body).to eq("{\"success\":\"Finished with success\"}")
+    end
+
     it 'calls RegisterAdoptionInterest behaviour' do
       expect_any_instance_of(::RegisterAdoptionInterest).to receive(:save!).with("someone@email.com", "321")
 
-      post :register_interest, params: { user_email: "someone@email.com", pet_id: 321 }
+      post :register_interest, params: register_interest_params
+    end
+
+    context 'when RegisterAdoptionInterest raises record not found' do
+      before do
+        allow_any_instance_of(::RegisterAdoptionInterest).to receive(:save!).and_raise(ActiveRecord::RecordNotFound)
+        post :register_interest, params: register_interest_params
+      end
+
+      it 'returns 404 code status' do
+        expect(response).to have_http_status(:not_found)
+      end
+
+      it 'returns error message' do
+        expect(response.body).to eq("{\"error\":\"User not found\"}")
+      end
     end
   end
 end

From b6ab8f4cd519e4d46d2d308e0b2d0f5a566c87a9 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Mon, 4 Nov 2019 07:04:56 -0700
Subject: [PATCH 55/58] Update yarn.lock

---
 yarn.lock | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index e181bcbf..3f49c911 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1273,6 +1273,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 babel-helper-builder-react-jsx@^6.24.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
@@ -2435,6 +2443,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3031,6 +3046,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
@@ -3736,6 +3758,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
+
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"

From be426c24ad3dbbfc614396d963e65dc0328b81ec Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 8 Nov 2019 07:41:11 -0700
Subject: [PATCH 56/58] Add adoption interest on pets for adoption list

---
 .../v1/pets_for_adoption_controller.rb        |  2 +-
 app/lib/list_pets.rb                          | 17 +++++---
 app/models/adoption_interest.rb               |  2 +
 app/models/pet.rb                             |  1 +
 app/models/user.rb                            |  1 +
 spec/lib/list_pets_spec.rb                    | 43 +++++++++++++++++++
 6 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 spec/lib/list_pets_spec.rb

diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index 968c54b3..df8440fe 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -3,7 +3,7 @@ class V1::PetsForAdoptionController < ApplicationController
 
   def index
     render json: {
-      pets: ListPets.new.all
+      pets: ListPets.new.all(Pet.actived, params[:user_email])
     }.to_json
   end
 
diff --git a/app/lib/list_pets.rb b/app/lib/list_pets.rb
index 31375c8f..f98e05f2 100644
--- a/app/lib/list_pets.rb
+++ b/app/lib/list_pets.rb
@@ -1,22 +1,27 @@
-# TODO: add specs
 class ListPets
-  def all
-    pets = Pet.actived
-    add_extra_fields(pets)
+  def all(pets, user_email)
+    add_extra_fields(pets, user_email)
   end
 
   private
 
-  def add_extra_fields(pets)
+  def add_extra_fields(pets, user_email)
+    user_pet_interest = user_pet_interest(pets)
+
     pets.map do |pet|
       pet.attributes.merge(
         logo_path: logo_path(pet),
         ngo: NgoResponseAttributes.new(pet.ngo).attributes,
-        description_truncated: pet.description.truncate(200),
+        description_truncated: pet.description&.truncate(200),
+        user_registered_interest: user_pet_interest.include?([user_email, pet.id])
       )
     end
   end
 
+  def user_pet_interest(pets)
+    @list_user_pet ||= AdoptionInterest.joins(:user).where(pet_id: pets).pluck(:email, :pet_id)
+  end
+
   # TODO: extract this to a class
   def logo_path(pet)
     if pet.image.attached?
diff --git a/app/models/adoption_interest.rb b/app/models/adoption_interest.rb
index 10e00fe1..83c0deba 100644
--- a/app/models/adoption_interest.rb
+++ b/app/models/adoption_interest.rb
@@ -1,2 +1,4 @@
 class AdoptionInterest < ApplicationRecord
+  belongs_to :user
+  belongs_to :pet
 end
diff --git a/app/models/pet.rb b/app/models/pet.rb
index b058f5cc..825940ab 100644
--- a/app/models/pet.rb
+++ b/app/models/pet.rb
@@ -1,5 +1,6 @@
 class Pet < ApplicationRecord
   belongs_to :ngo
+  has_many :adoption_interests
 
   SEX = {
     f: 'Fêmea',
diff --git a/app/models/user.rb b/app/models/user.rb
index aab13f27..b657349e 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -7,6 +7,7 @@ class User < ApplicationRecord
   devise :omniauthable, :omniauth_providers => [:facebook, :google_oauth2]
 
   has_and_belongs_to_many :ngos
+  has_many :adoption_interests
 
   def self.from_omniauth(auth)
     user = User.find_by(email: auth.info.email)
diff --git a/spec/lib/list_pets_spec.rb b/spec/lib/list_pets_spec.rb
new file mode 100644
index 00000000..b066a79b
--- /dev/null
+++ b/spec/lib/list_pets_spec.rb
@@ -0,0 +1,43 @@
+require 'rails_helper'
+
+describe ListPets do
+  let(:user_email) { nil }
+
+  let(:pets) do
+    pets = []
+    pets << FactoryBot.create(:pet)
+    pets << FactoryBot.create(:pet)
+
+    pets
+  end
+
+  describe '#all' do
+    it 'returns an array with 2 registers' do
+      expect(subject.all(pets, user_email).count).to eq(2)
+    end
+
+    it 'contains user_registered_interest attribute' do
+      expect(subject.all(pets, user_email).first).to include(
+        user_registered_interest: false
+      )
+    end
+
+    context 'when there is a user_email' do
+      let(:user) { FactoryBot.create(:user) }
+      let(:user_email) { user.email }
+
+      let(:pets) do
+        pet = FactoryBot.create(:pet)
+        AdoptionInterest.create(pet_id: pet.id, user_id: user.id)
+
+        [pet]
+      end
+
+      it 'returns true for user_registered_interest attribute' do
+        expect(subject.all(pets, user_email).first).to include(
+          user_registered_interest: true
+        )
+      end
+    end
+  end
+end

From e11b6d51ba54f1ad42ead689f4562f5873f910e9 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Fri, 8 Nov 2019 07:42:40 -0700
Subject: [PATCH 57/58] Rename actived to active

---
 app/controllers/adoption_controller.rb             | 2 +-
 app/controllers/ngos_controller.rb                 | 2 +-
 app/controllers/v1/pets_for_adoption_controller.rb | 2 +-
 app/lib/list_ngos.rb                               | 2 +-
 app/models/ngo.rb                                  | 2 +-
 app/models/pet.rb                                  | 2 +-
 app/views/ngo_area/users/_form.html.erb            | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/controllers/adoption_controller.rb b/app/controllers/adoption_controller.rb
index 864b463c..d1ec7b1f 100644
--- a/app/controllers/adoption_controller.rb
+++ b/app/controllers/adoption_controller.rb
@@ -1,6 +1,6 @@
 class AdoptionController < UserAreaController
   def index
-    @pets = Pet.actived
+    @pets = Pet.active
   end
 
   def show
diff --git a/app/controllers/ngos_controller.rb b/app/controllers/ngos_controller.rb
index 4026e621..0d06e33e 100644
--- a/app/controllers/ngos_controller.rb
+++ b/app/controllers/ngos_controller.rb
@@ -1,6 +1,6 @@
 class NgosController < UserAreaController
   def index
-    @ngos = Ngo.actived
+    @ngos = Ngo.active
   end
 
   def show
diff --git a/app/controllers/v1/pets_for_adoption_controller.rb b/app/controllers/v1/pets_for_adoption_controller.rb
index df8440fe..0dd1b7f3 100644
--- a/app/controllers/v1/pets_for_adoption_controller.rb
+++ b/app/controllers/v1/pets_for_adoption_controller.rb
@@ -3,7 +3,7 @@ class V1::PetsForAdoptionController < ApplicationController
 
   def index
     render json: {
-      pets: ListPets.new.all(Pet.actived, params[:user_email])
+      pets: ListPets.new.all(Pet.active, params[:user_email])
     }.to_json
   end
 
diff --git a/app/lib/list_ngos.rb b/app/lib/list_ngos.rb
index 7b54c1d2..ddbe2d01 100644
--- a/app/lib/list_ngos.rb
+++ b/app/lib/list_ngos.rb
@@ -1,7 +1,7 @@
 # TODO: add specs
 class ListNgos
   def all
-    ngos = Ngo.actived
+    ngos = Ngo.active
     add_extra_fields(ngos)
   end
 
diff --git a/app/models/ngo.rb b/app/models/ngo.rb
index f5edb961..886ef7b5 100644
--- a/app/models/ngo.rb
+++ b/app/models/ngo.rb
@@ -8,7 +8,7 @@ class Ngo < ApplicationRecord
 
   validates :fantasy_name, presence: true
 
-  scope :actived, -> { where(active: true) }
+  scope :active, -> { where(active: true) }
   scope :find_by_fantasy_name, ->(name) { where('replace(lower(fantasy_name), \' \', \'\') = ?', name) }
 
   def self.from_user(user)
diff --git a/app/models/pet.rb b/app/models/pet.rb
index 825940ab..ffd091b6 100644
--- a/app/models/pet.rb
+++ b/app/models/pet.rb
@@ -11,7 +11,7 @@ class Pet < ApplicationRecord
   
   validates :name, :sex, :ngo, presence: true
 
-  scope :actived, -> { where(active: true) }
+  scope :active, -> { where(active: true) }
 
   def days_ago
     created_at
diff --git a/app/views/ngo_area/users/_form.html.erb b/app/views/ngo_area/users/_form.html.erb
index f31e9c72..798d3527 100644
--- a/app/views/ngo_area/users/_form.html.erb
+++ b/app/views/ngo_area/users/_form.html.erb
@@ -35,7 +35,7 @@
   <% end %>
   <div class="form-group">
     <label>ONGs</label>
-    <% Ngo.actived.each do |ngo| %>
+    <% Ngo.active.each do |ngo| %>
       <div class="checkbox">
         <label>
           <%= check_box_tag 'user[ngo_ids][]', ngo.id, f.object.ngos.include?(ngo) -%>

From 42229170bdee715796cab3d5b51f27187d14c0e6 Mon Sep 17 00:00:00 2001
From: Caroline Salib <carolinesalibc@gmail.com>
Date: Tue, 12 Nov 2019 07:07:38 -0700
Subject: [PATCH 58/58] Upgrade ruby on circleci

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 76476381..71ebc7be 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-       - image: circleci/ruby:2.6.2-node-browsers
+       - image: circleci/ruby:2.6.3-node-browsers
          environment:
            BUNDLER_VERSION: 2.0.1
            RAILS_ENV: test