Setup component

packages/atlas/src/components/_channel/ChannelsSection/ChannelsSection.stories.tsx

@@ -0,0 +1,45 @@
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
+import { Meta, StoryFn } from '@storybook/react'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { BrowserRouter } from 'react-router-dom'
+
+import { ChannelsSection } from '@/components/_channel/ChannelsSection/ChannelsSection'
+import { OperatorsContextProvider } from '@/providers/assets/assets.provider'
+import { ConfirmationModalProvider } from '@/providers/confirmationModal'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
+
+export default {
+  title: 'Channel/ChannelsSection',
+  component: ChannelsSection,
+  decorators: [
+    (Story) => {
+      const apolloClient = new ApolloClient({ cache: new InMemoryCache() })
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+      return (
+        <BrowserRouter>
+          <ApolloProvider client={apolloClient}>
+            <QueryClientProvider client={queryClient}>
+              <OverlayManagerProvider>
+                <OperatorsContextProvider>
+                  <ConfirmationModalProvider>
+                    <Story />
+                  </ConfirmationModalProvider>
+                </OperatorsContextProvider>
+              </OverlayManagerProvider>
+            </QueryClientProvider>
+          </ApolloProvider>
+        </BrowserRouter>
+      )
+    },
+  ],
+} as Meta
+
+export const Default: StoryFn = () => {
+  return <ChannelsSection />
+}

packages/atlas/src/components/_channel/ChannelsSection/ChannelsSection.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+
+import { useBasicChannels } from '@/api/hooks/channel'
+import { ChannelOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
+import { Section } from '@/components/Section/Section'
+import { ChannelCard } from '@/components/_channel/ChannelCard'
+
+export const ChannelsSection = () => {
+  const [sortBy, setSortBy] = useState<string>('Most followed')
+  const { extendedChannels, loading } = useBasicChannels({
+    orderBy:
+      sortBy === 'Newest'
+        ? ChannelOrderByInput.CreatedAtDesc
+        : sortBy === 'Oldest'
+        ? ChannelOrderByInput.CreatedAtAsc
+        : ChannelOrderByInput.FollowsNumDesc,
+  })
+
+  if (!extendedChannels || (!extendedChannels?.length && !loading)) {
+    return null
+  }
+
+  return (
+    <Section
+      headerProps={{
+        start: {
+          title: 'Channels',
+          type: 'title',
+        },
+        sort: {
+          type: 'toggle-button',
+          toggleButtonOptionTypeProps: {
+            type: 'options',
+            options: ['Newest', 'Oldest', 'Most followed'],
+            value: sortBy,
+            onChange: setSortBy,
+          },
+        },
+      }}
+      contentProps={{
+        type: 'grid',
+        minChildrenWidth: 200,
+        children: extendedChannels.map((extended) => (
+          <ChannelCard key={extended.channel.id} channel={extended.channel} />
+        )),
+      }}
+    />
+  )
+}

packages/atlas/src/components/_channel/ChannelsSection/index.ts

@@ -0,0 +1 @@
+export * from './ChannelsSection'