feat: UserRecordsPageの実装

src/graphql/api-public/graphql-request/UserRecordsPage.graphql

@@ -0,0 +1,64 @@
+query AllUserRecordsPage {
+  allUsers {
+    userName: uniqueName
+    records {
+      totalCount
+    }
+  }
+}
+
+query UserRecordsPageEndCursor($userName: String!, $first: Int!) {
+  user(uniqueName: $userName) {
+    records(first: $first) {
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+    }
+  }
+}
+
+query UserRecordsPage($userName: String!, $first: Int!, $after: String) {
+  user(uniqueName: $userName) {
+    userName: uniqueName
+    displayName
+    picture
+    records(first: $first, after: $after) {
+      count: totalCount
+      pageInfo {
+        hasNextPage
+      }
+      edges {
+        node {
+          id
+          readAt
+          book {
+            id
+            title
+            cover
+          }
+          user {
+            userName: uniqueName
+            displayName
+            picture
+          }
+        }
+      }
+    }
+    readBooks {
+      count: totalCount
+    }
+    readingBooks {
+      count: totalCount
+    }
+    wishBooks {
+      count: totalCount
+    }
+    haveBooks {
+      count: totalCount
+    }
+    stackedBooks {
+      count: totalCount
+    }
+  }
+}

src/i18n/ja/head.json

@@ -7,6 +7,7 @@
   "user_stacked_books_page": "{{name}}の$t(common:stacked_books)：ユーザー - bo2kshelf",
   "user_reading_books_page": "{{name}}の$t(common:reading_books)：ユーザー - bo2kshelf",
   "user_wish_read_books_page": "{{name}}が$t(common:wish_read_books)：ユーザー - bo2kshelf",
+  "user_records_page": "{{name}}の記録 - bo2kshelf",
   "book_page": "{{title}}：本 - bo2kshelf",
   "series_page": "{{title}}：シリーズ - bo2kshelf",
   "author_page": "{{name}}：著者 - bo2kshelf",

src/pages/_app.tsx

@@ -5,7 +5,6 @@ import 'tailwindcss/tailwind.css';
 import {AppLayout} from '~/components/layout/AppLayout';
 import {Configured18nextProvider} from '~/i18n';
 import {ConfiguredApolloProvider} from '~/lib/ApolloProvider';
-import {CurrentUser} from '~/lib/CurrentUser';
 import '~/styles/index.css';
 
 export const App: React.FC<AppProps> = ({
@@ -16,7 +15,6 @@ export const App: React.FC<AppProps> = ({
     <ConfiguredApolloProvider>
       <Configured18nextProvider>
         <RecoilRoot>
-          <CurrentUser />
           <AppLayout>
             <PageComponent {...pageProps} />
           </AppLayout>

src/pages/users/[username]/records/[number].tsx

@@ -0,0 +1,67 @@
+import {
+  GetStaticPaths,
+  GetStaticProps,
+  InferGetStaticPropsType,
+  NextPage,
+} from 'next';
+import {useRouter} from 'next/router';
+import React from 'react';
+import {graphqlSdk} from '~/graphql/api-public/graphql-request';
+import {LoadingPage} from '~/templates/Loading';
+import {
+  TemplateUserRecords,
+  transform,
+  TransformedProps,
+} from '~/templates/UserRecord';
+
+export type UrlQuery = {username: string; number: string};
+export const RECORDS_PER_PAGE = 6;
+
+export const getStaticPaths: GetStaticPaths<UrlQuery> = async () => {
+  return graphqlSdk.AllUserRecordsPage().then((result) => ({
+    paths: result.allUsers
+      .map(({userName, records: {totalCount}}) =>
+        Array.from({
+          length: Math.ceil(totalCount / RECORDS_PER_PAGE),
+        }).map((_, i) => ({
+          params: {username: userName, number: `${i + 1}`},
+        })),
+      )
+      .flat(),
+    fallback: false,
+  }));
+};
+
+export const getStaticProps: GetStaticProps<
+  TransformedProps,
+  UrlQuery
+> = async ({params}) => {
+  if (!params) throw new Error('Invalid parameters.');
+
+  const pageNumber = Number.parseInt(params.number, 10);
+  return graphqlSdk
+    .UserRecordsPageEndCursor({
+      userName: params.username,
+      first: (pageNumber - 1) * RECORDS_PER_PAGE,
+    })
+    .then((data) => ({
+      userName: params.username,
+      first: RECORDS_PER_PAGE,
+      after: data.user.records.pageInfo.endCursor,
+    }))
+    .then((variables) => graphqlSdk.UserRecordsPage(variables))
+    .then((data) => ({
+      props: transform(data, {pageNumber}),
+      revalidate: 60,
+    }))
+    .catch(() => ({notFound: true}));
+};
+
+export const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
+  props,
+) => {
+  const router = useRouter();
+  if (router.isFallback) return <LoadingPage />;
+  return <TemplateUserRecords {...props} />;
+};
+export default Page;

src/pages/users/[username]/records/index.tsx

@@ -0,0 +1,23 @@
+import {GetStaticPaths} from 'next';
+import {graphqlSdk} from '~/graphql/api-public/graphql-request';
+import * as General from './[number]';
+
+export type UrlQuery = {username: string};
+
+export const getStaticPaths: GetStaticPaths<UrlQuery> = async () => {
+  return graphqlSdk.AllUserRecordsPage().then((result) => ({
+    paths: result.allUsers.map(({userName}) => ({
+      params: {username: userName},
+    })),
+    fallback: false,
+  }));
+};
+
+export const getStaticProps: typeof General.getStaticProps = async ({
+  params,
+  ...rest
+}) =>
+  General.getStaticProps({params: params && {...params, number: '1'}, ...rest});
+
+export const Page = General.Page;
+export default Page;

src/templates/UserRecord/Component.stories.tsx

@@ -0,0 +1,64 @@
+import {Meta, Story} from '@storybook/react/types-6-0';
+import clsx from 'clsx';
+import React from 'react';
+import {random} from '~~/.storybook/assets';
+import {TemplateDecolator} from '~~/.storybook/TemplateDecolator';
+import {Component, ComponentProps} from './Component';
+
+export default {
+  title: 'TemplateUserRecords',
+  component: Component,
+  argTypes: {
+    className: {table: {disable: true}},
+    picture: {table: {disable: true}},
+    records: {table: {disable: true}},
+    readBooks: {table: {disable: true}},
+    readingBooks: {table: {disable: true}},
+    likedBooks: {table: {disable: true}},
+    haveBooks: {table: {disable: true}},
+    stackedBooks: {table: {disable: true}},
+    wishBooks: {table: {disable: true}},
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <TemplateDecolator>
+        <Story />
+      </TemplateDecolator>
+    ),
+  ],
+} as Meta;
+
+export const NormalUser: Story<ComponentProps> = (args) => (
+  <Component {...args} className={clsx('w-full')} />
+);
+NormalUser.args = {
+  displayName: 'Normal User',
+  userName: 'normal',
+  picture: random.icon(),
+  records: Array.from({length: 10}).map((_, i) => ({
+    id: `${i}`,
+    user: {
+      displayName: 'Normal User',
+      userName: 'normal',
+      picture: random.icon(),
+    },
+    book: {
+      id: `${i}`,
+      title: `Title ${i}`,
+      subtitle: `subtitle ${i}`,
+      cover: random.bookcover(i),
+    },
+    readAt: '2012-12-25',
+  })),
+  count: 10,
+  readingBooks: {count: 10},
+  likedBooks: {count: 10},
+  readBooks: {count: 30},
+  haveBooks: {count: 40},
+  stackedBooks: {count: 10},
+  wishBooks: {count: 5},
+};
+NormalUser.storyName = '一般的なユーザー';

src/templates/UserRecord/Component.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import React from 'react';
+import {Merge} from 'type-fest';
+import {Layout} from '~/components/atoms/Layout';
+import {ProfileMenu} from '../User/organisms/ProfileMenu';
+import {RecordsSection} from './organisms/RecordsSection';
+import {TransformedProps} from './transform';
+
+export type ComponentProps = Merge<TransformedProps, {className?: string}>;
+export const Component: React.FC<ComponentProps> = ({
+  className,
+  children,
+  displayName,
+  picture,
+  userName,
+  records,
+  count,
+  pageNumber,
+  hasNext,
+  readBooks,
+  readingBooks,
+  stackedBooks,
+  haveBooks,
+  wishBooks,
+  likedBooks,
+}) => (
+  <main className={clsx(className)}>
+    {children}
+    <Layout
+      Side={({className, ...props}) => (
+        <ProfileMenu
+          {...props}
+          className={clsx(className, 'shadow-md')}
+          {...{
+            displayName,
+            userName,
+            picture,
+            records: {count},
+            readBooks,
+            readingBooks,
+            stackedBooks,
+            haveBooks,
+            wishBooks,
+            likedBooks,
+          }}
+        />
+      )}
+      Main={({className, ...props}) => (
+        <div
+          {...props}
+          className={clsx(className, 'grid', 'grid-cols-2', 'gap-4')}
+        >
+          <RecordsSection
+            className={clsx('col-span-full', 'shadow-md')}
+            {...{userName, displayName, records, count, hasNext, pageNumber}}
+          />
+        </div>
+      )}
+    />
+  </main>
+);

src/templates/UserRecord/Container.tsx

@@ -0,0 +1,19 @@
+import Head from 'next/head';
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {Component} from './Component';
+import {TransformedProps} from './transform';
+
+export type ContainerProps = TransformedProps;
+export const Container: React.FC<ContainerProps> = (props) => {
+  const {t} = useTranslation();
+
+  return (
+    <Component {...props}>
+      <Head>
+        <title>{t('head:user_records_page', {name: props.displayName})}</title>
+      </Head>
+    </Component>
+  );
+};
+Container.displayName = 'UserRecordPage';

src/templates/UserRecord/index.ts

@@ -0,0 +1,6 @@
+export {Component} from './Component';
+export type {ComponentProps} from './Component';
+export {Container as TemplateUserRecords} from './Container';
+export type {ContainerProps as TemplateUserRecordsProps} from './Container';
+export {transform} from './transform';
+export type {TransformedProps} from './transform';

src/templates/UserRecord/molecules/Button/BaseComponent.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export type BaseComponentProps = {
+  className?: string;
+  i18n: Record<'text', string>;
+  Link: React.FC<{className?: string}>;
+};
+export const BaseComponent: React.VFC<BaseComponentProps> = ({
+  className,
+  i18n,
+  Link,
+}) => (
+  <Link
+    className={clsx(
+      className,
+      'bg-blue-400',
+      'hover:bg-blue-500',
+      'py-4',
+      'text-white',
+      'text-center',
+    )}
+  >
+    <span>{i18n.text}</span>
+  </Link>
+);

src/templates/UserRecord/molecules/Button/NextButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {LinkUsersRecordsNumberedPage} from '~/components/atoms/Link';
+import {BaseComponent} from './BaseComponent';
+
+export type ComponentProps = {
+  className?: string;
+  userName: string;
+  pageNumber: number;
+};
+export const Component: React.VFC<ComponentProps> = ({
+  pageNumber,
+  userName,
+  ...props
+}) => {
+  const {t} = useTranslation();
+  return (
+    <BaseComponent
+      {...props}
+      {...{pageNumber: pageNumber + 1}}
+      i18n={{text: t('もっと昔の記録')}}
+      Link={({...props}) => (
+        <LinkUsersRecordsNumberedPage
+          {...props}
+          {...{username: userName, number: pageNumber + 1}}
+        />
+      )}
+    />
+  );
+};