Merge pull request #104 from boacausa/adoption-flow

Change new adoption routes to default
boacausa · Nov 15, 2019 · 8016ee0 · 8016ee0
2 parents a34c3a0 + 32ebe38
commit 8016ee0
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 159 deletions.
diff --git a/app/controllers/v1/things_controller.rb b/app/controllers/v1/things_controller.rb
diff --git a/app/javascript/components/App.js b/app/javascript/components/App.js
@@ -1,5 +1,4 @@
 import React from "react"
-import HelloWorld from "./HelloWorld";
 import {BrowserRouter, Switch, Route} from "react-router-dom";
 import {Provider} from 'react-redux';
 import configureStore from '../configureStore';
@@ -25,10 +24,9 @@ class App extends React.Component {
                     <BrowserRouter>
                         <Switch>
                             <Route exact path="/" render={() => ("Home!")}/>
-                            <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 userEmail={this.state.userEmail} />}/>
+                            <Route path="/adocao" render={() => <AdoptionList userEmail={this.state.userEmail} />}/>
                         </Switch>
                     </BrowserRouter>
                 </Provider>

diff --git a/app/javascript/components/HelloWorld.js b/app/javascript/components/HelloWorld.js
diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx
diff --git a/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass b/app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass
diff --git a/app/javascript/configureStore.js b/app/javascript/configureStore.js
@@ -2,15 +2,10 @@ import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension';
 
-const initialState = {
-    things: [
-    ]
-};
+const initialState = { };
 
 function rootReducer(state, action) {
     switch (action.type) {
-        case "GET_THINGS_SUCCESS":
-            return { things: action.json.things };
         case "GET_NGOS_SUCCESS":
             return { ngos: action.json.ngos };
         case "GET_NGO_SUCCESS":

diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.jsx
@@ -2,8 +2,14 @@ import React from 'react';
 import styles from './AdoptionButton.sass';
 
 const AdoptionButton = (props) => {
+    const buttonStyle = props.userRegisteredInterest ? styles.AdoptionButtonDisable : styles.AdoptionButton;
+
     return (
-        <button onClick={props.clicked} className={styles.AdoptionButton}>{props.name}</button>
+        <button
+            onClick={props.clicked}
+            className={buttonStyle}
+            disabled={props.userRegisteredInterest}
+        >Adote</button>
     );
 };
 

diff --git a/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass b/app/javascript/containers/AdoptionCard/AdoptionButton/AdoptionButton.sass
@@ -14,3 +14,17 @@
 
 .AdoptionButton:hover
   background-color: #7DA570
+
+.AdoptionButtonDisable
+  text-transform: uppercase
+  border: 0
+  font-family: Roboto, sans-serif
+  font-style: normal
+  font-weight: 500
+  font-size: 15px
+  line-height: 10px
+  color: #FFFFFF
+  width: 85px
+  height: 35px
+  background: lightgrey
+  border-radius: 22px
diff --git a/app/javascript/containers/AdoptionCard/AdoptionCard.jsx b/app/javascript/containers/AdoptionCard/AdoptionCard.jsx
@@ -61,9 +61,8 @@ const AdoptionCard = (props) => {
                 </div>
             </div>
             <div className={styles.adoptionCardBottom}>
-                {/*{ TODO: implement behaviour of button when user is not logged in }*/}
                 <div className={styles.adoptionButton}>
-                    <AdoptionButton clicked={props.modalOpen} name='Adote'/>
+                    <AdoptionButton clicked={props.modalOpen} userRegisteredInterest={props.userRegisteredInterest} />
                 </div>
             </div>
         </div>

diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-import SimpleHeaderText from "../../components/SimpleHeaderText/SimpleHeaderText";
 import styles from './AdoptionList.sass'
 import AdoptionCard from "../AdoptionCard/AdoptionCard";
 import {createStructuredSelector} from "reselect";
@@ -10,10 +9,13 @@ import SimpleModal from "../../components/SimpleModal/SimpleModal";
 const GET_ADOPTION_REQUEST = 'GET_ADOPTION_REQUEST';
 const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
 
-function fetchPetsForAdoption() {
+function fetchPetsForAdoption(userEmail) {
     return dispatch => {
         dispatch({type: GET_ADOPTION_REQUEST});
-        return fetch(`../v1/pets_for_adoption.json`)
+
+        const params = userEmail ? "user_email=" + userEmail : null;
+
+        return fetch(`../v1/pets_for_adoption.json?` + params)
             .then(response => response.json())
             .then(json => dispatch(fetchPetsForAdoptionSuccess(json)))
             .catch(error => console.log(error));
@@ -33,13 +35,13 @@ class AdoptionList extends React.Component {
     };
 
     componentWillMount() {
-        const {fetchPetsForAdoption} = this.props;
-        fetchPetsForAdoption();
+        const {fetchPetsForAdoption, userEmail} = this.props;
+        fetchPetsForAdoption(userEmail);
     }
 
-    addAdoptionInterestHandler = (userEmail, petId) => {
+    addAdoptionInterestHandler = (userEmail, pet) => {
         if (userEmail) {
-            let body = JSON.stringify({register_interest: {user_email: userEmail, pet_id: petId}});
+            let body = JSON.stringify({register_interest: {user_email: userEmail, pet_id: pet.id}});
 
             fetch(`../v1/pets_for_adoption/register_interest`, {
                 method: "POST",
@@ -48,7 +50,10 @@ class AdoptionList extends React.Component {
                 },
                 body: body,
             })
-                .then(response => console.log(response.json()))
+                .then(response => {
+                    console.log(response.json());
+                    this.props.fetchPetsForAdoption(userEmail);
+                })
                 .catch(function (error) {
                     // TODO: handle error
                     console.log(error);
@@ -74,7 +79,8 @@ class AdoptionList extends React.Component {
                 sex={pet.sex}
                 ngo={pet.ngo}
                 user={this.props.userEmail}
-                modalOpen={() => this.addAdoptionInterestHandler(this.props.userEmail, pet.id)}
+                userRegisteredInterest={pet.user_registered_interest}
+                modalOpen={() => this.addAdoptionInterestHandler(this.props.userEmail, pet)}
             />;
         })
     };
@@ -90,7 +96,7 @@ class AdoptionList extends React.Component {
                 >
                     {userEmail ?
                         <div>
-                            <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>
+                            <p>Você está a poucas patas de me adotar. A ONG acabou de saber sobre o seu interesse e entrará em contato em breve. PS: Mal posso esperar por esse momento :)</p>
                         </div>
                     :
                         <div>
@@ -99,11 +105,6 @@ class AdoptionList extends React.Component {
                         </div>
                     }
                 </SimpleModal>
-                {/*<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 */}

diff --git a/app/javascript/packs/hello_react.jsx b/app/javascript/packs/hello_react.jsx
diff --git 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)
-    AdoptionInterest.first_or_create!(user_id: user.id, pet_id: pet_id)
+    AdoptionInterest.find_or_create_by!(user_id: user.id, pet_id: pet_id)
   end
 end
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -13,7 +13,7 @@
       <div class="card-body">
         <h5 class="card-title">Adote um amiguinho</h5>
         <p class="card-text">Acesse a área de adoções para encontrar um amiguinho para adoção agora mesmo.</p>
-        <a href="<%= adoption_index_path %>" class="btn btn-primary">Ver Pets</a>
+        <a href="/adocao" class="btn btn-primary">Ver Pets</a>
       </div>
     </div>
   </div>
@@ -30,5 +30,5 @@
 </div>
 
 <div class="jumbotron">
-  <p class="lead">Consulte as <a href="<%= ngos_path %>">ONGs</a> cadastradas para fazer uma doação ou visite nossa galeria de <a href="<%= adoption_index_path %>">amiguinhos</a> disponíveis para adoção.</p>
+  <p class="lead">Consulte as <a href="<%= ngos_path %>">ONGs</a> cadastradas para fazer uma doação ou visite nossa galeria de <a href="/adocao">amiguinhos</a> disponíveis para adoção.</p>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -25,8 +25,8 @@
           <li class="nav-item <%= current_page?(ngos_path) ? 'active' : '' %>">
             <a class="nav-link" href="<%=ngos_path%>">ONGS</a>
           </li>
-          <li class="nav-item <%= current_page?(adoption_index_path) ? 'active' : '' %>">
-            <a class="nav-link" href="<%=adoption_index_path%>">ADOTE</a>
+          <li class="nav-item <%= current_page?("/adocao") ? 'active' : '' %>">
+            <a class="nav-link" href="/adocao">ADOTE</a>
           </li>
         </ul>
         <ul class="navbar-nav navbar-right">

diff --git a/app/views/layouts/new_front_end.html.erb b/app/views/layouts/new_front_end.html.erb
@@ -27,8 +27,8 @@
           <li class="nav-item <%= current_page?(ngos_path) ? 'active' : '' %>">
             <a class="nav-link" href="<%=ngos_path%>">ONGS</a>
           </li>
-          <li class="nav-item <%= current_page?(adoption_index_path) ? 'active' : '' %>">
-            <a class="nav-link" href="<%=adoption_index_path%>">ADOTE</a>
+          <li class="nav-item <%= current_page?("/adocao") ? 'active' : '' %>">
+            <a class="nav-link" href="/adocao">ADOTE</a>
           </li>
         </ul>
         <ul class="navbar-nav navbar-right">

diff --git a/config/routes.rb b/config/routes.rb
@@ -5,7 +5,6 @@
   get 'home/index'
 
   localized do
-    resources :adoption, only: %i[index show edit new]
     resources :ngos, only: %i[index show]
 
     namespace :ngo_area do
@@ -16,7 +15,6 @@
   end
 
   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'