tgxn · tgxn · Oct 22, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/src/components/Actions/BaseElements.jsx b/src/components/Actions/BaseElements.jsx
@@ -18,6 +18,8 @@ import WarningRoundedIcon from "@mui/icons-material/WarningRounded";
 
 import useLemmyReports from "../../hooks/useLemmyReports";
 
+import { BasicInfoTooltip } from "../Tooltip.jsx";
+
 export const BaseActionButton = ({
   // icon = null,
   size = "small",
@@ -30,7 +32,7 @@ export const BaseActionButton = ({
   // const { isFetching } = useLemmyReports();
 
   return (
-    <Tooltip title={tooltip} color={color} variant="plain" placement="top">
+    <BasicInfoTooltip title={tooltip} color={color} variant="plain" placement="top" arrow disableInteractive>
       <Button
         variant={variant}
         color={color}
@@ -47,7 +49,7 @@ export const BaseActionButton = ({
       >
         {text}
       </Button>
-    </Tooltip>
+    </BasicInfoTooltip>
   );
 };
 

diff --git a/src/components/Actions/CommentButtons.jsx b/src/components/Actions/CommentButtons.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -13,10 +14,14 @@ import {
   ExpiryLengthElement,
   ConfirmDialog,
 } from "./BaseElements.jsx";
+import { getSiteData } from "../../hooks/getSiteData";
 
 export const ResolveCommentReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
 
+  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolveCommentReport");
 
   const [isConfirming, setIsConfirming] = React.useState(false);
@@ -38,8 +43,33 @@ export const ResolveCommentReportButton = ({ report, ...props }) => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-
+      if (showResolved) {
+        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
+      } else {
+        queryClient.setQueryData(
+          ["lemmyHttp", localPerson.id, "listCommentReports", ["unresolved_only", true]],
+          (old) => {
+            // remove it from the array
+            const newPages = !old
+              ? null
+              : old.pages.map((page) => {
+                  const newData = page.data.filter((oldReport) => {
+                    return oldReport.comment_report.id !== report.comment_report.id;
+                  });
+
+                  return {
+                    ...page,
+                    data: newData,
+                  };
+                });
+
+            return {
+              ...old,
+              pages: newPages,
+            };
+          },
+        );
+      }
       setIsConfirming(false);
     }
   }, [data]);

diff --git a/src/components/Actions/PMButtons.jsx b/src/components/Actions/PMButtons.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -13,12 +14,16 @@ import {
   ExpiryLengthElement,
   ConfirmDialog,
 } from "./BaseElements.jsx";
+import { getSiteData } from "../../hooks/getSiteData";
 
 // allow resolving / unresolving a post report
 // resolvePrivateMessageReport
 export const ResolvePMReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
 
+  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolvePrivateMessageReport");
 
   const [isConfirming, setIsConfirming] = React.useState(false);
@@ -27,7 +32,9 @@ export const ResolvePMReportButton = ({ report, ...props }) => {
   React.useEffect(() => {
     if (isConfirming) {
       const timeout = setTimeout(() => {
-        setIsConfirming(false);
+        if (!isLoading) {
+          setIsConfirming(false);
+        }
       }, 5000);
 
       return () => {
@@ -40,8 +47,33 @@ export const ResolvePMReportButton = ({ report, ...props }) => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-
+      if (showResolved) {
+        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
+      } else {
+        queryClient.setQueryData(
+          ["lemmyHttp", localPerson.id, "listPrivateMessageReports", ["unresolved_only", true]],
+          (old) => {
+            // remove it from the array
+            const newPages = !old
+              ? null
+              : old.pages.map((page) => {
+                  const newData = page.data.filter((oldReport) => {
+                    return oldReport.pm_report.id !== report.pm_report.id;
+                  });
+
+                  return {
+                    ...page,
+                    data: newData,
+                  };
+                });
+
+            return {
+              ...old,
+              pages: newPages,
+            };
+          },
+        );
+      }
       setIsConfirming(false);
     }
   }, [data]);

diff --git a/src/components/Actions/PostButtons.jsx b/src/components/Actions/PostButtons.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -13,20 +14,22 @@ import {
   ExpiryLengthElement,
   ConfirmDialog,
 } from "./BaseElements.jsx";
+import { getSiteData } from "../../hooks/getSiteData";
 
 // allow resolving / unresolving a post report
 export const ResolvePostReportButton = ({ report, ...props }) => {
-  // const [confirmOpen, setConfirmOpen] = React.useState(false);
-
   const queryClient = useQueryClient();
 
+  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolvePostReport");
 
   const [isConfirming, setIsConfirming] = React.useState(false);
 
   // close confirm after 5 seconds of no activity
   React.useEffect(() => {
-    if (isConfirming) {
+    if (isConfirming && !isLoading) {
       const timeout = setTimeout(() => {
         setIsConfirming(false);
       }, 5000);
@@ -35,14 +38,39 @@ export const ResolvePostReportButton = ({ report, ...props }) => {
         clearTimeout(timeout);
       };
     }
-  }, [isConfirming]);
+  }, [isConfirming, isLoading]);
 
   React.useEffect(() => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-
+      if (showResolved) {
+        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
+      } else {
+        queryClient.setQueryData(
+          ["lemmyHttp", localPerson.id, "listPostReports", ["unresolved_only", true]],
+          (old) => {
+            // remove it from the array
+            const newPages = !old
+              ? null
+              : old.pages.map((page) => {
+                  const newData = page.data.filter((oldReport) => {
+                    return oldReport.post_report.id !== report.post_report.id;
+                  });
+
+                  return {
+                    ...page,
+                    data: newData,
+                  };
+                });
+
+            return {
+              ...old,
+              pages: newPages,
+            };
+          },
+        );
+      }
       setIsConfirming(false);
     }
   }, [data]);

diff --git a/src/components/Display.jsx b/src/components/Display.jsx
@@ -4,12 +4,19 @@ import Moment from "react-moment";
 
 import { sanitizeUrl } from "@braintree/sanitize-url";
 
+import Typography from "@mui/joy/Typography";
 import Tooltip from "@mui/joy/Tooltip";
 import Link from "@mui/joy/Link";
 import Chip from "@mui/joy/Chip";
 
+import ThumbsUpDownIcon from "@mui/icons-material/ThumbsUpDown";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+
 import FediVerse from "../../public/icons/fedi.png";
 
+import { BasicInfoTooltip } from "./Tooltip.jsx";
+
 // time in formats `2023-07-14T04:12:07.720101` are in GMT and must be adjusted to unix epoch for moment display// replace .720101 with Z
 export function MomentAdjustedTimeAgo({ children, ...props }) {
   if (children.includes("T")) {
@@ -24,7 +31,7 @@ export function MomentAdjustedTimeAgo({ children, ...props }) {
 }
 
 export const HeaderChip = ({ children, tooltip = null, count = 0, ...props }) => (
-  <Tooltip title={tooltip} color={"neutral"} variant="soft" placement="bottom">
+  <BasicInfoTooltip title={tooltip} color={"neutral"} variant="soft" placement="bottom">
     <Chip
       size="md"
       color={count > 0 ? "danger" : "success"}
@@ -39,7 +46,7 @@ export const HeaderChip = ({ children, tooltip = null, count = 0, ...props }) =>
     >
       {children}
     </Chip>
-  </Tooltip>
+  </BasicInfoTooltip>
 );
 
 export const SquareChip = ({
@@ -50,7 +57,7 @@ export const SquareChip = ({
   color = "neutral",
   ...props
 }) => (
-  <Tooltip title={tooltip} color={"neutral"} variant="plain" placement={tooltipPlacement}>
+  <BasicInfoTooltip title={tooltip} color={color} variant="outlined" placement={tooltipPlacement}>
     <Chip
       size={size}
       color={color}
@@ -62,11 +69,11 @@ export const SquareChip = ({
         fontWeight: "normal",
         userSelect: "none",
         borderRadius: 4,
-        "--Chip-gap": iconOnly ? 0 : "0.25rem",
+        gap: iconOnly !== null ? 0 : "0.25rem",
       }}
       {...props}
     />
-  </Tooltip>
+  </BasicInfoTooltip>
 );
 
 export const SanitizedLink = ({ children, href, ...props }) => {
@@ -78,9 +85,30 @@ export const SanitizedLink = ({ children, href, ...props }) => {
   );
 };
 
+export const UpvoteDownvoteChip = ({ counts, ...props }) => {
+  return (
+    <SquareChip
+      color={"neutral"}
+      tooltip={
+        <>
+          <Typography color="success" sx={{ pr: 1 }}>
+            <ThumbUpIcon /> {counts.upvotes}
+          </Typography>
+          <Typography color="warning">
+            <ThumbDownIcon /> {counts.downvotes}
+          </Typography>
+        </>
+      }
+      startDecorator={<ThumbsUpDownIcon />}
+    >
+      {counts.score}
+    </SquareChip>
+  );
+};
+
 export const FediverseChipLink = ({ href, size = "md", ...props }) => {
   return (
-    <Tooltip title="Open on remote instance" color="neutral" variant="plain" placement="top">
+    <BasicInfoTooltip title="Open on remote instance" color="neutral" variant="outlined" placement="top">
       <Chip
         component={Link}
         href={href}
@@ -105,6 +133,6 @@ export const FediverseChipLink = ({ href, size = "md", ...props }) => {
         }}
         {...props}
       />
-    </Tooltip>
+    </BasicInfoTooltip>
   );
 };
diff --git a/src/components/ListItem/Comment.jsx b/src/components/ListItem/Comment.jsx
@@ -17,9 +17,9 @@ import { SquareChip } from "../Display.jsx";
 import { ResolveCommentReportButton, RemoveCommentButton } from "../Actions/CommentButtons.jsx";
 import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx";
 
-import { PersonMetaLine, ReportDetails } from "./Common.jsx";
+import { PersonMetaLine, CommunityMetaLine, ReportDetails } from "./Common.jsx";
 
-import { MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink } from "../Display.jsx";
+import { MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink, UpvoteDownvoteChip } from "../Display.jsx";
 
 import { getSiteData } from "../../hooks/getSiteData";
 
@@ -47,7 +47,7 @@ const CommentContentDetail = ({ report }) => {
       </Typography>
 
       {/* Comment Meta */}
-      <Typography variant="h6" component="h2" sx={{ display: "flex", gap: 1 }}>
+      <Typography variant="h6" component="h2" sx={{ display: "flex", gap: 1, pt: 1 }}>
         {baseUrl != apId && <FediverseChipLink href={fediversePostLink} />}
 
         {report.comment.published && (
@@ -60,13 +60,7 @@ const CommentContentDetail = ({ report }) => {
           {report.counts.child_count}
         </SquareChip>
 
-        <SquareChip color={"primary"} tooltip="Score" startDecorator={<ThumbsUpDownIcon />}>
-          {report.counts.score}
-        </SquareChip>
-
-        <SquareChip color={"primary"} tooltip="Downvotes" startDecorator={<ThumbDownIcon />}>
-          {report.counts.downvotes}
-        </SquareChip>
+        <UpvoteDownvoteChip counts={report.counts} />
 
         {report.comment_report.resolved && (
           <SquareChip
@@ -106,6 +100,14 @@ const CommentContentDetail = ({ report }) => {
         {report.comment.content}
       </Alert>
 
+      <CommunityMetaLine
+        community={report.community}
+        showIn
+        sx={{
+          px: 1,
+        }}
+      />
+
       <PersonMetaLine
         creator={report.comment_creator}
         by