Make some changes to reviewdb ui and add badges to it (#245)

This commit is contained in:
Manti 2022-12-18 01:30:29 +03:00 committed by GitHub
parent 3efc79224f
commit 47de9fab2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 126 additions and 43 deletions

@ -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.badge_name}>
{({ onMouseEnter, onMouseLeave }) => (
<img
width="24px"
height="24px"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
src={badge.badge_icon}
alt={badge.badge_description}
style={{ verticalAlign: "middle", marginLeft: "4px" }}
onClick={() =>
MaskedLinkStore.openUntrustedLink({
href: badge.redirect_url,
})
}
/>
)}
</Tooltip>
);
}

@ -24,6 +24,7 @@ import { Review } from "../entities/Review";
import { deleteReview, reportReview } from "../Utils/ReviewDBAPI"; import { deleteReview, reportReview } from "../Utils/ReviewDBAPI";
import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils"; import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils";
import MessageButton from "./MessageButton"; import MessageButton from "./MessageButton";
import ReviewBadge from "./ReviewBadge";
export default LazyComponent(() => { export default LazyComponent(() => {
// this is terrible, blame mantika // this is terrible, blame mantika
@ -78,24 +79,32 @@ export default LazyComponent(() => {
} }
return ( return (
<div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}> <div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={
<div className={contents}> {
marginLeft: "0px",
paddingLeft: "52px",
paddingRight: "16px"
}
}>
<div className={contents} style={{ paddingLeft: "0px" }}>
<img <img
className={classes(avatar, clickable)} className={classes(avatar, clickable)}
style={{ left: "8px" }}
onClick={openModal} onClick={openModal}
src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"} src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
style={{ left: "0px" }}
/> />
<span <span
className={classes(username, clickable)} className={classes(clickable, username)}
style={{ color: "var(--text-normal)", right: "8px" }} style={{ color: "var(--channels-default)", fontSize: "14px" }}
onClick={() => openModal()} onClick={() => openModal()}
> >
{review.username} {review.username}
</span> </span>
{review.badges.map(badge => <ReviewBadge {...badge} />)}
<p <p
className={classes(messageContent, defaultColor)} className={classes(messageContent, defaultColor)}
style={{ fontSize: 15, marginTop: 4, right: "8px" }} style={{ fontSize: 15, marginTop: 4 }}
> >
{review.comment} {review.comment}
</p> </p>

@ -54,44 +54,40 @@ export default function ReviewsView({ userId }: { userId: string; }) {
return ( return (
<div className="ReviewDB"> <div className="ReviewDB">
<> <Text
<Text tag="h2"
tag="h2" variant="eyebrow"
variant="eyebrow" style={{
style={{ marginBottom: "12px",
paddingLeft: "0px", color: "var(--header-primary)"
marginBottom: "12px", }}
color: "var(--header-primary)" >
}} User Reviews
> </Text>
User Reviews {reviews?.map(review =>
</Text> <ReviewComponent
{reviews?.map(review => key={review.id}
<ReviewComponent review={review}
key={review.id} refetch={dirtyRefetch}
review={review}
refetch={dirtyRefetch}
/>
)}
{reviews?.length === 0 && (
<Forms.FormText style={{ paddingLeft: "0px", paddingRight: "12px", marginBottom: "12px" }}>
Looks like nobody reviewed this user yet. You could be the first!
</Forms.FormText>
)}
<textarea
className={classes(Classes.textarea, "enter-comment")}
placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
onKeyDown={onKeyPress}
style={{
padding: "12px",
marginBottom: "12px",
color: "var(--text-normal)",
border: "1px solid var(--profile-message-input-border-color)",
fontSize: "14px",
borderRadius: "3px",
}}
/> />
</> )}
{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={"Review @" + UserStore.getUser(userId)?.username ?? ""}
onKeyDown={onKeyPress}
style={{
marginTop: "6px",
resize: "none",
marginBottom: "12px",
overflow: "hidden",
}}
/>
</div> </div>
); );
} }

@ -0,0 +1,26 @@
/*
* 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 {
badge_name: string;
badge_description: string;
badge_icon: string;
redirect_url: string;
badge_type: number;
}

@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { Badge } from "./Badge";
export interface Review { export interface Review {
comment: string, comment: string,
id: number, id: number,
@ -24,4 +26,5 @@ export interface Review {
star: number, star: number,
username: string, username: string,
profile_photo: string; profile_photo: string;
badges: Badge[];
} }

@ -290,3 +290,7 @@ export const ContextMenu = mapMangledModuleLazy('type:"CONTEXT_MENU_OPEN"', {
options?: { enableSpellCheck?: boolean; } options?: { enableSpellCheck?: boolean; }
): void; ): void;
}; };
export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
openUntrustedLink: filters.byCode(".apply(this,arguments)")
});