diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index be9a2c1e..c7c5e0ac 100644 --- a/i18n/en_US.yaml +++ b/i18n/en_US.yaml @@ -407,6 +407,11 @@ ui: all_read: Mark all as read show_more: Show more someone: Someone + inbox_type: + all: All + posts: Posts + invites: Invites + votes: Votes suspended: title: Your Account has been Suspended until_time: "Your account was suspended until {{ time }}." diff --git a/ui/src/pages/Users/Notifications/index.scss b/ui/src/pages/Users/Notifications/index.scss new file mode 100644 index 00000000..94f593b5 --- /dev/null +++ b/ui/src/pages/Users/Notifications/index.scss @@ -0,0 +1,4 @@ +.inbox-nav { + border-top: 1px solid rgba(0, 0, 0, .125); + padding: .5rem 0; +} diff --git a/ui/src/pages/Users/Notifications/index.tsx b/ui/src/pages/Users/Notifications/index.tsx index 8b2f8032..91a78ec9 100644 --- a/ui/src/pages/Users/Notifications/index.tsx +++ b/ui/src/pages/Users/Notifications/index.tsx @@ -1,7 +1,9 @@ import { useState, useEffect } from 'react'; -import { Row, Col, ButtonGroup, Button } from 'react-bootstrap'; +import { Row, Col, ButtonGroup, Button, Nav } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; -import { useParams, useNavigate } from 'react-router-dom'; +import { useParams, useNavigate, Link } from 'react-router-dom'; + +import classNames from 'classnames'; import { usePageTags } from '@/hooks'; import { @@ -14,6 +16,7 @@ import { floppyNavigation } from '@/utils'; import Inbox from './components/Inbox'; import Achievements from './components/Achievements'; +import './index.scss'; const PAGE_SIZE = 10; @@ -21,13 +24,23 @@ const Notifications = () => { const [page, setPage] = useState(1); const [notificationData, setNotificationData] = useState([]); const { t } = useTranslation('translation', { keyPrefix: 'notifications' }); - const { type = 'inbox' } = useParams(); + const inboxTypeNavs = ['all', 'posts', 'invites', 'votes']; + const { type = 'inbox', subType = inboxTypeNavs[0] } = useParams(); - const { data, mutate } = useQueryNotifications({ + const queryParams: { + type: string; + inbox_type?: string; + page: number; + page_size: number; + } = { type, page, page_size: PAGE_SIZE, - }); + }; + if (type === 'inbox') { + queryParams.inbox_type = subType; + } + const { data, mutate } = useQueryNotifications(queryParams); useEffect(() => { clearNotificationStatus(type); @@ -104,10 +117,32 @@ const Notifications = () => { {type === 'inbox' && ( - + <> + + + )} {type === 'achievement' && (