Develop Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-modder",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Lemmy Moderation App",
   "author": "tgxn",
   "license": "MIT",

src/components/Actions/GenButtons.jsx

@@ -188,21 +188,21 @@ export const BanUserSiteButton = ({ person, ...props }) => {
             placeholder={`${actionText.toLowerCase()} reason`}
           />,
           !person.banned ? (
-            <CheckboxElement
-              key="removeData"
-              inputText="Remove Data"
-              value={removeData}
-              setValue={setRemoveData}
-            />
-          ) : null,
-          !person ? (
             <ExpiryLengthElement
               key="banExpires"
               inputText="Ban Expires"
               value={expires}
               setValue={setExpires}
             />
           ) : null,
+          !person.banned ? (
+            <CheckboxElement
+              key="removeData"
+              inputText="Remove Data"
+              value={removeData}
+              setValue={setRemoveData}
+            />
+          ) : null,
         ]}
         // disabled={banReason == ""}
         buttonMessage={actionText}

src/components/SiteHeader.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
-import { useQueryClient } from "@tanstack/react-query";
+import { useQueryClient, useIsFetching } from "@tanstack/react-query";
 
 import { Toaster, toast } from "sonner";
 
@@ -35,8 +35,6 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import FlagIcon from "@mui/icons-material/Flag";
 import HowToRegIcon from "@mui/icons-material/HowToReg";
 
-import { logoutCurrent, selectUsers } from "../reducers/accountReducer";
-
 import { LemmyHttp } from "lemmy-js-client";
 
 import { useLemmyHttp, refreshAllData } from "../hooks/useLemmyHttp";
@@ -47,7 +45,13 @@ import { BasicInfoTooltip } from "./Tooltip.jsx";
 
 import { parseActorId } from "../utils.js";
 
-import { addUser, setAccountIsLoading, setUsers, setCurrentUser } from "../reducers/accountReducer";
+import {
+  setAccountIsLoading,
+  setCurrentUser,
+  logoutCurrent,
+  selectUsers,
+  selectAccountIsLoading,
+} from "../reducers/accountReducer";
 
 function SiteMenu() {
   // const dispatch = useDispatch();
@@ -252,10 +256,10 @@ function UserMenu() {
   const queryClient = useQueryClient();
 
   const users = useSelector(selectUsers);
+  const accountIsLoading = useSelector(selectAccountIsLoading);
 
   const { mutate: refreshMutate } = refreshAllData();
-
-  const [isLoading, setIsLoading] = React.useState(false);
+  const isFetching = useIsFetching();
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
@@ -285,12 +289,15 @@ function UserMenu() {
     userIcon = <SupervisedUserCircleIcon />;
   }
 
+  const anythingLoading = accountIsLoading == true || isFetching == true;
+
   const parsedActor = parseActorId(localPerson.actor_id);
 
   return (
     <>
       <BasicInfoTooltip title="Reload all data" placement="bottom" variant="soft">
         <IconButton
+          disabled={anythingLoading}
           size="sm"
           variant="outlined"
           color="primary"
@@ -301,7 +308,16 @@ function UserMenu() {
             refreshMutate();
           }}
         >
-          <CachedIcon />
+          {!anythingLoading && <CachedIcon />}
+          {anythingLoading && (
+            <CircularProgress
+              size="sm"
+              color="neutral"
+              sx={{
+                "--CircularProgress-size": "16px",
+              }}
+            />
+          )}
         </IconButton>
       </BasicInfoTooltip>
 
@@ -341,8 +357,6 @@ function UserMenu() {
                     queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id] });
                     dispatch(logoutCurrent());
 
-                    setIsLoading(true);
-
                     dispatch(setAccountIsLoading(true));
 
                     try {

src/hooks/useLemmyHttp.js

@@ -7,7 +7,7 @@ import { getSiteData } from "../hooks/getSiteData";
 
 import { LemmyHttp } from "lemmy-js-client";
 
-import { selectCurrentUser, updateCurrentUserData } from "../reducers/accountReducer";
+import { selectCurrentUser, updateCurrentUserData, setAccountIsLoading } from "../reducers/accountReducer";
 
 export function useLemmyHttp(callLemmyMethod, formData) {
   const currentUser = useSelector(selectCurrentUser);
@@ -82,6 +82,8 @@ export function refreshAllData() {
 
   const mutation = useMutation({
     mutationFn: async () => {
+      dispatch(setAccountIsLoading(true));
+
       const lemmyClient = new LemmyHttp(`https://${currentUser.base}`);
 
       const getSite = await lemmyClient.getSite({
@@ -91,6 +93,8 @@ export function refreshAllData() {
       dispatch(updateCurrentUserData(getSite));
 
       queryClient.invalidateQueries({ queryKey: ["lemmyHttp"] });
+
+      dispatch(setAccountIsLoading(false));
     },
   });
 

src/reducers/accountReducer.js

@@ -1,50 +1,41 @@
-export function addUser(base, jwt, site) {
-  return {
-    type: "addUser",
-    payload: { base, jwt, site },
-  };
-}
-
-export function setCurrentUser(base, jwt, site) {
-  return {
-    type: "setCurrentUser",
-    payload: { base, jwt, site },
-  };
-}
-export function updateCurrentUserData(site) {
-  return {
-    type: "updateCurrentUserData",
-    payload: { site },
-  };
-}
-
-export function logoutCurrent() {
-  return {
-    type: "logoutCurrent",
-  };
-}
-
-export function setAccountIsLoading(isLoading) {
-  return {
-    type: "setAccountIsLoading",
-    payload: { isLoading },
-  };
-}
-
-export function setUsers(users) {
-  return {
-    type: "setUsers",
-    payload: { users },
-  };
-}
-
-const lsUsers = localStorage.getItem("users");
-const cUser = localStorage.getItem("currentUser");
+export const setAccountIsLoading = (isLoading) => ({
+  type: "setAccountIsLoading",
+  payload: { isLoading },
+});
+
+export const addUser = (base, jwt, site) => ({
+  type: "addUser",
+  payload: { base, jwt, site },
+});
+
+export const setCurrentUser = (base, jwt, site) => ({
+  type: "setCurrentUser",
+  payload: { base, jwt, site },
+});
+
+export const updateCurrentUserData = (site) => ({
+  type: "updateCurrentUserData",
+  payload: { site },
+});
+
+export const logoutCurrent = () => ({
+  type: "logoutCurrent",
+});
+
+export const setUsers = (users) => ({
+  type: "setUsers",
+  payload: { users },
+});
+
+// both stored arrays include the full data for the current user, since we might not always have a saved user
+const storedUsers = localStorage.getItem("users");
+const storedCurrentUser = localStorage.getItem("currentUser");
 
 const initialState = {
   accountIsLoading: false,
-  users: lsUsers ? JSON.parse(lsUsers) : [], // { base, jwt, site }
-  currentUser: cUser ? JSON.parse(cUser) : null, // { base, jwt, site }
+
+  users: storedUsers ? JSON.parse(storedUsers) : [], // { base, jwt, site }
+  currentUser: storedCurrentUser ? JSON.parse(storedCurrentUser) : null, // { base, jwt, site }
 };
 
 const accountReducer = (state = initialState, action = {}) => {
@@ -126,6 +117,8 @@ const accountReducer = (state = initialState, action = {}) => {
 
 export default accountReducer;
 
+export const selectIsLoading = (state) => state.accountReducer.isLoading;
+export const selectAccountIsLoading = (state) => state.accountReducer.accountIsLoading;
+
 export const selectCurrentUser = (state) => state.accountReducer.currentUser;
 export const selectUsers = (state) => state.accountReducer.users;
-export const selectAccountIsLoading = (state) => state.accountReducer.accountIsLoading;