Put MyStories into NavSidebar

This commit is contained in:
Jamie Kyle 2023-08-09 09:42:27 -07:00 committed by GitHub
parent da35ffada6
commit e78da67a51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 42 deletions

View file

@ -18,23 +18,29 @@ import { StoryImage } from './StoryImage';
import { Theme } from '../util/theme'; import { Theme } from '../util/theme';
import { resolveStorySendStatus } from '../util/resolveStorySendStatus'; import { resolveStorySendStatus } from '../util/resolveStorySendStatus';
import { useRetryStorySend } from '../hooks/useRetryStorySend'; import { useRetryStorySend } from '../hooks/useRetryStorySend';
import { NavSidebar } from './NavSidebar';
export type PropsType = { export type PropsType = {
i18n: LocalizerType; i18n: LocalizerType;
navTabsCollapsed: boolean;
myStories: Array<MyStoryType>; myStories: Array<MyStoryType>;
onBack: () => unknown; onBack: () => unknown;
onDelete: (story: StoryViewType) => unknown; onDelete: (story: StoryViewType) => unknown;
onForward: (storyId: string) => unknown; onForward: (storyId: string) => unknown;
onSave: (story: StoryViewType) => unknown; onSave: (story: StoryViewType) => unknown;
onMediaPlaybackStart: () => void; onMediaPlaybackStart: () => void;
onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => void;
queueStoryDownload: (storyId: string) => unknown; queueStoryDownload: (storyId: string) => unknown;
retryMessageSend: (messageId: string) => unknown; retryMessageSend: (messageId: string) => unknown;
viewStory: ViewStoryActionCreatorType; viewStory: ViewStoryActionCreatorType;
hasViewReceiptSetting: boolean; hasViewReceiptSetting: boolean;
preferredLeftPaneWidth: number;
savePreferredLeftPaneWidth: (preferredLeftPaneWidth: number) => void;
}; };
export function MyStories({ export function MyStories({
i18n, i18n,
navTabsCollapsed,
myStories, myStories,
onBack, onBack,
onDelete, onDelete,
@ -45,6 +51,9 @@ export function MyStories({
viewStory, viewStory,
hasViewReceiptSetting, hasViewReceiptSetting,
onMediaPlaybackStart, onMediaPlaybackStart,
onToggleNavTabsCollapse,
preferredLeftPaneWidth,
savePreferredLeftPaneWidth,
}: PropsType): JSX.Element { }: PropsType): JSX.Element {
const [confirmDeleteStory, setConfirmDeleteStory] = useState< const [confirmDeleteStory, setConfirmDeleteStory] = useState<
StoryViewType | undefined StoryViewType | undefined
@ -68,50 +77,50 @@ export function MyStories({
{i18n('icu:MyStories__delete')} {i18n('icu:MyStories__delete')}
</ConfirmationDialog> </ConfirmationDialog>
)} )}
<div className="Stories__pane__header Stories__pane__header--centered"> <NavSidebar
<button i18n={i18n}
aria-label={i18n('icu:back')} title={i18n('icu:MyStories__title')}
className="Stories__pane__header--back" navTabsCollapsed={navTabsCollapsed}
onClick={onBack} onBack={onBack}
type="button" onToggleNavTabsCollapse={onToggleNavTabsCollapse}
/> preferredLeftPaneWidth={preferredLeftPaneWidth}
<div className="Stories__pane__header--title"> requiresFullWidth
{i18n('icu:MyStories__title')} savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
</div> >
</div> <div className="Stories__pane__list">
<div className="Stories__pane__list"> {myStories.map(list => (
{myStories.map(list => ( <div className="MyStories__distribution" key={list.id}>
<div className="MyStories__distribution" key={list.id}> <div className="MyStories__distribution__title">
<div className="MyStories__distribution__title"> <StoryDistributionListName
<StoryDistributionListName i18n={i18n}
i18n={i18n} id={list.id}
id={list.id} name={list.name}
name={list.name} />
/> </div>
{list.stories.map(story => (
<StorySent
hasViewReceiptSetting={hasViewReceiptSetting}
i18n={i18n}
key={story.messageId}
onForward={onForward}
onSave={onSave}
onMediaPlaybackStart={onMediaPlaybackStart}
queueStoryDownload={queueStoryDownload}
retryMessageSend={retryMessageSend}
setConfirmDeleteStory={setConfirmDeleteStory}
story={story}
viewStory={viewStory}
/>
))}
</div> </div>
{list.stories.map(story => ( ))}
<StorySent
hasViewReceiptSetting={hasViewReceiptSetting}
i18n={i18n}
key={story.messageId}
onForward={onForward}
onSave={onSave}
onMediaPlaybackStart={onMediaPlaybackStart}
queueStoryDownload={queueStoryDownload}
retryMessageSend={retryMessageSend}
setConfirmDeleteStory={setConfirmDeleteStory}
story={story}
viewStory={viewStory}
/>
))}
</div>
))}
</div>
{!myStories.length && (
<div className="Stories__pane__list--empty">
{i18n('icu:Stories__list-empty')}
</div> </div>
)} {!myStories.length && (
<div className="Stories__pane__list--empty">
{i18n('icu:Stories__list-empty')}
</div>
)}
</NavSidebar>
</> </>
); );
} }

View file

@ -107,13 +107,17 @@ export function StoriesTab({
hasViewReceiptSetting={hasViewReceiptSetting} hasViewReceiptSetting={hasViewReceiptSetting}
i18n={i18n} i18n={i18n}
myStories={myStories} myStories={myStories}
navTabsCollapsed={navTabsCollapsed}
onBack={() => setIsMyStories(false)} onBack={() => setIsMyStories(false)}
onDelete={deleteStoryForEveryone} onDelete={deleteStoryForEveryone}
onForward={onForwardStory} onForward={onForwardStory}
onSave={onSaveStory} onSave={onSaveStory}
onMediaPlaybackStart={onMediaPlaybackStart} onMediaPlaybackStart={onMediaPlaybackStart}
onToggleNavTabsCollapse={onToggleNavTabsCollapse}
preferredLeftPaneWidth={preferredLeftPaneWidth}
queueStoryDownload={queueStoryDownload} queueStoryDownload={queueStoryDownload}
retryMessageSend={retryMessageSend} retryMessageSend={retryMessageSend}
savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
viewStory={viewStory} viewStory={viewStory}
/> />
) : ( ) : (