initiating state to get values from input

zoe-gonzales · May 7, 2019 · 4915d57 · 4915d57
1 parent 278b023
commit 4915d57
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 23 deletions.
diff --git a/client/src/components/Card/index.js b/client/src/components/Card/index.js
@@ -7,7 +7,8 @@ export default function Card({
     authors,
     image = "//unsplash.it/200",
     description,
-    link
+    link,
+    btnType
 }) {
     return (
         <div>
@@ -20,7 +21,7 @@ export default function Card({
                         <p>Author: {authors}</p>
                         <p>Synopsis: {description}</p>
                         <a href={link}>{"Read more"}</a> <br/>
-                        <Button className="button-remove" size={Sizes.SMALL} isHollow>Remove</Button>
+                        <Button className="button-remove" size={Sizes.SMALL}>{btnType}</Button>
                     </div>
                     </div>
                 </div>

diff --git a/client/src/components/Link/index.js b/client/src/components/Link/index.js
@@ -6,5 +6,5 @@ export default function LinkBtn(props) {
     return <Button 
         className="button-custom" 
         color={Colors.PRIMARY} 
-        isHollow>{props.label}</Button>;
+        >{props.label}</Button>;
 }
diff --git a/client/src/components/SearchBar/index.js b/client/src/components/SearchBar/index.js
@@ -5,7 +5,8 @@ export default function SearchBar(props) {
     return (
         <input 
             type="search" 
-            name="search" 
+            name={props.name} 
+            onChange={props.onChange}
             placeholder={props.placeholder} 
             className="animated-search-form"/>
     );

diff --git a/client/src/components/SearchBar/style.css b/client/src/components/SearchBar/style.css
@@ -12,6 +12,6 @@
   }
 
   .animated-search-form[type=search]:focus {
-    width: 40%;
+    width: 120%;
     transition: width 0.4s ease-in-out;
   }  
diff --git a/client/src/components/SubmitBtn/index.js b/client/src/components/SubmitBtn/index.js
@@ -5,6 +5,7 @@ import './style.css';
 export default function SubmitBtn(props) {
     return <Button 
         className="button-submit" 
-        color={Colors.PRIMARY} 
-        isHollow>{props.label}</Button>;
+        color={Colors.PRIMARY}
+        onClick={props.onClick} 
+        >{props.label}</Button>;
 }
diff --git a/client/src/pages/Saved.js b/client/src/pages/Saved.js
@@ -12,19 +12,19 @@ class Saved extends Component {
                 <Header title={"Favorite Books"}/>
                 <Grid className="display">
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                     <Card title={"NW"} authors={"Zadie Smith"}
-                    description={"blah blah blah"} link={"#"}/>
+                    description={"blah blah blah"} link={"#"} btnType={"Remove"}/>
                 </Grid>
             </div>
         )

diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js
@@ -2,25 +2,56 @@ import React, { Component } from 'react';
 import Header from '../components/Header';
 import SearchBar from '../components/SearchBar';
 import SubmitBtn from '../components/SubmitBtn';
-import { Row } from 'react-foundation';
+import { Grid } from 'react-foundation';
 import './style.css';
 
 class Search extends Component {
+    state = {
+        keywords: '',
+        author: ''
+    }
+
+    searchBooks = () => {
+
+    }
+
+    handleInputChange = event => {
+        let { name, value } = event.target;
+
+        this.setState({
+            [name]: value
+        });
+    }
+
+    handleSubmit = event => {
+        event.preventDefault();
+
+    }
+
     render() {
         return (
             <div>
-                <Header title={"Google Books Search"}/>
+                <Header title="Google Books Search"/>
                 <div className="search-container">
-                    <Row className="display">
+                    <Grid className="display">
                         <h1 className="sub-title">Search & Save Books</h1>
-                    </Row>
-                    <Row className="display search-form">
+                    </Grid>
+                    <Grid className="display search-form">
                         <form>
-                            <SearchBar placeholder={"Search by keywords..."}/>
-                            <SearchBar placeholder={"Search by author..."}/>
-                            <SubmitBtn label={"Submit"}/>
+                            <SearchBar 
+                            placeholder="Search by keywords..."
+                            name="keywords"
+                            value={this.state.keywords}
+                            onChange={this.handleInputChange} />
+                            <SearchBar 
+                            placeholder="Search by author..."
+                            name="author"
+                            value={this.state.author}
+                            onChange={this.handleInputChange}/>
+                            <SubmitBtn 
+                            label="Submit" onClick={this.handleSubmit}/>
                         </form>                
-                    </Row>  
+                    </Grid>  
                 </div>
             </div>
         )