Merge pull request #117 from tgxn/feature/104-add-search-params

Feature/104 add search params

src/components/Shared/ActorMeta.jsx

@@ -27,6 +27,7 @@ import {
   selectShowAvatars,
   selectNsfwWords,
 } from "../../redux/reducer/configReducer";
+import { useNavigate } from "react-router-dom";
 
 export function PersonMetaLine({ creator, by = false, sx }) {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
@@ -131,12 +132,16 @@ export function PersonMetaTitle({ creator, sx }) {
 
 export function CommunityMetaLine({ community, showIn = false, sx }) {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
-
+  const navigate = useNavigate();
   const actorInstanceBaseUrl = community.actor_id.split("/")[2];
   const fediverseCommunityLink = community.actor_id;
 
   console.log("community", actorInstanceBaseUrl, fediverseCommunityLink);
 
+  const redirectToModlogCommunity = (community) => {
+    navigate(`/actions?community_id=${community.id}`);
+  }
+
   let localCommunityLink = `https://${baseUrl}/c/${community.name}`;
   if (baseUrl != actorInstanceBaseUrl) localCommunityLink = `${localCommunityLink}@${actorInstanceBaseUrl}`;
 
@@ -163,8 +168,13 @@ export function CommunityMetaLine({ community, showIn = false, sx }) {
           placement="top"
           variant="outlined"
           title={baseUrl == actorInstanceBaseUrl ? "Local Community" : "Remote Community"}
+          sx={{
+            cursor: "pointer",
+          }}
+          onClick={() => {
+            redirectToModlogCommunity(community)
+          }}
           arrow
-          disableInteractive
         >
           <Link href={localCommunityLink} target="_blank" rel="noopener noreferrer" sx={{ pb: 0.7, pl: 1 }}>
             <Typography component="span" sx={{ fontSize: "16px", mr: 0.25 }}>

src/components/Tooltip.jsx

@@ -28,11 +28,12 @@ import {
   selectShowAvatars,
   selectNsfwWords,
 } from "../redux/reducer/configReducer";
+import { useNavigate } from "react-router-dom";
 
 export const UserTooltip = ({ user, ...props }) => {
   console.log("user", user);
   const showAvatars = useSelector(selectShowAvatars);
-
+  const navigate = useNavigate();
   // get user modlog entries
   const {
     isLoading: userModActionsLoading,
@@ -43,6 +44,10 @@ export const UserTooltip = ({ user, ...props }) => {
     other_person_id: user.id,
   });
 
+  const redirectToModlogActedOn = (user) => {
+    navigate(`/actions?acted_on_id=${user.id}`);
+  };
+
   const fullUserString = `${user.name}@${user.actor_id.split("/")[2]}`;
 
   return (
@@ -84,10 +89,29 @@ export const UserTooltip = ({ user, ...props }) => {
         )}
       </Box>
 
-      <Divider sx={{ "--Divider-childPosition": `10%` }}>User Mod Activity</Divider>
+      <Divider
+        sx={{ "--Divider-childPosition": `10%`, cursor: "pointer" }}
+        onClick={() => {
+          redirectToModlogActedOn(user);
+        }}
+      >
+        User Mod Activity
+      </Divider>
 
       {/* List of actions taken on this user */}
-      <Box sx={{ display: "flex", flexDirection: "column", maxWidth: 500, justifyContent: "center", p: 1 }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: 500,
+          justifyContent: "center",
+          p: 1,
+          cursor: "pointer",
+        }}
+        onClick={() => {
+          redirectToModlogActedOn(user);
+        }}
+      >
         {(userModActionsLoading || userModActionsFetching) && <Typography>Loading...</Typography>}
         {userModActionsError && <Typography>Error: {userModActionsError.message}</Typography>}
         {userModActionsData && (

src/pages/Actions.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useSelector } from "react-redux";
 import { useInView } from "react-intersection-observer";
@@ -20,9 +20,11 @@ import { parseActorId } from "../utils";
 
 import ModLogAccordians from "../components/Activity/ModLogAccordians";
 import { selectModLogType } 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 locaUserParsedActor = parseActorId(localPerson.actor_id);
 
@@ -31,6 +33,22 @@ export default function Actions() {
   const [limitLocalInstance, setLimitLocalInstance] = React.useState(true);
   const [limitCommunityId, setLimitCommunityId] = React.useState(null);
   const [limitModId, setLimitModId] = React.useState(null);
+  const [actedOnId, setActedOnID] = React.useState(null);
+
+  useEffect(() => {
+    if (searchParams.get("community_id")) {
+      setLimitCommunityId(searchParams.get("community_id"));
+    }
+
+    if (searchParams.get("mod_id")) {
+      setLimitModId(searchParams.get("mod_id"));
+    }
+
+    if (searchParams.get("acted_on_id")) {
+      setActedOnID(searchParams.get("acted_on_id"));
+    }
+  }, [searchParams]);
+
 
   const { ref, inView, entry } = useInView({
     threshold: 0,
@@ -50,6 +68,8 @@ export default function Actions() {
     callLemmyMethod: "getModlog",
     formData: {
       community_id: limitCommunityId ? limitCommunityId : null,
+      mod_person_id: limitModId ? limitModId : null,
+      other_person_id: actedOnId ? actedOnId : null,
     },
     // if any of the pages have 50 results, there is another page
     hasNextPageFunction: (data, perPage) => {
@@ -134,7 +154,6 @@ export default function Actions() {
           actionTime = modLogItem.mod_ban.when_;
           affectedActorId = modLogItem.banned_person.actor_id;
           break;
-
         case "admin_purged_persons":
           actionTime = modLogItem.admin_purge_person.when_;
           // affectedActorId = modLogItem.admin_purge_person.local_community;