SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ReviewDB: make profile review button like game collection button

Browse source
This commit is contained in:
Vendicated 2026-03-15 02:00:53 +01:00
parent be8d7a4de1
commit b67bb009fc
No known key found for this signature in database
GPG key ID: D66986BAF75ECF18
4 changed files with 71 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/plugins/reviewDB/components/ReviewModal.tsx
View file

@ -19,7 +19,7 @@
import ErrorBoundary from "@components/ErrorBoundary";
import { Auth } from "@plugins/reviewDB/auth";
import { ReviewType } from "@plugins/reviewDB/entities";
import { Response, REVIEWS_PER_PAGE } from "@plugins/reviewDB/reviewDbApi";
import { REVIEWS_PER_PAGE, UserReviewsData } from "@plugins/reviewDB/reviewDbApi";
import { cl } from "@plugins/reviewDB/utils";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { useForceUpdater } from "@utils/react";
@ -29,7 +29,7 @@ import ReviewComponent from "./ReviewComponent";
import ReviewsView, { ReviewsInputComponent } from "./ReviewsView";
function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: any; modalKey: string, discordId: string; name: string; type: ReviewType; }) {
const [data, setData] = useState<Response>();
const [data, setData] = useState<UserReviewsData>();
const [signal, refetch] = useForceUpdater(true);
const [page, setPage] = useState(1);

4
src/plugins/reviewDB/components/ReviewsView.tsx
View file

@ -18,7 +18,7 @@
import { Auth, authorize } from "@plugins/reviewDB/auth";
import { Review, ReviewType } from "@plugins/reviewDB/entities";
import { addReview, getReviews, Response, REVIEWS_PER_PAGE } from "@plugins/reviewDB/reviewDbApi";
import { addReview, getReviews, REVIEWS_PER_PAGE, UserReviewsData } from "@plugins/reviewDB/reviewDbApi";
import { settings } from "@plugins/reviewDB/settings";
import { cl, showToast } from "@plugins/reviewDB/utils";
import { useAwaiter, useForceUpdater } from "@utils/react";
@ -39,7 +39,7 @@ interface UserProps {
}
interface Props extends UserProps {
onFetchReviews(data: Response): void;
onFetchReviews(data: UserReviewsData): void;
refetchSignal?: unknown;
showInput?: boolean;
page?: number;

77
src/plugins/reviewDB/index.tsx
View file

@ -20,9 +20,12 @@ import "./style.css";
import { NavContextMenuPatchCallback } from "@api/ContextMenu";
import ErrorBoundary from "@components/ErrorBoundary";
import { NotesIcon, OpenExternalIcon } from "@components/Icons";
import { TooltipContainer } from "@components/TooltipContainer";
import { OpenExternalIcon } from "@components/Icons";
import { Paragraph } from "@components/Paragraph";
import { Span } from "@components/Span";
import { Devs } from "@utils/constants";
import { classes } from "@utils/misc";
import { useAwaiter } from "@utils/react";
import definePlugin from "@utils/types";
import { Guild, User } from "@vencord/discord-types";
import { findCssClassesLazy } from "@webpack";
@ -31,11 +34,14 @@ import { Alerts, Clickable, Menu, Parser } from "@webpack/common";
import { Auth, initAuth, updateAuth } from "./auth";
import { openReviewsModal } from "./components/ReviewModal";
import { NotificationType, ReviewType } from "./entities";
import { getCurrentUserInfo, readNotification } from "./reviewDbApi";
import { getCurrentUserInfo, getReviews, readNotification } from "./reviewDbApi";
import { settings } from "./settings";
import { showToast } from "./utils";
const BannerButtonClasses = findCssClassesLazy("bannerButton");
const DMSideBarClasses = findCssClassesLazy("widgetPreviews");
const ProfileCardClasses = findCssClassesLazy("cardsList", "firstCardContainer", "card", "container");
const ProfileCardContainerClasses = findCssClassesLazy("innerContainer", "icons", "icon", "displayCount", "displayCountText", "displayCountTextColor", "breadcrumb");
const ProfileCardOverlayClasses = findCssClassesLazy("overlay", "isPrivate", "outer");
const guildPopoutPatch: NavContextMenuPatchCallback = (children, { guild }: { guild: Guild, onClose(): void; }) => {
if (!guild) return;
@ -77,17 +83,19 @@ export default definePlugin({
patches: [
{
find: ".POPOUT,user:",
// DM profile sidebar
find: ".SIDEBAR,disableToolbar:",
replacement: {
match: /children:\[(?=[^[]+?shouldShowTooltip:)/,
replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
match: /user:(\i),widgets:.{0,100}?\}\),/,
replace: "$&$self.renderProfileComponent({user:$1,isSideBar:true}),"
}
},
{
find: ".SIDEBAR,disableToolbar:",
// User popout
find: /\.POPOUT,onClose:\i}\),nicknameIcons:.+?\.isProvisional/,
replacement: {
match: /children:\[(?=[^[]+?\.SIDEBAR}\),\i\.bot)/,
replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
match: /user:(\i),widgets:.{0,100}?\}\),/,
replace: "$&$self.renderProfileComponent({user:$1}),"
}
}
],
@ -146,16 +154,45 @@ export default definePlugin({
}, 4000);
},
BiteSizeReviewsButton: ErrorBoundary.wrap(({ user }: { user: User; }) => {
return (
<TooltipContainer text="View Reviews">
<Clickable
onClick={() => openReviewsModal(user.id, user.username, ReviewType.User)}
className={BannerButtonClasses.bannerButton}
>
<NotesIcon height={16} width={16} />
</Clickable>
</TooltipContainer>
renderProfileComponent: ErrorBoundary.wrap(({ user, isSideBar = false }: { user: User; isSideBar?: boolean; }) => {
const [reviewData] = useAwaiter(() => getReviews(user.id), { deps: [user.id], fallbackValue: null });
// Discord are masters at using a crap ton of html elements and css classes to create a simple ui that could have
// been made with less than half of the number of elements, so we have to do this insanity to replicate their ui
const reviewsSection = (
<section className={ProfileCardClasses.container}>
<ul className={ProfileCardClasses.cardsList} tabIndex={-1}>
<li className={ProfileCardClasses.firstCardContainer}>
<Clickable className={ProfileCardContainerClasses.breadcrumb} onClick={() => openReviewsModal(user.id, user.username, ReviewType.User)}>
<div className={classes(ProfileCardOverlayClasses.overlay, ProfileCardContainerClasses.innerContainer, ProfileCardClasses.card)}>
<Paragraph size={isSideBar ? "sm" : "xs"} weight="medium">User Reviews</Paragraph>
{!!reviewData?.reviewCount && (
<div className={ProfileCardContainerClasses.icons}>
{reviewData.reviews.slice(0, 4).map((review, idx) => {
const showCount = idx === 3 && reviewData.reviewCount > 4;
return (
<div className={ProfileCardContainerClasses.icon} key={review.id}>
<img src={review.sender.profilePhoto} alt={review.sender.username} className={showCount ? ProfileCardContainerClasses.displayCount : undefined} />
{showCount && (
<div className={ProfileCardContainerClasses.displayCountText}>
<Span className={ProfileCardContainerClasses.displayCountTextColor} size="xs" weight="medium">+{reviewData.reviewCount - 3}</Span>
</div>
)}
</div>
);
})}
</div>
)}
</div>
</Clickable>
</li>
</ul>
</section>
);
return isSideBar
? <div className={DMSideBarClasses.widgetPreviews}>{reviewsSection}</div>
: reviewsSection;
}, { noop: true })
});

19
src/plugins/reviewDB/reviewDbApi.ts
View file

@ -27,7 +27,7 @@ const API_URL = "https://manti.vendicated.dev/api/reviewdb";
export const REVIEWS_PER_PAGE = 50;
export interface Response {
export interface UserReviewsData {
message: string;
reviews: Review[];
updated: boolean;
@ -47,18 +47,19 @@ async function rdbRequest(path: string, options: RequestInit = {}) {
});
}
export async function getReviews(id: string, offset = 0): Promise<Response> {
export async function getReviews(id: string, offset = 0): Promise<UserReviewsData> {
let flags = 0;
if (!settings.store.showWarning) flags |= WarningFlag;
const params = new URLSearchParams({
flags: String(flags),
offset: String(offset)
offset: String(offset),
limit: "4"
});
const req = await fetch(`${API_URL}/users/${id}/reviews?${params}`);
const res = (req.ok)
? await req.json() as Response
? await req.json() as UserReviewsData
: {
message: req.status === 429 ? "You are sending requests too fast. Wait a few seconds and try again." : "An Error occured while fetching reviews. Please try again later.",
reviews: [],
@ -93,7 +94,7 @@ export async function getReviews(id: string, offset = 0): Promise<Response> {
return res;
}
export async function addReview(review: any): Promise<Response | null> {
export async function addReview(review: any): Promise<UserReviewsData | null> {
const token = await getToken();
if (!token) {
@ -109,13 +110,13 @@ export async function addReview(review: any): Promise<Response | null> {
"Content-Type": "application/json",
}
}).then(async r => {
const data = await r.json() as Response;
const data = await r.json() as UserReviewsData;
showToast(data.message);
return r.ok ? data : null;
});
}
export async function deleteReview(id: number): Promise<Response | null> {
export async function deleteReview(id: number): Promise<UserReviewsData | null> {
return await rdbRequest(`/users/${id}/reviews`, {
method: "DELETE",
headers: {
@ -126,7 +127,7 @@ export async function deleteReview(id: number): Promise<Response | null> {
reviewid: id
})
}).then(async r => {
const data = await r.json() as Response;
const data = await r.json() as UserReviewsData;
showToast(data.message);
return r.ok ? data : null;
});
@ -142,7 +143,7 @@ export async function reportReview(id: number) {
body: JSON.stringify({
reviewid: id,
})
}).then(r => r.json()) as Response;
}).then(r => r.json()) as UserReviewsData;
showToast(res.message);
}