added feeds page

Author: gokultp

src/components/feed/Feed.tsx

@@ -0,0 +1,41 @@
+import { graphql, usePaginationFragment } from 'react-relay'
+import { FeedsQuery$key } from '../../queries/__generated__/FeedsQuery.graphql'
+import StoryPreview from './StoryPreview'
+
+type FeedProps = {
+  root: FeedsQuery$key
+}
+
+const Feed = ({ root }: FeedProps) => {
+  const { data, loadNext, hasNext } = usePaginationFragment(
+    graphql`
+      fragment FeedsQuery on Query
+      @refetchable(queryName: "FeedsRoot_Query")
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 10 }
+        cursor: { type: "String" }
+      ) {
+        feeds(first: $count, after: $cursor)
+          @connection(key: "RootQuery__feeds") {
+          edges {
+            node {
+              id
+              ...StoryPreview_node
+            }
+          }
+        }
+      }
+    `,
+    root
+  )
+
+  return (
+    <>
+      {data.feeds.edges.map(
+        (edge) => edge && <StoryPreview story={edge?.node} />
+      )}
+    </>
+  )
+}
+
+export default Feed

src/components/feed/StoryPreview.tsx

@@ -0,0 +1,40 @@
+import { graphql, useFragment } from 'react-relay'
+import { StoryPreview_node$key } from '../../queries/__generated__/StoryPreview_node.graphql'
+import Card from '../Card'
+import UserSnippet from './UserSnippet'
+
+type StoryPreviewProps = {
+  story: StoryPreview_node$key
+}
+
+const StoryPreview = ({ story }: StoryPreviewProps) => {
+  const data = useFragment(
+    graphql`
+      fragment StoryPreview_node on Story {
+        id
+        abstractContent
+        thumbnail
+        timeCreated
+        title
+        createdBy {
+          ...UserSnippet_user
+        }
+      }
+    `,
+    story
+  )
+
+  return (
+    <>
+      <Card classes="my-8">
+        <UserSnippet user={data.createdBy} />
+        <div className="prose">
+          <h3>{data.title}</h3>
+          <p>{data.abstractContent}</p>
+        </div>
+      </Card>
+    </>
+  )
+}
+
+export default StoryPreview

src/components/feed/UserSnippet.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { graphql, useFragment } from 'react-relay'
+import { UserSnippet_user$key } from '../../queries/__generated__/UserSnippet_user.graphql'
+
+type UserSnippetProps = {
+  user: UserSnippet_user$key
+}
+
+const UserSnippet = ({ user }: UserSnippetProps) => {
+  const data = useFragment(
+    graphql`
+      fragment UserSnippet_user on User {
+        avatar
+        id
+        handle
+        reputation {
+          value
+        }
+      }
+    `,
+    user
+  )
+
+  const hanlde = `@${data.handle}`
+  console.log(hanlde)
+  return (
+    <div className="flex">
+      <img src={data.avatar} alt={data.handle} className="w-8 h-8 rounded-sm" />
+      <Link href={`/${hanlde}`}> {data.handle} </Link>
+    </div>
+  )
+}
+
+export default UserSnippet

src/pages/index.tsx

@@ -10,8 +10,9 @@ 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'
 
-const FeedsQuery = graphql`
+const RootQuery = graphql`
   query pages_UserQuery {
     viewer {
       handle
@@ -20,12 +21,13 @@ const FeedsQuery = graphql`
       ...IssuesFromLastRepo
       ...IssuesFromRecentRepos
     }
+    ...FeedsQuery
   }
 `
 const Home = ({
   preloadedQuery,
 }: RelayProps<Record<string, never>, pages_UserQuery>) => {
-  const query = usePreloadedQuery(FeedsQuery, preloadedQuery)
+  const query = usePreloadedQuery(RootQuery, preloadedQuery)
   let leftSidebar = <Login />
   if (query.viewer) {
     leftSidebar = (
@@ -43,6 +45,7 @@ const Home = ({
       <Card>Posts</Card>
       {query.viewer && (
         <>
+          <Feed root={query} />
           <IssuesFromLastRepo user={query.viewer} />
           <IssuesFromRecentRepos user={query.viewer} />
           <RelevantIssues user={query.viewer} />
@@ -52,7 +55,7 @@ const Home = ({
   )
 }
 
-export default withRelay(Home, FeedsQuery, {
+export default withRelay(Home, RootQuery, {
   createClientEnvironment: () => getClientEnvironment()!,
   createServerEnvironment: async (ctx: NextPageContext) => {
     const { createServerEnvironment } = await import(