ReviewDB: Add Review Modal & Pagination (#1174)

Co-authored-by: V <vendicated@riseup.net>
This commit is contained in:
Manti 2023-05-28 23:03:06 +03:00 committed by GitHub
parent 6300198a54
commit 3e3d05fc26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 803 additions and 394 deletions

View File

@ -266,7 +266,12 @@ export function definePluginSettings<D extends SettingsDefinition, C extends Set
def,
checks: checks ?? {},
pluginName: "",
withPrivateSettings<T>() {
return this as DefinedSettings<D, C> & { store: T; };
}
};
return definedSettings;
}

View File

@ -0,0 +1,12 @@
.vc-expandableheader-center-flex {
display: flex;
justify-items: center;
align-items: center;
}
.vc-expandableheader-btn {
all: unset;
cursor: pointer;
width: 24px;
height: 24px;
}

View File

@ -0,0 +1,108 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 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 { classNameFactory } from "@api/Styles";
import { Text, Tooltip, useState } from "@webpack/common";
export const cl = classNameFactory("vc-expandableheader-");
import "./ExpandableHeader.css";
export interface ExpandableHeaderProps {
onMoreClick?: () => void;
moreTooltipText?: string;
onDropDownClick?: (state: boolean) => void;
defaultState?: boolean;
headerText: string;
children: React.ReactNode;
buttons?: React.ReactNode[];
}
export default function ExpandableHeader({ children, onMoreClick, buttons, moreTooltipText, defaultState = false, onDropDownClick, headerText }: ExpandableHeaderProps) {
const [showContent, setShowContent] = useState(defaultState);
return (
<>
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "8px"
}}>
<Text
tag="h2"
variant="eyebrow"
style={{
color: "var(--header-primary)",
display: "inline"
}}
>
{headerText}
</Text>
<div className={cl("center-flex")}>
{
buttons ?? null
}
{
onMoreClick && // only show more button if callback is provided
<Tooltip text={moreTooltipText}>
{tooltipProps => (
<button
{...tooltipProps}
className={cl("btn")}
onClick={onMoreClick}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
</svg>
</button>
)}
</Tooltip>
}
<Tooltip text={showContent ? "Hide " + headerText : "Show " + headerText}>
{tooltipProps => (
<button
{...tooltipProps}
className={cl("btn")}
onClick={() => {
setShowContent(v => !v);
onDropDownClick?.(showContent);
}}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
transform={showContent ? "scale(1 -1)" : "scale(1 1)"}
>
<path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
</svg>
</button>
)}
</Tooltip>
</div>
</div>
{showContent && children}
</>
);
}

View File

@ -17,10 +17,11 @@
*/
import ErrorBoundary from "@components/ErrorBoundary";
import ExpandableHeader from "@components/ExpandableHeader";
import { proxyLazy } from "@utils/lazy";
import { classes } from "@utils/misc";
import { filters, findBulk } from "@webpack";
import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore, useState } from "@webpack/common";
import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore } from "@webpack/common";
import type { Guild, GuildMember } from "discord-types/general";
import { PermissionsSortOrder, settings } from "..";
@ -47,7 +48,6 @@ const Classes = proxyLazy(() => {
function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) {
const stns = settings.use(["permissionsSortOrder"]);
const [viewPermissions, setViewPermissions] = useState(settings.store.defaultPermissionsDropdownState);
const [rolePermissions, userPermissions] = useMemo(() => {
const userPermissions: UserPermissions = [];
@ -97,78 +97,40 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM
const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
return (
<div>
<div className={cl("userperms-title-container")}>
<Text className={cl("userperms-title")} variant="eyebrow">Permissions</Text>
<div className={cl("userperms-btns-container")}>
<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
{tooltipProps => (
<button
{...tooltipProps}
className={cl("userperms-sortorder-btn")}
onClick={() => {
stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
}}
<ExpandableHeader
headerText="Permissions"
moreTooltipText="Role Details"
onMoreClick={() =>
openRolesAndUsersPermissionsModal(
rolePermissions,
guild,
guildMember.nick || UserStore.getUser(guildMember.userId).username
)
}
defaultState={settings.store.defaultPermissionsDropdownState}
buttons={[
(<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
{tooltipProps => (
<button
{...tooltipProps}
className={cl("userperms-sortorder-btn")}
onClick={() => {
stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
}}
>
<svg
width="20"
height="20"
viewBox="0 96 960 960"
transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
>
<svg
width="20"
height="20"
viewBox="0 96 960 960"
transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
>
<path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
</svg>
</button>
)}
</Tooltip>
<Tooltip text="Role Details">
{tooltipProps => (
<button
{...tooltipProps}
className={cl("userperms-permdetails-btn")}
onClick={() =>
openRolesAndUsersPermissionsModal(
rolePermissions,
guild,
guildMember.nick || UserStore.getUser(guildMember.userId).username
)
}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
</svg>
</button>
)}
</Tooltip>
<Tooltip text={viewPermissions ? "Hide Permissions" : "View Permissions"}>
{tooltipProps => (
<button
{...tooltipProps}
className={cl("userperms-toggleperms-btn")}
onClick={() => setViewPermissions(v => !v)}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
transform={viewPermissions ? "scale(1 -1)" : "scale(1 1)"}
>
<path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
</svg>
</button>
)}
</Tooltip>
</div>
</div>
{viewPermissions && userPermissions.length > 0 && (
<path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
</svg>
</button>
)}
</Tooltip>)
]}>
{userPermissions.length > 0 && (
<div className={classes(root, roles)}>
{userPermissions.map(({ permission, roleColor }) => (
<div className={classes(role, rolePill, rolePillBorder)}>
@ -190,7 +152,7 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM
))}
</div>
)}
</div>
</ExpandableHeader>
);
}

View File

@ -17,28 +17,44 @@
*/
import { classes } from "@utils/misc";
import { LazyComponent } from "@utils/react";
import { findByProps } from "@webpack";
import { findByPropsLazy } from "@webpack";
import { Tooltip } from "@webpack/common";
export default LazyComponent(() => {
const { button, dangerous } = findByProps("button", "wrapper", "disabled", "separator");
const iconClasses = findByPropsLazy("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>
export function DeleteButton({ onClick }: { onClick(): void; }) {
return (
<Tooltip text="Delete Review">
{props => (
<div
{...props}
className={classes(iconClasses.button, iconClasses.dangerous)}
onClick={onClick}
>
<svg width="16" height="16" viewBox="0 0 20 20">
<path fill="currentColor" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z" />
<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" />
</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>
)}
</Tooltip>
);
}
export function ReportButton({ onClick }: { onClick(): void; }) {
return (
<Tooltip text="Report Review">
{props => (
<div
{...props}
className={iconClasses.button}
onClick={onClick}
>
<svg 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" />
</svg>
</div>
);
};
});
)}
</Tooltip>
);
}

View File

@ -18,7 +18,8 @@
import { MaskedLinkStore, Tooltip } from "@webpack/common";
import { Badge } from "../entities/Badge";
import { Badge } from "../entities";
import { cl } from "../utils";
export default function ReviewBadge(badge: Badge) {
return (
@ -26,13 +27,13 @@ export default function ReviewBadge(badge: Badge) {
text={badge.name}>
{({ onMouseEnter, onMouseLeave }) => (
<img
className={cl("badge")}
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,

View File

@ -16,16 +16,16 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Settings } from "@api/Settings";
import { classes } from "@utils/misc";
import { LazyComponent } from "@utils/react";
import { filters, findBulk } from "@webpack";
import { Alerts, moment, Timestamp, 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 { Review, ReviewType } from "../entities";
import { deleteReview, reportReview } from "../reviewDbApi";
import { settings } from "../settings";
import { canDeleteReview, cl, openUserProfileModal, showToast } from "../utils";
import { DeleteButton, ReportButton } from "./MessageButton";
import ReviewBadge from "./ReviewBadge";
export default LazyComponent(() => {
@ -36,11 +36,13 @@ export default LazyComponent(() => {
{ container, isHeader },
{ avatar, clickable, username, messageContent, wrapper, cozy },
buttonClasses,
botTag
] = findBulk(
p("cozyMessage"),
p("container", "isHeader"),
p("avatar", "zalgo"),
p("button", "wrapper", "selected"),
p("botTag")
);
const dateFormat = new Intl.DateTimeFormat();
@ -79,21 +81,21 @@ export default LazyComponent(() => {
}
return (
<div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={
<div className={classes(cozyMessage, wrapper, message, groupStart, cozy, cl("review"))} style={
{
marginLeft: "0px",
paddingLeft: "52px",
paddingLeft: "52px", // wth is this
paddingRight: "16px"
}
}>
<div>
<img
className={classes(avatar, clickable)}
onClick={openModal}
src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
style={{ left: "0px" }}
/>
<img
className={classes(avatar, clickable)}
onClick={openModal}
src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
style={{ left: "0px" }}
/>
<div style={{ display: "inline-flex", justifyContent: "center", alignItems: "center" }}>
<span
className={classes(clickable, username)}
style={{ color: "var(--channels-default)", fontSize: "14px" }}
@ -101,32 +103,45 @@ export default LazyComponent(() => {
>
{review.sender.username}
</span>
{review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
{
!Settings.plugins.ReviewDB.hideTimestamps && (
<Timestamp timestamp={moment(review.timestamp * 1000)} >
{dateFormat.format(review.timestamp * 1000)}
</Timestamp>)
}
{review.type === ReviewType.System && (
<span
className={classes(botTag.botTagVerified, botTag.botTagRegular, botTag.botTag, botTag.px, botTag.rem)}
style={{ marginLeft: "4px" }}>
<span className={botTag.botText}>
System
</span>
</span>
)}
</div>
{review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
<p
className={classes(messageContent)}
style={{ fontSize: 15, marginTop: 4, color: "var(--text-normal)" }}
>
{review.comment}
</p>
{
!settings.store.hideTimestamps && review.type !== ReviewType.System && (
<Timestamp timestamp={moment(review.timestamp * 1000)} >
{dateFormat.format(review.timestamp * 1000)}
</Timestamp>)
}
<p
className={classes(messageContent)}
style={{ fontSize: 15, marginTop: 4, color: "var(--text-normal)" }}
>
{review.comment}
</p>
{review.id !== 0 && (
<div className={classes(container, isHeader, buttons)} style={{
padding: "0px",
}}>
<div className={buttonClasses.wrapper} >
<MessageButton type="report" callback={reportRev} />
<ReportButton onClick={reportRev} />
{canDeleteReview(review, UserStore.getCurrentUser().id) && (
<MessageButton type="delete" callback={delReview} />
<DeleteButton onClick={delReview} />
)}
</div>
</div>
</div>
)}
</div>
);
};

View File

@ -0,0 +1,104 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 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 ErrorBoundary from "@components/ErrorBoundary";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { useForceUpdater } from "@utils/react";
import { Paginator, Text, useRef, useState } from "@webpack/common";
import { Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
import { settings } from "../settings";
import { cl } from "../utils";
import ReviewComponent from "./ReviewComponent";
import ReviewsView, { ReviewsInputComponent } from "./ReviewsView";
function Modal({ modalProps, discordId, name }: { modalProps: any; discordId: string; name: string; }) {
const [data, setData] = useState<Response>();
const [signal, refetch] = useForceUpdater(true);
const [page, setPage] = useState(1);
const ref = useRef<HTMLDivElement>(null);
const reviewCount = data?.reviewCount;
const ownReview = data?.reviews.find(r => r.sender.discordID === settings.store.user?.discordID);
return (
<ErrorBoundary>
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
<ModalHeader>
<Text variant="heading-lg/semibold" className={cl("modal-header")}>
{name}'s Reviews
{!!reviewCount && <span> ({reviewCount} Reviews)</span>}
</Text>
<ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader>
<ModalContent scrollerRef={ref}>
<div className={cl("modal-reviews")}>
<ReviewsView
discordId={discordId}
name={name}
page={page}
refetchSignal={signal}
onFetchReviews={setData}
scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
hideOwnReview
/>
</div>
</ModalContent>
<ModalFooter className={cl("modal-footer")}>
<div>
{ownReview && (
<ReviewComponent
refetch={refetch}
review={ownReview}
/>
)}
<ReviewsInputComponent
isAuthor={ownReview != null}
discordId={discordId}
name={name}
refetch={refetch}
/>
{!!reviewCount && (
<Paginator
currentPage={page}
maxVisiblePages={5}
pageSize={REVIEWS_PER_PAGE}
totalCount={reviewCount}
onPageChange={setPage}
/>
)}
</div>
</ModalFooter>
</ModalRoot>
</ErrorBoundary>
);
}
export function openReviewsModal(discordId: string, name: string) {
openModal(props => (
<Modal
modalProps={props}
discordId={discordId}
name={name}
/>
));
}

View File

@ -16,42 +16,113 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Settings } from "@api/Settings";
import { classes } from "@utils/misc";
import { useAwaiter } from "@utils/react";
import { useAwaiter, useForceUpdater } from "@utils/react";
import { findByPropsLazy } from "@webpack";
import { Forms, React, Text, UserStore } from "@webpack/common";
import { Forms, React, UserStore } from "@webpack/common";
import type { KeyboardEvent } from "react";
import { addReview, getReviews } from "../Utils/ReviewDBAPI";
import { authorize, showToast } from "../Utils/Utils";
import { Review } from "../entities";
import { addReview, getReviews, Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
import { settings } from "../settings";
import { authorize, cl, showToast } from "../utils";
import ReviewComponent from "./ReviewComponent";
const Classes = findByPropsLazy("inputDefault", "editable");
export default function ReviewsView({ userId }: { userId: string; }) {
const { token } = Settings.plugins.ReviewDB;
const [refetchCount, setRefetchCount] = React.useState(0);
const [reviews, _, isLoading] = useAwaiter(() => getReviews(userId), {
fallbackValue: [],
deps: [refetchCount],
interface UserProps {
discordId: string;
name: string;
}
interface Props extends UserProps {
onFetchReviews(data: Response): void;
refetchSignal?: unknown;
showInput?: boolean;
page?: number;
scrollToTop?(): void;
hideOwnReview?: boolean;
}
export default function ReviewsView({
discordId,
name,
onFetchReviews,
refetchSignal,
scrollToTop,
page = 1,
showInput = false,
hideOwnReview = false,
}: Props) {
const [signal, refetch] = useForceUpdater(true);
const [reviewData] = useAwaiter(() => getReviews(discordId, (page - 1) * REVIEWS_PER_PAGE), {
fallbackValue: null,
deps: [refetchSignal, signal, page],
onSuccess: data => {
scrollToTop?.();
onFetchReviews(data!);
}
});
const username = UserStore.getUser(userId)?.username ?? "";
const dirtyRefetch = () => setRefetchCount(refetchCount + 1);
if (!reviewData) return null;
if (isLoading) return null;
return (
<>
<ReviewList
refetch={refetch}
reviews={reviewData!.reviews}
hideOwnReview={hideOwnReview}
/>
{showInput && (
<ReviewsInputComponent
name={name}
discordId={discordId}
refetch={refetch}
isAuthor={reviewData!.reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id)}
/>
)}
</>
);
}
function ReviewList({ refetch, reviews, hideOwnReview }: { refetch(): void; reviews: Review[]; hideOwnReview: boolean; }) {
const myId = UserStore.getCurrentUser().id;
return (
<div className={cl("view")}>
{reviews?.map(review =>
(review.sender.discordID !== myId || !hideOwnReview) &&
<ReviewComponent
key={review.id}
review={review}
refetch={refetch}
/>
)}
{reviews?.length === 0 && (
<Forms.FormText className={cl("placeholder")}>
Looks like nobody reviewed this user yet. You could be the first!
</Forms.FormText>
)}
</div>
);
}
export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: { discordId: string, name: string; isAuthor: boolean; refetch(): void; }) {
const { token } = settings.store;
function onKeyPress({ key, target }: KeyboardEvent<HTMLTextAreaElement>) {
if (key === "Enter") {
addReview({
userid: userId,
userid: discordId,
comment: (target as HTMLInputElement).value,
star: -1
}).then(res => {
if (res?.success) {
(target as HTMLInputElement).value = ""; // clear the input
dirtyRefetch();
refetch();
} else if (res?.message) {
showToast(res.message);
}
@ -60,61 +131,27 @@ export default function ReviewsView({ userId }: { userId: string; }) {
}
return (
<div className="vc-reviewdb-view">
<Text
tag="h2"
variant="eyebrow"
style={{
marginBottom: "8px",
color: "var(--header-primary)"
}}
>
User Reviews
</Text>
{reviews?.map(review =>
<ReviewComponent
key={review.id}
review={review}
refetch={dirtyRefetch}
/>
)}
{reviews?.length === 0 && (
<Forms.FormText style={{ paddingRight: "12px", paddingTop: "0px", paddingLeft: "0px", paddingBottom: "4px", fontWeight: "bold", fontStyle: "italic" }}>
Looks like nobody reviewed this user yet. You could be the first!
</Forms.FormText>
)}
<textarea
className={classes(Classes.inputDefault, "enter-comment")}
onKeyDownCapture={e => {
if (e.key === "Enter") {
e.preventDefault(); // prevent newlines
}
}}
placeholder={
token
? (reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id)
? `Update review for @${username}`
: `Review @${username}`)
: "You need to authorize to review users!"
<textarea
className={classes(Classes.inputDefault, "enter-comment", cl("input"))}
onKeyDownCapture={e => {
if (e.key === "Enter") {
e.preventDefault(); // prevent newlines
}
onKeyDown={onKeyPress}
onClick={() => {
if (!token) {
showToast("Opening authorization window...");
authorize();
}
}}
style={{
marginTop: "6px",
resize: "none",
marginBottom: "12px",
overflow: "hidden",
background: "transparent",
border: "1px solid var(--profile-message-input-border-color)",
fontSize: "14px",
}}
/>
</div>
}}
placeholder={
!token
? "You need to authorize to review users!"
: isAuthor
? `Update review for @${name}`
: `Review @${name}`
}
onKeyDown={onKeyPress}
onClick={() => {
if (!token) {
showToast("Opening authorization window...");
authorize();
}
}}
/>
);
}

View File

@ -22,23 +22,55 @@ export const enum UserType {
Admin = 1
}
export const enum ReviewType {
User = 0,
Server = 1,
Support = 2,
System = 3
}
export interface Badge {
name: string;
description: string;
icon: string;
redirectURL: string;
type: number;
}
export interface BanInfo {
id: string;
discordID: string;
reviewID: number;
reviewContent: string;
banEndDate: string;
banEndDate: number;
}
export interface ReviewDBUser {
ID: number
discordID: string
username: string
profilePhoto: string
clientMod: string
warningCount: number
badges: any[]
banInfo: BanInfo | null
lastReviewID: number
type: UserType
ID: number;
discordID: string;
username: string;
profilePhoto: string;
clientMod: string;
warningCount: number;
badges: any[];
banInfo: BanInfo | null;
lastReviewID: number;
type: UserType;
}
export interface ReviewAuthor {
id: number,
discordID: string,
username: string,
profilePhoto: string,
badges: Badge[];
}
export interface Review {
comment: string,
id: number,
star: number,
sender: ReviewAuthor,
timestamp: number;
type?: ReviewType;
}

View File

@ -1,26 +0,0 @@
/*
* 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/>.
*/
export interface Badge {
name: string;
description: string;
icon: string;
redirectURL : string;
type: number;
}

View File

@ -1,35 +0,0 @@
/*
* 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 { Badge } from "./Badge";
export interface Sender {
id : number,
discordID: string,
username: string,
profilePhoto: string,
badges: Badge[]
}
export interface Review {
comment: string,
id: number,
star: number,
sender: Sender,
timestamp: number
}

View File

@ -18,23 +18,40 @@
import "./style.css";
import { Settings } from "@api/Settings";
import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
import ErrorBoundary from "@components/ErrorBoundary";
import ExpandableHeader from "@components/ExpandableHeader";
import { OpenExternalIcon } from "@components/Icons";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { Alerts, Button } from "@webpack/common";
import { User } from "discord-types/general";
import definePlugin from "@utils/types";
import { Alerts, Menu, useState } from "@webpack/common";
import { Guild, User } from "discord-types/general";
import { openReviewsModal } from "./components/ReviewModal";
import ReviewsView from "./components/ReviewsView";
import { UserType } from "./entities/User";
import { getCurrentUserInfo } from "./Utils/ReviewDBAPI";
import { authorize, showToast } from "./Utils/Utils";
import { UserType } from "./entities";
import { getCurrentUserInfo } from "./reviewDbApi";
import { settings } from "./settings";
import { showToast } from "./utils";
const guildPopoutPatch: NavContextMenuPatchCallback = (children, props: { guild: Guild, onClose(): void; }) => () => {
children.push(
<Menu.MenuItem
label="View Reviews"
id="vc-rdb-server-reviews"
icon={OpenExternalIcon}
action={() => openReviewsModal(props.guild.id, props.guild.name)}
/>
);
};
export default definePlugin({
name: "ReviewDB",
description: "Review other users (Adds a new settings to profiles)",
authors: [Devs.mantikafasi, Devs.Ven],
settings,
patches: [
{
find: "disableBorderColor:!0",
@ -45,100 +62,86 @@ export default definePlugin({
}
],
options: {
authorize: {
type: OptionType.COMPONENT,
description: "Authorize with ReviewDB",
component: () => (
<Button onClick={authorize}>
Authorize with ReviewDB
</Button>
)
},
notifyReviews: {
type: OptionType.BOOLEAN,
description: "Notify about new reviews on startup",
default: true,
},
showWarning: {
type: OptionType.BOOLEAN,
description: "Display warning to be respectful at the top of the reviews list",
default: true,
},
hideTimestamps: {
type: OptionType.BOOLEAN,
description: "Hide timestamps on reviews",
default: false,
},
website: {
type: OptionType.COMPONENT,
description: "ReviewDB website",
component: () => (
<Button onClick={() => {
window.open("https://reviewdb.mantikafasi.dev");
}}>
ReviewDB website
</Button>
)
},
supportServer: {
type: OptionType.COMPONENT,
description: "ReviewDB Support Server",
component: () => (
<Button onClick={() => {
window.open("https://discord.gg/eWPBSbvznt");
}}>
ReviewDB Support Server
</Button>
)
},
},
async start() {
const settings = Settings.plugins.ReviewDB;
if (!settings.notifyReviews || !settings.token) return;
const s = settings.store;
const { token, lastReviewId, notifyReviews } = s;
if (!notifyReviews || !token) return;
setTimeout(async () => {
const user = await getCurrentUserInfo(settings.token);
if (settings.lastReviewId < user.lastReviewID) {
settings.lastReviewId = user.lastReviewID;
const user = await getCurrentUserInfo(token);
if (lastReviewId && lastReviewId < user.lastReviewID) {
s.lastReviewId = user.lastReviewID;
if (user.lastReviewID !== 0)
showToast("You have new reviews on your profile!");
}
if (user.banInfo) {
const endDate = new Date(user.banInfo.banEndDate);
if (endDate > new Date() && (settings.user?.banInfo?.banEndDate ?? 0) < endDate) {
addContextMenuPatch("guild-header-popout", guildPopoutPatch);
if (user.banInfo) {
const endDate = new Date(user.banInfo.banEndDate).getTime();
if (endDate > Date.now() && (s.user?.banInfo?.banEndDate ?? 0) < endDate) {
Alerts.show({
title: "You have been banned from ReviewDB",
body: <>
<p>
You are banned from ReviewDB {(user.type === UserType.Banned) ? "permanently" : "until " + endDate.toLocaleString()}
</p>
<p>
Offending Review: {user.banInfo.reviewContent}
</p>
<p>
Continued offenses will result in a permanent ban.
</p>
</>,
body: (
<>
<p>
You are banned from ReviewDB {
user.type === UserType.Banned
? "permanently"
: "until " + endDate.toLocaleString()
}
</p>
{user.banInfo.reviewContent && (
<p>Offending Review: {user.banInfo.reviewContent}</p>
)}
<p>Continued offenses will result in a permanent ban.</p>
</>
),
cancelText: "Appeal",
confirmText: "Ok",
onCancel: () => {
window.open("https://forms.gle/Thj3rDYaMdKoMMuq6");
}
onCancel: () =>
VencordNative.native.openExternal(
"https://reviewdb.mantikafasi.dev/api/redirect?"
+ new URLSearchParams({
token: settings.store.token!,
page: "dashboard/appeal"
})
)
});
}
}
settings.user = user;
s.user = user;
}, 4000);
},
getReviewsComponent: (user: User) => (
<ErrorBoundary message="Failed to render Reviews">
<ReviewsView userId={user.id} />
</ErrorBoundary>
)
stop() {
removeContextMenuPatch("guild-header-popout", guildPopoutPatch);
},
getReviewsComponent: ErrorBoundary.wrap((user: User) => {
const [reviewCount, setReviewCount] = useState<number>();
return (
<ExpandableHeader
headerText="User Reviews"
onMoreClick={() => openReviewsModal(user.id, user.username)}
moreTooltipText={
reviewCount && reviewCount > 50
? `View all ${reviewCount} reviews`
: "Open Review Modal"
}
onDropDownClick={state => settings.store.reviewsDropdownState = !state}
defaultState={settings.store.reviewsDropdownState}
>
<ReviewsView
discordId={user.id}
name={user.username}
onFetchReviews={r => setReviewCount(r.reviewCount)}
showInput
/>
</ExpandableHeader>
);
}, { message: "Failed to render Reviews" })
});

View File

@ -16,54 +16,74 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Settings } from "@api/Settings";
import { Review } from "../entities/Review";
import { ReviewDBUser } from "../entities/User";
import { authorize, showToast } from "./Utils";
import { Review, ReviewDBUser } from "./entities";
import { settings } from "./settings";
import { authorize, showToast } from "./utils";
const API_URL = "https://manti.vendicated.dev";
const getToken = () => Settings.plugins.ReviewDB.token;
export const REVIEWS_PER_PAGE = 50;
interface Response {
export interface Response {
success: boolean,
message: string;
reviews: Review[];
updated: boolean;
hasNextPage: boolean;
reviewCount: number;
}
const WarningFlag = 0b00000010;
export async function getReviews(id: string): Promise<Review[]> {
var flags = 0;
if (!Settings.plugins.ReviewDB.showWarning) flags |= WarningFlag;
const req = await fetch(API_URL + `/api/reviewdb/users/${id}/reviews?flags=${flags}`);
export async function getReviews(id: string, offset = 0): Promise<Response> {
let flags = 0;
if (!settings.store.showWarning) flags |= WarningFlag;
const params = new URLSearchParams({
flags: String(flags),
offset: String(offset)
});
const req = await fetch(`${API_URL}/api/reviewdb/users/${id}/reviews?${params}`);
const res = (req.status === 200)
? await req.json() as Response
: {
success: false,
message: "An Error occured while fetching reviews. Please try again later.",
reviews: [],
updated: false,
hasNextPage: false,
reviewCount: 0
};
const res = (req.status === 200) ? await req.json() as Response : { success: false, message: "An Error occured while fetching reviews. Please try again later.", reviews: [], updated: false };
if (!res.success) {
showToast(res.message);
return [
{
id: 0,
comment: "An Error occured while fetching reviews. Please try again later.",
star: 0,
timestamp: 0,
sender: {
return {
...res,
reviews: [
{
id: 0,
username: "Error",
profilePhoto: "https://cdn.discordapp.com/attachments/1045394533384462377/1084900598035513447/646808599204593683.png?size=128",
discordID: "0",
badges: []
comment: "An Error occured while fetching reviews. Please try again later.",
star: 0,
timestamp: 0,
sender: {
id: 0,
username: "Error",
profilePhoto: "https://cdn.discordapp.com/attachments/1045394533384462377/1084900598035513447/646808599204593683.png?size=128",
discordID: "0",
badges: []
}
}
}
];
]
};
}
return res.reviews;
return res;
}
export async function addReview(review: any): Promise<Response | null> {
review.token = getToken();
review.token = settings.store.token;
if (!review.token) {
showToast("Please authorize to add a review.");
@ -93,7 +113,7 @@ export function deleteReview(id: number): Promise<Response> {
Accept: "application/json",
}),
body: JSON.stringify({
token: getToken(),
token: settings.store.token,
reviewid: id
})
}).then(r => r.json());
@ -108,16 +128,16 @@ export async function reportReview(id: number) {
}),
body: JSON.stringify({
reviewid: id,
token: getToken()
token: settings.store.token
})
}).then(r => r.json()) as Response;
showToast(await res.message);
showToast(res.message);
}
export function getCurrentUserInfo(token: string): Promise<ReviewDBUser> {
return fetch(API_URL + "/api/reviewdb/users", {
body: JSON.stringify({ token }),
method: "POST",
})
.then(r => r.json());
}).then(r => r.json());
}

View File

@ -0,0 +1,82 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 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 { definePluginSettings } from "@api/Settings";
import { OptionType } from "@utils/types";
import { Button } from "@webpack/common";
import { ReviewDBUser } from "./entities";
import { authorize } from "./utils";
export const settings = definePluginSettings({
authorize: {
type: OptionType.COMPONENT,
description: "Authorize with ReviewDB",
component: () => (
<Button onClick={authorize}>
Authorize with ReviewDB
</Button>
)
},
notifyReviews: {
type: OptionType.BOOLEAN,
description: "Notify about new reviews on startup",
default: true,
},
showWarning: {
type: OptionType.BOOLEAN,
description: "Display warning to be respectful at the top of the reviews list",
default: true,
},
hideTimestamps: {
type: OptionType.BOOLEAN,
description: "Hide timestamps on reviews",
default: false,
},
website: {
type: OptionType.COMPONENT,
description: "ReviewDB website",
component: () => (
<Button onClick={() => {
let url = "https://reviewdb.mantikafasi.dev/";
if (settings.store.token)
url += "/api/redirect?token=" + encodeURIComponent(settings.store.token);
VencordNative.native.openExternal(url);
}}>
ReviewDB website
</Button>
)
},
supportServer: {
type: OptionType.COMPONENT,
description: "ReviewDB Support Server",
component: () => (
<Button onClick={() => {
VencordNative.native.openExternal("https://discord.gg/eWPBSbvznt");
}}>
ReviewDB Support Server
</Button>
)
}
}).withPrivateSettings<{
token?: string;
user?: ReviewDBUser;
lastReviewId?: number;
reviewsDropdownState?: boolean;
}>();

View File

@ -1,3 +1,51 @@
[class|="section"]:not([class|="lastSection"]) + .vc-reviewdb-view {
[class|="section"]:not([class|="lastSection"]) + .vc-rdb-view {
margin-top: 12px;
}
.vc-rdb-badge {
vertical-align: middle;
margin-left: 4px;
}
.vc-rdb-input {
margin-top: 6px;
margin-bottom: 12px;
resize: none;
overflow: hidden;
background: transparent;
border: 1px solid var(--profile-message-input-border-color);
font-size: 14px;
}
.vc-rdb-placeholder {
margin-bottom: 4px;
font-weight: bold;
font-style: italic;
color: var(--text-muted);
}
.vc-rdb-modal-footer {
padding: 0;
}
.vc-rdb-modal-footer > div {
width: 100%;
margin: 6px 16px;
}
.vc-rdb-modal-footer .vc-rdb-input {
margin-bottom: 0;
background: var(--input-background);
}
.vc-rdb-modal-footer [class|="pageControlContainer"] {
margin-top: 0;
}
.vc-rdb-modal-header {
flex-grow: 1;
}
.vc-rdb-modal-reviews {
margin-top: 16px;
}

View File

@ -16,14 +16,16 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Settings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Logger } from "@utils/Logger";
import { openModal } from "@utils/modal";
import { findByProps } from "@webpack";
import { FluxDispatcher, React, SelectedChannelStore, Toasts, UserUtils } from "@webpack/common";
import { Review } from "../entities/Review";
import { UserType } from "../entities/User";
import { Review, UserType } from "./entities";
import { settings } from "./settings";
export const cl = classNameFactory("vc-rdb-");
export async function openUserProfileModal(userId: string) {
await UserUtils.fetchUser(userId);
@ -57,7 +59,7 @@ export function authorize(callback?: any) {
});
const { token, success } = await res.json();
if (success) {
Settings.plugins.ReviewDB.token = token;
settings.store.token = token;
showToast("Successfully logged in!");
callback?.();
} else if (res.status === 1) {
@ -82,8 +84,9 @@ export function showToast(text: string) {
});
}
export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
export function canDeleteReview(review: Review, userId: string) {
if (review.sender.discordID === userId || Settings.plugins.ReviewDB.user?.type === UserType.Admin) return true;
return (
review.sender.discordID === userId
|| settings.store.user?.type === UserType.Admin
);
}

View File

@ -67,6 +67,7 @@ interface AwaiterOpts<T> {
fallbackValue: T;
deps?: unknown[];
onError?(e: any): void;
onSuccess?(value: T): void;
}
/**
* Await a promise
@ -94,8 +95,16 @@ export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterO
if (!state.pending) setState({ ...state, pending: true });
factory()
.then(value => isAlive && setState({ value, error: null, pending: false }))
.catch(error => isAlive && (setState({ value: null, error, pending: false }), opts.onError?.(error)));
.then(value => {
if (!isAlive) return;
setState({ value, error: null, pending: false });
opts.onSuccess?.(value);
})
.catch(error => {
if (!isAlive) return;
setState({ value: null, error, pending: false });
opts.onError?.(error);
});
return () => void (isAlive = false);
}, opts.deps);

View File

@ -277,6 +277,8 @@ export interface DefinedSettings<D extends SettingsDefinition = SettingsDefiniti
* will be an empty string until plugin is initialized
*/
pluginName: string;
withPrivateSettings<T>(): this & { store: T; };
}
export type PartialExcept<T, R extends keyof T> = Partial<T> & Required<Pick<T, R>>;

View File

@ -43,6 +43,7 @@ export let ButtonLooks: t.ButtonLooks;
export let Popout: t.Popout;
export let Dialog: t.Dialog;
export let TabBar: any;
export let Paginator: t.Paginator;
// token lagger real
/** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
export let useToken: t.useToken;
@ -53,6 +54,6 @@ export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"
export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
waitFor("FormItem", m => {
({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m);
({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog, Paginator } = m);
Forms = m;
});

View File

@ -387,3 +387,13 @@ export type useToken = (color: {
css: string;
resolve: Resolve;
}) => ReturnType<Resolve>;
export type Paginator = ComponentType<{
currentPage: number;
maxVisiblePages: number;
pageSize: number;
totalCount: number;
onPageChange?(page: number): void;
hideMaxPage?: boolean;
}>;