Disable adoption button for those who already registered interest

#40
boacausa · Nov 14, 2019 · 12c1a52 · 12c1a52
1 parent 5d51d9e
commit 12c1a52
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
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,8 +35,8 @@ class AdoptionList extends React.Component {
     };
 
     componentWillMount() {
-        const {fetchPetsForAdoption} = this.props;
-        fetchPetsForAdoption();
+        const {fetchPetsForAdoption, userEmail} = this.props;
+        fetchPetsForAdoption(userEmail);
     }
 
     addAdoptionInterestHandler = (userEmail, petId) => {
@@ -74,6 +76,7 @@ class AdoptionList extends React.Component {
                 sex={pet.sex}
                 ngo={pet.ngo}
                 user={this.props.userEmail}
+                userRegisteredInterest={pet.user_registered_interest}
                 modalOpen={() => this.addAdoptionInterestHandler(this.props.userEmail, pet.id)}
             />;
         })
@@ -99,11 +102,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 */}