Skip to content

Commit

Permalink
chore: move scroll margin to constants (#317)
Browse files Browse the repository at this point in the history 
* chore: move scroll margin to constants

* increase percent
  • Loading branch information
@sasicodes
sasicodes committed Nov 11, 2022
1 parent ea6cfb9 commit 5269462
Show file tree
Hide file tree
Showing 18 changed files with 54 additions and 33 deletions.
8 changes: 6 additions & 2 deletions src/components/Bytes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import useAppStore from '@lib/store'
import { Analytics, TRACK } from '@utils/analytics'
import { LENS_CUSTOM_FILTERS, LENSTUBE_BYTES_APP_ID } from '@utils/constants'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import Head from 'next/head'
import React, { useEffect, useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -53,7 +57,7 @@ const Bytes = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
8 changes: 6 additions & 2 deletions src/components/Channel/Activities/ChannelBytes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
import { Loader } from '@components/UIElements/Loader'
import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import { LENS_CUSTOM_FILTERS, LENSTUBE_BYTES_APP_ID } from '@utils/constants'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { FC, useState } from 'react'
import { useInView } from 'react-cool-inview'
import {
Expand Down Expand Up @@ -43,7 +47,7 @@ const ChannelBytes: FC<Props> = ({ channel }) => {
}
})
const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
4 changes: 2 additions & 2 deletions src/components/Channel/Activities/ChannelVideos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
import { Loader } from '@components/UIElements/Loader'
import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import { LENS_CUSTOM_FILTERS } from '@utils/constants'
import { LENS_CUSTOM_FILTERS, SCROLL_ROOT_MARGIN } from '@utils/constants'
import React, { FC, useState } from 'react'
import { useInView } from 'react-cool-inview'
import {
Expand Down Expand Up @@ -44,7 +44,7 @@ const ChannelVideos: FC<Props> = ({ channel }) => {
}
})
const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
4 changes: 2 additions & 2 deletions src/components/Channel/Activities/CollectedNFTs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
import { Loader } from '@components/UIElements/Loader'
import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import { POLYGON_CHAIN_ID } from '@utils/constants'
import { POLYGON_CHAIN_ID, SCROLL_ROOT_MARGIN } from '@utils/constants'
import React, { FC, useState } from 'react'
import { useInView } from 'react-cool-inview'
import {
Expand Down Expand Up @@ -42,7 +42,7 @@ const CollectedNFTs: FC<Props> = ({ channel }) => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Channel/Activities/CommentedVideos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import logger from '@lib/logger'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { FC, useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -48,7 +49,7 @@ const CommentedVideos: FC<Props> = ({ channel }) => {
}
)
const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
4 changes: 2 additions & 2 deletions src/components/Channel/Activities/MirroredVideos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
import { Loader } from '@components/UIElements/Loader'
import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import { LENS_CUSTOM_FILTERS } from '@utils/constants'
import { LENS_CUSTOM_FILTERS, SCROLL_ROOT_MARGIN } from '@utils/constants'
import React, { FC, useState } from 'react'
import { useInView } from 'react-cool-inview'
import {
Expand Down Expand Up @@ -44,7 +44,7 @@ const MirroredVideos: FC<Props> = ({ channel }) => {
}
})
const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/Category/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import logger from '@lib/logger'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import getCategoryName from '@utils/functions/getCategoryName'
import { useRouter } from 'next/router'
Expand Down Expand Up @@ -54,7 +55,7 @@ const ExploreCategory = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/Curated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { Analytics, TRACK } from '@utils/analytics'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { useEffect, useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -46,7 +47,7 @@ const Curated = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/Hashtag/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import logger from '@lib/logger'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import { useRouter } from 'next/router'
import React, { useState } from 'react'
Expand Down Expand Up @@ -55,7 +56,7 @@ const ExploreHashtag = () => {
const searchItems = data?.search?.items

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/LooksRare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import logger from '@lib/logger'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -43,7 +44,7 @@ const LooksRare = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/Recents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { Analytics, TRACK } from '@utils/analytics'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { useEffect, useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -47,7 +48,7 @@ const Recents = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Explore/Trending.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { Analytics, TRACK } from '@utils/analytics'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { useEffect, useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -47,7 +48,7 @@ const Trending = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
3 changes: 2 additions & 1 deletion src/components/Home/Feed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Loader } from '@components/UIElements/Loader'
import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import useAppStore from '@lib/store'
import { SCROLL_ROOT_MARGIN } from '@utils/constants'
import React, { useState } from 'react'
import { useInView } from 'react-cool-inview'
import Custom500 from 'src/pages/500'
Expand Down Expand Up @@ -40,7 +41,7 @@ const HomeFeed = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Library/SeeAll/Commented.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import usePersistStore from '@lib/store/persist'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import React, { useState } from 'react'
import { useInView } from 'react-cool-inview'
Expand Down Expand Up @@ -54,7 +55,7 @@ const SeeAllCommented = () => {
)

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Notifications/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { Analytics, TRACK } from '@utils/analytics'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import clsx from 'clsx'
import React, { useEffect, useState } from 'react'
Expand Down Expand Up @@ -79,7 +80,7 @@ const Notifications = () => {
})

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
5 changes: 3 additions & 2 deletions src/components/Watch/SuggestedVideos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import useAppStore from '@lib/store'
import {
LENS_CUSTOM_FILTERS,
LENSTUBE_APP_ID,
LENSTUBE_BYTES_APP_ID
LENSTUBE_BYTES_APP_ID,
SCROLL_ROOT_MARGIN
} from '@utils/constants'
import { useRouter } from 'next/router'
import React, { FC, useEffect, useState } from 'react'
Expand Down Expand Up @@ -64,7 +65,7 @@ const SuggestedVideos: FC<Props> = ({ currentVideoId }) => {
}, [id, refetch])

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
4 changes: 2 additions & 2 deletions src/components/Watch/VideoComments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { NoDataFound } from '@components/UIElements/NoDataFound'
import logger from '@lib/logger'
import useAppStore from '@lib/store'
import usePersistStore from '@lib/store/persist'
import { LENS_CUSTOM_FILTERS } from '@utils/constants'
import { LENS_CUSTOM_FILTERS, SCROLL_ROOT_MARGIN } from '@utils/constants'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import React, { FC, useState } from 'react'
Expand Down Expand Up @@ -75,7 +75,7 @@ const VideoComments: FC<Props> = ({ video }) => {
}

const { observe } = useInView({
rootMargin: '1000px 0px',
rootMargin: SCROLL_ROOT_MARGIN,
onEnter: async () => {
try {
const { data } = await fetchMore({
Expand Down
2 changes: 2 additions & 0 deletions src/utils/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ export const IMAGE_CDN_URL = IS_MAINNET
: 'https://ik.imagekit.io/lenstube/testnet'
export const VIDEO_CDN_URL = 'https://cdn.livepeer.com'

export const SCROLL_ROOT_MARGIN = '30% 0px'

// ipfs
export const IPFS_FREE_UPLOAD_LIMIT = IS_MAINNET ? 500 : 100
export const IPFS_GATEWAY = 'https://lens.infura-ipfs.io/ipfs/'
Expand Down

1 comment on commit 5269462

@vercel
Copy link

@vercel vercel bot commented on 5269462 Nov 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lenstube – ./

lenstube-git-main-lenstube.vercel.app
lenstube.xyz
lenstube-lenstube.vercel.app

Please sign in to comment.