From 5be754bda1474ed315860a2a7ccb15bf901c6d96 Mon Sep 17 00:00:00 2001
From: Rahul Maurya <66553483+rahulm682@users.noreply.github.com>
Date: Mon, 10 Oct 2022 09:38:19 +0530
Subject: [PATCH] Handle api call failure fixed

---
 CONTRIBUTORS.md        |  3 +-
 src/components/Meme.js | 63 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 48b28f8..6389962 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -4,4 +4,5 @@ Here's to the crazy ones:
 
 <a href="https://github.com/DuP-491"><sub><b>Divyansh Upadhyay</b></sub></a>
 <a href="https://github.com/dev-lovedeep"><sub><b>Lovedeep singh kamal</b></sub></a>
-<a href="https://github.com/NeerajChatterjee"><sub><b>Neeraj Chatterjee</b></sub></a>
\ No newline at end of file
+<a href="https://github.com/NeerajChatterjee"><sub><b>Neeraj Chatterjee</b></sub></a>
+<a href="https://github.com/rahulm682"><sub><b>Rahul Maurya</b></sub></a>
\ No newline at end of file
diff --git a/src/components/Meme.js b/src/components/Meme.js
index f973e95..d449941 100644
--- a/src/components/Meme.js
+++ b/src/components/Meme.js
@@ -13,7 +13,8 @@ export default function Meme() {
 	useEffect(function () {
 		fetch(api_url)
 			.then((data) => data.json())
-			.then((data) => setAllMemes(data.data.memes));
+			.then((data) => setAllMemes(data.data.memes))
+			.catch((err) => document.write("<h1>Cannot connect to the server. Try after some time</h1>"));
 	}, []);
 
 	//this state stores information about the current meme
@@ -23,12 +24,50 @@ export default function Meme() {
 		url: "",
 	});
 
+	const [display, setDisplay] = useState(false)
+
+	const handleTopText = (e) => {
+		setMeme((prev) => ({
+			...prev,
+			topText: e.target.value
+		}));
+	}
+
+	const handleBottomText = (e) => {
+		setMeme((prev) => ({
+			...prev,
+			bottomText: e.target.value
+		}));
+	}
+
+
+	const handleClick = (e) => {
+		if (e.target.name == "topText")
+			setMeme((prev) => ({
+				...prev,
+				topText: ""
+			}));
+		else if (e.target.name == "bottomText") setMeme((prev) => ({
+			...prev,
+			bottomText: ""
+		}));
+	}
+
 	function getRandomMeme() {
+		// const {topText, bottomText} = meme
+		// if(topText=="" && bottomText=="") {
+		// 	alert("Please fill any one of the text")
+		// 	return
+		// }
 		let index = Math.floor(Math.random() * allMemes.length);
 		setMeme((prev) => ({
 			...prev,
 			url: allMemes[index].url,
 		}));
+
+		setDisplay(() => ({
+			display: true
+		}))
 	}
 
 	//this is for handling the input
@@ -41,17 +80,17 @@ export default function Meme() {
 	}
 
 	// this is for uploading the image from the PC
-	function uploadImage(event){
+	function uploadImage(event) {
 		console.log(event.target.files[0].type);
 
 		// accepts image in the form of PNG/JPG/JPEG
-		if (event.target.files[0].type === "image/png" || event.target.files[0].type === "image/jpg" || event.target.files[0].type === "image/jpeg"){
+		if (event.target.files[0].type === "image/png" || event.target.files[0].type === "image/jpg" || event.target.files[0].type === "image/jpeg") {
 			setMeme((prev) => ({
 				...prev,
 				url: URL.createObjectURL(event.target.files[0])
 			}))
 		}
-		else{
+		else {
 			// Alert is shown when there is incorrect file chosen
 			alert("Please upload the image in the correct format (PNG/JPEG/JPG)!")
 		}
@@ -65,26 +104,32 @@ export default function Meme() {
 					type="text"
 					placeholder="text1"
 					name="topText"
+					value={meme.topText}
+					onChange={handleTopText}
 				/>
 				<input
 					className="form__text"
 					type="text"
 					placeholder="text2"
 					name="bottomText"
+					value={meme.bottomText}
+					onChange={handleBottomText}
 				/>
 				<button className="form__button" onClick={getRandomMeme}>
 					Generate Meme
 				</button>
-				<label for="image-upload" className="form__button upload_image__button">
+				<label htmlFor="image-upload" className="form__button upload_image__button">
 					Upload Meme Image
 				</label>
 				<input accept="image/*" id="image-upload" type="file" onChange={uploadImage} />
 			</div>
-			<div className="meme">
+			{display && <div className="meme">
 				{meme.url && <img className="meme__image" src={meme.url} />}
-				{meme.url && <h2 className="meme__text">{meme.topText}</h2>}
-				{meme.url && <h2 className="meme__text">{meme.bottomText}</h2>}
-			</div>
+
+				{meme.url && <><h2 className="meme__text">{meme.topText}</h2>{meme.topText && <button name="topText" onClick={handleClick}>remove</button>}</>}
+
+				{meme.url && <><h2 className="meme__text">{meme.bottomText}</h2>{meme.bottomText && <button name="bottomText" onClick={handleClick}>remove</button>}</>}
+			</div>}
 		</div>
 	);
 }