@fatherly-funnies/joke-card
Version:
React component to display a daily joke
144 lines • 7.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var axios_1 = tslib_1.__importDefault(require("axios"));
var material_1 = require("@mui/material");
var ThumbUp_1 = tslib_1.__importDefault(require("@mui/icons-material/ThumbUp"));
var icons_material_1 = require("@mui/icons-material");
var CustomSnackbar_1 = tslib_1.__importDefault(require("./CustomSnackbar"));
// import TagBadge from "../TagBadge";
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 = (0, react_1.useState)({}), joke = _l[0], setJoke = _l[1];
var _m = (0, react_1.useState)(false), error = _m[0], setError = _m[1];
var _o = (0, react_1.useState)(''), errorMessage = _o[0], setErrorMessage = _o[1];
var _p = (0, react_1.useState)("success"), severity = _p[0], setSeverity = _p[1];
var _q = (0, react_1.useState)(""), message = _q[0], setMessage = _q[1];
var _r = (0, react_1.useState)(false), open = _r[0], setOpen = _r[1];
// TODO ensure there's no style bleed
var theme = (0, material_1.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
*/
(0, react_1.useEffect)(function () {
axios_1.default.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_1.default.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_1.default.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_1.default.createElement(material_1.ThemeProvider, { theme: theme },
react_1.default.createElement(material_1.Paper, { style: {
width: width,
marginLeft: marginLeft,
marginRight: marginRight,
borderRadius: borderRadius
} },
react_1.default.createElement(material_1.Typography, { variant: 'h6', style: { padding: padding } }, error ? errorMessage : joke.joke),
joke.joke &&
react_1.default.createElement(material_1.Grid, { container: true, direction: 'column' },
react_1.default.createElement(material_1.Grid, { item: true },
react_1.default.createElement(material_1.Grid, { container: true, direction: 'row', justifyContent: 'space-between' },
react_1.default.createElement(material_1.Grid, { item: true },
react_1.default.createElement(material_1.Button, { onClick: handleLikeClick, title: 'Like this joke' },
react_1.default.createElement(ThumbUp_1.default, { style: { color: iconColor } }),
react_1.default.createElement(material_1.Typography, { style: { marginLeft: '5px' }, variant: 'body2' }, joke.likes))),
react_1.default.createElement(material_1.Grid, { item: true },
react_1.default.createElement(material_1.Button, { onClick: handleDislikeClick, title: 'Dislike this joke' },
react_1.default.createElement(icons_material_1.ThumbDown, { style: { color: iconColor } }),
react_1.default.createElement(material_1.Typography, { style: { marginLeft: '5px' }, variant: 'body2' }, joke.dislikes))))),
react_1.default.createElement(material_1.Grid, { item: true }, showTags && joke.tags && react_1.default.createElement(material_1.Typography, { variant: 'body1' },
"Tags: ",
joke.tags.toString().replaceAll(",", ", ")))),
react_1.default.createElement(CustomSnackbar_1.default, { severity: severity, message: message, open: open, onClose: closeSnackbar }))));
}
exports.default = JokeCard;
//# sourceMappingURL=JokeCard.js.map