1 files changed, 61 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js
new file mode 100644
index 0000000..6577e53
--- /dev/null
+++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js
@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import Button from "../commons/Button";
+import Headline from "./Headline/Headline";
+
+async function fetchMemes() {
+  const response = await fetch("https://api.imgflip.com/get_memes");
+  const result = await response.json();
+  return await result;
+}
+
+function MemePreview({ headlines, setHeadlines }) {
+  const [memesList, setMemesList] = useState([]);
+  const [isFetched, setIsFetched] = useState(false);
+  useEffect(() => {
+    fetchMemes().then((object) => setMemesList(object.data.memes));
+    setIsFetched(true);
+    return () => setIsFetched(false);
+  }, [setIsFetched]);
+
+  const [selectedMeme, setSelectedMeme] = useState({});
+  useEffect(() => {
+    setSelectedMeme(memesList[5]);
+  }, [memesList]);
+
+  const getRandomMeme = () => {
+    const randomIndex = Math.floor(Math.random() * memesList.length);
+    setSelectedMeme(memesList[randomIndex]);
+  };
+
+  const headlinesList = headlines.map((headline) => (
+    <Headline
+      key={headline.id}
+      id={headline.id}
+      text={headline.text}
+      fontSize={`${headline.fontSize}${headline.fontUnit}`}
+      xPos={headline.xPos}
+      yPos={headline.yPos}
+      setHeadlines={setHeadlines}
+    />
+  ));
+
+  return (
+    <div className="meme-preview">
+      <div className="meme-preview__meme">
+        {isFetched && selectedMeme ? (
+          <img
+            src={selectedMeme.url}
+            alt={selectedMeme.name}
+            className="meme-preview__image"
+          />
+        ) : (
+          "Loading..."
+        )}
+        {headlinesList}
+      </div>
+      <Button body="Random image" modifier="random" onClick={getRandomMeme} />
+    </div>
+  );
+}
+
+export default MemePreview;