Merge pull request #84 from tgxn/jump_approvals

Jump approvals
tgxn · Oct 31, 2023 · 0c46681 · 0c46681
2 parents 3bc6221 + 9e3e5b5
commit 0c46681
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 214 deletions.
diff --git a/src/components/Actions/BaseElements.jsx b/src/components/Actions/BaseElements.jsx
@@ -32,7 +32,14 @@ export const BaseActionButton = ({
   // const { isFetching } = useLemmyReports();
 
   return (
-    <BasicInfoTooltip title={tooltip} color={color} variant="plain" placement="top" arrow disableInteractive>
+    <BasicInfoTooltip
+      title={tooltip}
+      color={color}
+      variant="outlined" // tooltip variant is static
+      placement="bottom"
+      arrow
+      disableInteractive
+    >
       <Button
         variant={variant}
         color={color}
@@ -53,6 +60,57 @@ export const BaseActionButton = ({
   );
 };
 
+export const ActionConfirmButton = ({
+  size = "md",
+  variant = "outlined",
+
+  baseText,
+  confirmText,
+
+  baseTooltip,
+  confirmTooltip,
+
+  baseColor = "neutral",
+  confirmColor = "danger",
+
+  // confirmVariant = "solid",
+
+  loading = false,
+  onConfirm,
+  ...props
+}) => {
+  const [isConfirming, setIsConfirming] = React.useState(false);
+
+  let finalColor = !isConfirming ? baseColor : confirmColor;
+  if (loading) {
+    finalColor = "neutral";
+  }
+
+  return (
+    <BaseActionButton
+      size={size}
+      variant={variant}
+      color={finalColor}
+      text={!isConfirming ? baseText : confirmText}
+      tooltip={!isConfirming ? baseTooltip : confirmTooltip}
+      onMouseLeave={() => setIsConfirming(false)}
+      onClick={() => {
+        if (isConfirming) {
+          onConfirm();
+          setIsConfirming(false);
+        } else {
+          setIsConfirming(true);
+        }
+      }}
+      sx={{
+        ml: 1, // this is needed for the thumb icon
+      }}
+      loading={loading}
+      {...props}
+    />
+  );
+};
+
 export const InputElement = ({ value, setValue, inputText, placeholder = "" }) => {
   return (
     <FormControl

diff --git a/src/components/Actions/CommentButtons.jsx b/src/components/Actions/CommentButtons.jsx
@@ -7,13 +7,7 @@ import DoneAllIcon from "@mui/icons-material/DoneAll";
 
 import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
-import {
-  BaseActionButton,
-  InputElement,
-  CheckboxElement,
-  ExpiryLengthElement,
-  ConfirmDialog,
-} from "./BaseElements.jsx";
+import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
 import { selectShowResolved } from "../../reducers/configReducer.js";
 
@@ -23,30 +17,13 @@ export const ResolveCommentReportButton = ({ report, ...props }) => {
   const showResolved = useSelector(selectShowResolved);
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
-  const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolveCommentReport");
-
-  const [isConfirming, setIsConfirming] = React.useState(false);
-
-  // close confirm after 5 seconds of no activity
-  React.useEffect(() => {
-    if (isConfirming) {
-      const timeout = setTimeout(() => {
-        setIsConfirming(false);
-      }, 5000);
-
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [isConfirming]);
+  const { data, callAction, isSuccess, isLoading } = useLemmyHttpAction("resolveCommentReport");
 
   React.useEffect(() => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      if (showResolved) {
-        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-      } else {
+      if (!showResolved) {
         queryClient.setQueryData(
           ["lemmyHttp", localPerson.id, "listCommentReports", ["unresolved_only", true]],
           (old) => {
@@ -71,7 +48,13 @@ export const ResolveCommentReportButton = ({ report, ...props }) => {
           },
         );
       }
-      setIsConfirming(false);
+
+      // invalidate report count
+      queryClient.invalidateQueries({
+        queryKey: ["lemmyHttp", localPerson.id, "getReportCount"],
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
     }
   }, [data]);
 
@@ -85,25 +68,19 @@ export const ResolveCommentReportButton = ({ report, ...props }) => {
   }
 
   return (
-    <BaseActionButton
-      text={isConfirming ? "Confirm?" : actionText}
-      tooltip={isConfirming ? `Really ${actionText}?` : `${actionText} Report`}
-      color={isConfirming ? "warning" : actionColor}
-      endDecorator={<DoneAllIcon />}
-      loading={isLoading}
-      size="md"
+    <ActionConfirmButton
       variant={actionVariant}
-      onClick={() => {
-        if (isConfirming) {
-          callAction({ report_id: report.comment_report.id, resolved: !report.comment_report.resolved });
-        } else {
-          setIsConfirming(true);
-        }
-      }}
-      sx={{
-        ml: 1, // this is needed for the thumb icon
+      baseText={actionText}
+      confirmText="Confirm?"
+      baseTooltip={`${actionText} Report`}
+      confirmTooltip={`Really ${actionText}?`}
+      baseColor={actionColor}
+      confirmColor="warning"
+      endDecorator={<DoneAllIcon />}
+      onConfirm={() => {
+        callAction({ report_id: report.comment_report.id, resolved: !report.comment_report.resolved });
       }}
-      {...props}
+      loading={isLoading}
     />
   );
 };

diff --git a/src/components/Actions/PMButtons.jsx b/src/components/Actions/PMButtons.jsx
@@ -7,13 +7,7 @@ import DoneAllIcon from "@mui/icons-material/DoneAll";
 
 import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
-import {
-  BaseActionButton,
-  InputElement,
-  CheckboxElement,
-  ExpiryLengthElement,
-  ConfirmDialog,
-} from "./BaseElements.jsx";
+import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
 import { selectShowResolved } from "../../reducers/configReducer.js";
 
@@ -25,32 +19,13 @@ export const ResolvePMReportButton = ({ report, ...props }) => {
   const showResolved = useSelector(selectShowResolved);
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
-  const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolvePrivateMessageReport");
-
-  const [isConfirming, setIsConfirming] = React.useState(false);
-
-  // close confirm after 5 seconds of no activity
-  React.useEffect(() => {
-    if (isConfirming) {
-      const timeout = setTimeout(() => {
-        if (!isLoading) {
-          setIsConfirming(false);
-        }
-      }, 5000);
-
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [isConfirming]);
+  const { data, callAction, isSuccess, isLoading } = useLemmyHttpAction("resolvePrivateMessageReport");
 
   React.useEffect(() => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      if (showResolved) {
-        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-      } else {
+      if (!showResolved) {
         queryClient.setQueryData(
           ["lemmyHttp", localPerson.id, "listPrivateMessageReports", ["unresolved_only", true]],
           (old) => {
@@ -75,8 +50,14 @@ export const ResolvePMReportButton = ({ report, ...props }) => {
           },
         );
       }
-      setIsConfirming(false);
     }
+
+    // invalidate report count
+    queryClient.invalidateQueries({
+      queryKey: ["lemmyHttp", localPerson.id, "getReportCount"],
+    });
+
+    queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "listPrivateMessageReports"] });
   }, [data]);
 
   let actionText = "Resolve";
@@ -89,28 +70,22 @@ export const ResolvePMReportButton = ({ report, ...props }) => {
   }
 
   return (
-    <BaseActionButton
-      text={isConfirming ? "Confirm?" : actionText}
-      tooltip={isConfirming ? `Really ${actionText}?` : `${actionText} Report`}
-      color={isConfirming ? "warning" : actionColor}
-      endDecorator={<DoneAllIcon />}
-      loading={isLoading}
-      size="md"
+    <ActionConfirmButton
       variant={actionVariant}
-      onClick={() => {
-        if (isConfirming) {
-          callAction({
-            report_id: report.private_message_report.id,
-            resolved: !report.private_message_report.resolved,
-          });
-        } else {
-          setIsConfirming(true);
-        }
-      }}
-      sx={{
-        ml: 1, // this is needed for the thumb icon
+      baseText={actionText}
+      confirmText="Confirm?"
+      baseTooltip={`${actionText} Report`}
+      confirmTooltip={`Really ${actionText}?`}
+      baseColor={actionColor}
+      confirmColor="warning"
+      endDecorator={<DoneAllIcon />}
+      onConfirm={() => {
+        callAction({
+          report_id: report.private_message_report.id,
+          resolved: !report.private_message_report.resolved,
+        });
       }}
-      {...props}
+      loading={isLoading}
     />
   );
 };

diff --git a/src/components/Actions/PostButtons.jsx b/src/components/Actions/PostButtons.jsx
@@ -9,13 +9,7 @@ import DoneAllIcon from "@mui/icons-material/DoneAll";
 
 import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
-import {
-  BaseActionButton,
-  InputElement,
-  CheckboxElement,
-  ExpiryLengthElement,
-  ConfirmDialog,
-} from "./BaseElements.jsx";
+import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
 import { selectShowResolved } from "../../reducers/configReducer.js";
 
@@ -26,30 +20,13 @@ export const ResolvePostReportButton = ({ report, ...props }) => {
   const showResolved = useSelector(selectShowResolved);
   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 && !isLoading) {
-      const timeout = setTimeout(() => {
-        setIsConfirming(false);
-      }, 5000);
-
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [isConfirming, isLoading]);
+  const { data, callAction, isSuccess, isLoading } = useLemmyHttpAction("resolvePostReport");
 
   React.useEffect(() => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      if (showResolved) {
-        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-      } else {
+      if (!showResolved) {
         queryClient.setQueryData(
           ["lemmyHttp", localPerson.id, "listPostReports", ["unresolved_only", true]],
           (old) => {
@@ -74,7 +51,13 @@ export const ResolvePostReportButton = ({ report, ...props }) => {
           },
         );
       }
-      setIsConfirming(false);
+
+      // invalidate report count
+      queryClient.invalidateQueries({
+        queryKey: ["lemmyHttp", localPerson.id, "getReportCount"],
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "listPostReports"] });
     }
   }, [data]);
 
@@ -88,25 +71,19 @@ export const ResolvePostReportButton = ({ report, ...props }) => {
   }
 
   return (
-    <BaseActionButton
-      text={isConfirming ? "Confirm?" : actionText}
-      tooltip={isConfirming ? `Really ${actionText}?` : `${actionText} Report`}
-      color={isConfirming ? "warning" : actionColor}
-      endDecorator={<DoneAllIcon />}
-      loading={isLoading}
-      size="md"
+    <ActionConfirmButton
       variant={actionVariant}
-      onClick={() => {
-        if (isConfirming) {
-          callAction({ report_id: report.post_report.id, resolved: !report.post_report.resolved });
-        } else {
-          setIsConfirming(true);
-        }
-      }}
-      sx={{
-        ml: 1, // this is needed for the thumb icon
+      baseText={actionText}
+      confirmText="Confirm?"
+      baseTooltip={`${actionText} Report`}
+      confirmTooltip={`Really ${actionText}?`}
+      baseColor={actionColor}
+      confirmColor="warning"
+      endDecorator={<DoneAllIcon />}
+      onConfirm={() => {
+        callAction({ report_id: report.post_report.id, resolved: !report.post_report.resolved });
       }}
-      {...props}
+      loading={isLoading}
     />
   );
 };