Skip to content

Commit

Permalink
fix: api error handling in random quote card generator (reactplay#973)
Browse files Browse the repository at this point in the history
* feat: Random Quote Card Generator

* fix: Api error handling in Random Quote Card Generator
  • Loading branch information
PriteshKiri committed Feb 17, 2023
1 parent 8fc7ea3 commit 135976f
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 28 deletions.
17 changes: 13 additions & 4 deletions src/plays/random-quote-card-generator/Components/CardContainer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React, { useEffect, useRef } from 'react';
import { FaQuoteLeft } from 'react-icons/fa';

const CardContainer = ({ gradientColor, quote, AspectRatio, cardColor, setDomImg, domImg }) => {
import data from '../data';
const CardContainer = ({
gradientColor,
quote,
AspectRatio,
cardColor,
setDomImg,
domImg,
backupData,
apiStatus
}) => {
const downloadImgRef = useRef();
const targetEl = downloadImgRef.current;

Expand Down Expand Up @@ -32,11 +41,11 @@ const CardContainer = ({ gradientColor, quote, AspectRatio, cardColor, setDomImg
>
<FaQuoteLeft className="mb-8" size={28} />{' '}
<p className="text-center text-sm sm:text-base">
{quote.content ? quote.content : 'Loading...'}
{apiStatus ? (quote.content ? quote.content : '...loading') : backupData[0].quote}
</p>
<p className="text-center text-sm sm:text-base font-semibold mt-4">
{' '}
- {quote.author ? quote.author : 'Loading...'}
- {apiStatus ? (quote.author ? quote.author : '...loading') : backupData[0].author}
</p>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useState } from 'react';
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

import { BsAspectRatio, BsDownload } from 'react-icons/bs';
import { TbRectangleVertical, TbSquare } from 'react-icons/tb';
import { VscSymbolColor } from 'react-icons/vsc';
import { FaSun, FaMoon } from 'react-icons/fa';
import { FiRepeat } from 'react-icons/fi';
import { backupQuotes } from '../data';
const SideBarOperation = ({
regenerate,
setRegenerate,
Expand All @@ -17,10 +17,14 @@ const SideBarOperation = ({
gradients,
setCardColor,
setGradientColor,
gradientColor
gradientColor,
setBackupData,
apiStatus
}) => {
const [aspectRatioVisibility, setAspectRatioVisibility] = useState(false);
const [colorBoxVisibility, setColorBoxVisibility] = useState(false);
const [regenerateAnimation, setRegenerateAnimation] = useState(false);
const [backgroundColorMobileActive, setBackgroundColorMobileActive] = useState(false);
// Passing the selected aspect ration to the state
const handleAspectRatioSelection = (aspectRationName) => {
setAspectRatio(aspectRationName);
Expand Down Expand Up @@ -70,12 +74,29 @@ const SideBarOperation = ({
}
};

// Quote regeneration logic

function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

const handleQuoteRegeneration = () => {
if (apiStatus) {
setRegenerate(!regenerate);
}
const randomId = randomInteger(1, backupQuotes.length);
const randomQuoteData = backupQuotes.filter((quoteData) => quoteData.id === randomId);
setBackupData(randomQuoteData);
setRegenerateAnimation(!regenerateAnimation);
};

// Design tools in Bottom bar

// 1. Background Color feature

const HandleColorBoxVisibility = () => {
setColorBoxVisibility(!colorBoxVisibility);
setBackgroundColorMobileActive(!backgroundColorMobileActive);
};

const handleGradientSelection = (selectedGradientColorId) => {
Expand All @@ -88,7 +109,7 @@ const SideBarOperation = ({

// 2. Card Color Feature

const handleCardColor = () => {
const handleCardColor = (e) => {
if (cardColor === 'Light') {
setCardColor('Dark');
} else {
Expand Down Expand Up @@ -126,7 +147,9 @@ const SideBarOperation = ({
{/* Background Color Button Container */}
<div className="flex flex-col justify-center items-center block sm:hidden">
<button
className="mt-2 sm:mt-4 flex items-center justify-center rounded-lg bg-white px-4 py-3 shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)]"
className={`mt-2 sm:mt-4 flex items-center justify-center rounded-lg px-4 py-3 shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)] ${
backgroundColorMobileActive ? 'bg-black text-white' : 'bg-white text-black'
} `}
onClick={() => HandleColorBoxVisibility()}
>
<VscSymbolColor />
Expand All @@ -135,7 +158,7 @@ const SideBarOperation = ({
</div>
{/* Background Color selection Button Container */}
<div
className={`p-4 absolute -left-2 bottom-24 sm:right-32 sm:top-28 bg-white rounded-lg block sm:hidden ${
className={`p-4 absolute -left-2 bottom-[7rem] sm:right-32 sm:top-28 bg-white rounded-lg block sm:hidden ${
colorBoxVisibility ? 'block' : 'hidden'
}`}
>
Expand Down Expand Up @@ -168,11 +191,11 @@ const SideBarOperation = ({
<div className="flex flex-col justify-center items-center">
<button
className="mt-2 flex items-center justify-center rounded-lg bg-white px-4 py-3 shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)]"
onClick={() => setRegenerate(!regenerate)}
onClick={() => handleQuoteRegeneration()}
>
<FiRepeat
className={`transition-transform ease-in duration-300 ${
regenerate ? 'rotate-90' : '-rotate-90'
regenerate || regenerateAnimation ? 'rotate-90' : '-rotate-90'
}`}
/>
</button>
Expand All @@ -182,7 +205,9 @@ const SideBarOperation = ({
{/* Aspect Ratio Button Container */}
<div className="flex flex-col justify-center items-center">
<button
className="mt-2 sm:mt-6 transition-opacity flex items-center justify-center rounded-lg bg-white px-4 py-3 shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)]"
className={`mt-2 sm:mt-6 transition-opacity flex items-center justify-center rounded-lg px-4 py-3 shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)] ${
aspectRatioVisibility ? 'bg-black text-white' : 'bg-white text-black'
} `}
onClick={() => handleAspectRatioVisibility()}
>
<BsAspectRatio />
Expand All @@ -192,7 +217,7 @@ const SideBarOperation = ({

{/* Aspect Ratio selection Button Container */}
<div
className={`p-3 sm:p-4 absolute right-[3rem] bottom-24 sm:right-[5.5rem] sm:top-24 bg-white sm:bg-transparent rounded-lg ${
className={`p-3 sm:p-4 absolute right-[3rem] bottom-[7rem] sm:right-[5.5rem] sm:top-24 bg-white sm:bg-transparent rounded-lg ${
aspectRatioVisibility ? 'block' : 'hidden'
}`}
>
Expand Down
46 changes: 31 additions & 15 deletions src/plays/random-quote-card-generator/RandomQuoteCardGenerator.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,44 @@ import SideBarDesign from './Components/SideBarDesign';
import CardContainer from './Components/CardContainer';
import { useEffect, useState } from 'react';
import SideBarOperation from './Components/SideBarOperation';

const gradients = [
{ id: '1', gradient_color1: '#FF9966', gradient_color2: '#FF5E62' },
{ id: '2', gradient_color1: '#EC008C', gradient_color2: '#FC6767' },
{ id: '3', gradient_color1: '#4646FB', gradient_color2: '#BE4DFF' },
{ id: '4', gradient_color1: '#2D47A2', gradient_color2: '#00FFFF' },
{ id: '5', gradient_color1: '#870FFF', gradient_color2: '#F89B29' },
{ id: '6', gradient_color1: '#B1FE64', gradient_color2: '#24C75B' },
{ id: '7', gradient_color1: '#BAFFAD', gradient_color2: '#ADCEFF' },
{ id: '8', gradient_color1: '#FFC7CA', gradient_color2: '#E299FF' }
];
import { gradients } from './data';

function RandomQuoteCardGenerator(props) {
const initialQuoteData = [
{
quote: " The bad news is time flies. The good news is you're the pilot",
author: 'Michael Altshuler'
}
];

const [gradientColor, setGradientColor] = useState([gradients[0]]);
const [quote, setQuote] = useState({});
const [regenerate, setRegenerate] = useState(false);
const [AspectRatio, setAspectRatio] = useState('Square');
const [cardColor, setCardColor] = useState('Light');
const [domImg, setDomImg] = useState({});
const [backupData, setBackupData] = useState(initialQuoteData);
const [apiStatus, setApiStatus] = useState(true);

const apiUrl = 'https://api.quotable.io/random';

useEffect(() => {
fetch(apiUrl)
.then((res) => res.json())
.then((data) => setQuote(data))
.catch((err) => console.error(err));
const load = async () => {
try {
const response = await fetch(apiUrl);
if (response.ok) {
setApiStatus(true);
const json = await response.json();
setQuote(json);
} else {
setApiStatus(false);
}
} catch (error) {
console.error(error);
}
};

load();
}, [regenerate]);

return (
Expand All @@ -46,6 +58,8 @@ function RandomQuoteCardGenerator(props) {
/>
<CardContainer
AspectRatio={AspectRatio}
apiStatus={apiStatus}
backupData={backupData}
cardColor={cardColor}
domImg={domImg}
gradientColor={gradientColor}
Expand All @@ -56,12 +70,14 @@ function RandomQuoteCardGenerator(props) {
/>
<SideBarOperation
AspectRatio={AspectRatio}
apiStatus={apiStatus}
cardColor={cardColor}
domImg={domImg}
gradientColor={gradientColor}
gradients={gradients}
regenerate={regenerate}
setAspectRatio={setAspectRatio}
setBackupData={setBackupData}
setCardColor={setCardColor}
setGradientColor={setGradientColor}
setRegenerate={setRegenerate}
Expand Down
145 changes: 145 additions & 0 deletions src/plays/random-quote-card-generator/data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
export const backupQuotes = [
{
id: 1,
quote: 'It is not how long but how well we live that matters.',
author: 'Jeremiah Say'
},
{
id: 2,
quote: 'Life is not a solo but a chorus. We live in relationships from cradle to grave.',
author: 'Anon'
},
{
id: 3,
quote: "If you can't explain it simply, you don't understand it well enough.",
author: 'Albert Einstein'
},
{
id: 4,
quote:
'Live your best, and act your best, and think your best each day, for there may be no tomorrows.',
author: 'Anon'
},
{
id: 5,
quote: 'Everything in life is a test of character.',
author: 'John Blanchard'
},
{
id: 6,
quote: 'The quality of life is more important than life itself.',
author: 'Alexis Carrel'
},
{
id: 7,
quote: 'Life is too short to be small.',
author: 'Benjamin Disraeli'
},
{
id: 8,
quote: 'Make sure the thing you are living for is worth dying for.',
author: 'Charles Mayes'
},
{
id: 9,
quote: 'The seven ages of man: spills, drills, thrills, bills, ills, pills, wills.',
author: 'Richard J. Needham'
},
{
id: 10,
quote: 'We are here to add what we can to life, not to get what we can from it.',
author: 'William Osler'
},
{
id: 11,
quote: 'The whole of life is a test, a trial of what is in us, so arranged by God himself.',
author: 'William S. Plumer'
},
{
id: 12,
quote:
'The two most important days in your life are the day you are born and the day you find out why.',
author: 'Mark Twain'
},
{
id: 13,
quote:
'We should employ our passions in the service of life, not spend life in the service of our passions.',
author: 'Richard Steele'
},
{
id: 14,
quote:
'Let us live as people who are prepared to die, and die as people who are prepared to live.',
author: 'James S. Stewart'
},
{
id: 15,
quote:
'Let us endeavour so to live that when we come to die even the undertaker will be sorry.',
author: 'Mark Twain'
},
{
id: 16,
quote: 'No one can live well until they can die well.',
author: 'David Watson'
},
{
id: 17,
quote: 'Take care of your life and the Lord will take care of your death.',
author: 'George Whitefield'
},
{
id: 18,
quote: 'Success is walking from failure to failure with no loss of enthusiasm.',
author: 'Winston Churchill'
},
{
id: 19,
quote: 'Great minds discuss ideas; average minds discuss events; small minds discuss people.',
author: 'Eleanor Roosevelt'
},
{
id: 20,
quote: "I have not failed. I've just found 10,000 ways that won't work.",
author: 'Thomas A. Edison'
},
{
id: 21,
quote:
'A successful man is one who can lay a firm foundation with the bricks others have thrown at him.',
author: 'David Brinkley'
},
{
id: 22,
quote: 'No one can make you feel inferior without your consent.',
author: 'Eleanor Roosevelt'
},
{
id: 23,
quote: 'The distance between insanity and genius is measured only by success.',
author: 'Bruce Feirstein'
},
{
id: 24,
quote:
'When you stop chasing the wrong things, you give the right things a chance to catch you.',
author: 'Lolly Daskal'
},
{
id: 25,
quote: "Don't be afraid to give up the good to go for the great.",
author: 'John D. Rockefeller'
}
];

export const gradients = [
{ id: '1', gradient_color1: '#FF9966', gradient_color2: '#FF5E62' },
{ id: '2', gradient_color1: '#EC008C', gradient_color2: '#FC6767' },
{ id: '3', gradient_color1: '#4646FB', gradient_color2: '#BE4DFF' },
{ id: '4', gradient_color1: '#2D47A2', gradient_color2: '#00FFFF' },
{ id: '5', gradient_color1: '#870FFF', gradient_color2: '#F89B29' },
{ id: '6', gradient_color1: '#B1FE64', gradient_color2: '#24C75B' },
{ id: '7', gradient_color1: '#BAFFAD', gradient_color2: '#ADCEFF' },
{ id: '8', gradient_color1: '#FFC7CA', gradient_color2: '#E299FF' }
];

0 comments on commit 135976f

Please sign in to comment.