added user overview

app/client/fragments.tsx

@@ -7,6 +7,16 @@ export const sessionFragment = gql`
   }
 `;
 
+export const userFragment = gql`
+  fragment User on User {
+    id
+    username
+    description
+    createdAt
+    updatedAt
+  }
+`;
+
 export const bookFragment = gql`
   fragment Book on Book {
     id

app/client/hooks/useUserOneQuery.tsx

@@ -1,7 +1,14 @@
 import { ApolloError, ApolloQueryResult, gql, OperationVariables, useQuery } from '@apollo/client';
 import { UserOneQuery } from '@generated/types';
+import { userFragment } from '../fragments';
 
-export function useUserOneQuery({ id, skip }: { id?: string; skip?: boolean }): {
+export function useUserOneQuery({
+  input,
+  skip
+}: {
+  readonly input: { readonly id: string } | { readonly username: string };
+  readonly skip?: boolean;
+}): {
   data: UserOneQuery | undefined;
   loading: boolean;
   error: ApolloError | undefined;
@@ -10,7 +17,7 @@ export function useUserOneQuery({ id, skip }: { id?: string; skip?: boolean }):
   ) => Promise<ApolloQueryResult<UserOneQuery>>;
 } {
   const { data, loading, error, refetch } = useQuery<UserOneQuery>(query, {
-    variables: { id },
+    variables: { input },
     skip
   });
   return {
@@ -22,12 +29,10 @@ export function useUserOneQuery({ id, skip }: { id?: string; skip?: boolean }):
 }
 
 const query = gql`
-  query UserOne($id: ID!) {
+  query UserOne($input: UserOneInput!) {
-    userOne(id: $id) {
+    userOne(input: $input) {
-      id
+      ...User
-      username
-      createdAt
-      updatedAt
     }
   }
+  ${userFragment}
 `;

app/client/pages/profile/$username.tsx

@@ -1,5 +1,8 @@
-import {Stack} from '@chakra-ui/react';
+import { Avatar } from '@app/client/components/ui/avatar';
-import {createFileRoute} from '@tanstack/react-router';
+import { toFormattedDate } from '@app/client/helpers';
+import { useUserOneQuery } from '@app/client/hooks/useUserOneQuery';
+import { Card, Heading, HStack, SkeletonCircle, SkeletonText, Stack, Text } from '@chakra-ui/react';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/profile/$username')({
   component: RouteComponent
@@ -7,5 +10,67 @@ export const Route = createFileRoute('/profile/$username')({
 
 function RouteComponent() {
   const { username } = Route.useParams();
-  return <Stack>{`Hello, "${username}"!`}</Stack>;
+
+  const { data } = useUserOneQuery({
+    input: {
+      username
+    }
+  });
+
+  if (data == null) return <UserOverviewSkeleton />;
+
+  return (
+    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
+      <UserOverview user={{ ...data.userOne }} />
+    </Stack>
+  );
+}
+
+function UserOverview({
+  user
+}: {
+  readonly user: {
+    readonly id: string;
+    readonly username: string;
+    readonly description?: string | null;
+    readonly createdAt: string;
+  };
+}) {
+  return (
+    <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px" gap={3}>
+      <Stack direction="row" alignItems="start">
+        <Avatar size="2xl" fallback={user.username[0]} />
+        <Stack width="100%">
+          <Heading color="colorPalette.400" size="2xl" overflow="auto">
+            {user.username}
+          </Heading>
+
+          <Stack direction="row">
+            <Text fontWeight="bold">joined:</Text>
+            <Text color="fg.muted">{toFormattedDate({ value: user.createdAt })}</Text>
+          </Stack>
+        </Stack>
+      </Stack>
+      <Card.Root variant="subtle" width="100%">
+        <Card.Body paddingX="3" paddingY="1">
+          <Text>{user.description ?? 'No user description =('}</Text>
+        </Card.Body>
+      </Card.Root>
+    </Stack>
+  );
+}
+
+function UserOverviewSkeleton() {
+  return (
+    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
+      <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px">
+        <SkeletonCircle width={70} height={70} />
+        <Stack gap="6" maxWidth="100%">
+          <HStack width="full">
+            <SkeletonText noOfLines={5} />
+          </HStack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
 }

app/server/graphql/resolvers/userOneResolver.ts

@@ -5,9 +5,17 @@ import { toUserSchema } from './mappers/userMapper';
 
 export async function UserOneResolver(
   _: any,
-  { id }: QueryUserOneArgs,
+  { input }: QueryUserOneArgs,
   { identity }: IdentityContext
 ): Promise<User> {
-  const model = await prisma.user.findUniqueOrThrow({ where: { id } });
+  if (input.id == null && input.username == null) throw new Error('Invalid user input.');
+  if (input.id != null && input.username != null) throw new Error('Invalid user input.');
+
+  const model = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: input.id != null ? input.id : undefined,
+      username: input.username != null ? input.username : undefined
+    }
+  });
   return toUserSchema(model);
 }

app/server/graphql/schema.graphql

@@ -3,7 +3,7 @@ scalar JSON
 
 type Query {
   identity: Identity!
-  userOne(id: ID!): User!
+  userOne(input: UserOneInput!): User!
   bookOne(id: ID!): Book!
   bookMany(input: BookManyInput!): BookManyOutput!
   bookChapterOne(id: ID!): BookChapter!
@@ -58,6 +58,11 @@ type User {
   updatedAt: String!
 }
 
+input UserOneInput {
+  id: ID
+  username: String
+}
+
 input PaginationFilterInput {
   terms: String
   offset: Int