Merge pull request #80 from tgxn/develop

Develop release

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,14 @@
+---
+name: Feature Request
+about: Suggest a feature
+title: 'Feature:'
+labels: feature
+assignees: ''
+
+---
+
+**What do you want to see?**
+A clear and concise description of what you would like to see implemented.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/report-issue.md

@@ -0,0 +1,24 @@
+---
+name: Report Issue
+about: Something is broken!
+title: 'Bug:'
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Additional context**
+Add any other context or screenshots about the issue here.

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "lemmy-modder-frontend",
-  "version": "1.2.2",
+  "name": "lemmy-modder",
+  "version": "1.3.0",
   "description": "Lemmy Moderation App",
   "author": "tgxn",
   "license": "MIT",
@@ -14,42 +14,40 @@
     "test": "mocha --require @babel/register --require @babel/polyfill ./tests/api.mjs"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.5",
     "@braintree/sanitize-url": "^6.0.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/base": "^5.0.0-beta.5",
-    "@mui/icons-material": "^5.14.0",
-    "@mui/joy": "^5.0.0-beta.10",
-    "@mui/lab": "^5.0.0-alpha.148",
+    "@mui/base": "^5.0.0-beta.21",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/joy": "^5.0.0-beta.12",
+    "@mui/lab": "^5.0.0-alpha.150",
     "@reduxjs/toolkit": "^1.9.7",
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query-devtools": "^5.4.3",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
-    "jwt-decode": "^3.1.2",
     "lemmy-js-client": "^0.18.1",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.2",
     "react-moment": "^1.1.3",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.17.0",
     "redux": "^4.2.1",
-    "sass": "^1.69.2",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "sonner": "^1.0.3",
+    "sonner": "^1.1.0",
     "style-loader": "^3.3.3",
-    "tss-react": "^4.8.8",
     "url-loader": "^4.1.1",
-    "webpack": "^5.88.1",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },

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(() => {

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");

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");

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");

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) {

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

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();
 

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 [];

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 () => {

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 = [];

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();
 

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();
 

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);

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();