site header is better

tgxn · Oct 11, 2023 · 2153791 · 2153791
1 parent 0608b8a
commit 2153791
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 48 deletions.
diff --git a/src/components/Actions/CommentButtons.jsx b/src/components/Actions/CommentButtons.jsx
@@ -16,6 +16,21 @@ import {
 export const ResolveCommentReportButton = ({ report, ...props }) => {
   const [confirmOpen, setConfirmOpen] = React.useState(false);
 
+  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 queryClient = useQueryClient();
 
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolveCommentReport");

diff --git a/src/components/Actions/RegistrationButtons.jsx b/src/components/Actions/RegistrationButtons.jsx
@@ -44,38 +44,29 @@ export const ApproveButton = ({ registration, ...props }) => {
     if (isSuccess) {
       console.log("useLemmyHttpAction", "onSuccess", data);
 
-      if (!hideReadApprovals) {
-        queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
-      } else {
-        queryClient.setQueryData(
-          ["lemmyHttp", localPerson.id, ["unread_only", true], "listRegistrationApplications"],
-          (old) => {
-            // remove it from the array
-            const newPages = old.pages.map((page) => {
-              const newData = page.data.filter((registrationItem) => {
-                return (
-                  registrationItem.registration_application.id !== registration.registration_application.id
-                );
-              });
-
-              return {
-                ...page,
-                data: newData,
-              };
-            });
-
-            // invalidate application count
-            queryClient.invalidateQueries({
-              queryKey: ["lemmyHttp", localPerson.id, "getUnreadRegistrationApplicationCount"],
-            });
+      queryClient.setQueryData(["lemmyHttp", localPerson.id, "listRegistrationApplications"], (old) => {
+        // remove it from the array
+        const newPages = old.pages.map((page) => {
+          const newData = page.data.filter((registrationItem) => {
+            return registrationItem.registration_application.id !== registration.registration_application.id;
+          });
 
-            return {
-              ...old,
-              pages: newPages,
-            };
-          },
-        );
-      }
+          return {
+            ...page,
+            data: newData,
+          };
+        });
+
+        // invalidate application count
+        queryClient.invalidateQueries({
+          queryKey: ["lemmyHttp", localPerson.id, "getUnreadRegistrationApplicationCount"],
+        });
+
+        return {
+          ...old,
+          pages: newPages,
+        };
+      });
 
       setIsConfirming(false);
 

diff --git a/src/components/ListItem/Common.jsx b/src/components/ListItem/Common.jsx
@@ -45,13 +45,13 @@ export function ReportListItem({ itemType, report, children }) {
     );
   } else if (itemType == "comment") {
     resolved = report.comment_report.resolved;
-    itemColor = "primary";
+    itemColor = "success";
     itemIcon = (
       <Tooltip
         title={`Comment: ${report.community.actor_id.split("/")[2]}/c/${report.community.name}`}
         variant="outlined"
         placement="right"
-        color="primary"
+        color="success"
       >
         <ForumIcon fontSize="md" />
       </Tooltip>

diff --git a/src/components/SiteHeader.jsx b/src/components/SiteHeader.jsx
@@ -96,13 +96,25 @@ function SiteMenu() {
           endDecorator={
             siteData && (
               <Chip
-                startDecorator={reportCountsLoading ? <CircularProgress size="sm" /> : <FlagIcon />}
-                color={siteData && totalReports > 0 ? "danger" : "success"}
+                startDecorator={
+                  reportCountsLoading ? (
+                    <CircularProgress
+                      size="sm"
+                      color="neutral"
+                      sx={{
+                        "--CircularProgress-size": "16px",
+                      }}
+                    />
+                  ) : (
+                    <FlagIcon />
+                  )
+                }
+                color={reportCountsLoading ? "warning" : siteData && totalReports > 0 ? "danger" : "success"}
                 sx={{
                   borderRadius: 6,
                 }}
               >
-                {totalReports > 0 ? totalReports : "0"}
+                {!reportCountsLoading && (totalReports > 0 ? totalReports : "0")}
               </Chip>
             )
           }
@@ -126,15 +138,33 @@ function SiteMenu() {
           endDecorator={
             siteData && (
               <Chip
-                startDecorator={regAppCountIsLoading ? <CircularProgress size="sm" /> : <HowToRegIcon />}
-                color={siteData && regCountAppData?.registration_applications > 0 ? "danger" : "success"}
+                startDecorator={
+                  regAppCountIsLoading ? (
+                    <CircularProgress
+                      size="sm"
+                      color="neutral"
+                      sx={{
+                        "--CircularProgress-size": "16px",
+                      }}
+                    />
+                  ) : (
+                    <HowToRegIcon />
+                  )
+                }
+                color={
+                  regAppCountIsLoading
+                    ? "warning"
+                    : siteData && regCountAppData?.registration_applications > 0
+                    ? "danger"
+                    : "success"
+                }
                 sx={{
                   borderRadius: 6,
                 }}
               >
                 {regCountAppData?.registration_applications !== undefined
                   ? regCountAppData.registration_applications
-                  : "0"}
+                  : ""}
               </Chip>
             )
           }

diff --git a/src/hooks/useLemmyInfinite.js b/src/hooks/useLemmyInfinite.js
@@ -45,7 +45,7 @@ export default function useLemmyInfinite({
     fetchPreviousPage,
     hasNextPage,
   } = useInfiniteQuery({
-    queryKey: ["lemmyHttp", localPerson.id, formDataArray, callLemmyMethod],
+    queryKey: ["lemmyHttp", localPerson.id, callLemmyMethod, formDataArray],
     queryFn: async ({ pageParam = 1, ...rest }, optional) => {
       console.log("LemmyHttp inner infinite", callLemmyMethod, pageParam, rest, optional);
 

diff --git a/src/pages/Reports.jsx b/src/pages/Reports.jsx
@@ -15,12 +15,12 @@ import useLemmyReports from "../hooks/useLemmyReports";
 import ReportsList from "../components/ReportsList.jsx";
 
 export default function Reports() {
-  const {
-    isLoading: reportCountsLoading,
-    isFetching: reportCountsFetching,
-    error: reportCountsError,
-    data: reportCountsData,
-  } = useLemmyHttp("getReportCount");
+  // const {
+  //   isLoading: reportCountsLoading,
+  //   isFetching: reportCountsFetching,
+  //   error: reportCountsError,
+  //   data: reportCountsData,
+  // } = useLemmyHttp("getReportCount");
 
   const { ref, inView, entry } = useInView({
     /* Optional options */
@@ -43,8 +43,8 @@ export default function Reports() {
     }
   }, [inView]);
 
-  const isLoading = reportCountsLoading || loadingReports;
-  const isError = reportCountsError || isReportsError;
+  const isLoading = loadingReports;
+  const isError = isReportsError;
 
   if (isLoading) {
     return (