use userdetails in user profile page

Author: Roshan Jossy

src/components/UserDetails/UserDetails.tsx

@@ -1,7 +1,6 @@
 import { graphql, useFragment } from 'react-relay'
 import BadgeList from './Badges/BadgeList'
 import type { UserDetails_user$key } from '../../queries/__generated__/UserDetails_user.graphql'
-import { useState, ChangeEvent, FormEventHandler } from 'react'
 import Bio from './Bio'
 import { GoIssueOpened } from '@react-icons/all-files/go/GoIssueOpened'
 import { GoGitPullRequest } from '@react-icons/all-files/go/GoGitPullRequest'

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import type { NextPage, NextPageContext } from 'next'
+import type { NextPageContext } from 'next'
 import UserDetails from '../components/UserDetails/UserDetails'
 import { graphql, usePreloadedQuery } from 'react-relay'
 import { withRelay, RelayProps } from 'relay-nextjs'
@@ -11,6 +11,7 @@ import IssuesFromRecentRepos from '../components/issue/IssuesFromRecentRepo'
 import Layout from '../components/Layout'
 import Login from '../components/Login'
 import Feed from '../components/feed/Feed'
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
 
 const RootQuery = graphql`
   query pages_UserQuery {
@@ -56,7 +57,8 @@ const Home = ({
 }
 
 export default withRelay(Home, RootQuery, {
-  createClientEnvironment: () => getClientEnvironment()!,
+  createClientEnvironment: () =>
+    getClientEnvironment() as RelayModernEnvironment,
   createServerEnvironment: async (ctx: NextPageContext) => {
     const { createServerEnvironment } = await import(
       '../lib/server/server_environment'

src/pages/users/[handle].tsx

@@ -1,10 +1,55 @@
 import { useRouter } from 'next/router'
+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 UserDetails from '../../components/UserDetails/UserDetails'
+import { pages_UserQuery } from '../../queries/__generated__/pages_UserQuery.graphql'
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
+import { UserDetails_user$key } from '../../queries/__generated__/UserDetails_user.graphql'
 
-const User = () => {
+const UserQuery = graphql`
+  query pages_UserQuery {
+    viewer {
+      handle
+      ...UserDetails_user
+    }
+  }
+`
+
+const User = ({
+  preloadedQuery,
+}: RelayProps<Record<string, never>, pages_UserQuery>) => {
+  const query = usePreloadedQuery(UserQuery, preloadedQuery)
   const router = useRouter()
   const { handle } = router.query
 
-  return <h1>Welcome {handle}</h1>
+  return (
+    <div>
+      <Layout
+        sidebarContentRight={handle}
+        sidebarContentLeft={
+          <Card>
+            <UserDetails user={query.viewer as UserDetails_user$key} />
+          </Card>
+        }
+      >
+        {handle}
+      </Layout>
+    </div>
+  )
 }
 
-export default User
+export default withRelay(User, UserQuery, {
+  createClientEnvironment: () =>
+    getClientEnvironment() as RelayModernEnvironment,
+  createServerEnvironment: async (ctx: NextPageContext) => {
+    const { createServerEnvironment } = await import(
+      '../../lib/server/server_environment'
+    )
+
+    return createServerEnvironment(ctx)
+  },
+})