Skip to content

Commit

Permalink
Merge pull request #119 from tgxn/develop
Browse files Browse the repository at this point in the history 
Release 1.3.10
  • Loading branch information
@tgxn
tgxn authored Nov 11, 2023
2 parents 719c4db + de49d1f commit ffc6fef
Show file tree
Hide file tree
Showing 12 changed files with 1,247 additions and 487 deletions.
744 changes: 366 additions & 378 deletions package-lock.json
View file

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "lemmy-modder",
"version": "1.3.9",
"version": "1.3.10",
"description": "Lemmy Moderation App",
"author": "tgxn",
"license": "MIT",
Expand All @@ -14,20 +14,20 @@
"test": "mocha --require @babel/register --require @babel/polyfill ./tests/api.mjs"
},
"dependencies": {
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.5",
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"@babel/preset-react": "^7.23.3",
"@braintree/sanitize-url": "^6.0.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/base": "^5.0.0-beta.22",
"@mui/base": "^5.0.0-beta.23",
"@mui/icons-material": "^5.14.16",
"@mui/joy": "^5.0.0-beta.13",
"@mui/lab": "^5.0.0-alpha.151",
"@mui/joy": "^5.0.0-beta.14",
"@mui/lab": "^5.0.0-alpha.152",
"@reduxjs/toolkit": "^1.9.7",
"@tanstack/react-query": "^5.4.3",
"@tanstack/react-query-devtools": "^5.4.3",
"axios": "^1.6.0",
"@tanstack/react-query": "^5.8.1",
"@tanstack/react-query-devtools": "^5.8.1",
"axios": "^1.6.1",
"babel-loader": "^9.1.3",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
Expand All @@ -39,7 +39,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-image": "^4.1.0",
"react-intersection-observer": "^9.5.2",
"react-intersection-observer": "^9.5.3",
"react-moment": "^1.1.3",
"react-number-format": "^5.3.1",
"react-redux": "^8.1.1",
Expand All @@ -49,7 +49,7 @@
"redux-persist": "^6.0.0",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"sonner": "^1.1.0",
"sonner": "^1.2.0",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"webpack": "^5.89.0",
Expand Down
207 changes: 136 additions & 71 deletions src/components/Header/NotificationMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,34 @@ import React from "react";

import { useNavigate, useLocation } from "react-router-dom";

import { Popper } from "@mui/base/Popper";
import { styled } from "@mui/joy/styles";

import { ClickAwayListener } from "@mui/base/ClickAwayListener";

import IconButton from "@mui/joy/IconButton";
import Chip from "@mui/joy/Chip";
import Menu from "@mui/joy/Menu";
import MenuButton from "@mui/joy/MenuButton";
import Dropdown from "@mui/joy/Dropdown";
import MenuItem from "@mui/joy/MenuItem";
import ListItemDecorator from "@mui/joy/ListItemDecorator";
import ListItemContent from "@mui/joy/ListItemContent";
import Badge from "@mui/joy/Badge";
import Tabs from "@mui/joy/Tabs";
import TabList from "@mui/joy/TabList";
import Tab, { tabClasses } from "@mui/joy/Tab";
import TabPanel from "@mui/joy/TabPanel";
import Divider from "@mui/joy/Divider";

import NotificationsIcon from "@mui/icons-material/Notifications";
import ChatIcon from "@mui/icons-material/Chat";

import { useLemmyHttp } from "../../hooks/useLemmyHttp";
import { getSiteData } from "../../hooks/getSiteData";

import { BasicInfoTooltip } from "../Tooltip.jsx";

export default function NotificationMenu() {
const location = useLocation();
const navigate = useNavigate();
const Popup = styled(Popper)({
zIndex: 1000,
borderRadius: 4,
});

const { localUser, localPerson, userRole } = getSiteData();
import { MessagesTab, RepliesTab, MentionsTab } from "./NotificationMenuTabs";

export default function NotificationMenu() {
const {
isLoading: unreadCountLoading,
isFetching: unreadCountFetching,
Expand All @@ -37,14 +41,20 @@ export default function NotificationMenu() {
if (!unreadCountData) return null;

console.log("unreadCountData", unreadCountData);
// return unreadCountData.replies + unreadCountData.mentions + unreadCountData.private_messages;
return unreadCountData.private_messages; // TODO we only show pms for now
return unreadCountData.replies + unreadCountData.mentions + unreadCountData.private_messages;
}, [unreadCountData]);

const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setOpen(false);
};

return (
<Dropdown>
<div>
<Badge
invisible={headerUnreadCount == 0}
invisible={unreadCountLoading || headerUnreadCount == 0}
size="sm"
anchorOrigin={{
vertical: "top",
Expand All @@ -58,16 +68,19 @@ export default function NotificationMenu() {
variant="soft"
>
<IconButton
component={MenuButton}
ref={buttonRef}
id="composition-button"
aria-controls={"composition-menu"}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
size="sm"
variant="outlined"
color="neutral"
// onClick={() => {
// navigate("/messages");
// }}
variant={open ? "soft" : "outlined"}
color={open ? "primary" : "neutral"}
onClick={() => {
setOpen(!open);
}}
sx={{
mr: 1,
// p: "2px",
borderRadius: 4,
display: "flex",
alignItems: "center",
Expand All @@ -79,56 +92,108 @@ export default function NotificationMenu() {
</BasicInfoTooltip>
</Badge>

<Menu
// placement="bottom-end"
<Popup
role={undefined}
id="composition-menu"
open={open}
anchorEl={buttonRef.current}
placement="bottom-end"
// disablePortal
// sx={{
// borderRadius: 4,
// }}
modifiers={[
{
name: "offset",
options: {
offset: [0, 4],
},
},
]}
>
<MenuItem
sx={{
color: "text.body",
}}
onClick={() => {
navigate("/messages");
}}
>
<ListItemDecorator>
<ChatIcon />
</ListItemDecorator>
<ListItemContent>Messages</ListItemContent>
<Chip size="sm" variant="soft" color="primary">
{unreadCountData && unreadCountData.private_messages}
</Chip>
</MenuItem>
{/* <MenuItem
disabled
sx={{
color: "text.body",
<ClickAwayListener
onClickAway={(event) => {
if (event.target !== buttonRef.current) {
handleClose();
}
}}
>
<ListItemDecorator>
<ReplyIcon />
</ListItemDecorator>
<ListItemContent>Replies</ListItemContent>
<Chip size="sm" variant="soft" color="primary">
{unreadCountData && unreadCountData.replies}
</Chip>
</MenuItem>
<MenuItem
disabled
sx={{
color: "text.body",
}}
>
<ListItemDecorator>
<EmailIcon />
</ListItemDecorator>
<ListItemContent>Mentions</ListItemContent>
<Chip size="sm" variant="soft" color="primary">
{unreadCountData && unreadCountData.mentions}
</Chip>
</MenuItem> */}
</Menu>
</Dropdown>
<Tabs
variant="outlined"
aria-label="Pricing plan"
defaultValue={0}
sx={{
width: 350,
borderRadius: 4,
boxShadow: "sm",
// overflow: "visible",
}}
>
<TabList
disableUnderline
tabFlex={1}
sx={{
[`& .${tabClasses.root}`]: {
fontSize: "sm",
fontWeight: "lg",
[`&[aria-selected="true"]`]: {
color: "primary.500",
bgcolor: "background.surface",
},
[`&.${tabClasses.focusVisible}`]: {
outlineOffset: "-4px",
},
},
}}
>
<Badge
badgeContent={unreadCountData?.private_messages}
invisible={unreadCountLoading || unreadCountData?.private_messages == 0}
color="danger"
sx={{ flexGrow: 1 }}
>
<Tab disableIndicator variant="soft">
Messages
</Tab>
</Badge>

<Badge
badgeContent={unreadCountData?.replies}
invisible={unreadCountLoading || unreadCountData?.replies == 0}
color="danger"
sx={{ flexGrow: 1 }}
>
<Tab disableIndicator variant="soft">
Replies
</Tab>
</Badge>

<Badge
badgeContent={unreadCountData?.mentions}
invisible={unreadCountLoading || unreadCountData?.mentions == 0}
color="danger"
sx={{ flexGrow: 1 }}
>
<Tab disableIndicator variant="soft">
Mentions
</Tab>
</Badge>
</TabList>

<Divider />

<TabPanel value={0} sx={{ p: 0, maxHeight: "500px", overflowY: "auto" }}>
<MessagesTab setOpen={setOpen} />
</TabPanel>
<TabPanel value={1} sx={{ p: 0, maxHeight: "500px", overflowY: "auto" }}>
<RepliesTab setOpen={setOpen} />
</TabPanel>
<TabPanel value={2} sx={{ p: 0, maxHeight: "500px", overflowY: "auto" }}>
<MentionsTab setOpen={setOpen} />
</TabPanel>
</Tabs>
</ClickAwayListener>
</Popup>
</div>
);
}
Loading

0 comments on commit ffc6fef

Please sign in to comment.