Add CuratedProfilesProvider and update LatestBytes and Feed components

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/Home/Feed.tsx

@@ -1,20 +1,21 @@
 import CategoryFilters from '@components/Common/CategoryFilters'
-import VideoCard from '@components/Common/VideoCard'
+import Timeline from '@components/Home/Timeline'
 import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
 import useAppStore from '@lib/store'
+import useCuratedProfiles from '@lib/store/idb/curated'
 import {
+ ALLOWED_APP_IDS,
  INFINITE_SCROLL_ROOT_MARGIN,
- LENSTUBE_APP_ID,
- LENSTUBE_BYTES_APP_ID,
- TAPE_APP_ID,
- TAPE_CURATOR_ID
+ IS_MAINNET,
+ TAPE_APP_ID
 } from '@tape.xyz/constants'
-import type { FeedItem, FeedRequest, PrimaryPublication } from '@tape.xyz/lens'
+import type { PrimaryPublication, PublicationsRequest } from '@tape.xyz/lens'
 import {
- FeedEventItemType,
+ LimitType,
  PublicationMetadataMainFocusType,
- useFeedQuery
+ PublicationType,
+ usePublicationsQuery
 } from '@tape.xyz/lens'
 import { Spinner } from '@tape.xyz/ui'
 import React from 'react'
@@ -24,26 +25,28 @@ import { useInView } from 'react-cool-inview'
 
 const Feed = ({ showFilter = true }) => {
  const activeTagFilter = useAppStore((state) => state.activeTagFilter)
+ const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles)
 
- const request: FeedRequest = {
+ const request: PublicationsRequest = {
  where: {
- feedEventItemTypes: [FeedEventItemType.Post],
- for: TAPE_CURATOR_ID,
  metadata: {
- publishedOn: [TAPE_APP_ID, LENSTUBE_APP_ID, LENSTUBE_BYTES_APP_ID],
+ 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
+ },
+ publicationTypes: [PublicationType.Post],
+ from: curatedProfiles
+ },
+ limit: LimitType.Fifty
  }
 
- const { data, loading, error, fetchMore } = useFeedQuery({
+ const { data, loading, error, fetchMore } = usePublicationsQuery({
  variables: { request }
  })
 
- const pageInfo = data?.feed?.pageInfo
- const feedItems = data?.feed?.items as FeedItem[]
+ const pageInfo = data?.publications?.pageInfo
+ const videos = data?.publications?.items as unknown as PrimaryPublication[]
 
  const { observe } = useInView({
  rootMargin: INFINITE_SCROLL_ROOT_MARGIN,
@@ -64,27 +67,17 @@ const Feed = ({ showFilter = true }) => {
  {showFilter && <CategoryFilters />}
  <div>
  {loading && <TimelineShimmer />}
- {!error && !loading && feedItems.length > 0 && (
+ {!error && !loading && videos.length > 0 && (
  <>
- <div className="ultrawide:grid-cols-6 grid-col-1 desktop:grid-cols-4 tablet:grid-cols-3 grid gap-x-4 gap-y-2 md:gap-y-6">
- {feedItems?.map((feedItem: FeedItem) => {
- const video = feedItem.root
- return (
- <VideoCard
- key={video?.id}
- video={video as PrimaryPublication}
- />
- )
- })}
- </div>
+ <Timeline videos={videos} />
  {pageInfo?.next && (
  <span ref={observe} className="flex justify-center p-10">
  <Spinner />
  </span>
  )}
  </>
  )}
- {feedItems?.length === 0 && (
+ {videos?.length === 0 && (
  <NoDataFound isCenter withImage text={`No videos found`} />
  )}
  </div>

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

@@ -1,11 +1,11 @@
 import Badge from '@components/Common/Badge'
 import HoverableProfile from '@components/Common/HoverableProfile'
 import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer'
+import useCuratedProfiles from '@lib/store/idb/curated'
 import {
  FALLBACK_THUMBNAIL_URL,
  LENSTUBE_BYTES_APP_ID,
- TAPE_APP_ID,
- TAPE_CURATOR_ID
+ TAPE_APP_ID
 } from '@tape.xyz/constants'
 import {
  getProfile,
@@ -14,47 +14,48 @@ import {
  getThumbnailUrl,
  imageCdn
 } from '@tape.xyz/generic'
-import type { FeedItem, FeedRequest } from '@tape.xyz/lens'
+import type { PrimaryPublication, PublicationsRequest } from '@tape.xyz/lens'
 import {
- FeedEventItemType,
+ LimitType,
  PublicationMetadataMainFocusType,
- useFeedQuery
+ PublicationType,
+ usePublicationsQuery
 } from '@tape.xyz/lens'
 import Link from 'next/link'
 import React from 'react'
 
-// const since = getUnixTimestampForDaysAgo(30)
+const LatestBytes = () => {
+ const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles)
 
-const request: FeedRequest = {
- where: {
- feedEventItemTypes: [FeedEventItemType.Post],
- for: TAPE_CURATOR_ID,
- metadata: {
- publishedOn: [TAPE_APP_ID, LENSTUBE_BYTES_APP_ID],
- mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo]
- }
+ const request: PublicationsRequest = {
+ where: {
+ metadata: {
+ mainContentFocus: [PublicationMetadataMainFocusType.ShortVideo],
+ publishedOn: [TAPE_APP_ID, LENSTUBE_BYTES_APP_ID]
+ },
+ publicationTypes: [PublicationType.Post],
+ from: curatedProfiles
+ },
+ limit: LimitType.Fifty
  }
-}
 
-const LatestBytes = () => {
- const { data, error, loading } = useFeedQuery({
+ const { data, error, loading } = usePublicationsQuery({
  variables: { request }
  })
 
- const feedItems = data?.feed?.items as FeedItem[]
+ const bytes = data?.publications?.items as PrimaryPublication[]
 
  if (loading) {
  return <LatestBytesShimmer />
  }
 
- if (!feedItems?.length || error) {
+ if (!bytes?.length || error) {
  return null
  }
 
  return (
  <>
- {feedItems.map((feedItem: FeedItem) => {
- const byte = feedItem.root
+ {bytes.map((byte) => {
  const thumbnailUrl = getThumbnailUrl(byte.metadata)
  return (
  <div className="flex flex-col" key={byte.id}>

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

packages/lens/custom-types.ts

@@ -138,7 +138,8 @@ export enum LocalIDBStore {
  COLLECT_STORE = 'collect.store',
  VERIFIED_STORE = 'verified.store',
  ALLOWED_TOKENS_STORE = 'allowed-tokens.store',
- RESTRICTIONS_STORE = 'restrictions.store'
+ RESTRICTIONS_STORE = 'restrictions.store',
+ CURATED_STORE = 'curated.store'
 }
 
 export type SupportedOpenActionModuleType =