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,17 +77,16 @@ 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}>
@ -112,6 +120,7 @@ export function MyStories({
{i18n('icu:Stories__list-empty')} {i18n('icu:Stories__list-empty')}
</div> </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}
/> />
) : ( ) : (