blob: 6577e537426d9abd3ebcb5c4988a9e36ebdaa3a1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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;
|
