@fatherly-funnies/joke-card
Version:
React component to display a daily joke
140 lines • 6.89 kB
JavaScript
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { createTheme, Button, Paper, ThemeProvider, Typography, Grid } from "@mui/material";
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import { ThumbDown } from "@mui/icons-material";
import CustomSnackbar from "./CustomSnackbar";
// import TagBadge from "../TagBadge";
export default function JokeCard(_a) {
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#cccccc' : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? '10px' : _c, _d = _a.color, color = _d === void 0 ? '#000' : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#000' : _e, _f = _a.marginLeft, marginLeft = _f === void 0 ? 'auto' : _f, _g = _a.marginRight, marginRight = _g === void 0 ? 'auto' : _g, _h = _a.padding, padding = _h === void 0 ? '10px' : _h, _j = _a.showTags, showTags = _j === void 0 ? true : _j, _k = _a.width, width = _k === void 0 ? '50%' : _k;
var _l = useState({}), joke = _l[0], setJoke = _l[1];
var _m = useState(false), error = _m[0], setError = _m[1];
var _o = useState(''), errorMessage = _o[0], setErrorMessage = _o[1];
var _p = useState("success"), severity = _p[0], setSeverity = _p[1];
var _q = useState(""), message = _q[0], setMessage = _q[1];
var _r = useState(false), open = _r[0], setOpen = _r[1];
// TODO ensure there's no style bleed
var theme = createTheme({
components: {
// Name of the component
MuiPaper: {
styleOverrides: {
root: {
backgroundColor: backgroundColor
}
}
},
MuiTypography: {
styleOverrides: {
root: {
color: color
}
}
}
}
});
/**
* Initial use effect to fetch the joke when the component loads
*
* @returns void
*/
useEffect(function () {
axios.get("https://fatherlyfunnies.com/ff-services/api/joke/").then(function (response) {
setJoke(response.data);
}).catch(function (exception) {
setError(true);
setErrorMessage(exception.response.data.message);
setSeverity("error");
setMessage("Error fetching joke: " + exception.response.data.message);
setOpen(true);
});
}, []);
/**
* Function to handle when the like button is clicked (increments the likes on the joke by 1)
*
* @returns void
*/
function handleLikeClick() {
if (joke.date !== undefined && localStorage.getItem(joke.date) !== "true") {
axios.get("https://fatherlyfunnies.com/ff-services/api/joke/likes/addByDate/" + joke.date).then(function (response) {
setJoke(response.data);
localStorage.setItem(response.data.date, "true");
setSeverity("success");
setMessage("Successfully added like! Thanks for voting");
setOpen(true);
}).catch(function (exception) {
setError(true);
setErrorMessage(exception.response.data.message);
setSeverity("error");
setMessage("Error adding like: " + exception.response.data.message);
setOpen(true);
});
}
else {
setSeverity("error");
setMessage("No like added. You already voted on this joke!");
setOpen(true);
}
}
/**
* Function to handle when the dislike button is clicked (increment dislikes on the joke by 1)
*
* @returns void
*/
function handleDislikeClick() {
if (joke.date !== undefined && localStorage.getItem(joke.date) !== "true") {
axios.get("https://fatherlyfunnies.com/ff-services/api/joke/dislikes/addByDate/" + joke.date).then(function (response) {
setJoke(response.data);
localStorage.setItem(response.data.date, "true");
setSeverity("success");
setMessage("Successfully added dislike! Thanks for voting");
setOpen(true);
}).catch(function (exception) {
setError(true);
setErrorMessage(exception.response.data.message);
setSeverity("error");
setMessage("Error adding dislike: " + exception.response.data.message);
setOpen(true);
});
}
else {
setSeverity("error");
setMessage("No dislike added. You already voted on this joke!");
setOpen(true);
}
}
/**
* Function to close the snackbar after message has been displayed
*
* @returns void
*/
function closeSnackbar() {
setOpen(false);
setMessage("");
}
return (React.createElement(ThemeProvider, { theme: theme },
React.createElement(Paper, { style: {
width: width,
marginLeft: marginLeft,
marginRight: marginRight,
borderRadius: borderRadius
} },
React.createElement(Typography, { variant: 'h6', style: { padding: padding } }, error ? errorMessage : joke.joke),
joke.joke &&
React.createElement(Grid, { container: true, direction: 'column' },
React.createElement(Grid, { item: true },
React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'space-between' },
React.createElement(Grid, { item: true },
React.createElement(Button, { onClick: handleLikeClick, title: 'Like this joke' },
React.createElement(ThumbUpIcon, { style: { color: iconColor } }),
React.createElement(Typography, { style: { marginLeft: '5px' }, variant: 'body2' }, joke.likes))),
React.createElement(Grid, { item: true },
React.createElement(Button, { onClick: handleDislikeClick, title: 'Dislike this joke' },
React.createElement(ThumbDown, { style: { color: iconColor } }),
React.createElement(Typography, { style: { marginLeft: '5px' }, variant: 'body2' }, joke.dislikes))))),
React.createElement(Grid, { item: true }, showTags && joke.tags && React.createElement(Typography, { variant: 'body1' },
"Tags: ",
joke.tags.toString().replaceAll(",", ", ")))),
React.createElement(CustomSnackbar, { severity: severity, message: message, open: open, onClose: closeSnackbar }))));
}
//# sourceMappingURL=JokeCard.js.map