#399

frontend/src/pages/posts/PostImportResultPage.tsx

@@ -8,7 +8,9 @@ import PageTitle from '@/components/common/PageTitle'
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
-import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
+import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
+import { importPanelToneClass } from '@/components/posts/import/postImportTone'
+import PostImportSummaryChip from '@/components/posts/import/PostImportSummaryChip'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
@@ -33,38 +35,6 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
-const resultToneClass = (
-    status: 'created' | 'failed' | 'invalid' | 'skipped' | 'warning' | 'ready',
-): string[] => {
-    switch (status)
-      {
-      case 'created':
-	return [
-	    'border-sky-200 bg-sky-50',
-	    'dark:border-sky-900 dark:bg-sky-950/30']
-      case 'skipped':
-	return [
-	    'border-stone-200 bg-stone-50',
-	    'dark:border-stone-800 dark:bg-stone-900/60']
-      case 'failed':
-	return [
-	    'border-rose-200 bg-rose-50',
-	    'dark:border-rose-900 dark:bg-rose-950/30']
-      case 'invalid':
-	return [
-	    'border-rose-200 bg-rose-50',
-	    'dark:border-rose-900 dark:bg-rose-950/30']
-      case 'warning':
-	return [
-	    'border-amber-200 bg-amber-50',
-	    'dark:border-amber-900 dark:bg-amber-950/30']
-      default:
-	return [
-	    'border-border bg-white',
-	    'dark:border-neutral-700 dark:bg-neutral-900']
-      }
-}
-
 const rowMessages = (row: PostImportRow): string[] => [
     ...Object.values (row.validationErrors ?? { }).flat (),
     ...Object.values (row.importErrors ?? { }).flat ()]
@@ -204,23 +174,16 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 	    <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
 			    dark:bg-neutral-900">
 	      <div className="flex flex-wrap gap-2">
-		<SummaryChip label="登録成功" value={counts.created}/>
-		<SummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
-		<SummaryChip label="失敗" value={counts.failed}/>
-		<SummaryChip label="要修正" value={counts.invalid}/>
+		<PostImportSummaryChip label="登録成功" value={counts.created} badge="created"/>
+		<PostImportSummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
+		<PostImportSummaryChip label="失敗" value={counts.failed} badge="failed"/>
+		<PostImportSummaryChip label="要修正" value={counts.invalid} badge="error"/>
 	      </div>
 	    </div>
 
 	    <div className="space-y-3">
 	      {session.rows.map (row => {
-		  const displayStatus =
-		      Object.keys (row.validationErrors).length > 0
-		      ? 'invalid'
-		      : row.importStatus === 'created'
-		      ? 'created'
-		      : row.importStatus === 'failed'
-		      ? 'failed'
-		      : displayPostImportStatus (row)
+		  const displayStatus = effectivePostImportStatus (row)
 		  const canEdit =
 		      Object.keys (row.validationErrors).length > 0
 		      || row.importStatus === 'failed'
@@ -230,18 +193,17 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 		      : row.importStatus === 'failed'
 		      && Object.keys (row.validationErrors).length === 0
 		  return (
-		  <div
-		      key={row.sourceRow}
-		      className={[
-			  'rounded-lg border p-4',
-			  ...resultToneClass (displayStatus)].join (' ')}>
+		      <div
+			  key={row.sourceRow}
+			  className={[
+			      'rounded-lg border p-4',
+			      ...importPanelToneClass (displayStatus)].join (' ')}>
 		    <div className="flex flex-col gap-3 md:flex-row md:items-start
 				    md:justify-between">
 		      <div className="space-y-2">
 			<div className="flex flex-wrap items-center gap-2">
 			  <span className="text-sm font-medium">行 {row.sourceRow}</span>
-			  {displayStatus === 'skipped' && (
-			      <PostImportStatusBadge value="skipped"/>)}
+			  <PostImportStatusBadge value={displayStatus}/>
 			</div>
 			<div className="text-sm text-neutral-700 dark:text-neutral-200">
 			  {String (row.attributes.title ?? '') || row.url}
@@ -311,16 +273,4 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 	</MainArea>)
 }
 
-const SummaryChip = (
-    { label, value, badge }: {
-	label: string
-	value: number
-	badge?: 'skipped' },
-) => (
-    <div className="flex items-center gap-2 rounded-full border border-border
-		    bg-background px-3 py-1 text-sm">
-      {badge && <PostImportStatusBadge value={badge}/>}
-      <span>{label} {value}</span>
-    </div>)
-
 export default PostImportResultPage