WIP - Somewhat functional

manifest.json

@@ -1,20 +1,20 @@
 {
-  "id": "dev.replugged.PluginTemplate",
-  "name": "Plugin Template",
-  "description": "A plugin template",
+  "id": "dev.wolfplugs.ReviewDB",
+  "name": "ReviewDB",
+  "description": "Adds Reviews to users/servers",
   "author": {
-    "name": "replugged",
-    "discordID": "1000992611840049192",
-    "github": "replugged-org"
+    "name": "Wolfkid200444",
+    "discordID": "347096063569559553",
+    "github": "WolfPlugs"
   },
   "version": "1.0.0",
   "updater": {
     "type": "github",
-    "id": "replugged-org/plugin-template"
+    "id": "WolfPlugs/reviewdb"
   },
   "license": "MIT",
   "type": "replugged-plugin",
-  "renderer": "src/index.ts",
+  "renderer": "src/index.tsx",
   "source": "https://github.com/replugged-org/plugin-template",
   "image": ["https://i.imgur.com/14CNs3a.png?CHANGE-THIS-URL"]
 }

src/auth.tsx

@@ -0,0 +1,75 @@
+import { webpack, settings, logger } from "replugged";
+import { ReviewDBAuth } from "./entities";
+import { users, modal } from "replugged/common";
+import { showToast } from "./utils";
+
+const { OAuth2AuthorizeModal } = webpack.getByProps("OAuth2AuthorizeModal");
+const { ToastType } = webpack.getByProps(["createToast", "showToast"]);
+
+const DATA_STORE_KEY = "rdb-auth";
+
+export let Auth: ReviewDBAuth = {};
+export const defaultSettings = {};
+export const authorizationToken = await settings.init("reviewdb.auth", defaultSettings);
+
+export async function initAuth() {
+  Auth = await getAuth() ?? {};
+}
+
+export async function getAuth(): Promise<ReviewDBAuth | undefined> {
+  const auth = await authorizationToken.get(DATA_STORE_KEY);
+  return auth?.[users.getCurrentUser()?.id];
+}
+
+export async function getToken() {
+  const auth = await getAuth();
+  return auth?.token;
+}
+
+export async function updateAuth(newAuth: ReviewDBAuth) {
+  return authorizationToken.set(DATA_STORE_KEY, auth => {
+      auth ??= {};
+      Auth = auth[users.getCurrentUser().id] ??= {};
+
+      if (newAuth.token) Auth.token = newAuth.token;
+      if (newAuth.user) Auth.user = newAuth.user;
+
+      return auth;
+  });
+}
+
+export function authorize(callback?: any) {
+  modal.openModal(props =>
+      <OAuth2AuthorizeModal
+          {...props}
+          scopes={["identify"]}
+          responseType="code"
+          redirectUri="https://manti.vendicated.dev/api/reviewdb/auth"
+          permissions={0n}
+          clientId="915703782174752809"
+          cancelCompletesFlow={false}
+          callback={async (response: any) => {
+              try {
+                  const url = new URL(response.location);
+                  url.searchParams.append("clientMod", "replugged");
+                  const res = await fetch(url, {
+                      headers: { Accept: "application/json" }
+                  });
+
+                  if (!res.ok) {
+                      const { message } = await res.json();
+                      showToast(message || "An error occured while authorizing", ToastType.FAILURE);
+                      return;
+                  }
+
+                  const { token } = await res.json();
+                  updateAuth({ token });
+                  showToast("Successfully logged in!", ToastType.SUCCESS);
+                  callback?.();
+              } catch (e) {
+                  logger.error("Failed to authorize", e);
+              }
+          }}
+      />
+  );
+}

src/components/ExpandableHeader.tsx

@@ -0,0 +1,84 @@
+import { common, components } from "replugged";
+import { React } from "replugged/common";
+import { Text, Tooltip } from "replugged/components";
+
+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] = React.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={"expandableheader-center-flex"}>
+          {buttons ?? null}
+
+          {onMoreClick && ( // only show more button if callback is provided
+            <Tooltip text={moreTooltipText}>
+              <button className={"expandableheader-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}>
+            <button
+              className={"expandableheader-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}
+    </>
+  );
+}

src/components/MessageButton.tsx

@@ -0,0 +1,65 @@
+import { webpack } from "replugged";
+import { Tooltip } from "replugged/components";
+
+const iconClasses = webpack.getByProps("button", "wrapper", "disabled", "separator")
+
+export function DeleteButton({ onClick }: { onClick(): void; }) {
+  return (
+      <Tooltip text="Delete Review">
+          {props => (
+              <div
+                  {...props}
+                  className={classes(iconClasses.button, iconClasses.dangerous)}
+                  onClick={onClick}
+                  role="button"
+              >
+                  <DeleteIcon width="20" height="20" />
+              </div>
+          )}
+      </Tooltip>
+  );
+}
+
+export function ReportButton({ onClick }: { onClick(): void; }) {
+  return (
+      <Tooltip text="Report Review">
+          {props => (
+              <div
+                  {...props}
+                  className={iconClasses.button}
+                  onClick={onClick}
+                  role="button"
+              >
+                  <svg width="20" height="20" viewBox="0 0 24 24">
+                      <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>
+  );
+}
+
+export function BlockButton({ onClick, isBlocked }: { onClick(): void; isBlocked: boolean; }) {
+  return (
+      <Tooltip text={`${isBlocked ? "Unblock" : "Block"} user`}>
+          {props => (
+              <div
+                  {...props}
+                  className={iconClasses.button}
+                  onClick={onClick}
+                  role="button"
+              >
+                  <svg height="20" viewBox="0 -960 960 960" width="20" fill="currentColor">
+                      {isBlocked
+                          ? <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+                          : <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z" />
+                      }
+                  </svg>
+              </div>
+          )}
+      </Tooltip>
+  );
+}

src/components/ReviewBadge.tsx

@@ -0,0 +1,33 @@
+import { React } from "replugged/common";
+import { Badge } from "../entities";
+import { Tooltip } from "replugged/components";
+import MaskedLink from "../MaskedLinked";
+
+export default function ReviewBadge(badge: Badge & { onClick?(): void; }) {
+  const Wrapper = ({ badge, ...props }) => {
+    if (badge.redirectURL) {
+        return <a href={badge.redirectURL} {...props} />;
+    } else {
+        return <span {...props} role="button" />;
+    }
+};
+
+  return (
+      <Tooltip
+          text={badge.name}>
+          {({ onMouseEnter, onMouseLeave }) => (
+              <Wrapper className={("rdb-blocked-badge")} href={badge.redirectURL!} onClick={badge.onClick}>
+                  <img
+                      className={("rdb-badge")}
+                      width="22px"
+                      height="22px"
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                      src={badge.icon}
+                      alt={badge.description}
+                  />
+              </Wrapper>
+          )}
+      </Tooltip>
+  );
+}