Merge pull request #22 from firstcontributions/issue-page

Author: Roshan Jossy

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

@@ -0,0 +1,61 @@
+import { NextPageContext } from 'next'
+import { graphql, usePreloadedQuery } from 'react-relay'
+import { RelayProps, withRelay } from 'relay-nextjs'
+import Layout from '../../components/Layout'
+import { getClientEnvironment } from '../../lib/client_environment'
+import Card from '../../components/Card'
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
+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
+    }
+  }
+`
+
+const Issues = ({
+  preloadedQuery,
+}: RelayProps<Record<string, never>, issuesQuery>) => {
+  const query = usePreloadedQuery(IssuesQuery, preloadedQuery)
+
+  return (
+    <div>
+      {query.viewer && (
+        <Layout
+          sidebarContentRight={query.viewer.handle}
+          sidebarContentLeft={
+            <Card>
+              <UserDetails user={query.viewer} />
+            </Card>
+          }
+        >
+          <IssuesFromLastRepo user={query.viewer} />
+          <IssuesFromRecentRepos user={query.viewer} />
+          <RelevantIssues user={query.viewer} />
+        </Layout>
+      )}
+    </div>
+  )
+}
+
+export default withRelay(Issues, IssuesQuery, {
+  createClientEnvironment: () =>
+    getClientEnvironment() as RelayModernEnvironment,
+  createServerEnvironment: async (ctx: NextPageContext) => {
+    const { createServerEnvironment } = await import(
+      '../../lib/server/server_environment'
+    )
+
+    return createServerEnvironment(ctx)
+  },
+})