playlist stories

PostHog · Jun 19, 2024 · 5471ecd · 5471ecd
1 parent 06a4057
commit 5471ecd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git a/frontend/src/lib/components/Playlist/Playlist.stories.tsx b/frontend/src/lib/components/Playlist/Playlist.stories.tsx
@@ -37,7 +37,7 @@ Default.args = {
     sections: [
         {
             key: 'default',
-            title: `Default section`,
+            title: 'Default section',
             items: range(0, 100).map((idx) => ({ id: idx })),
             render: ListItem,
         },
@@ -61,3 +61,16 @@ MultipleSections.args = {
         },
     ],
 }
+
+export const WithFooter: Story = Template.bind({})
+WithFooter.args = {
+    sections: [
+        {
+            key: 'default',
+            title: 'Section with footer',
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+            footer: <div className="px-1 py-3">Section footer</div>,
+        },
+    ],
+}
diff --git a/frontend/src/lib/components/Playlist/Playlist.tsx b/frontend/src/lib/components/Playlist/Playlist.tsx
@@ -1,7 +1,7 @@
 import './Playlist.scss'
 
 import { IconCollapse } from '@posthog/icons'
-import { LemonButton, LemonButtonProps, LemonCollapse, LemonSkeleton, Spinner, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonButtonProps, LemonCollapse, LemonSkeleton, Tooltip } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
@@ -19,6 +19,7 @@ export type PlaylistSection = {
     title?: string
     items: any[]
     render: ({ item, isActive }: { item: any; isActive: any }) => JSX.Element
+    footer?: JSX.Element
 }
 
 type PlaylistHeaderAction = Pick<LemonButtonProps, 'icon' | 'tooltip' | 'children'> & {
@@ -37,7 +38,6 @@ export type PlaylistProps = {
     headerActions?: PlaylistHeaderAction[]
     onScrollListEdge?: (edge: 'top' | 'bottom') => void
     onSelect?: (item: any) => void
-    onLoadMore?: () => void
     'data-attr'?: string
     activeItemId?: string
 }
@@ -59,7 +59,6 @@ export function Playlist({
     listEmptyState,
     onSelect,
     'data-attr': dataAttr,
-    onLoadMore,
 }: PlaylistProps): JSX.Element {
     const [controlledActiveItemId, setControlledActiveItemId] = useState<string | null>(null)
     const [listCollapsed, setListCollapsed] = useState<boolean>(false)
@@ -102,7 +101,6 @@ export function Playlist({
                         activeItemId={activeItemId}
                         setActiveItemId={onChangeActiveItem}
                         emptyState={listEmptyState}
-                        onLoadMore={onLoadMore}
                     />
                 )}
                 <Resizer
@@ -136,7 +134,6 @@ const List = ({
     onScrollListEdge,
     loading,
     emptyState,
-    onLoadMore,
 }: {
     title: PlaylistProps['title']
     notebooksHref: PlaylistProps['notebooksHref']
@@ -148,7 +145,6 @@ const List = ({
     onScrollListEdge: PlaylistProps['onScrollListEdge']
     loading: PlaylistProps['loading']
     emptyState: PlaylistProps['listEmptyState']
-    onLoadMore: PlaylistProps['onLoadMore']
 }): JSX.Element => {
     const [activeHeaderActionKey, setActiveHeaderActionKey] = useState<string | null>(null)
     const lastScrollPositionRef = useRef(0)
@@ -248,18 +244,6 @@ const List = ({
                         ) : (
                             <ListSection {...sections[0]} activeItemId={activeItemId} onClick={setActiveItemId} />
                         )}
-
-                        <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
-                            {loading ? (
-                                <>
-                                    <Spinner textColored /> Loading
-                                </>
-                            ) : onLoadMore ? (
-                                <LemonButton onClick={onLoadMore}>Load more</LemonButton>
-                            ) : sections.length <= 1 ? (
-                                'No more results'
-                            ) : null}
-                        </div>
                     </>
                 ) : loading ? (
                     <LoadingState />
@@ -274,6 +258,7 @@ const List = ({
 const ListSection = ({
     items,
     render,
+    footer,
     onClick,
     activeItemId,
 }: PlaylistSection & {
@@ -288,6 +273,7 @@ const ListSection = ({
                         {render({ item, isActive: item.id === activeItemId })}
                     </div>
                 ))}
+            {footer}
         </>
     )
 }

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -1,5 +1,5 @@
 import { IconFilter, IconGear } from '@posthog/icons'
-import { LemonButton, Link } from '@posthog/lemon-ui'
+import { LemonButton, Link, Spinner } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage'
 import { Playlist, PlaylistSection } from 'lib/components/Playlist/Playlist'
@@ -123,6 +123,19 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr
                 sessionSummaryLoading={sessionSummaryLoading}
             />
         ),
+        footer: (
+            <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                {sessionRecordingsResponseLoading ? (
+                    <>
+                        <Spinner textColored /> Loading
+                    </>
+                ) : hasNext ? (
+                    <LemonButton onClick={() => maybeLoadSessionRecordings('older')}>Load more</LemonButton>
+                ) : (
+                    'No more results'
+                )}
+            </div>
+        ),
     })
 
     return (
@@ -147,7 +160,6 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr
                     listEmptyState={<ListEmptyState />}
                     onSelect={setSelectedRecordingId}
                     activeItemId={activeSessionRecordingId}
-                    onLoadMore={hasNext ? () => maybeLoadSessionRecordings('older') : undefined}
                     content={({ activeItem }) =>
                         !activeItem ? (
                             <div className="mt-20">