Update Codegen and UI + icons (#320)

* chore: filters * remove library * fix: icons * chore: add search icon * update sidebar * chore: collapsible sidebar * fix: CLS * chore: update theme color * chore: add theme toggle * chore: move scroll margin to constants (#317) * chore: move scroll margin to constants * increase percent * fix: fee collect decimal issue * fix: deepsource excludes * Replace short hand type conversions with function calls (#319) * fix: overflow on shop collects * chore: cleanup shop collects * chore: update request limit * chore: add width animation * chore: notification page * chore: video icons * chore: update verified icon * chore: replace black with theme * fix: borders * chore: change user menu icons * chore: init bytes section * chore: shallow route * refactor: readme * chore: bytes scroll button * chore: add icons on usermenu * chore: single byte fetch * chore: global state for tag filter * chore: add consistent type import * chore: cleanup * feat: rip doc-gen plugin and add cursorpagination * chore: replacing queries w/ hooks * chore: replace apollo hooks * feat: global tag filter * chore: move scroll margin to constants (#317) * chore: move scroll margin to constants * increase percent * feat: add shop button to collect on the secondary marketplace (#318) * Update index.tsx Remove extra comma * fix: overflow on shop collects * chore: cleanup shop collects * chore: update byte action icons * chore: replace more icons * chore: increase text size * fix: dark theme background * fix: layout padding * chore: remove outline * fix: channel videos * fix: cache issue and tag scroll * fix: duplicate imports * chore: add scroll event * chore: remove state on bytes * chore: cleanup * chore: remove unused helpers * chore: remove unwanted logs
tapexyz · Nov 14, 2022 · 9a92e25 · 9a92e25
1 parent 5d848fb
commit 9a92e25
Show file tree

Hide file tree

Showing 226 changed files with 6,675 additions and 9,964 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,6 +17,7 @@
   "extends": ["next", "next/core-web-vitals"],
   "rules": {
     "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "import/no-duplicates": ["error", { "considerQueryString": true }],
     "react/prop-types": "off",
     "react/no-unescaped-entities": "off",
     "react/jsx-no-useless-fragment": 2,
@@ -27,6 +28,7 @@
     "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
     "@next/next/no-img-element": "off",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",

diff --git a/README.md b/README.md
@@ -27,6 +27,9 @@
     <span>
         <img src="https://img.shields.io/badge/dependabot-enabled-025e8c?logo=Dependabot" alt="Dependabot">
     </span>
+    <span>
+        <img src="https://img.shields.io/github/stars/lenstube-xyz/lenstube" alt="Stargazers">
+    </span>
     <a href="https://github.com/lenstube-xyz/lenstube/blob/main/LICENSE">
         <img src="https://badgen.net/github/license/lenstube-xyz/lenstube" alt="License">
     </a>

diff --git a/codegen.yml b/codegen.yml
@@ -1,3 +1,4 @@
+overwrite: true
 schema: https://api-mumbai.lens.dev
 documents: "**/*.graphql"
 hooks:
@@ -9,8 +10,5 @@ generates:
     plugins:
         - typescript
         - typescript-operations
-        - typed-document-node
         - fragment-matcher
-    config:
-      fetcher: fetch
-      dedupeFragments: true
+        - typescript-react-apollo
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@graphql-codegen/typed-document-node": "^2.3.6",
     "@graphql-codegen/typescript": "^2.8.1",
     "@graphql-codegen/typescript-operations": "^2.5.6",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.6",
     "@next/bundle-analyzer": "^13.0.1",
     "@types/mixpanel-browser": "^2.38.0",
     "@types/node": "18.11.9",

diff --git a/src/components/Bytes/BottomOverlay.tsx b/src/components/Bytes/BottomOverlay.tsx
@@ -3,8 +3,9 @@ import SubscribeActions from '@components/Common/SubscribeActions'
 import { formatNumber } from '@utils/functions/formatNumber'
 import getProfilePicture from '@utils/functions/getProfilePicture'
 import Link from 'next/link'
-import React, { FC } from 'react'
-import { LenstubePublication } from 'src/types/local'
+import type { FC } from 'react'
+import React from 'react'
+import type { LenstubePublication } from 'src/types/local'
 
 type Props = {
   video: LenstubePublication

diff --git a/src/components/Bytes/ByteActions.tsx b/src/components/Bytes/ByteActions.tsx
@@ -1,13 +1,14 @@
+import MirrorOutline from '@components/Common/Icons/MirrorOutline'
 import MirrorVideo from '@components/Common/MirrorVideo'
 import ReportModal from '@components/Common/VideoCard/ReportModal'
 import ShareModal from '@components/Common/VideoCard/ShareModal'
 import VideoOptions from '@components/Common/VideoCard/VideoOptions'
 import { Button } from '@components/UIElements/Button'
 import CollectVideo from '@components/Watch/CollectVideo'
 import PublicationReaction from '@components/Watch/PublicationReaction'
-import React, { FC, useState } from 'react'
-import { AiOutlineRetweet } from 'react-icons/ai'
-import { LenstubePublication } from 'src/types/local'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import type { LenstubePublication } from 'src/types/local'
 
 type Props = {
   video: LenstubePublication
@@ -26,34 +27,33 @@ const ByteActions: FC<Props> = ({ video }) => {
           showOnHover={false}
         />
       </div>
-      <div className="items-center py-2.5 space-y-1 md:flex md:flex-col">
+      <div className="items-center py-2.5 space-y-1.5 md:flex md:flex-col">
         <div className="text-white md:text-inherit">
           <PublicationReaction
             publication={video}
-            iconSize="2xl"
-            textSize="xs"
+            iconSize="lg"
             isVertical
             showLabel
           />
         </div>
-        {video?.collectModule?.__typename !== 'RevertCollectModuleSettings' && (
-          <div className="hidden md:block">
-            <CollectVideo video={video} variant="secondary" />
-            <div className="text-xs leading-3 text-center">
-              {video.stats?.totalAmountOfCollects || 'Collect'}
-            </div>
-          </div>
-        )}
         <div className="text-white text-center md:text-inherit">
           <MirrorVideo video={video}>
             <Button variant="secondary" className="!px-0">
-              <AiOutlineRetweet className="text-xl" />
+              <MirrorOutline className="w-6 h-6" />
             </Button>
             <div className="text-xs leading-3">
               {video.stats?.totalAmountOfMirrors || 'Mirror'}
             </div>
           </MirrorVideo>
         </div>
+        {video?.collectModule?.__typename !== 'RevertCollectModuleSettings' && (
+          <div className="hidden md:block">
+            <CollectVideo video={video} variant="secondary" />
+            <div className="text-xs leading-3 text-center">
+              {video.stats?.totalAmountOfCollects || 'Collect'}
+            </div>
+          </div>
+        )}
       </div>
       <ShareModal video={video} show={showShare} setShowShare={setShowShare} />
       <ReportModal

diff --git a/src/components/Bytes/ByteVideo.tsx b/src/components/Bytes/ByteVideo.tsx
@@ -4,9 +4,11 @@ import getThumbnailUrl from '@utils/functions/getThumbnailUrl'
 import { getPermanentVideoUrl, getVideoUrl } from '@utils/functions/getVideoUrl'
 import imageCdn from '@utils/functions/imageCdn'
 import axios from 'axios'
-import React, { FC, useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+import type { FC } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useInView } from 'react-cool-inview'
-import { LenstubePublication } from 'src/types/local'
+import type { LenstubePublication } from 'src/types/local'
 
 import BottomOverlay from './BottomOverlay'
 import ByteActions from './ByteActions'
@@ -17,8 +19,10 @@ type Props = {
 }
 
 const ByteVideo: FC<Props> = ({ video }) => {
-  const [playing, setIsPlaying] = useState(true)
+  const router = useRouter()
+
   const videoRef = useRef<HTMLVideoElement>(null)
+  const [playing, setIsPlaying] = useState(true)
   const [videoUrl, setVideoUrl] = useState(getVideoUrl(video))
 
   const checkVideoResource = async () => {
@@ -45,9 +49,7 @@ const ByteVideo: FC<Props> = ({ video }) => {
         videoRef.current?.pause()
         setIsPlaying(false)
       }
-    } catch (error) {
-      logger.error('[Error Play Byte]', error)
-    }
+    } catch {}
   }
 
   const { observe } = useInView({
@@ -57,13 +59,15 @@ const ByteVideo: FC<Props> = ({ video }) => {
       setIsPlaying(false)
     },
     onEnter: () => {
+      router.push(`/bytes/?id=${video?.id}`, undefined, {
+        shallow: true
+      })
       videoRef.current?.load()
       videoRef.current
         ?.play()
         .then(() => setIsPlaying(true))
-        .catch((e) => {
+        .catch(() => {
           setIsPlaying(false)
-          logger.error('[Error AutoPlay Byte]', e)
         })
     }
   })
@@ -79,7 +83,7 @@ const ByteVideo: FC<Props> = ({ video }) => {
           disableRemotePlayback
           width="345"
           poster={imageCdn(getThumbnailUrl(video), 'thumbnail')}
-          className="md:rounded-xl min-w-[250px] w-screen md:w-[345px] 2xl:w-[450px] h-screen bg-black md:h-[calc(100vh-145px)]"
+          className="md:rounded-xl min-w-[250px] w-screen md:w-[350px] ultrawide:w-[407px] h-screen bg-black md:h-[calc(100vh-145px)]"
           loop
           src={videoUrl}
         >

diff --git a/src/components/Bytes/TopOverlay.tsx b/src/components/Bytes/TopOverlay.tsx
@@ -1,7 +1,8 @@
 import { HOME } from '@utils/url-path'
 import clsx from 'clsx'
 import Link from 'next/link'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { BsArrowLeft, BsPauseFill, BsPlayFill } from 'react-icons/bs'
 
 type Props = {

diff --git a/src/components/Bytes/index.tsx b/src/components/Bytes/index.tsx
@@ -1,8 +1,6 @@
-import { useQuery } from '@apollo/client'
 import MetaTags from '@components/Common/MetaTags'
 import { Loader } from '@components/UIElements/Loader'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
-import logger from '@lib/logger'
 import useAppStore from '@lib/store'
 import { Analytics, TRACK } from '@utils/analytics'
 import {
@@ -11,15 +9,16 @@ import {
   SCROLL_ROOT_MARGIN
 } from '@utils/constants'
 import Head from 'next/head'
-import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
 import { useInView } from 'react-cool-inview'
 import {
-  ExploreDocument,
-  PaginatedResultInfo,
   PublicationSortCriteria,
-  PublicationTypes
+  PublicationTypes,
+  useExploreLazyQuery,
+  usePublicationDetailsLazyQuery
 } from 'src/types/lens'
-import { LenstubePublication } from 'src/types/local'
+import type { LenstubePublication } from 'src/types/local'
 
 import ByteVideo from './ByteVideo'
 
@@ -33,60 +32,79 @@ const request = {
 }
 
 const Bytes = () => {
+  const router = useRouter()
   const selectedChannel = useAppStore((state) => state.selectedChannel)
 
-  const [bytes, setBytes] = useState<LenstubePublication[]>([])
-  const [pageInfo, setPageInfo] = useState<PaginatedResultInfo>()
+  const [fetchPublication, { data: singleByte, loading: singleByteLoading }] =
+    usePublicationDetailsLazyQuery()
+
+  const [fetchAllBytes, { data, loading, error, fetchMore }] =
+    useExploreLazyQuery({
+      variables: {
+        request,
+        reactionRequest: selectedChannel
+          ? { profileId: selectedChannel?.id }
+          : null,
+        channelId: selectedChannel?.id ?? null
+      },
+      onCompleted: (data) => {
+        const items = data?.explorePublications?.items as LenstubePublication[]
+        const publicationId = router.query.id
+        if (!publicationId) {
+          router.push(`/bytes/?id=${items[0]?.id}`, undefined, {
+            shallow: true
+          })
+        }
+      }
+    })
+
+  const bytes = data?.explorePublications?.items as LenstubePublication[]
+  const pageInfo = data?.explorePublications?.pageInfo
+  const singleBytePublication = singleByte?.publication as LenstubePublication
+
+  const fetchSingleByte = async () => {
+    const publicationId = router.query.id
+    if (!publicationId) return fetchAllBytes()
+    await fetchPublication({
+      variables: {
+        request: { publicationId },
+        reactionRequest: selectedChannel
+          ? { profileId: selectedChannel?.id }
+          : null,
+        channelId: selectedChannel?.id ?? null
+      },
+      onCompleted: () => fetchAllBytes()
+    })
+  }
 
   useEffect(() => {
+    fetchSingleByte()
     Analytics.track('Pageview', { path: TRACK.PAGE_VIEW.BYTES })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const { data, loading, error, fetchMore } = useQuery(ExploreDocument, {
-    variables: {
-      request,
-      reactionRequest: selectedChannel
-        ? { profileId: selectedChannel?.id }
-        : null,
-      channelId: selectedChannel?.id ?? null
-    },
-    onCompleted(data) {
-      setPageInfo(data?.explorePublications?.pageInfo)
-      setBytes(data?.explorePublications?.items as LenstubePublication[])
-    }
-  })
-
   const { observe } = useInView({
     rootMargin: SCROLL_ROOT_MARGIN,
     onEnter: async () => {
-      try {
-        const { data } = await fetchMore({
-          variables: {
-            request: {
-              ...request,
-              cursor: pageInfo?.next
-            }
+      await fetchMore({
+        variables: {
+          request: {
+            ...request,
+            cursor: pageInfo?.next
           }
-        })
-        setPageInfo(data?.explorePublications?.pageInfo)
-        setBytes([
-          ...bytes,
-          ...(data?.explorePublications?.items as LenstubePublication[])
-        ])
-      } catch (error) {
-        logger.error('[Error Fetch Bytes]', error)
-      }
+        }
+      })
     }
   })
 
-  if (loading)
+  if (loading || singleByteLoading)
     return (
       <div className="grid h-[80vh] place-items-center">
         <Loader />
       </div>
     )
 
-  if (data?.explorePublications?.items?.length === 0) {
+  if (error) {
     return (
       <div className="grid h-[80vh] place-items-center">
         <NoDataFound isCenter withImage text="No bytes found" />
@@ -100,18 +118,17 @@ const Bytes = () => {
         <meta name="theme-color" content="#000000" />
       </Head>
       <MetaTags title="Bytes" />
-      {!error && !loading && (
-        <div className="md:h-[calc(100vh-70px)] h-screen overflow-y-scroll no-scrollbar snap-y snap-mandatory scroll-smooth">
-          {bytes?.map((video: LenstubePublication) => (
-            <ByteVideo video={video} key={`${video?.id}_${video.createdAt}`} />
-          ))}
-          {pageInfo?.next && bytes.length !== pageInfo?.totalCount && (
-            <span ref={observe} className="flex justify-center p-10">
-              <Loader />
-            </span>
-          )}
-        </div>
-      )}
+      <div className="md:h-[calc(100vh-70px)] h-screen overflow-y-scroll no-scrollbar snap-y snap-mandatory scroll-smooth">
+        {singleByte && <ByteVideo video={singleBytePublication} />}
+        {bytes?.map((video: LenstubePublication) => (
+          <ByteVideo video={video} key={`${video?.id}_${video.createdAt}`} />
+        ))}
+        {pageInfo?.next && bytes.length !== pageInfo?.totalCount && (
+          <span ref={observe} className="flex justify-center p-10">
+            <Loader />
+          </span>
+        )}
+      </div>
     </div>
   )
 }

diff --git a/src/components/Channel/Activities/About.tsx b/src/components/Channel/Activities/About.tsx
@@ -6,11 +6,12 @@ import { formatUrl } from '@utils/functions/formatUrl'
 import { getValueFromKeyInAttributes } from '@utils/functions/getFromAttributes'
 import { shortenAddress } from '@utils/functions/shortenAddress'
 import Link from 'next/link'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { AiOutlineNumber } from 'react-icons/ai'
 import { HiOutlineGlobe, HiOutlineLocationMarker } from 'react-icons/hi'
 import { RiShieldKeyholeLine, RiTwitterLine } from 'react-icons/ri'
-import { Attribute, Profile } from 'src/types/lens'
+import type { Attribute, Profile } from 'src/types/lens'
 
 type Props = {
   channel: Profile