Untitled

bebo231312312321

Nov 12th, 2024

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 2.06 KB | None | 0 0

raw download clone embed print report

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { QuotesIcon, QuotesFlippedIcon } from '../../../Utils/AdminIcons';
import { userServiceFactory } from '../../services/userService';
const RandomQuote = () => {
const { i18n } = useTranslation();
const [quote, setQuote] = useState(null);
const userService = userServiceFactory();
useEffect(() => {
const fetchQuotes = async () => {
try {
const response = await userService.getQuotes();
if (response && Array.isArray(response)) {
const transformedQuotes = response.map(q => ({
quoteBg: q.bg,
quoteEn: q.en,
authorBg: q.author.bg,
authorEn: q.author.en
}));
const randomIndex = Math.floor(Math.random() * transformedQuotes.length);
setQuote(transformedQuotes[randomIndex]);
}
} catch (error) {
console.error('Error fetching quotes:', error);
}
};
fetchQuotes();
}, []);
const currentLanguage = i18n.language;
const displayedQuote = quote ? (currentLanguage === 'bg' ? quote.quoteBg : quote.quoteEn) : '';
const displayedAuthor = quote ? (currentLanguage === 'bg' ? quote.authorBg : quote.authorEn) : '';
return (
<section className="quote">
<div className="quote-flex">
<div className="quote-first">
<QuotesIcon />
</div>
<p className="display-quote">
{displayedQuote}
</p>
<div className="quote-second">
<QuotesFlippedIcon />
</div>
<p className="quote-author">{displayedAuthor}</p>
</div>
</section>
);
};
export default RandomQuote;

Add Comment

Please, Sign In to add comment