ticket #7

LifeofMichal · Jan 7, 2020 · 18f6cb6 · 18f6cb6
1 parent 5e09c96
commit 18f6cb6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/App.css b/src/App.css
@@ -169,6 +169,10 @@ header > p {
   background: #6441A5;
 }
 
+.meme-form > button:disabled {
+    background: #ddd;
+  }
+
 .meme-form > input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 font-family: VT323, monospace;
 font-size: 25px;

diff --git a/src/MemeGen/Form.js b/src/MemeGen/Form.js
@@ -1,7 +1,8 @@
 import React from "react"
 
 function Form(props) {
-    const { topText, bottomText, handleChange } = props
+    const { topText, bottomText, handleChange, memesListLength } = props
+
 
     return (
         <form className="meme-form">
@@ -20,7 +21,7 @@ function Form(props) {
                 onChange={handleChange}
             />
 
-            <button type="button" name="randomImg" onClick={handleChange}>Gen</button>
+            <button type="button" name="randomImg" onClick={handleChange} disabled={memesListLength ? false : true}>Gen</button>
         </form>
     )
 }

diff --git a/src/MemeGen/MemeGenerator.js b/src/MemeGen/MemeGenerator.js
@@ -47,6 +47,7 @@ class MemeGenerator extends Component {
     handleChange = (event) => {
         const { name, value } = event.target
 
+
         if (name === "searchQuote") {
 
             const filteredAMIs = this.state.allMemeImgs.filter(function (element) {
@@ -66,13 +67,16 @@ class MemeGenerator extends Component {
                 })
             }
 
-        } else if ( name === "randomImg") {
-            const randomMeme = this.state.filteredMemes[Math.floor(Math.random() * Math.floor(this.state.filteredMemes.length))]
+        } else if ( name === "randomImg" && this.state.filteredMemes.length) {
 
-            this.setState({
-                topText: randomMeme.name,
-                [name]: randomMeme.url
-            })
+                const randomMeme = this.state.filteredMemes[Math.floor(Math.random() * Math.floor(this.state.filteredMemes.length))]
+
+                this.setState({
+                    topText: randomMeme.name,
+                    [name]: randomMeme.url
+                })
+
+                console.log(this.state.topText)
         } else if( name === "selectedImg") {
             const pickedImg = this.state.filteredMemes.find(element => element.url === value)
 
@@ -89,15 +93,19 @@ class MemeGenerator extends Component {
                 bottomText: value 
             })
         }
+
+
+
     }
 
     render() {
         const { loading, topText, bottomText, randomImg, allMemeImgs, filteredMemes, searchQuote } = this.state
+        const filteredMemesLength = this.state.filteredMemes.length
         const pickImage = allMemeImgs.find(element => element.url === randomImg)
 
         return (
             <div className="memeGen">
-                <Form topText={topText} bottomText={bottomText} handleChange={this.handleChange} />
+                <Form topText={topText} bottomText={bottomText} handleChange={this.handleChange} memesListLength={filteredMemesLength}/>
                 <Search searchQuote={searchQuote} handleChange={this.handleChange} />
                 <Select randomImg={randomImg} filteredMemes={filteredMemes} searchQuote={searchQuote} handleChange={this.handleChange} />
                 {