Merge pull request #92 from boacausa/adoption-flow

Create adoption flow with new layout

.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

.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

app/controllers/adoption_controller.rb

@@ -1,6 +1,6 @@
 class AdoptionController < UserAreaController
   def index
-    @pets = Pet.actived
+    @pets = Pet.active
   end
 
   def show

app/controllers/ngos_controller.rb

@@ -1,6 +1,6 @@
 class NgosController < UserAreaController
   def index
-    @ngos = Ngo.actived
+    @ngos = Ngo.active
   end
 
   def show

app/controllers/v1/ngos_controller.rb

@@ -7,36 +7,15 @@ def index
 
   def show
     render json: {
-        ngo: Ngo.last
+      ngo: Ngo.last
     }.to_json
   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
+  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
+

app/controllers/v1/pets_for_adoption_controller.rb

@@ -0,0 +1,29 @@
+class V1::PetsForAdoptionController < ApplicationController
+  skip_before_action :verify_authenticity_token
+
+  def index
+    render json: {
+      pets: ListPets.new.all(Pet.active, params[:user_email])
+    }.to_json
+  end
+
+  def register_interest
+    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
+
+  def register_interest_params
+    params.require(:register_interest).permit(:user_email, :pet_id)
+  end
+end

app/javascript/components/App.js

@@ -6,11 +6,18 @@ 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";
+
+require('typeface-roboto');
 
 const store = configureStore();
 
 class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { userEmail: this.props.userEmail };
+    }
+
     render() {
         return (
             <ErrorBoundary>
@@ -21,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 />}/>
+                            <Route path="/new/adocao" render={() => <AdoptionList userEmail={this.state.userEmail} />}/>
                         </Switch>
                     </BrowserRouter>
                 </Provider>

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;

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)

app/javascript/components/SelectInput/SelectInput.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './SelectInput.sass';
+
+const SelectInput = (props) => {
+    return (
+        <div className={styles.SelectInput} style={{width: props.width, marginRight: props.marginRight}}>
+            <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>
+    );
+};
+
+export default SelectInput;

app/javascript/components/SelectInput/SelectInput.sass

@@ -0,0 +1,29 @@
+.SelectInput
+  border: 0
+  border-radius: 4px
+  margin-bottom: 10px
+  width: 200px
+  height: 50px
+  background-color: #ebebeb
+  font-size: 0
+  padding: 6px
+
+  *:focus
+    outline: none
+
+.SelectInput label
+  font-size: 10px
+  font-family: Roboto, sans-serif
+  color: #9b9b9b
+  padding: 2px 8px 0
+  margin-bottom: 0
+
+.SelectInput select
+  color: #232628
+  font-size: 14px
+  font-family: Roboto, sans-serif
+  border: 0
+  width: 100%
+  background: none
+  -webkit-appearance: none
+  padding-left: 8px

app/javascript/components/SimpleCircularButton/SimpleCircularButton.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './SimpleCircularButton.sass';
+
+const SimpleCircularButton = (props) => {
+    return (
+        <button onClick={props.clicked} className={styles.SimpleCircularButton}>{props.name}</button>
+    );
+};
+
+export default SimpleCircularButton;

app/javascript/components/SimpleCircularButton/SimpleCircularButton.sass

@@ -0,0 +1,18 @@
+.SimpleCircularButton
+  width: 240px
+  height: 50px
+  border-radius: 29px
+  background-color: #83be7d
+  font-family: Roboto, 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
+
+.SimpleCircularButton:hover
+  background-color: #68af60

app/javascript/components/SimpleHeaderText/SimpleHeaderText.sass

@@ -2,8 +2,8 @@
   .title
     width: 448px
     height: 49px
-    font-family: museo-sans, sans-serif
-    font-size: 36px
+    font-family: Roboto, sans-serif
+    font-size: 32px
     font-weight: bold
     font-style: normal
     font-stretch: normal
@@ -14,8 +14,8 @@
   .subtitle
     width: 740px
     height: 26px
-    font-family: museo-sans, sans-serif
-    font-size: 19px
+    font-family: Roboto, sans-serif
+    font-size: 16px
     font-weight: 500
     font-style: normal
     font-stretch: normal

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;

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)

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;

app/javascript/components/SimpleSubmitButton/SimpleSubmitButton.sass

@@ -0,0 +1,18 @@
+.SimpleSubmitButton
+  width: 200px
+  height: 50px
+  border-radius: 4px
+  background-color: #ffa0a0
+  font-family: Roboto, 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
+
+.SimpleSubmitButton:hover
+  background-color: #ff8a8a

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;

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: Roboto, sans-serif
+  border: 0
+  width: 100%
+  background: none
+  padding-left: 8px

app/javascript/configureStore.js

@@ -15,6 +15,10 @@ 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 };
+        case "GET_NGO_CITIES_SUCCESS":
+            return { cities: action.json.cities };
         default:
             return state;
     }

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;