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

6 files changed, 126 insertions, 43 deletions

diff --git a/src/plugins/reviewDB/components/ReviewBadge.tsx b/src/plugins/reviewDB/components/ReviewBadge.tsx
new file mode 100644
index 0000000..4a3c0c4
--- /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.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>
+    );
+}
diff --git a/src/plugins/reviewDB/components/ReviewComponent.tsx b/src/plugins/reviewDB/components/ReviewComponent.tsx
index 8808ccd..ddb4922 100644
--- a/src/plugins/reviewDB/components/ReviewComponent.tsx
+++ b/src/plugins/reviewDB/components/ReviewComponent.tsx
@@ -24,6 +24,7 @@ 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
@@ -78,24 +79,32 @@ export default LazyComponent(() => {
         }
 
         return (
-            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}>
-                <div className={contents}>
+            <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)}
-                        style={{ left: "8px" }}
                         onClick={openModal}
                         src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
+                        style={{ left: "0px" }}
                     />
                     <span
-                        className={classes(username, clickable)}
-                        style={{ color: "var(--text-normal)", right: "8px" }}
+                        className={classes(clickable, username)}
+                        style={{ color: "var(--channels-default)", fontSize: "14px" }}
                         onClick={() => openModal()}
                     >
                         {review.username}
                     </span>
+                    {review.badges.map(badge => <ReviewBadge {...badge} />)}
                     <p
                         className={classes(messageContent, defaultColor)}
-                        style={{ fontSize: 15, marginTop: 4, right: "8px" }}
+                        style={{ fontSize: 15, marginTop: 4 }}
                     >
                         {review.comment}
                     </p>
diff --git a/src/plugins/reviewDB/components/ReviewsView.tsx b/src/plugins/reviewDB/components/ReviewsView.tsx
index 57f974e..4852967 100644
--- a/src/plugins/reviewDB/components/ReviewsView.tsx
+++ b/src/plugins/reviewDB/components/ReviewsView.tsx
@@ -54,44 +54,40 @@ export default function ReviewsView({ userId }: { userId: string; }) {
 
     return (
         <div className="ReviewDB">
-            <>
-                <Text
-                    tag="h2"
-                    variant="eyebrow"
-                    style={{
-                        paddingLeft: "0px",
-                        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={{ 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",
-                    }}
+            <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={"Review @" + UserStore.getUser(userId)?.username ?? ""}
+                onKeyDown={onKeyPress}
+                style={{
+                    marginTop: "6px",
+                    resize: "none",
+                    marginBottom: "12px",
+                    overflow: "hidden",
+                }}
+            />
         </div>
     );
 }
diff --git a/src/plugins/reviewDB/entities/Badge.ts b/src/plugins/reviewDB/entities/Badge.ts
new file mode 100644
index 0000000..4c3bd1e
--- /dev/null
+++ b/src/plugins/reviewDB/entities/Badge.ts
@@ -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;
+}
diff --git a/src/plugins/reviewDB/entities/Review.ts b/src/plugins/reviewDB/entities/Review.ts
index 662c91a..12c3d50 100644
--- a/src/plugins/reviewDB/entities/Review.ts
+++ b/src/plugins/reviewDB/entities/Review.ts
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Badge } from "./Badge";
+
 export interface Review {
     comment: string,
     id: number,
@@ -24,4 +26,5 @@ export interface Review {
     star: number,
     username: string,
     profile_photo: string;
+    badges: Badge[];
 }
diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx
index 42db758..31175f9 100644
--- a/src/webpack/common.tsx
+++ b/src/webpack/common.tsx
@@ -290,3 +290,7 @@ export const ContextMenu = mapMangledModuleLazy('type:"CONTEXT_MENU_OPEN"', {
         options?: { enableSpellCheck?: boolean; }
     ): void;
 };
+
+export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
+    openUntrustedLink: filters.byCode(".apply(this,arguments)")
+});