Merge pull request #76 from LemmyWorld/main

Improvement: Added Select Variables
tgxn · Oct 31, 2023 · 80a1d88 · 80a1d88
2 parents f09e917 + c65b420
commit 80a1d88
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 36 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -23,12 +23,14 @@ import Reports from "./pages/Reports";
 import Login from "./pages/Login";
 
 import AppStore from "./store";
+import { selectIsInElectron } from "./reducers/configReducer";
+import { selectCurrentUser } from "./reducers/accountReducer";
 
 function PageRouter() {
   const theme = useTheme();
 
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
-  const isInElectron = useSelector((state) => state.configReducer.isInElectron);
+  const currentUser = useSelector(selectCurrentUser);
+  const isInElectron = useSelector(selectIsInElectron);
 
   // when we get a jwt, set the cookie in electron
   React.useEffect(() => {

diff --git a/src/components/Actions/CommentButtons.jsx b/src/components/Actions/CommentButtons.jsx
@@ -15,11 +15,12 @@ import {
   ConfirmDialog,
 } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
+import { selectShowResolved } from "../../reducers/configReducer.js";
 
 export const ResolveCommentReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
 
-  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const showResolved = useSelector(selectShowResolved);
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolveCommentReport");

diff --git a/src/components/Actions/PMButtons.jsx b/src/components/Actions/PMButtons.jsx
@@ -15,13 +15,14 @@ import {
   ConfirmDialog,
 } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
+import { selectShowResolved } from "../../reducers/configReducer.js";
 
 // allow resolving / unresolving a post report
 // resolvePrivateMessageReport
 export const ResolvePMReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
 
-  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const showResolved = useSelector(selectShowResolved);
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolvePrivateMessageReport");

diff --git a/src/components/Actions/PostButtons.jsx b/src/components/Actions/PostButtons.jsx
@@ -17,12 +17,13 @@ import {
   ConfirmDialog,
 } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
+import { selectShowResolved } from "../../reducers/configReducer.js";
 
 // allow resolving / unresolving a post report
 export const ResolvePostReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
 
-  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const showResolved = useSelector(selectShowResolved);
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
   const { data, callAction, isSuccess, isLoading, error } = useLemmyHttpAction("resolvePostReport");

diff --git a/src/components/Actions/RegistrationButtons.jsx b/src/components/Actions/RegistrationButtons.jsx
@@ -13,6 +13,7 @@ import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 import { getSiteData } from "../../hooks/getSiteData";
 
 import { BaseActionButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
+import { selectHideReadApprovals } from "../../reducers/configReducer.js";
 
 export const ApproveButton = ({ registration, ...props }) => {
   const queryClient = useQueryClient();
@@ -24,7 +25,7 @@ export const ApproveButton = ({ registration, ...props }) => {
     "approveRegistrationApplication",
   );
 
-  const hideReadApprovals = useSelector((state) => state.configReducer.hideReadApprovals);
+  const hideReadApprovals = useSelector(selectHideReadApprovals);
 
   const [isConfirming, setIsConfirming] = React.useState(false);
 
@@ -172,7 +173,7 @@ export const DenyButton = ({ registration, ...props }) => {
   const [confirmOpen, setConfirmOpen] = React.useState(false);
   const [denyReason, setDenyReason] = React.useState("");
 
-  const hideReadApprovals = useSelector((state) => state.configReducer.hideReadApprovals);
+  const hideReadApprovals = useSelector(selectHideReadApprovals);
 
   React.useEffect(() => {
     if (isSuccess) {

diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx
@@ -10,14 +10,14 @@ import Checkbox from "@mui/joy/Checkbox";
 
 import Chip from "@mui/joy/Chip";
 
-import { setConfigItem } from "../reducers/configReducer";
+import { selectFilterCommunity, selectFilterType, selectHideReadApprovals, selectModLogType, selectShowRemoved, selectShowResolved, setConfigItem } from "../reducers/configReducer";
 
 import { getSiteData } from "../hooks/getSiteData";
 import { getModLogTypeNames } from "../utils";
 
 export function FilterCommunity() {
   const dispatch = useDispatch();
-  const filterCommunity = useSelector((state) => state.configReducer.filterCommunity);
+  const filterCommunity = useSelector(selectFilterCommunity);
 
   const { modCommms } = getSiteData();
 
@@ -84,7 +84,7 @@ export function FilterCommunity() {
 
 export function FilterTypeSelect() {
   const dispatch = useDispatch();
-  const filterType = useSelector((state) => state.configReducer.filterType);
+  const filterType = useSelector(selectFilterType);
 
   return (
     <Select
@@ -119,7 +119,7 @@ export function FilterTypeSelect() {
 
 export function FilterModLogType() {
   const dispatch = useDispatch();
-  const modLogType = useSelector((state) => state.configReducer.modLogType);
+  const modLogType = useSelector(selectModLogType);
 
   const modlogTypes = getModLogTypeNames();
 
@@ -148,7 +148,7 @@ export function FilterModLogType() {
 
 export function FilterResolved() {
   const dispatch = useDispatch();
-  const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const showResolved = useSelector(selectShowResolved);
 
   return (
     <Checkbox
@@ -164,7 +164,7 @@ export function FilterResolved() {
 
 export function HideRead() {
   const dispatch = useDispatch();
-  const hideReadApprovals = useSelector((state) => state.configReducer.hideReadApprovals);
+  const hideReadApprovals = useSelector(selectHideReadApprovals);
 
   return (
     <Checkbox
@@ -180,7 +180,7 @@ export function HideRead() {
 
 export function FilterRemoved() {
   const dispatch = useDispatch();
-  const showRemoved = useSelector((state) => state.configReducer.showRemoved);
+  const showRemoved = useSelector(selectShowRemoved);
 
   return (
     <Checkbox

diff --git a/src/components/SiteHeader.jsx b/src/components/SiteHeader.jsx
@@ -40,7 +40,7 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import FlagIcon from "@mui/icons-material/Flag";
 import HowToRegIcon from "@mui/icons-material/HowToReg";
 
-import { logoutCurrent } from "../reducers/accountReducer";
+import { logoutCurrent, selectUsers } from "../reducers/accountReducer";
 
 import { LemmyHttp } from "lemmy-js-client";
 
@@ -226,7 +226,7 @@ function UserMenu() {
 
   const queryClient = useQueryClient();
 
-  const users = useSelector((state) => state.accountReducer.users);
+  const users = useSelector(selectUsers);
 
   const { mutate: refreshMutate } = refreshAllData();
 

diff --git a/src/hooks/getSiteData.js b/src/hooks/getSiteData.js
@@ -1,10 +1,11 @@
 import { useMemo } from "react";
 
 import { useSelector } from "react-redux";
+import { selectCurrentUser } from "../reducers/accountReducer";
 
 // accessor for the site data returned at the time of login
 export function getSiteData() {
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
+  const currentUser = useSelector(selectCurrentUser);
 
   const modCommms = useMemo(() => {
     if (!currentUser) return [];

diff --git a/src/hooks/useLemmyHttp.js b/src/hooks/useLemmyHttp.js
@@ -7,10 +7,10 @@ import { getSiteData } from "../hooks/getSiteData";
 
 import { LemmyHttp } from "lemmy-js-client";
 
-import { updateCurrentUserData } from "../reducers/accountReducer";
+import { selectCurrentUser, updateCurrentUserData } from "../reducers/accountReducer";
 
 export function useLemmyHttp(callLemmyMethod, formData) {
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
+  const currentUser = useSelector(selectCurrentUser);
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
@@ -45,7 +45,7 @@ export function useLemmyHttp(callLemmyMethod, formData) {
 }
 
 export function useLemmyHttpAction(callLemmyMethod) {
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
+  const currentUser = useSelector(selectCurrentUser);
 
   const mutation = useMutation({
     mutationFn: async (formData) => {
@@ -77,7 +77,7 @@ export function refreshAllData() {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
 
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
+  const currentUser = useSelector(selectCurrentUser);
 
   const mutation = useMutation({
     mutationFn: async () => {

diff --git a/src/hooks/useLemmyInfinite.js b/src/hooks/useLemmyInfinite.js
@@ -7,6 +7,7 @@ import { getSiteData } from "../hooks/getSiteData";
 import { useSelector } from "react-redux";
 
 import { LemmyHttp } from "lemmy-js-client";
+import { selectCurrentUser } from "../reducers/accountReducer";
 
 export default function useLemmyInfinite({
   callLemmyMethod,
@@ -16,8 +17,8 @@ export default function useLemmyInfinite({
   enabled = true,
   perPage = 25,
 }) {
-  const currentUser = useSelector((state) => state.accountReducer.currentUser);
-  // const showResolved = useSelector((state) => state.configReducer.showResolved);
+  const currentUser = useSelector(selectCurrentUser);
+  // const showResolved = useSelector(selectShowResolved);
 
   const formDataArray = useMemo(() => {
     const formDataArray = [];

diff --git a/src/hooks/useLemmyModLog.js b/src/hooks/useLemmyModLog.js
@@ -10,11 +10,12 @@ import { LemmyHttp } from "lemmy-js-client";
 
 import useLemmyInfinite from "./useLemmyInfinite";
 import { getModLogTypeNames } from "../utils";
+import { selectModLogCommunityId, selectModLogType } from "../reducers/configReducer";
 
 // gets paginated / infinite list of reports from lemmy
 export default function useLemmyModLog() {
-  const modLogType = useSelector((state) => state.configReducer.modLogType);
-  const modLogCommunityId = useSelector((state) => state.configReducer.modLogCommunityId);
+  const modLogType = useSelector(selectModLogType);
+  const modLogCommunityId = useSelector(selectModLogCommunityId);
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 

diff --git a/src/hooks/useLemmyReports.js b/src/hooks/useLemmyReports.js
@@ -9,14 +9,15 @@ import { useSelector } from "react-redux";
 import { LemmyHttp } from "lemmy-js-client";
 
 import useLemmyInfinite from "./useLemmyInfinite";
+import { selectFilterCommunity, selectFilterType, selectOrderBy, selectShowRemoved, selectShowResolved } from "../reducers/configReducer";
 
 // gets paginated / infinite list of reports from lemmy
 export default function useLemmyReports() {
-  const orderBy = useSelector((state) => state.configReducer.orderBy);
-  const filterType = useSelector((state) => state.configReducer.filterType);
-  const filterCommunity = useSelector((state) => state.configReducer.filterCommunity);
-  const showResolved = useSelector((state) => state.configReducer.showResolved);
-  // const showRemoved = useSelector((state) => state.configReducer.showRemoved);
+  const orderBy = useSelector(selectOrderBy);
+  const filterType = useSelector(selectFilterType);
+  const filterCommunity = useSelector(selectFilterCommunity);
+  const showResolved = useSelector(selectShowResolved);
+  // const showRemoved = useSelector(selectShowRemoved);
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 

diff --git a/src/pages/Actions.jsx b/src/pages/Actions.jsx
@@ -19,13 +19,14 @@ import { getSiteData } from "../hooks/getSiteData";
 import { parseActorId } from "../utils";
 
 import ModLogAccordians from "../components/Activity/ModLogAccordians";
+import { selectModLogType } from "../reducers/configReducer";
 
 export default function Actions() {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
   const locaUserParsedActor = parseActorId(localPerson.actor_id);
 
-  const modLogType = useSelector((state) => state.configReducer.modLogType);
+  const modLogType = useSelector(selectModLogType);
 
   const [limitLocalInstance, setLimitLocalInstance] = React.useState(true);
   const [limitCommunityId, setLimitCommunityId] = React.useState(null);

diff --git a/src/pages/Approvals.jsx b/src/pages/Approvals.jsx
@@ -18,9 +18,10 @@ import useLemmyInfinite from "../hooks/useLemmyInfinite";
 import ApprovalsList from "../components/ApprovalsList.jsx";
 
 import { getSiteData } from "../hooks/getSiteData";
+import { selectHideReadApprovals } from "../reducers/configReducer";
 
 export default function Approvals() {
-  const hideReadApprovals = useSelector((state) => state.configReducer.hideReadApprovals);
+  const hideReadApprovals = useSelector(selectHideReadApprovals);
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -24,19 +24,20 @@ import { LemmyHttp } from "lemmy-js-client";
 
 import { useLemmyUserDataAction } from "../hooks/useLemmyHttp";
 
-import { addUser, setAccountIsLoading, setUsers, setCurrentUser } from "../reducers/accountReducer";
+import { addUser, setAccountIsLoading, setUsers, setCurrentUser, selectAccountIsLoading, selectUsers } from "../reducers/accountReducer";
 
 import { BasicInfoTooltip } from "../components/Tooltip.jsx";
+import { selectIsInElectron } from "../reducers/configReducer";
 
 export default function LoginForm() {
   const domainLock = window?.RuntimeConfig?.DomainLock != "" ? window?.RuntimeConfig?.DomainLock : false;
   console.log("RuntimeConfig DomainLock", domainLock);
 
   const dispatch = useDispatch();
 
-  const accountIsLoading = useSelector((state) => state.accountReducer.accountIsLoading);
-  const users = useSelector((state) => state.accountReducer.users);
-  const isInElectron = useSelector((state) => state.configReducer.isInElectron);
+  const accountIsLoading = useSelector(selectAccountIsLoading);
+  const users = useSelector(selectUsers);
+  const isInElectron = useSelector(selectIsInElectron);
 
   // form state
   const [instanceBase, setInstanceBase] = React.useState(domainLock ? domainLock : "");

diff --git a/src/reducers/accountReducer.js b/src/reducers/accountReducer.js
@@ -125,3 +125,7 @@ const accountReducer = (state = initialState, action = {}) => {
 };
 
 export default accountReducer;
+
+export const selectCurrentUser = (state) => state.accountReducer.currentUser;
+export const selectUsers = (state) => state.accountReducer.users;
+export const selectAccountIsLoading = (state) => state.accountReducer.accountIsLoading;
diff --git a/src/reducers/configReducer.js b/src/reducers/configReducer.js
@@ -51,3 +51,14 @@ const configReducer = (state = initialState, action = {}) => {
 };
 
 export default configReducer;
+
+
+export const selectIsInElectron = (state) => state.configReducer.isInElectron;
+export const selectFilterCommunity = (state) => state.configReducer.filterCommunity;
+export const selectFilterType = (state) => state.configReducer.filterType;
+export const selectModLogType = (state) => state.configReducer.modLogType;
+export const selectShowResolved = (state) => state.configReducer.showResolved;
+export const selectHideReadApprovals = (state) => state.configReducer.hideReadApprovals;
+export const selectShowRemoved = (state) => state.configReducer.showRemoved;
+export const selectModLogCommunityId = (state) => state.configReducer.modLogCommunityId;
+export const selectOrderBy = (state) => state.configReducer.orderBy;