Merge pull request #14 from FetchingFriends/post-a-friend

Post a friend

src/components/App/App.css

@@ -1,3 +1,7 @@
 .App {
   text-align: center;
 }
+
+#root, body, html, main, html {
+  height: 100%;
+}

src/components/App/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import './App.css';
 import Header from '../Header/Header'
 import Login from '../Login/Login'
+import PostAFriend from '../PostAFriend/PostAFriend';
 import { Route, Switch } from 'react-router-dom'
 import SignUp from '../SignUp/SignUp'
 import UserHome from '../UserHome/UserHome'

src/components/PostAFriend/PostAFriend.css

@@ -0,0 +1,116 @@
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  }
+
+  h1 {
+    display: inline-block;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 40px;
+    color: black;
+  }
+
+  .question {
+    margin-top: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .input {
+    display: flex;
+  }
+
+  .submit-question {
+    background-color: #6504B5;
+    height: 30px;
+    width: 35px;
+    border-radius: 50%;
+    margin-top: 20px;
+    border: none;
+    color: white;
+    font-size: 20px;
+  }
+
+  .number {
+    width: 35px;
+    height: 20px;
+    border-radius: 10%;
+  }
+  .radio, .checkbox {
+    margin: 10px;
+  }
+
+
+  .text-input {
+    width: 50%;
+  }
+
+  .fade-in {
+    animation: fadeIn linear 2s;
+    -webkit-animation: fadeIn linear 2s;
+    -moz-animation: fadeIn linear 2s;
+    -o-animation: fadeIn linear 2s;
+    -ms-animation: fadeIn linear 2s;
+  }
+
+  .fade {
+    animation: fadeOut linear 2s;
+    -webkit-animation: fadeIn linear 2s;
+    -moz-animation: fadeIn linear 2s;
+    -o-animation: fadeIn linear 2s;
+    -ms-animation: fadeIn linear 2s;
+  }
+
+  @keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-moz-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-webkit-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-o-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-ms-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+
+  @keyframes fadeOut {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-moz-keyframes fadeOut {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-webkit-keyframes fadeOut {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-o-keyframes fadeOut {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+
+  @-ms-keyframes fadeOut {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }

src/components/PostAFriend/PostAFriend.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import './PostAFriend.css'
+
+function PostAFriend() {
+
+  //state
+  const [renderQuestionById, setrenderQuestionById] = useState(0);
+  const questions = [{ question: 'What\'s your Friend\'s name?', id: 'name', inputType: 'text' }, { question: 'How old are they?', id: 'age', inputType: 'number' }, { question: 'What breed?', id: 'breed', inputType: 'text' }, { question: 'If you could describe them in a short paragraph?', id: 'description', inputType: 'text' }, { question: 'Gender?', id: 'gender', inputType: 'radio', options: ['M', 'F'] }, { question: 'Neutered?', id: 'fixed', inputType: 'radio', options: [true, false] }, { question: 'House trained?', id: 'houseTrained', inputType: 'radio', options: [true, false] }, { question: 'Upload a few photos so we can find your friend a new home!', id: 'photos', inputType: 'text' }, { question: 'Good with kids?', id: 'goodWithKids', inputType: 'radio', options: [true, false]}, { question: 'Good other pets?', id: 'goodWithPets', inputType: 'radio', options: [true, false]}]
+  const [newPet, setnewPet] = useState({})
+  const [inputValue, setInputValue] = useState('')
+
+  //functions
+
+  function handleTrueFalseLabel(option) {
+    if (option === true) {
+      return 'Yes'
+    } else if (option === false) {
+      return 'No'
+    } else {
+      return option
+    }
+  }
+
+  function renderQuestion() {
+    if(renderQuestionById <= 9){
+    return (
+      <>
+        <p>{questions[renderQuestionById].question}</p>
+        <div className='input'>
+          {renderInput(questions[renderQuestionById].inputType)}
+        </div>
+      </>
+    )
+    } else {
+      return (
+        <h1>Completed</h1>
+      )
+    }
+  }
+
+  function renderInput(inputType) {
+    if (inputType === 'text') {
+      return (<input className={inputType} type={inputType} value={inputValue} required onChange={(e) => setInputValue(e.target.value)}></input>)
+    } else if (inputType === 'number') {
+      return (<input className={inputType} type={inputType} value={inputValue} required onChange={(e) => setInputValue(e.target.value)}></input>)
+    } else if (inputType === 'radio') {
+      const returnOptions = questions[renderQuestionById].options.map(option => {
+        return (
+          <div className={inputType} key={option + renderQuestionById}>
+            <label key={`${option} label`}>{handleTrueFalseLabel(option)}</label>
+            <input className={inputType} name={questions[renderQuestionById].id} type={inputType} value={option} key={option} required onClick={(e) => {setInputValue(e.target.value)}} />
+          </div>
+        )
+      })
+      return returnOptions
+    }
+  }
+
+  function nextQuestion(inputQuestion, event) {
+    if(renderQuestionById <= 9 && inputValue !== ''){
+      event.preventDefault()
+      const updatePet = { ...newPet }
+      updatePet[inputQuestion] = inputValue
+      setnewPet(updatePet)
+      setrenderQuestionById(renderQuestionById + 1)
+      setInputValue('');
+    }
+  }
+
+  return (
+    <main>
+      <h1>Find your Friend a new Home</h1>
+      <form className='question'>
+        {renderQuestion()}
+        <button className='submit-question' type='submit' onClick={(e) => nextQuestion(questions[renderQuestionById].id, e)}>➤</button>
+      </form>
+    </main>
+  );
+}
+
+export default PostAFriend;