Merge pull request #123 from tgxn/feature/118-make-links-shareable

Added search params to the Mod Logs and Approvals   and reports page

src/pages/Actions.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useInView } from "react-intersection-observer";
 
 import Box from "@mui/joy/Box";
@@ -19,13 +19,15 @@ import { getSiteData } from "../hooks/getSiteData";
 import { parseActorId } from "../utils";
 
 import ModLogAccordians from "../components/Activity/ModLogAccordians";
-import { selectModLogType } from "../redux/reducer/configReducer";
+import { selectModLogType, setConfigItem } from "../redux/reducer/configReducer";
 import { useSearchParams } from "react-router-dom";
 
 export default function Actions() {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
   const [searchParams, setSearchParams] = useSearchParams();
 
+  const dispatch = useDispatch();
+
   const locaUserParsedActor = parseActorId(localPerson.actor_id);
 
   const modLogType = useSelector(selectModLogType);
@@ -40,16 +42,37 @@ export default function Actions() {
       setLimitCommunityId(searchParams.get("community_id"));
     }
 
+    if (searchParams.get("mod_log_type")) {
+      dispatch(setConfigItem("modLogType",searchParams.get("mod_log_type")));
+    }
+
+
     if (searchParams.get("mod_id")) {
       setLimitModId(searchParams.get("mod_id"));
     }
 
     if (searchParams.get("acted_on_id")) {
       setActedOnID(searchParams.get("acted_on_id"));
     }
-  }, [searchParams]);
-
 
+    if(searchParams.get("local_instance")) {
+      setLimitLocalInstance(searchParams.get("local_instance") == "true");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (modLogType !== null) {
+      setSearchParams({ mod_log_type: modLogType });
+    }
+
+    if (limitLocalInstance !== null && limitLocalInstance !== true) {
+      setSearchParams({ local_instance: limitLocalInstance });
+    } else {
+      searchParams.delete("local_instance");
+      setSearchParams(searchParams);
+    }
+  }, [modLogType, limitLocalInstance]);
+
   const { ref, inView, entry } = useInView({
     threshold: 0,
   });

src/pages/Approvals.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import Box from "@mui/joy/Box";
 import Button from "@mui/joy/Button";
@@ -19,7 +19,8 @@ import useLemmyInfinite from "../hooks/useLemmyInfinite";
 import ApprovalsList from "../components/ApprovalsList.jsx";
 
 import { getSiteData } from "../hooks/getSiteData";
-import { selectHideReadApprovals } from "../redux/reducer/configReducer";
+import { selectHideReadApprovals, setConfigItem } from "../redux/reducer/configReducer";
+import { useSearchParams } from "react-router-dom";
 
 export default function Approvals() {
   const hideReadApprovals = useSelector(selectHideReadApprovals);
@@ -32,6 +33,8 @@ export default function Approvals() {
     threshold: 0,
   });
 
+  const dispatch = useDispatch();
+
   const {
     isLoading: registrationsLoading,
     isFetching: registrationsFetching,
@@ -51,6 +54,25 @@ export default function Approvals() {
     perPage: 10,
   });
 
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  React.useEffect(() => {
+    if(searchParams.has("unread_only")) {
+        dispatch(setConfigItem("hideReadApprovals", searchParams.get("unread_only") == "true"));
+    }
+}, []);
+
+
+  React.useEffect(() => {
+    if(hideReadApprovals){
+      setSearchParams({ unread_only: hideReadApprovals });
+    } else {
+      searchParams.delete("unread_only");
+      setSearchParams(searchParams);
+    }
+  }, [hideReadApprovals]);
+
+
   const fullData = React.useMemo(() => {
     if (!registrationsData) return [];
 

src/pages/Reports.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import Box from "@mui/joy/Box";
 import Button from "@mui/joy/Button";
@@ -18,6 +18,9 @@ import useLemmyReports from "../hooks/useLemmyReports";
 import ReportsList from "../components/ReportsList.jsx";
 
 import { getSiteData } from "../hooks/getSiteData";
+import { selectFilterCommunity, selectFilterType, selectShowResolved, setConfigItem } from "../redux/reducer/configReducer.js";
+import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
 
 export default function Reports() {
   // const {
@@ -53,6 +56,53 @@ export default function Reports() {
   const isLoading = loadingReports;
   const isError = isReportsError;
 
+  const filterCommunity = useSelector(selectFilterCommunity);
+  const filterType = useSelector(selectFilterType);
+  const showResolved = useSelector(selectShowResolved);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  useEffect(() => {
+    if (searchParams.filter_community) {
+      dispatch(setConfigItem("filterCommunity", searchParams.filter_community));
+    }
+    if (searchParams.mod_log_type) {
+      dispatch(setConfigItem("filterType", searchParams.filter_type));
+    }
+    if (searchParams.show_resolved) {
+      dispatch(setConfigItem("showResolved", true));
+    }
+  }, [])
+
+  const [query, setQuery] = useState({});
+
+  useEffect(() => {
+    setSearchParams(query);
+  }, [query])
+
+  useEffect(() => {
+    if (filterCommunity) {
+
+      setQuery({ ...query, filter_community: filterCommunity });
+    }
+  }, [filterCommunity])
+
+  useEffect(() => {
+    if (filterType) {
+      setQuery({ ...query, filter_type: filterCommunity });
+    }
+  }, [filterType])
+
+  useEffect(() => {
+    if (showResolved) {
+      setQuery({ ...query, show_resolved: showResolved });
+    } else {
+      const { show_resolved, ...rest } = query;
+      setQuery({ ...rest });
+    }
+  }, [showResolved])
+
+
   if (userRole == "user") {
     return (
       <Box