add horizontal scroll to issues from recent repo

Author: Roshanjossey

src/components/issue/Issue.tsx

@@ -20,7 +20,7 @@ const Issue = ({ issue }: IssueProps) => {
     issue
   )
   return (
-    <div className="flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-dark-700">
+    <div className="w-96 flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-dark-700">
       <a href={data.url} target="_blank" rel="noopener noreferrer">
         <div className="flex flex-row">
           <img

src/components/issue/IssuesFromLastRepo.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { graphql, usePaginationFragment } from 'react-relay'
 import { IssuesFromLastRepo$key } from '../../queries/__generated__/IssuesFromLastRepo.graphql'
-import { IssuesFromLastRepo_Query } from '../../queries/__generated__/IssuesFromLastRepo_Query.graphql'
-import { UserDetails_user$key } from '../../queries/__generated__/UserDetails_user.graphql'
+import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight'
 import Issue from './Issue'
 
 type IssuesFromLastRepoProps = {
@@ -32,27 +31,70 @@ const IssuesFromLastRepo = ({ user }: IssuesFromLastRepoProps) => {
     user
   )
 
+  const scrollableElement = React.useRef<HTMLDivElement>(null)
+
+  enum scrollDirection {
+    Left = -1,
+    Right = 1,
+  }
+
+  const scrollHorizontally = useCallback((direction: scrollDirection) => {
+    scrollableElement.current &&
+      (scrollableElement.current.scrollLeft += direction * 550)
+  }, [])
+
+  const handleScrollRight = () => {
+    if (hasNext) {
+      loadNext(2)
+    }
+    scrollHorizontally(scrollDirection.Right)
+  }
+
+  useEffect(() => {
+    console.log('IssuesFromLastRepo: useEffect', data.issuesFromLastRepo.edges)
+    scrollHorizontally(scrollDirection.Right)
+  }, [data.issuesFromLastRepo.edges, scrollHorizontally, scrollDirection.Right])
+
   if (!data || data.issuesFromLastRepo.edges.length === 0) {
     return <></>
   }
 
   return (
     <div className="mt-10">
       <h3 className="font-bold text-gray-500 text-lg">Issues from last repo</h3>
-      <div className="grid grid-cols-2 xl:grid-cols-2 gap-4 mt-4">
-        {data.issuesFromLastRepo.edges.map(
-          (issue) => issue && <Issue issue={issue.node} key={issue.node.id} />
-        )}
-        {hasNext ? (
-          <button
-            onClick={() => {
-              loadNext(3)
-            }}
-          >
-            Load more
-          </button>
-        ) : null}
+      <div className="relative">
+        <div
+          className=" flex overflow-x-auto space-x-4 no-scrollbar scroll-smooth"
+          ref={scrollableElement}
+        >
+          {data.issuesFromLastRepo.edges.map(
+            (issue) => issue && <Issue issue={issue.node} key={issue.node.id} />
+          )}
+        </div>
+        <button
+          className="absolute right-8 bottom-0 mr-4 mt-4"
+          onClick={() => scrollHorizontally(scrollDirection.Left)}
+        >
+          <FaChevronRight className="b-0 w-6 h-6 rotate-180 dark:text-gray-300 bg-gray-300 dark:bg-dark-900 rounded-full p-1 font-bold" />
+        </button>
+        <button
+          className="absolute right-0 bottom-0 mr-4 mt-4"
+          onClick={() => handleScrollRight()}
+        >
+          <FaChevronRight className="b-0 w-6 h-6 dark:text-gray-300 bg-gray-300 dark:bg-dark-900 rounded-full p-1 font-bold" />
+        </button>
       </div>
+      <style jsx>
+        {`
+          .no-scrollbar::-webkit-scrollbar {
+            display: none;
+          }
+          .no-scrollbar {
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none;
+          }
+        `}
+      </style>
     </div>
   )
 }

src/pages/issues/index.tsx

@@ -9,11 +9,13 @@ import IssuesFromLastRepo from '../../components/issue/IssuesFromLastRepo'
 import IssuesFromRecentRepos from '../../components/issue/IssuesFromRecentRepo'
 import RelevantIssues from '../../components/issue/RelevantIssues'
 import { issuesQuery } from '../../queries/__generated__/issuesQuery.graphql'
+import UserDetails from '../../components/UserDetails/UserDetails'
 
 const IssuesQuery = graphql`
   query issuesQuery {
     viewer {
       handle
+      ...UserDetails_user
       ...RelevantIssues
       ...IssuesFromLastRepo
       ...IssuesFromRecentRepos
@@ -31,7 +33,11 @@ const Issues = ({
       {query.viewer && (
         <Layout
           sidebarContentRight={query.viewer.handle}
-          sidebarContentLeft={<Card></Card>}
+          sidebarContentLeft={
+            <Card>
+              <UserDetails user={query.viewer} />
+            </Card>
+          }
         >
           <IssuesFromLastRepo user={query.viewer} />
           <IssuesFromRecentRepos user={query.viewer} />