記事の追加ボタンを実装

cp-20 · Jan 16, 2024 · cc44ffc · cc44ffc
1 parent de5338d
commit cc44ffc
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 38 deletions.
diff --git a/apps/web/src/client/Home/_components/ArticleListModel/UnreadClipList.tsx b/apps/web/src/client/Home/_components/ArticleListModel/UnreadClipList.tsx
@@ -2,14 +2,15 @@ import type { FetchArticleResult } from '@/client/Home/_components/Article/Artic
 import { ArticleList } from '@/client/Home/_components/Article/ArticleList';
 import { ArticleListLayout, keyConstructorGenerator } from './common';
 import { fetcher } from '@/features/swr/fetcher';
-import { Stack, Button, Text } from '@mantine/core';
+import { Stack, Button, Text, TextInput, useMantineTheme } from '@mantine/core';
 import type { ClipWithArticle } from '@read-stack/openapi';
 import {
   getClipsResponseSchema,
   moveUserClipToInboxResponseSchema,
   patchClipResponseSchema,
 } from '@read-stack/openapi';
-import { useCallback, type FC } from 'react';
+import { useCallback, useState } from 'react';
+import type { FormEventHandler, FC } from 'react';
 import Image from 'next/image';
 import { toast } from 'react-toastify';
 import NoReadingArticleImage from '~/public/assets/no-reading-articles.png';
@@ -218,9 +219,53 @@ const ActionSection: FC<ActionSectionProps> = ({ clip }) => {
   );
 };
 
+const AddNewClipForm: FC = () => {
+  const theme = useMantineTheme();
+  const [value, setValue] = useState('');
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+  };
+  return (
+    <form
+      css={css`
+      padding: 1rem;
+      border: 1px solid ${theme.colors.gray[2]};
+      border-radius: ${theme.radius.md};
+      margin-bottom: 1rem;
+      `}
+      onSubmit={handleSubmit}
+    >
+      <Text
+        css={css`
+      margin-bottom: 0.5rem;
+      `}
+      >
+        URLを入力して記事を追加
+      </Text>
+      <div
+        css={css`
+      display: grid;
+      gap: 0.5rem;
+      grid-template-columns: 1fr auto;
+      `}
+      >
+        <TextInput
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          placeholder="https://example.com/article/1"
+          value={value}
+        />
+        <Button type="submit">追加</Button>
+      </div>
+    </form>
+  );
+};
+
 export const UnreadClipList: FC = () => {
   return (
     <ArticleListLayout label="スタック">
+      <AddNewClipForm />
       <ArticleList
         fetcher={unreadClipsFetcher}
         keyConstructor={unreadClipsKeyConstructor}

diff --git a/apps/web/src/client/Home/_components/ArticleListModel/common.tsx b/apps/web/src/client/Home/_components/ArticleListModel/common.tsx
@@ -24,11 +24,13 @@ export const keyConstructorGenerator = <T,>(base: string) => {
 export interface ArticleListLayoutProps {
   label: ReactNode;
   children: ReactNode;
+  actionComponent?: ReactNode;
 }
 
 export const ArticleListLayout: FC<ArticleListLayoutProps> = ({
   label,
   children,
+  actionComponent,
 }) => (
   <Flex
     css={css`
@@ -46,7 +48,8 @@ export const ArticleListLayout: FC<ArticleListLayoutProps> = ({
         margin-bottom: 1rem;
       `}
     >
-      {label}
+      <span>{label}</span>
+      <div>{actionComponent}</div>
     </h2>
     <div
       css={css`

diff --git a/apps/web/src/shared/lib/$path.ts b/apps/web/src/shared/lib/$path.ts
@@ -1,7 +1,4 @@
-const buildSuffix = (url?: {
-  query?: Record<string, string>;
-  hash?: string;
-}) => {
+const buildSuffix = (url?: {query?: Record<string, string>, hash?: string}) => {
   const query = url?.query;
   const hash = url?.hash;
   if (!query && !hash) return '';
@@ -10,40 +7,22 @@ const buildSuffix = (url?: {
 };
 
 export const pagesPath = {
-  api_key: {
-    $url: (url?: { hash?: string | undefined } | undefined) => ({
-      pathname: '/api-key' as const,
-      hash: url?.hash,
-    }),
+  "api_key": {
+    $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/api-key' as const, hash: url?.hash })
   },
-  home: {
-    $url: (url?: { hash?: string | undefined } | undefined) => ({
-      pathname: '/home' as const,
-      hash: url?.hash,
-    }),
+  "home": {
+    $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/home' as const, hash: url?.hash })
   },
-  login: {
-    $url: (url?: { hash?: string | undefined } | undefined) => ({
-      pathname: '/login' as const,
-      hash: url?.hash,
-    }),
+  "login": {
+    $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/login' as const, hash: url?.hash })
   },
-  privacy: {
-    $url: (url?: { hash?: string | undefined } | undefined) => ({
-      pathname: '/privacy' as const,
-      hash: url?.hash,
-    }),
+  "privacy": {
+    $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/privacy' as const, hash: url?.hash })
   },
-  signup: {
-    $url: (url?: { hash?: string | undefined } | undefined) => ({
-      pathname: '/signup' as const,
-      hash: url?.hash,
-    }),
+  "signup": {
+    $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/signup' as const, hash: url?.hash })
   },
-  $url: (url?: { hash?: string | undefined } | undefined) => ({
-    pathname: '/' as const,
-    hash: url?.hash,
-  }),
+  $url: (url?: { hash?: string | undefined } | undefined) => ({ pathname: '/' as const, hash: url?.hash })
 };
 
 export type PagesPath = typeof pagesPath;
@@ -55,14 +34,14 @@ export const staticPath = {
     google_icon_png: '/assets/google-icon.png',
     no_inbox_items_png: '/assets/no-inbox-items.png',
     no_read_articles_png: '/assets/no-read-articles.png',
-    no_reading_articles_png: '/assets/no-reading-articles.png',
+    no_reading_articles_png: '/assets/no-reading-articles.png'
   },
   favicon_ico: '/favicon.ico',
   icon_192_png: '/icon-192.png',
   icon_512_png: '/icon-512.png',
   icon_svg: '/icon.svg',
   manifest_webmanifest: '/manifest.webmanifest',
-  ogp_png: '/ogp.png',
+  ogp_png: '/ogp.png'
 } as const;
 
 export type StaticPath = typeof staticPath;