diff --git a/app/soapbox/actions/timelines.ts b/app/soapbox/actions/timelines.ts index cafaa6aa5..902b99f70 100644 --- a/app/soapbox/actions/timelines.ts +++ b/app/soapbox/actions/timelines.ts @@ -248,6 +248,9 @@ const expandListTimeline = (id: string, { maxId }: Record = {}, don const expandGroupTimeline = (id: string, { maxId }: Record = {}, done = noOp) => expandTimeline(`group:${id}`, `/api/v1/timelines/group/${id}`, { max_id: maxId }, done); +const expandGroupTimelineFromTag = (id: string, tagName: string, { maxId }: Record = {}, done = noOp) => + expandTimeline(`group:tags:${id}:${tagName}`, `/api/v1/timelines/group/${id}/tags/${tagName}`, { max_id: maxId }, done); + const expandGroupMediaTimeline = (id: string | number, { maxId }: Record = {}) => expandTimeline(`group:${id}:media`, `/api/v1/timelines/group/${id}`, { max_id: maxId, only_media: true, limit: 40, with_muted: true }); @@ -350,6 +353,7 @@ export { expandAccountMediaTimeline, expandListTimeline, expandGroupTimeline, + expandGroupTimelineFromTag, expandGroupMediaTimeline, expandHashtagTimeline, expandTimelineRequest, diff --git a/app/soapbox/features/group/components/group-tag-list-item.tsx b/app/soapbox/features/group/components/group-tag-list-item.tsx index 47f9f1ef6..e4d718695 100644 --- a/app/soapbox/features/group/components/group-tag-list-item.tsx +++ b/app/soapbox/features/group/components/group-tag-list-item.tsx @@ -39,8 +39,6 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { const { updateGroupTag } = useUpdateGroupTag(group.id, tag.id); const isOwner = group.relationship?.role === GroupRoles.OWNER; - const isAdmin = group.relationship?.role === GroupRoles.ADMIN; - const canEdit = isOwner || isAdmin; const toggleVisibility = () => { updateGroupTag({ @@ -123,16 +121,16 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { return ( - + #{tag.name} - + {intl.formatMessage(messages.total)}: {' '} @@ -142,7 +140,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => { - {canEdit ? ( + {isOwner ? ( {tag.visible ? ( renderPinIcon() diff --git a/app/soapbox/features/group/group-tag-timeline.tsx b/app/soapbox/features/group/group-tag-timeline.tsx index 2663c59cf..f2ddee382 100644 --- a/app/soapbox/features/group/group-tag-timeline.tsx +++ b/app/soapbox/features/group/group-tag-timeline.tsx @@ -1,28 +1,66 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import { FormattedMessage } from 'react-intl'; -import { Column } from 'soapbox/components/ui'; +import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines'; +import { Column, Icon, Stack, Text } from 'soapbox/components/ui'; +import { useAppDispatch } from 'soapbox/hooks'; import { useGroup, useGroupTag } from 'soapbox/hooks/api'; -type RouteParams = { id: string, groupId: string }; +import Timeline from '../ui/components/timeline'; + +type RouteParams = { tagId: string, groupId: string }; interface IGroupTimeline { params: RouteParams } const GroupTagTimeline: React.FC = (props) => { + const dispatch = useAppDispatch(); const groupId = props.params.groupId; - const tagId = props.params.id; + const tagId = props.params.tagId; const { group } = useGroup(groupId); - const { tag } = useGroupTag(tagId); + const { tag, isLoading } = useGroupTag(tagId); - if (!group) { + const handleLoadMore = (maxId: string) => { + dispatch(expandGroupTimelineFromTag(groupId, tag?.name as string, { maxId })); + }; + + useEffect(() => { + if (tag?.name) { + dispatch(expandGroupTimelineFromTag(groupId, tag?.name)); + } + }, [groupId, tag]); + + + if (isLoading || !tag || !group) { return null; } return ( - - {/* TODO */} + + +
+ +
+ + + + + + } + />
); }; diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx index fd1168f4e..da8f7542c 100644 --- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx +++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx @@ -20,7 +20,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef )} - +
+ + - -
diff --git a/app/soapbox/features/groups/components/discover/popular-groups.tsx b/app/soapbox/features/groups/components/discover/popular-groups.tsx index 8dcf607e7..6395ea3b0 100644 --- a/app/soapbox/features/groups/components/discover/popular-groups.tsx +++ b/app/soapbox/features/groups/components/discover/popular-groups.tsx @@ -53,7 +53,7 @@ const PopularGroups = () => { {isFetching ? ( new Array(4).fill(0).map((_, idx) => (
diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx index 9df350375..2543f6ebc 100644 --- a/app/soapbox/features/groups/components/discover/search/results.tsx +++ b/app/soapbox/features/groups/components/discover/search/results.tsx @@ -46,10 +46,8 @@ export default (props: Props) => {
), []); - const renderGroupGrid = useCallback((group: Group, index: number) => ( -
- -
+ const renderGroupGrid = useCallback((group: Group) => ( + ), []); return ( @@ -79,10 +77,10 @@ export default (props: Props) => { renderGroupGrid(group, index)} + itemContent={(_index, group) => renderGroupGrid(group)} components={{ Item: (props) => ( -
+
), List: GridList, }} diff --git a/app/soapbox/features/groups/popular.tsx b/app/soapbox/features/groups/popular.tsx index 7f2d43a64..c2c11148c 100644 --- a/app/soapbox/features/groups/popular.tsx +++ b/app/soapbox/features/groups/popular.tsx @@ -46,10 +46,8 @@ const Popular: React.FC = () => {
), []); - const renderGroupGrid = useCallback((group: Group, index: number) => ( -
- -
+ const renderGroupGrid = useCallback((group: Group) => ( + ), []); return ( @@ -73,10 +71,10 @@ const Popular: React.FC = () => { renderGroupGrid(group, index)} + itemContent={(_index, group) => renderGroupGrid(group)} components={{ Item: (props) => ( -
+
), List: GridList, }} diff --git a/app/soapbox/features/groups/suggested.tsx b/app/soapbox/features/groups/suggested.tsx index 5c52f678b..4d1843598 100644 --- a/app/soapbox/features/groups/suggested.tsx +++ b/app/soapbox/features/groups/suggested.tsx @@ -46,10 +46,8 @@ const Suggested: React.FC = () => {
), []); - const renderGroupGrid = useCallback((group: Group, index: number) => ( -
- -
+ const renderGroupGrid = useCallback((group: Group) => ( + ), []); return ( @@ -73,10 +71,10 @@ const Suggested: React.FC = () => { renderGroupGrid(group, index)} + itemContent={(_index, group) => renderGroupGrid(group)} components={{ Item: (props) => ( -
+
), List: GridList, }} diff --git a/app/soapbox/features/groups/tag.tsx b/app/soapbox/features/groups/tag.tsx index 4774a4700..8b18053d3 100644 --- a/app/soapbox/features/groups/tag.tsx +++ b/app/soapbox/features/groups/tag.tsx @@ -50,10 +50,8 @@ const Tag: React.FC = (props) => {
), []); - const renderGroupGrid = useCallback((group: Group, index: number) => ( -
- -
+ const renderGroupGrid = useCallback((group: Group) => ( + ), []); if (isLoading || !tag) { @@ -100,10 +98,10 @@ const Tag: React.FC = (props) => { renderGroupGrid(group, index)} + itemContent={(_index, group) => renderGroupGrid(group)} components={{ Item: (props) => ( -
+
), List: GridList, }} diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 565666465..b41cd6746 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -327,7 +327,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groups && } {features.groupsTags && } - {features.groupsTags && } + {features.groupsTags && } {features.groups && } {features.groups && } {features.groups && }