feat: curated feed

apps/web/src/components/Bytes/index.tsx

@@ -1,25 +1,24 @@
 import MetaTags from '@components/Common/MetaTags'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import useCuratedProfiles from '@lib/store/idb/curated'
 import {
+  ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
-  LENS_CUSTOM_FILTERS,
-  LENSTUBE_BYTES_APP_ID,
+  IS_MAINNET,
   TAPE_APP_ID
 } from '@tape.xyz/constants'
 import { EVENTS, Tower } from '@tape.xyz/generic'
 import type {
   AnyPublication,
-  ExplorePublicationRequest,
-  PrimaryPublication
+  PrimaryPublication,
+  PublicationsRequest
 } from '@tape.xyz/lens'
 import {
-  ExplorePublicationsOrderByType,
-  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
-  useExplorePublicationsLazyQuery,
-  usePublicationLazyQuery
+  PublicationType,
+  usePublicationLazyQuery,
+  usePublicationsLazyQuery
 } from '@tape.xyz/lens'
 import { ChevronDownOutline, ChevronUpOutline, Spinner } from '@tape.xyz/ui'
 import { useKeenSlider } from 'keen-slider/react'
@@ -30,25 +29,10 @@ import { useInView } from 'react-cool-inview'
 import ByteVideo from './ByteVideo'
 import { KeyboardControls, WheelControls } from './SliderPlugin'
 
-const since = getUnixTimestampForDaysAgo(30)
-
-const request: ExplorePublicationRequest = {
-  where: {
-    publicationTypes: [ExplorePublicationType.Post],
-    metadata: {
-      mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo],
-      publishedOn: [TAPE_APP_ID, LENSTUBE_BYTES_APP_ID]
-    },
-    customFilters: LENS_CUSTOM_FILTERS,
-    since
-  },
-  orderBy: ExplorePublicationsOrderByType.Latest,
-  limit: LimitType.Fifty
-}
-
 const Bytes = () => {
   const router = useRouter()
   const [currentViewingId, setCurrentViewingId] = useState('')
+  const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles)
 
   const [sliderRef, { current: slider }] = useKeenSlider(
     {
@@ -58,18 +42,30 @@ const Bytes = () => {
     [WheelControls, KeyboardControls]
   )
 
+  const request: PublicationsRequest = {
+    where: {
+      metadata: {
+        mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo],
+        publishedOn: IS_MAINNET ? [TAPE_APP_ID, ...ALLOWED_APP_IDS] : undefined
+      },
+      publicationTypes: [PublicationType.Post],
+      from: curatedProfiles
+    },
+    limit: LimitType.Fifty
+  }
+
   const [
     fetchPublication,
     { data: singleByteData, loading: singleByteLoading }
   ] = usePublicationLazyQuery()
 
   const [fetchAllBytes, { data, loading, error, fetchMore }] =
-    useExplorePublicationsLazyQuery({
+    usePublicationsLazyQuery({
       variables: {
         request
       },
-      onCompleted: ({ explorePublications }) => {
-        const items = explorePublications?.items as unknown as AnyPublication[]
+      onCompleted: ({ publications }) => {
+        const items = publications?.items as unknown as AnyPublication[]
         const publicationId = router.query.id
         if (!publicationId && items[0]?.id) {
           const nextUrl = `${location.origin}/bytes/${items[0]?.id}`
@@ -78,20 +74,20 @@ const Bytes = () => {
       }
     })
 
-  const bytes = data?.explorePublications?.items as unknown as AnyPublication[]
-  const pageInfo = data?.explorePublications?.pageInfo
+  const bytes = data?.publications?.items as unknown as AnyPublication[]
+  const pageInfo = data?.publications?.pageInfo
   const singleByte = singleByteData?.publication as PrimaryPublication
 
   const fetchSingleByte = async () => {
     const publicationId = router.query.id
     if (!publicationId) {
-      return fetchAllBytes()
+      return curatedProfiles?.length ? fetchAllBytes() : null
     }
     await fetchPublication({
       variables: {
         request: { forId: publicationId }
       },
-      onCompleted: () => fetchAllBytes(),
+      onCompleted: () => (curatedProfiles?.length ? fetchAllBytes() : null),
       fetchPolicy: 'network-only'
     })
   }
@@ -102,7 +98,7 @@ const Bytes = () => {
       Tower.track(EVENTS.PAGEVIEW, { page: EVENTS.PAGE_VIEW.BYTES })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.isReady])
+  }, [router.isReady, curatedProfiles.length])
 
   const { observe } = useInView({
     threshold: 0.25,

apps/web/src/components/Common/Providers/CuratedProfilesProvider.tsx

@@ -0,0 +1,27 @@
+import useCuratedProfiles from '@lib/store/idb/curated'
+import { TAPE_CURATOR_ID } from '@tape.xyz/constants'
+import type { FollowingRequest } from '@tape.xyz/lens'
+import { LimitType, useFollowingQuery } from '@tape.xyz/lens'
+
+const followingRequest: FollowingRequest = {
+  for: TAPE_CURATOR_ID,
+  limit: LimitType.Fifty
+}
+
+const CuratedProfilesProvider = () => {
+  const setCuratedProfiles = useCuratedProfiles(
+    (state) => state.setCuratedProfiles
+  )
+
+  useFollowingQuery({
+    variables: { request: followingRequest },
+    onCompleted: ({ following }) => {
+      const followings = following?.items.map((p) => p.id)
+      setCuratedProfiles(followings)
+    }
+  })
+
+  return null
+}
+
+export default CuratedProfilesProvider

apps/web/src/components/Common/Providers/index.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
 import type { ReactNode } from 'react'
 
 import ErrorBoundary from '../ErrorBoundary'
+import CuratedProfilesProvider from './CuratedProfilesProvider'
 import ThemeProvider from './ThemeProvider'
 
 const SubscriptionProvider = dynamic(() => import('./SubscriptionProvider'))
@@ -44,6 +45,7 @@ const Providers = ({ children }: { children: ReactNode }) => {
         <ApolloProvider client={apolloQueryClient}>
           <QueryClientProvider client={reactQueryClient}>
             <ThemeProvider>
+              <CuratedProfilesProvider />
               <SubscriptionProvider />
               <TogglesProvider />
               <LivepeerConfig client={livepeerClient} theme={videoPlayerTheme}>

apps/web/src/components/Common/Search/GlobalSearch.tsx

@@ -133,7 +133,10 @@ const GlobalSearch = () => {
                     <Profiles
                       results={profiles}
                       loading={profilesLoading}
-                      clearSearch={() => setKeyword('')}
+                      clearSearch={() => {
+                        setShowSearchBar(false)
+                        setKeyword('')
+                      }}
                     />
                   ) : (
                     <NoDataFound isCenter />
@@ -145,7 +148,10 @@ const GlobalSearch = () => {
                     <Publications
                       results={publications}
                       loading={publicationsLoading}
-                      clearSearch={() => setKeyword('')}
+                      clearSearch={() => {
+                        setShowSearchBar(false)
+                        setKeyword('')
+                      }}
                     />
                   ) : (
                     <NoDataFound isCenter />

apps/web/src/components/Home/Feed.tsx

@@ -2,59 +2,52 @@ import CategoryFilters from '@components/Common/CategoryFilters'
 import Timeline from '@components/Home/Timeline'
 import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
-import { getRandomFeedOrder } from '@lib/getRandomFeedOrder'
 import useAppStore from '@lib/store'
+import useCuratedProfiles from '@lib/store/idb/curated'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
   IS_MAINNET,
-  LENS_CUSTOM_FILTERS,
   TAPE_APP_ID
 } from '@tape.xyz/constants'
-import type {
-  ExplorePublicationRequest,
-  PrimaryPublication
-} from '@tape.xyz/lens'
+import type { PrimaryPublication, PublicationsRequest } from '@tape.xyz/lens'
 import {
-  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
-  useExplorePublicationsQuery
+  PublicationType,
+  usePublicationsQuery
 } from '@tape.xyz/lens'
 import { Spinner } from '@tape.xyz/ui'
 import React from 'react'
 import { useInView } from 'react-cool-inview'
 
-const since = getUnixTimestampForDaysAgo(30)
-const orderBy = getRandomFeedOrder()
+// const since = getUnixTimestampForDaysAgo(30)
 
 const Feed = ({ showFilter = true }) => {
   const activeTagFilter = useAppStore((state) => state.activeTagFilter)
+  const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles)
 
-  const request: ExplorePublicationRequest = {
+  const request: PublicationsRequest = {
     where: {
-      publicationTypes: [ExplorePublicationType.Post],
-      customFilters: LENS_CUSTOM_FILTERS,
       metadata: {
+        mainContentFocus: [PublicationMetadataMainFocusType.Video],
         publishedOn: IS_MAINNET ? [TAPE_APP_ID, ...ALLOWED_APP_IDS] : undefined,
         tags:
-          activeTagFilter !== 'all' ? { oneOf: [activeTagFilter] } : undefined,
-        mainContentFocus: [PublicationMetadataMainFocusType.Video]
+          activeTagFilter !== 'all' ? { oneOf: [activeTagFilter] } : undefined
       },
-      since
+      publicationTypes: [PublicationType.Post],
+      from: curatedProfiles
     },
-    orderBy,
     limit: LimitType.Fifty
   }
 
-  const { data, loading, error, fetchMore } = useExplorePublicationsQuery({
-    variables: { request }
+  const { data, loading, error, fetchMore } = usePublicationsQuery({
+    variables: { request },
+    skip: !curatedProfiles?.length
   })
 
-  const pageInfo = data?.explorePublications?.pageInfo
-  const videos = data?.explorePublications
-    ?.items as unknown as PrimaryPublication[]
+  const pageInfo = data?.publications?.pageInfo
+  const videos = data?.publications?.items as unknown as PrimaryPublication[]
 
   const { observe } = useInView({
     rootMargin: INFINITE_SCROLL_ROOT_MARGIN,
@@ -75,7 +68,7 @@ const Feed = ({ showFilter = true }) => {
       {showFilter && <CategoryFilters />}
       <div>
         {loading && <TimelineShimmer />}
-        {!error && !loading && videos.length > 0 && (
+        {!error && !loading && videos?.length > 0 && (
           <>
             <Timeline videos={videos} />
             {pageInfo?.next && (

apps/web/src/components/Home/LatestBytes.tsx

@@ -1,11 +1,9 @@
 import Badge from '@components/Common/Badge'
 import HoverableProfile from '@components/Common/HoverableProfile'
 import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer'
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
-import { getRandomFeedOrder } from '@lib/getRandomFeedOrder'
+import useCuratedProfiles from '@lib/store/idb/curated'
 import {
   FALLBACK_THUMBNAIL_URL,
-  LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
 } from '@tape.xyz/constants'
@@ -16,42 +14,37 @@ import {
   getThumbnailUrl,
   imageCdn
 } from '@tape.xyz/generic'
-import type {
-  ExplorePublicationRequest,
-  PrimaryPublication
-} from '@tape.xyz/lens'
+import type { PrimaryPublication, PublicationsRequest } from '@tape.xyz/lens'
 import {
-  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
-  useExplorePublicationsQuery
+  PublicationType,
+  usePublicationsQuery
 } from '@tape.xyz/lens'
 import Link from 'next/link'
 import React from 'react'
 
-const since = getUnixTimestampForDaysAgo(30)
-const orderBy = getRandomFeedOrder()
+const LatestBytes = () => {
+  const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles)
 
-const request: ExplorePublicationRequest = {
-  where: {
-    publicationTypes: [ExplorePublicationType.Post],
-    customFilters: LENS_CUSTOM_FILTERS,
-    metadata: {
-      mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo],
-      publishedOn: [TAPE_APP_ID, LENSTUBE_BYTES_APP_ID]
+  const request: PublicationsRequest = {
+    where: {
+      metadata: {
+        mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo],
+        publishedOn: [TAPE_APP_ID, LENSTUBE_BYTES_APP_ID]
+      },
+      publicationTypes: [PublicationType.Post],
+      from: curatedProfiles
     },
-    since
-  },
-  orderBy,
-  limit: LimitType.Fifty
-}
+    limit: LimitType.Fifty
+  }
 
-const LatestBytes = () => {
-  const { data, error, loading } = useExplorePublicationsQuery({
-    variables: { request }
+  const { data, error, loading } = usePublicationsQuery({
+    variables: { request },
+    skip: !curatedProfiles?.length
   })
 
-  const bytes = data?.explorePublications?.items as PrimaryPublication[]
+  const bytes = data?.publications?.items as PrimaryPublication[]
 
   if (loading) {
     return <LatestBytesShimmer />

apps/web/src/lib/store/idb/curated.ts

@@ -0,0 +1,24 @@
+import createIdbStorage from '@lib/createIdbStorage'
+import { LocalIDBStore } from '@tape.xyz/lens/custom-types'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface State {
+  curatedProfiles: string[]
+  setCuratedProfiles: (curatedProfiles: string[]) => void
+}
+
+const useCuratedProfiles = create(
+  persist<State>(
+    (set) => ({
+      curatedProfiles: [],
+      setCuratedProfiles: (curatedProfiles) => set({ curatedProfiles })
+    }),
+    {
+      name: LocalIDBStore.ALLOWED_TOKENS_STORE,
+      storage: createIdbStorage()
+    }
+  )
+)
+
+export default useCuratedProfiles