update user profile page

Author: Roshan Jossy

next.config.js

@@ -11,7 +11,7 @@ const nextConfig = {
   async rewrites() {
     return [
       {
-        source: '/@:handle([a-zA-Z0-9]+)/:id*',
+        source: '/@:handle([a-zA-Z0-9/-_]+)/:id*',
         destination: '/users/:handle/:id*',
       },
       {

schema/schema.graphql

@@ -4,6 +4,12 @@ schema {
 	mutation: Mutation
 }
 scalar Time
+
+enum SortOrder {
+	asc,
+	desc,
+}
+
 type Query {
 	viewer: User
 
@@ -12,7 +18,8 @@ type Query {
 	  # The ID of an object
 	  id: ID!
 	): Node
-	feeds(first: Int, last: Int, after: String, before: String): StoriesConnection!
+	feeds(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): StoriesConnection!
+	user(handle: String): User!
 }
 
 interface Node {
@@ -39,19 +46,23 @@ type Badge implements Node {
 type BadgesConnection {
 	edges: [BadgeEdge]!
 	pageInfo: PageInfo!
+	totalCount: Int!
 } 
 
 type BadgeEdge {
 	node: Badge!
 	cursor: String!
+} 
+
+enum BadgeSortBy {
+	time_created,
 }
 
 type Comment implements Node {
 	abstractContent: String!
 	contentJson: String!
 	createdBy: User!
 	id: ID!
-	reactions(first: Int, last: Int, after: String, before: String): ReactionsConnection!
 	timeCreated: Time!
 	timeUpdated: Time!
 }
@@ -68,11 +79,17 @@ input UpdateCommentInput {
 type CommentsConnection {
 	edges: [CommentEdge]!
 	pageInfo: PageInfo!
+	totalCount: Int!
+	hasViewerAssociation: Boolean!
 } 
 
 type CommentEdge {
 	node: Comment!
 	cursor: String!
+} 
+
+enum CommentSortBy {
+	time_created,
 }
 
 type GitContributionStats {
@@ -101,11 +118,16 @@ type Issue implements Node {
 type IssuesConnection {
 	edges: [IssueEdge]!
 	pageInfo: PageInfo!
+	totalCount: Int!
 } 
 
 type IssueEdge {
 	node: Issue!
 	cursor: String!
+} 
+
+enum IssueSortBy {
+	time_created,
 }
 
 type Reaction implements Node {
@@ -116,7 +138,6 @@ type Reaction implements Node {
 }
 
 input ReactionInput {
-	commentID: ID!
 	storyID: ID!
 }
 input UpdateReactionInput {
@@ -126,11 +147,17 @@ input UpdateReactionInput {
 type ReactionsConnection {
 	edges: [ReactionEdge]!
 	pageInfo: PageInfo!
+	totalCount: Int!
+	hasViewerAssociation: Boolean!
 } 
 
 type ReactionEdge {
 	node: Reaction!
 	cursor: String!
+} 
+
+enum ReactionSortBy {
+	time_created,
 }
 
 type Reputation {
@@ -143,11 +170,11 @@ input ReputationInput {
 
 type Story implements Node {
 	abstractContent: String!
-	comments(first: Int, last: Int, after: String, before: String): CommentsConnection!
+	comments(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): CommentsConnection!
 	contentJson: String!
 	createdBy: User!
 	id: ID!
-	reactions(first: Int, last: Int, after: String, before: String): ReactionsConnection!
+	reactions(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): ReactionsConnection!
 	thumbnail: String!
 	timeCreated: Time!
 	timeUpdated: Time!
@@ -169,26 +196,32 @@ input UpdateStoryInput {
 type StoriesConnection {
 	edges: [StoryEdge]!
 	pageInfo: PageInfo!
+	totalCount: Int!
+	hasViewerAssociation: Boolean!
 } 
 
 type StoryEdge {
 	node: Story!
 	cursor: String!
+} 
+
+enum StorySortBy {
+	time_created,
 }
 
 type User implements Node {
 	avatar: String!
-	badges(first: Int, last: Int, after: String, before: String): BadgesConnection!
+	badges(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): BadgesConnection!
 	bio: String!
 	gitContributionStats: GitContributionStats!
 	handle: String!
 	id: ID!
-	issuesFromLastRepo(first: Int, last: Int, after: String, before: String): IssuesConnection!
-	issuesFromOtherRecentRepos(first: Int, last: Int, after: String, before: String): IssuesConnection!
+	issuesFromLastRepo(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): IssuesConnection!
+	issuesFromOtherRecentRepos(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): IssuesConnection!
 	name: String!
-	relevantIssues(first: Int, last: Int, after: String, before: String): IssuesConnection!
+	relevantIssues(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): IssuesConnection!
 	reputation: Reputation!
-	stories(first: Int, last: Int, after: String, before: String): StoriesConnection!
+	stories(first: Int, last: Int, after: String, before: String, sortBy: String, sortOrder: SortOrder): StoriesConnection!
 	timeCreated: Time!
 	timeUpdated: Time!
 }
@@ -208,6 +241,21 @@ input UpdateUserInput {
 	gitContributionStats: GitContributionStatsInput
 	name: String 
 	reputation: ReputationInput
+} 
+
+type UsersConnection {
+	edges: [UserEdge]!
+	pageInfo: PageInfo!
+	totalCount: Int!
+} 
+
+type UserEdge {
+	node: User!
+	cursor: String!
+} 
+
+enum UserSortBy {
+	time_created,
 }
 
 type Mutation { 

src/components/UserDetails/Bio.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { GoPencil, GrPencil } from '@react-icons/all-files/go/GoPencil'
+import { GoPencil } from '@react-icons/all-files/go/GoPencil'
 import { GoCheck } from '@react-icons/all-files/go/GoCheck'
 import { graphql, useFragment, useMutation } from 'react-relay'
 import { Bio_user$key } from '../../queries/__generated__/Bio_user.graphql'

src/components/feed/MyStories.tsx

@@ -0,0 +1,41 @@
+import { graphql, usePaginationFragment } from 'react-relay'
+import { MyStories__Query$key } from '../../queries/__generated__/MyStories__Query.graphql'
+import StoryPreview from './StoryPreview'
+
+type MyStoriesProps = {
+  user: MyStories__Query$key
+}
+
+const MyStories = ({ user }: MyStoriesProps) => {
+  const { data } = usePaginationFragment(
+    graphql`
+      fragment MyStories__Query on User
+      @refetchable(queryName: "MyStoriesUser_Query")
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 10 }
+        cursor: { type: "String" }
+      ) {
+        stories(first: $count, after: $cursor)
+          @connection(key: "UserQuery__stories") {
+          edges {
+            node {
+              id
+              ...StoryPreview_node
+            }
+          }
+        }
+      }
+    `,
+    user
+  )
+
+  return (
+    <>
+      {data.stories.edges.map(
+        (edge) => edge && <StoryPreview story={edge?.node} key={edge.node.id} />
+      )}
+    </>
+  )
+}
+
+export default MyStories

src/components/story/StoryEditor.tsx

@@ -142,6 +142,28 @@ export default function Editor({ editable, body }: EditorProps) {
             --tw-prose-pre-code: none;
             --tw-prose-pre-bg: none;
           }
+
+          .dark .ce-inline-tool,
+          .dark .ce-toolbar__plus,
+          .dark .ce-toolbar__settings-btn {
+            @apply text-gray-400;
+          }
+
+          .dark .ce-inline-toolbar,
+          .dark .ce-conversion-toolbar,
+          .dark .ce-toolbox,
+          .dark .ce-popover,
+          .dark .ce-settings {
+            @apply bg-dark-600 border-dark-500;
+          }
+
+          .dark .ce-popover__item-icon {
+            @apply bg-dark-500;
+          }
+
+          .dark .ce-block--selected {
+            @apply bg-dark-500 text-gray-800;
+          }
         `}
       </style>
       {editable && <Button onClick={() => handleStorySubmit()}>Submit </Button>}

src/pages/story/[id].tsx

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic'
 import { graphql, usePreloadedQuery } from 'react-relay'
 import { RelayProps, withRelay } from 'relay-nextjs'
 import Layout from '../../components/Layout'
+import UserDetails from '../../components/UserDetails/UserDetails'
 import { getClientEnvironment } from '../../lib/client_environment'
 import { Id_StoryQuery } from '../../queries/__generated__/Id_StoryQuery.graphql'
 
@@ -16,6 +17,9 @@ const StoryQuery = graphql`
       ... on Story {
         id
         contentJson
+        createdBy {
+          ...UserDetails_user
+        }
       }
     }
   }
@@ -29,7 +33,13 @@ const Story = ({
     <div>
       <Layout
         sidebarContentRight={<div>Promoted</div>}
-        sidebarContentLeft={<div>Reactions</div>}
+        sidebarContentLeft={
+          <div>
+            {query.node?.createdBy && (
+              <UserDetails user={query?.node?.createdBy} />
+            )}
+          </div>
+        }
       >
         <Editor body={query?.node?.contentJson} editable={false} />
       </Layout>

src/pages/users/[handle].tsx

@@ -6,22 +6,23 @@ 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'
+import MyStories from '../../components/feed/MyStories'
+import { Handle_UserQuery } from '../../queries/__generated__/Handle_UserQuery.graphql'
 
 const UserQuery = graphql`
-  query pages_UserQuery {
-    viewer {
+  query Handle_UserQuery($handle: String!) {
+    user(handle: $handle) {
       handle
       ...UserDetails_user
+      ...MyStories__Query
     }
   }
 `
 
 const User = ({
   preloadedQuery,
-}: RelayProps<Record<string, never>, pages_UserQuery>) => {
+}: RelayProps<Record<string, never>, Handle_UserQuery>) => {
   const query = usePreloadedQuery(UserQuery, preloadedQuery)
   const router = useRouter()
   const { handle } = router.query
@@ -32,11 +33,11 @@ const User = ({
         sidebarContentRight={handle}
         sidebarContentLeft={
           <Card>
-            <UserDetails user={query.viewer as UserDetails_user$key} />
+            <UserDetails user={query.user} />
           </Card>
         }
       >
-        {handle}
+        <MyStories user={query.user} />
       </Layout>
     </div>
   )