diff options
Diffstat (limited to 'src/plugins/reviewDB/components')
| -rw-r--r-- | src/plugins/reviewDB/components/MessageButton.tsx | 43 | ||||
| -rw-r--r-- | src/plugins/reviewDB/components/ReviewBadge.tsx | 45 | ||||
| -rw-r--r-- | src/plugins/reviewDB/components/ReviewComponent.tsx | 125 | ||||
| -rw-r--r-- | src/plugins/reviewDB/components/ReviewsView.tsx | 97 |
4 files changed, 310 insertions, 0 deletions
diff --git a/src/plugins/reviewDB/components/MessageButton.tsx b/src/plugins/reviewDB/components/MessageButton.tsx new file mode 100644 index 0000000..2e4bba7 --- /dev/null +++ b/src/plugins/reviewDB/components/MessageButton.tsx @@ -0,0 +1,43 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +import { classes, LazyComponent } from "@utils/misc"; +import { findByProps } from "@webpack"; + +export default LazyComponent(() => { + const { button, dangerous } = findByProps("button", "wrapper", "disabled","separator"); + + return function MessageButton(props) { + return props.type === "delete" + ? ( + <div className={classes(button, dangerous)} aria-label="Delete Review" onClick={props.callback}> + <svg aria-hidden="false" width="16" height="16" viewBox="0 0 20 20"> + <path fill="currentColor" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z"></path> + <path fill="currentColor" d="M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z"></path> + </svg> + </div> + ) + : ( + <div className={button} aria-label="Report Review" onClick={() => props.callback()}> + <svg aria-hidden="false" width="16" height="16" viewBox="0 0 20 20"> + <path fill="currentColor" d="M20,6.002H14V3.002C14,2.45 13.553,2.002 13,2.002H4C3.447,2.002 3,2.45 3,3.002V22.002H5V14.002H10.586L8.293,16.295C8.007,16.581 7.922,17.011 8.076,17.385C8.23,17.759 8.596,18.002 9,18.002H20C20.553,18.002 21,17.554 21,17.002V7.002C21,6.45 20.553,6.002 20,6.002Z"></path> + </svg> + </div> + ); + }; +}); diff --git a/src/plugins/reviewDB/components/ReviewBadge.tsx b/src/plugins/reviewDB/components/ReviewBadge.tsx new file mode 100644 index 0000000..8c013cd --- /dev/null +++ b/src/plugins/reviewDB/components/ReviewBadge.tsx @@ -0,0 +1,45 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +import { MaskedLinkStore, Tooltip } from "@webpack/common"; + +import { Badge } from "../entities/Badge"; + +export default function ReviewBadge(badge: Badge) { + return ( + <Tooltip + text={badge.name}> + {({ onMouseEnter, onMouseLeave }) => ( + <img + width="24px" + height="24px" + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} + src={badge.icon} + alt={badge.description} + style={{ verticalAlign: "middle", marginLeft: "4px" }} + onClick={() => + MaskedLinkStore.openUntrustedLink({ + href: badge.redirectURL, + }) + } + /> + )} + </Tooltip> + ); +} diff --git a/src/plugins/reviewDB/components/ReviewComponent.tsx b/src/plugins/reviewDB/components/ReviewComponent.tsx new file mode 100644 index 0000000..7eadeff --- /dev/null +++ b/src/plugins/reviewDB/components/ReviewComponent.tsx @@ -0,0 +1,125 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +import { classes, LazyComponent } from "@utils/misc"; +import { filters, findBulk } from "@webpack"; +import { Alerts, UserStore } from "@webpack/common"; + +import { Review } from "../entities/Review"; +import { deleteReview, reportReview } from "../Utils/ReviewDBAPI"; +import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils"; +import MessageButton from "./MessageButton"; +import ReviewBadge from "./ReviewBadge"; + +export default LazyComponent(() => { + // this is terrible, blame mantika + const p = filters.byProps; + const [ + { cozyMessage, buttons, message, groupStart }, + { container, isHeader }, + { avatar, clickable, username, messageContent, wrapper, cozy }, + { contents }, + buttonClasses, + { defaultColor } + ] = findBulk( + p("cozyMessage"), + p("container", "isHeader"), + p("avatar", "zalgo"), + p("contents"), + p("button", "wrapper", "selected"), + p("defaultColor") + ); + + return function ReviewComponent({ review, refetch }: { review: Review; refetch(): void; }) { + function openModal() { + openUserProfileModal(review.sender.discordID); + } + + function delReview() { + Alerts.show({ + title: "Are you sure?", + body: "Do you really want to delete this review?", + confirmText: "Delete", + cancelText: "Nevermind", + onConfirm: () => { + deleteReview(review.id).then(res => { + if (res.success) { + refetch(); + } + showToast(res.message); + }); + } + }); + } + + function reportRev() { + Alerts.show({ + title: "Are you sure?", + body: "Do you really you want to report this review?", + confirmText: "Report", + cancelText: "Nevermind", + // confirmColor: "red", this just adds a class name and breaks the submit button guh + onConfirm: () => reportReview(review.id) + }); + } + + return ( + <div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={ + { + marginLeft: "0px", + paddingLeft: "52px", + paddingRight: "16px" + } + }> + + <div className={contents} style={{ paddingLeft: "0px" }}> + <img + className={classes(avatar, clickable)} + onClick={openModal} + src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"} + style={{ left: "0px" }} + /> + <span + className={classes(clickable, username)} + style={{ color: "var(--channels-default)", fontSize: "14px" }} + onClick={() => openModal()} + > + {review.sender.username} + </span> + {review.sender.badges.map(badge => <ReviewBadge {...badge} />)} + <p + className={classes(messageContent, defaultColor)} + style={{ fontSize: 15, marginTop: 4 }} + > + {review.comment} + </p> + <div className={classes(container, isHeader, buttons)} style={{ + padding: "0px", + }}> + <div className={buttonClasses.wrapper} > + <MessageButton type="report" callback={reportRev} /> + {canDeleteReview(review, UserStore.getCurrentUser().id) && ( + <MessageButton type="delete" callback={delReview} /> + )} + </div> + </div> + </div> + </div> + ); + }; +}); diff --git a/src/plugins/reviewDB/components/ReviewsView.tsx b/src/plugins/reviewDB/components/ReviewsView.tsx new file mode 100644 index 0000000..541500c --- /dev/null +++ b/src/plugins/reviewDB/components/ReviewsView.tsx @@ -0,0 +1,97 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. +*/ + +import { classes, useAwaiter } from "@utils/misc"; +import { findLazy } from "@webpack"; +import { Forms, React, Text, UserStore } from "@webpack/common"; +import type { KeyboardEvent } from "react"; + +import { addReview, getReviews } from "../Utils/ReviewDBAPI"; +import { showToast } from "../Utils/Utils"; +import ReviewComponent from "./ReviewComponent"; + +const Classes = findLazy(m => typeof m.textarea === "string"); + +export default function ReviewsView({ userId }: { userId: string; }) { + const [refetchCount, setRefetchCount] = React.useState(0); + const [reviews, _, isLoading] = useAwaiter(() => getReviews(userId), { + fallbackValue: [], + deps: [refetchCount], + }); + const username = UserStore.getUser(userId)?.username ?? ""; + + const dirtyRefetch = () => setRefetchCount(refetchCount + 1); + + if (isLoading) return null; + + function onKeyPress({ key, target }: KeyboardEvent<HTMLTextAreaElement>) { + if (key === "Enter") { + addReview({ + userid: userId, + comment: (target as HTMLInputElement).value, + star: -1 + }).then(res => { + if (res?.success) { + (target as HTMLInputElement).value = ""; // clear the input + dirtyRefetch(); + } else if (res?.message) { + showToast(res.message); + } + }); + } + } + + return ( + <div className="ReviewDB"> + <Text + tag="h2" + variant="eyebrow" + style={{ + marginBottom: "12px", + color: "var(--header-primary)" + }} + > + User Reviews + </Text> + {reviews?.map(review => + <ReviewComponent + key={review.id} + review={review} + refetch={dirtyRefetch} + /> + )} + {reviews?.length === 0 && ( + <Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}> + Looks like nobody reviewed this user yet. You could be the first! + </Forms.FormText> + )} + <textarea + className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")} + // this produces something like '-_59yqs ...' but since no class exists with that name its fine + placeholder={reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id) ? `Update review for @${username}` : `Review @${username}`} + onKeyDown={onKeyPress} + style={{ + marginTop: "6px", + resize: "none", + marginBottom: "12px", + overflow: "hidden", + }} + /> + </div> + ); +} |