Merge pull request #23 from firstcontributions/feat-virtualization

Author: Roshanjossey

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-relay": "^13.0.2",
+    "react-virtuoso": "^2.18.0",
     "relay-nextjs": "^0.6.0",
     "relay-runtime": "^13.0.2",
     "simple-oauth2": "^4.3.0",
@@ -64,6 +65,7 @@
     "relay-compiler": "^13.0.2",
     "relay-compiler-language-typescript": "^15.0.1",
     "relay-config": "^12.0.1",
+    "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.5"
   },

src/components/feed/Feed.tsx

@@ -1,4 +1,5 @@
 import { graphql, usePaginationFragment } from 'react-relay'
+import { Virtuoso } from 'react-virtuoso'
 import { FeedsQuery$key } from '../../queries/__generated__/FeedsQuery.graphql'
 import StoryPreview from './StoryPreview'
 
@@ -7,12 +8,12 @@ type FeedProps = {
 }
 
 const Feed = ({ root }: FeedProps) => {
-  const { data } = usePaginationFragment(
+  const { data, loadNext } = usePaginationFragment(
     graphql`
       fragment FeedsQuery on Query
       @refetchable(queryName: "FeedsRoot_Query")
       @argumentDefinitions(
-        count: { type: "Int", defaultValue: 10 }
+        count: { type: "Int", defaultValue: 4 }
         cursor: { type: "String" }
       ) {
         feeds(first: $count, after: $cursor)
@@ -30,11 +31,19 @@ const Feed = ({ root }: FeedProps) => {
   )
 
   return (
-    <>
-      {data.feeds.edges.map(
-        (edge) => edge && <StoryPreview story={edge?.node} key={edge.node.id} />
-      )}
-    </>
+    <div>
+      <Virtuoso
+        className="min-h-screen scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-300 dark:scrollbar-track-gray-500"
+        data={data.feeds.edges}
+        endReached={loadNext}
+        overscan={200}
+        itemContent={(index, edge) => {
+          return (
+            edge?.node && <StoryPreview story={edge?.node} key={edge.node.id} />
+          )
+        }}
+      />
+    </div>
   )
 }
 

src/components/feed/StoryPreview.tsx

@@ -32,7 +32,7 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <div className="my-8 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
+      <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
         <div>
           {data.thumbnail ? (
             <img className="cover-image" src={data.thumbnail} alt="" />

src/pages/index.tsx

@@ -5,9 +5,6 @@ import { withRelay, RelayProps } from 'relay-nextjs'
 import { pages_UserQuery } from '../queries/__generated__/pages_UserQuery.graphql'
 import { getClientEnvironment } from '../lib/client_environment'
 import Card from '../components/Card'
-import RelevantIssues from '../components/issue/RelevantIssues'
-import IssuesFromLastRepo from '../components/issue/IssuesFromLastRepo'
-import IssuesFromRecentRepos from '../components/issue/IssuesFromRecentRepo'
 import Layout from '../components/Layout'
 import Login from '../components/Login'
 import Feed from '../components/feed/Feed'
@@ -43,13 +40,9 @@ const Home = ({
       sidebarContentLeft={leftSidebar}
       sidebarContentRight={<div>Promoted</div>}
     >
-      <Card>Posts</Card>
       {query.viewer && (
         <>
           <Feed root={query} />
-          <IssuesFromLastRepo user={query.viewer} />
-          <IssuesFromRecentRepos user={query.viewer} />
-          <RelevantIssues user={query.viewer} />
         </>
       )}
     </Layout>

src/queries/__generated__/FeedsQuery.graphql.ts

@@ -22,5 +22,5 @@ module.exports = {
     },
   },
   darkMode: 'class',
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('tailwind-scrollbar')],
 }

src/queries/__generated__/FeedsRoot_Query.graphql.ts

@@ -451,6 +451,18 @@
     "@typescript-eslint/types" "5.28.0"
     eslint-visitor-keys "^3.3.0"
 
+"@virtuoso.dev/react-urx@^0.2.12":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
+  integrity sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==
+  dependencies:
+    "@virtuoso.dev/urx" "^0.2.13"
+
+"@virtuoso.dev/urx@^0.2.12", "@virtuoso.dev/urx@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.13.tgz#a65e7e8d923cb03397ac876bfdd45c7f71c8edf1"
+  integrity sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -2621,6 +2633,14 @@ react-relay@^13.0.2:
     nullthrows "^1.1.1"
     relay-runtime "13.0.2"
 
+react-virtuoso@^2.18.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.18.0.tgz#42f8a7cb632aaf0bb2812bbbd4b5f2583d3d53ec"
+  integrity sha512-BxMW9as2dPOP4YFkry/oNjQMEn3cOgEjHLb7Fg8oubOgRAfiukp1Co41QFD9ZMXZBNBZNTI2E5BwC5pol31mTg==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3014,6 +3034,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-scrollbar@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728"
+  integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==
+
 tailwindcss@^3.0.23:
   version "3.0.23"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.23.tgz"