diff --git a/src/components/ApprovalsList.jsx b/src/components/ApprovalsList.jsx index 28327e5..36bb8e4 100644 --- a/src/components/ApprovalsList.jsx +++ b/src/components/ApprovalsList.jsx @@ -16,7 +16,7 @@ import ReportIcon from "@mui/icons-material/Report"; import { MomentAdjustedTimeAgo, SquareChip } from "./Display.jsx"; -import { PersonMetaLine, ReportDetails } from "./ListItem/Common.jsx"; +import { PersonMetaLine } from "./Shared/ActorMeta.jsx"; import { ApproveButton, DenyButton } from "./Actions/RegistrationButtons.jsx"; diff --git a/src/components/Display.jsx b/src/components/Display.jsx index e18eae9..474f410 100644 --- a/src/components/Display.jsx +++ b/src/components/Display.jsx @@ -4,8 +4,8 @@ import Moment from "react-moment"; import { sanitizeUrl } from "@braintree/sanitize-url"; +import Avatar from "@mui/joy/Avatar"; import Typography from "@mui/joy/Typography"; -import Tooltip from "@mui/joy/Tooltip"; import Link from "@mui/joy/Link"; import Chip from "@mui/joy/Chip"; @@ -135,3 +135,19 @@ export const FediverseChipLink = ({ href, size = "md", ...props }) => { ); }; + +export function UserAvatar({ source, ...props }) { + return ( + + ); +} diff --git a/src/components/ListItem/Comment.jsx b/src/components/ListItem/Comment.jsx index 7715fb1..93f4271 100644 --- a/src/components/ListItem/Comment.jsx +++ b/src/components/ListItem/Comment.jsx @@ -15,7 +15,8 @@ import { SquareChip } from "../Display.jsx"; import { ResolveCommentReportButton, RemoveCommentButton } from "../Actions/CommentButtons.jsx"; import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx"; -import { PersonMetaLine, CommunityMetaLine, ReportDetails } from "./Common.jsx"; +import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx"; +import { ReportDetails } from "../Shared/ReportDetails.jsx"; import { MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink, UpvoteDownvoteChip } from "../Display.jsx"; diff --git a/src/components/ListItem/PM.jsx b/src/components/ListItem/PM.jsx index b8be4c4..564d989 100644 --- a/src/components/ListItem/PM.jsx +++ b/src/components/ListItem/PM.jsx @@ -14,7 +14,8 @@ import { MomentAdjustedTimeAgo, SquareChip } from "../Display.jsx"; import { ResolvePMReportButton } from "../Actions/PMButtons.jsx"; import { BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx"; -import { PersonMetaLine, ReportDetails } from "./Common.jsx"; +import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx"; +import { ReportDetails } from "../Shared/ReportDetails.jsx"; const PMContentDetail = ({ report }) => { return ( diff --git a/src/components/ListItem/Post.jsx b/src/components/ListItem/Post.jsx index 83acd6a..e5a5f8c 100644 --- a/src/components/ListItem/Post.jsx +++ b/src/components/ListItem/Post.jsx @@ -26,7 +26,8 @@ import { ResolvePostReportButton, RemovePostButton, PurgePostButton } from "../A import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx"; -import { PersonMetaLine, CommunityMetaLine, ReportDetails } from "./Common.jsx"; +import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx"; +import { ReportDetails } from "../Shared/ReportDetails.jsx"; import { getSiteData } from "../../hooks/getSiteData"; diff --git a/src/components/ReportsList.jsx b/src/components/ReportsList.jsx index 7d58b82..8e64022 100644 --- a/src/components/ReportsList.jsx +++ b/src/components/ReportsList.jsx @@ -1,6 +1,14 @@ import React from "react"; +import Card from "@mui/joy/Card"; + import Box from "@mui/joy/Box"; +import Badge from "@mui/joy/Badge"; +import Tooltip from "@mui/joy/Tooltip"; + +import StickyNote2Icon from "@mui/icons-material/StickyNote2"; +import ForumIcon from "@mui/icons-material/Forum"; +import DraftsIcon from "@mui/icons-material/Drafts"; import SoapIcon from "@mui/icons-material/Soap"; @@ -8,7 +16,104 @@ import PostReportItem from "./ListItem/Post.jsx"; import CommentReportItem from "./ListItem/Comment.jsx"; import PMReportItem from "./ListItem/PM.jsx"; -import { ReportListItem } from "./ListItem/Common.jsx"; +function ReportListItem({ itemType, report, children }) { + let itemColor; + let itemIcon; + let resolved = true; + + // const parsedActor = parseActorId(report.actor_id); + + if (itemType == "post") { + resolved = report.post_report.resolved; + itemColor = "primary"; + itemIcon = ( + + + + ); + } else if (itemType == "comment") { + resolved = report.comment_report.resolved; + itemColor = "success"; + itemIcon = ( + + + + ); + } else if (itemType == "pm") { + resolved = report.private_message_report.resolved; + itemColor = "warning"; + itemIcon = ( + + + + ); + } + + return ( + + + {/* {isFetching && ( + + Loading... + + )} */} + {children} + + + ); +} export default function ReportsList({ reportsList }) { if (!reportsList || reportsList.length == 0) { diff --git a/src/components/ListItem/Common.jsx b/src/components/Shared/ActorMeta.jsx similarity index 57% rename from src/components/ListItem/Common.jsx rename to src/components/Shared/ActorMeta.jsx index de70dde..ee1e19c 100644 --- a/src/components/ListItem/Common.jsx +++ b/src/components/Shared/ActorMeta.jsx @@ -1,146 +1,23 @@ import React from "react"; -import Alert from "@mui/joy/Alert"; -import Card from "@mui/joy/Card"; - -import Avatar from "@mui/joy/Avatar"; import Box from "@mui/joy/Box"; import Typography from "@mui/joy/Typography"; -import Badge from "@mui/joy/Badge"; import Tooltip from "@mui/joy/Tooltip"; - import Link from "@mui/joy/Link"; -import StickyNote2Icon from "@mui/icons-material/StickyNote2"; -import ForumIcon from "@mui/icons-material/Forum"; -import DraftsIcon from "@mui/icons-material/Drafts"; - import SecurityIcon from "@mui/icons-material/Security"; import BlockIcon from "@mui/icons-material/Block"; import SmartToyIcon from "@mui/icons-material/SmartToy"; import DeleteIcon from "@mui/icons-material/Delete"; -import { SquareChip, MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink } from "../Display.jsx"; +import { SquareChip, UserAvatar, FediverseChipLink } from "../Display.jsx"; import { UserTooltip } from "../Tooltip.jsx"; import { parseActorId } from "../../utils.js"; import { getSiteData } from "../../hooks/getSiteData"; -export function UserAvatar({ source, ...props }) { - return ( - - ); -} - -export function ReportListItem({ itemType, report, children }) { - let itemColor; - let itemIcon; - let resolved = true; - - // const parsedActor = parseActorId(report.actor_id); - - if (itemType == "post") { - resolved = report.post_report.resolved; - itemColor = "primary"; - itemIcon = ( - - - - ); - } else if (itemType == "comment") { - resolved = report.comment_report.resolved; - itemColor = "success"; - itemIcon = ( - - - - ); - } else if (itemType == "pm") { - resolved = report.private_message_report.resolved; - itemColor = "warning"; - itemIcon = ( - - - - ); - } - - return ( - - - {/* {isFetching && ( - - Loading... - - )} */} - {children} - - - ); -} +import { PersonMetaChips } from "./UserChips.jsx"; export function PersonMetaLine({ creator, by = false, sx }) { const { baseUrl, siteData, localPerson, userRole } = getSiteData(); @@ -182,7 +59,7 @@ export function PersonMetaLine({ creator, by = false, sx }) { variant="outlined" title={} arrow - disableInteractive + // disableInteractive > @@ -196,7 +73,8 @@ export function PersonMetaLine({ creator, by = false, sx }) { {/* Post Author Meta */} - + + {/* {baseUrl != actorInstanceBaseUrl && } {creator.admin && ( @@ -222,7 +100,7 @@ export function PersonMetaLine({ creator, by = false, sx }) { {creator.deleted && ( } /> )} - + */} ); } @@ -295,37 +173,3 @@ export function CommunityMetaLine({ community, showIn = false, sx }) { ); } - -export function ReportDetails({ report, creator }) { - return ( - -
- - {report.published && ( - - Reported {report.published} - - )} - - - - - {report.reason} - -
- - ); -} diff --git a/src/components/Shared/ReportDetails.jsx b/src/components/Shared/ReportDetails.jsx new file mode 100644 index 0000000..a7117ad --- /dev/null +++ b/src/components/Shared/ReportDetails.jsx @@ -0,0 +1,42 @@ +import React from "react"; + +import Alert from "@mui/joy/Alert"; +import Typography from "@mui/joy/Typography"; + +import { SquareChip, MomentAdjustedTimeAgo } from "../Display.jsx"; + +import { PersonMetaLine } from "../Shared/ActorMeta.jsx"; + +export function ReportDetails({ report, creator }) { + return ( + +
+ + {report.published && ( + + Reported {report.published} + + )} + + + + + {report.reason} + +
+ + ); +} diff --git a/src/components/Shared/UserChips.jsx b/src/components/Shared/UserChips.jsx new file mode 100644 index 0000000..7da6adc --- /dev/null +++ b/src/components/Shared/UserChips.jsx @@ -0,0 +1,79 @@ +import React from "react"; + +import Box from "@mui/joy/Box"; +import Typography from "@mui/joy/Typography"; +import Tooltip from "@mui/joy/Tooltip"; +import Link from "@mui/joy/Link"; + +import SecurityIcon from "@mui/icons-material/Security"; +import BlockIcon from "@mui/icons-material/Block"; +import SmartToyIcon from "@mui/icons-material/SmartToy"; +import DeleteIcon from "@mui/icons-material/Delete"; + +import { SquareChip, UserAvatar, FediverseChipLink } from "../Display.jsx"; + +import { UserTooltip } from "../Tooltip.jsx"; + +import { parseActorId } from "../../utils.js"; + +import { getSiteData } from "../../hooks/getSiteData"; + +export function PersonMetaChips({ person }) { + const { baseUrl } = getSiteData(); + + const actorInstanceBaseUrl = person.actor_id.split("/")[2]; + const fediverseUserLink = person.actor_id; + + let localUserLink = `https://${baseUrl}/u/${person.name}`; + if (baseUrl != actorInstanceBaseUrl) localUserLink = `${localUserLink}@${actorInstanceBaseUrl}`; + + return ( + + {baseUrl != actorInstanceBaseUrl && } + + + + + + + + + + ); +} + +export function SiteAdminChip({ person }) { + if (!person.admin) return null; + + return ( + } + /> + ); +} + +export function BannedUserChip({ person }) { + if (!person.banned) return null; + + return } />; +} + +export function BotAccountChip({ person }) { + if (!person.bot_account) return null; + + return ( + } + /> + ); +} +export function DeletedUserChip({ person }) { + if (!person.deleted) return null; + + return } />; +} diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx index e76cf9e..391da55 100644 --- a/src/components/Tooltip.jsx +++ b/src/components/Tooltip.jsx @@ -1,73 +1,110 @@ import React from "react"; import Alert from "@mui/joy/Alert"; -import Card from "@mui/joy/Card"; import Box from "@mui/joy/Box"; import Typography from "@mui/joy/Typography"; -import Badge from "@mui/joy/Badge"; import Tooltip from "@mui/joy/Tooltip"; - -import Link from "@mui/joy/Link"; +import List from "@mui/joy/List"; +import ListItem from "@mui/joy/ListItem"; +import Divider from "@mui/joy/Divider"; +import ListItemDecorator from "@mui/joy/ListItemDecorator"; import Chip from "@mui/joy/Chip"; -import AdjustIcon from "@mui/icons-material/Adjust"; import SecurityIcon from "@mui/icons-material/Security"; import BlockIcon from "@mui/icons-material/Block"; import SmartToyIcon from "@mui/icons-material/SmartToy"; import DeleteIcon from "@mui/icons-material/Delete"; -import { MomentAdjustedTimeAgo } from "./Display.jsx"; +import { useLemmyHttp, refreshAllData } from "../hooks/useLemmyHttp"; +import { UserAvatar, MomentAdjustedTimeAgo } from "./Display.jsx"; + +import { PersonMetaChips } from "./Shared/UserChips.jsx"; export const UserTooltip = ({ user, ...props }) => { + console.log("user", user); + + // get user modlog entries + const { + isLoading: userModActionsLoading, + isFetching: userModActionsFetching, + error: userModActionsError, + data: userModActionsData, + } = useLemmyHttp("getModlog", { + other_person_id: user.id, + }); + + const fullUserString = `${user.name}@${user.actor_id.split("/")[2]}`; + return ( - - - {user.name}@{user.actor_id.split("/")[2]} - {" "} - {user.display_name && ` ${user.display_name}`} - + + + + {user.display_name && user.display_name} + {!user.display_name && fullUserString} + + + {user.display_name && {fullUserString}} {user.published && ( - + registered {user.published} )} - {user.admin && ( - }> - Admin Account - - )} + User Mod Activity - {user.banned && ( - }> - Banned Account - - )} + {/* List of actions taken on this user */} + + {userModActionsLoading || (userModActionsFetching && Loading...)} + {userModActionsError && Error: {userModActionsError.message}} + {userModActionsData && ( + + {Object.keys(userModActionsData).map( + (action) => + userModActionsData[action].length > 0 && ( + {userModActionsData[action].length}} + > + {/* + {userModActionsData[action].length} + */} + {action} + + ), + )} + + )} + - {user.bot_account && ( - }> - Bot Account - - )} + User Info - {user.deleted && ( - }> - Deleted Account - - )} + + + ); }; diff --git a/src/hooks/useLemmyHttp.js b/src/hooks/useLemmyHttp.js index a7a32d8..7ea96f6 100644 --- a/src/hooks/useLemmyHttp.js +++ b/src/hooks/useLemmyHttp.js @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; @@ -9,13 +9,23 @@ import { LemmyHttp } from "lemmy-js-client"; import { selectCurrentUser, updateCurrentUserData, setAccountIsLoading } from "../reducers/accountReducer"; -export function useLemmyHttp(callLemmyMethod, formData) { +export function useLemmyHttp(callLemmyMethod, formData = {}) { const currentUser = useSelector(selectCurrentUser); + const formDataArray = useMemo(() => { + const formDataArray = []; + for (const [key, value] of Object.entries(formData)) { + formDataArray.push(key); + formDataArray.push(value); + } + return formDataArray; + }, [formData]); + + const { baseUrl, siteData, localPerson, userRole } = getSiteData(); const { isSuccess, isLoading, isError, error, data, isFetching, refetch } = useQuery({ - queryKey: ["lemmyHttp", localPerson.id, callLemmyMethod], + queryKey: ["lemmyHttp", localPerson.id, callLemmyMethod, formDataArray], queryFn: async () => { const lemmyClient = new LemmyHttp(`https://${currentUser.base}`);