Hidden stories list/unhide stories

This commit is contained in:
Josh Perez 2022-04-15 18:31:18 -04:00 committed by GitHub
parent c165bc964a
commit d776deae01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 14 deletions

View file

@ -52,7 +52,7 @@ export const Stories = ({
const storyIndex = stories.findIndex(
x => x.conversationId === conversationIdToView
);
if (storyIndex >= stories.length - 1) {
if (storyIndex >= stories.length - 1 || storyIndex === -1) {
setConversationIdToView(undefined);
return;
}
@ -63,7 +63,7 @@ export const Stories = ({
const storyIndex = stories.findIndex(
x => x.conversationId === conversationIdToView
);
if (storyIndex === 0) {
if (storyIndex <= 0) {
setConversationIdToView(undefined);
return;
}
@ -77,16 +77,7 @@ export const Stories = ({
hiddenStories={hiddenStories}
i18n={i18n}
onBack={toggleStoriesView}
onStoryClicked={conversationId => {
const storyIndex = stories.findIndex(
x => x.conversationId === conversationId
);
const foundStory = stories[storyIndex];
if (foundStory) {
setConversationIdToView(conversationId);
}
}}
onStoryClicked={setConversationIdToView}
openConversationInternal={openConversationInternal}
queueStoryDownload={queueStoryDownload}
stories={stories}

View file

@ -61,6 +61,7 @@ export type PropsType = {
};
export const StoriesPane = ({
hiddenStories,
i18n,
onBack,
onStoryClicked,
@ -70,6 +71,7 @@ export const StoriesPane = ({
toggleHideStories,
}: PropsType): JSX.Element => {
const [searchTerm, setSearchTerm] = useState('');
const [isShowingHiddenStories, setIsShowingHiddenStories] = useState(false);
const [renderedStories, setRenderedStories] =
useState<Array<ConversationStoryType>>(stories);
@ -127,6 +129,38 @@ export const StoriesPane = ({
story={getNewestStory(story)}
/>
))}
{Boolean(hiddenStories.length) && (
<>
<button
className={classNames('Stories__hidden-stories', {
'Stories__hidden-stories--expanded': isShowingHiddenStories,
})}
onClick={() => setIsShowingHiddenStories(!isShowingHiddenStories)}
type="button"
>
{i18n('Stories__hidden-stories')}
</button>
{isShowingHiddenStories &&
hiddenStories.map(story => (
<StoryListItem
key={getNewestStory(story).timestamp}
i18n={i18n}
isHidden
onClick={() => {
onStoryClicked(story.conversationId);
}}
onHideStory={() => {
toggleHideStories(getNewestStory(story).sender.id);
}}
onGoToConversation={conversationId => {
openConversationInternal({ conversationId });
}}
queueStoryDownload={queueStoryDownload}
story={getNewestStory(story)}
/>
))}
</>
)}
{!stories.length && i18n('Stories__list-empty')}
</div>
</>

View file

@ -213,9 +213,15 @@ export const StoryListItem = ({
menuOptions={[
{
icon: 'StoryListItem__icon--hide',
label: i18n('StoryListItem__hide'),
label: isHidden
? i18n('StoryListItem__unhide')
: i18n('StoryListItem__hide'),
onClick: () => {
setHasConfirmHideStory(true);
if (isHidden) {
onHideStory?.(sender.id);
} else {
setHasConfirmHideStory(true);
}
},
},
{