Merge pull request #26 from increments/refactor-items-show-page

Refactor items show page

Author: ohakutsu

.eslintrc.js

@@ -39,7 +39,6 @@ module.exports = {
         "src/commands/pull.ts",
         "src/lib/file-system-repo.test.ts",
         "src/lib/file-system-repo.ts",
-        "src/server/api/items.ts",
         "src/server/api/readme.ts",
         "src/server/app.ts",
         "src/server/lib/get-current-user.ts",

src/client/pages/items/show.tsx

@@ -2,6 +2,7 @@ import { css } from "@emotion/react";
 import { useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 import { apiItemsShowPath } from "../../../lib/qiita-cli-url";
+import type { ItemsShowViewModel } from "../../../lib/view-models/items";
 import { Article } from "../../components/Article";
 import { ArticleInfo } from "../../components/ArticleInfo";
 import { Header } from "../../components/Header";
@@ -25,20 +26,7 @@ export const ItemsShow = () => {
   const [searchParams] = useSearchParams();
   const basename = searchParams.get("basename");
 
-  const [item, setItem] = useState<{
-    body: string;
-    renderedBody: string;
-    private: boolean;
-    tags: string[];
-    title: string;
-    itemPath: string;
-    qiitaItemUrl: string | null;
-    itemsShowPath: string;
-    modified: boolean;
-    published: boolean;
-    organizationUrlName: string | null;
-    errorMessages: string[];
-  } | null>(null);
+  const [item, setItem] = useState<ItemsShowViewModel | null>(null);
 
   const [error, setError] = useState<null | string>(null);
   const [errorFrontmatterMessages, setErrorFrontmatterMessages] = useState<
@@ -94,25 +82,25 @@ export const ItemsShow = () => {
             <Header
               handleMobileOpen={handleMobileOpen}
               isItemPublishable={
-                item.modified && item.errorMessages.length === 0
+                item.modified && item.error_messages.length === 0
               }
-              itemPath={item.itemPath}
+              itemPath={item.item_path}
               id={id}
               basename={basename}
             />
             <div css={contentsWrapperStyle}>
               <div css={contentsContainerStyle}>
                 <ArticleInfo
-                  secret={item.private}
+                  secret={item.secret}
                   modified={item.modified}
-                  organizationUrlName={item.organizationUrlName}
+                  organizationUrlName={item.organization_url_name}
                   published={item.published}
-                  errorMessages={item.errorMessages}
-                  qiitaItemUrl={item.qiitaItemUrl}
+                  errorMessages={item.error_messages}
+                  qiitaItemUrl={item.qiita_item_url}
                 />
                 <div css={articleWrapStyle}>
                   <Article
-                    renderedBody={item.renderedBody}
+                    renderedBody={item.rendered_body}
                     tags={item.tags}
                     title={item.title}
                   />

src/lib/view-models/items.ts

@@ -12,3 +12,16 @@ export type ItemsIndexViewModel = {
   draft: ItemViewModel[];
   public: ItemViewModel[];
 };
+
+export type ItemsShowViewModel = {
+  error_messages: string[];
+  item_path: string;
+  modified: boolean;
+  organization_url_name: string | null;
+  published: boolean;
+  qiita_item_url: string | null;
+  rendered_body: string;
+  secret: boolean;
+  tags: string[];
+  title: string;
+};

src/server/api/items.ts

@@ -1,16 +1,15 @@
 import type Express from "express";
 import { Router } from "express";
-import { config } from "../../lib/config";
+import { checkFrontmatterType } from "../../lib/check-frontmatter-type";
 import { getFileSystemRepo } from "../../lib/get-file-system-repo";
 import { getQiitaApiInstance } from "../../lib/get-qiita-api-instance";
-import { itemsShowPath } from "../../lib/qiita-cli-url";
 import { validateItem } from "../../lib/validators/item-validator";
 import type {
   ItemViewModel,
   ItemsIndexViewModel,
+  ItemsShowViewModel,
 } from "../../lib/view-models/items";
-import { Item, QiitaApi } from "../../qiita-api";
-import { checkFrontmatterType } from "../../lib/check-frontmatter-type";
+import { Item } from "../../qiita-api";
 import { getCurrentUser } from "../lib/get-current-user";
 import { itemUrl } from "../lib/qiita-url";
 
@@ -95,23 +94,19 @@ const itemsShow = async (req: Express.Request, res: Express.Response) => {
   // validate
   const errorMessages = validateItem(item);
 
-  res.json({
-    title: item.title,
-    tags: item.tags,
-    private: item.secret,
-    body: item.rawBody,
-    organizationUrlName: item.organizationUrlName,
-    renderedBody,
-    itemPath,
-    qiitaItemUrl,
-    itemsShowPath: itemsShowPath(
-      itemId,
-      basename ? { basename: basename } : undefined
-    ),
+  const result: ItemsShowViewModel = {
+    error_messages: errorMessages,
+    item_path: itemPath,
     modified,
+    organization_url_name: item.organizationUrlName,
+    secret: item.secret,
     published,
-    errorMessages,
-  });
+    qiita_item_url: qiitaItemUrl,
+    rendered_body: renderedBody,
+    tags: item.tags,
+    title: item.title,
+  };
+  res.json(result);
 };
 
 const itemsCreate = async (req: Express.Request, res: Express.Response) => {