Check if local files are up to date

Author: ohakutsu

src/client/components/ArticleInfo.tsx

@@ -18,6 +18,7 @@ interface Props {
   errorMessages: string[];
   qiitaItemUrl: string | null;
   slide: boolean;
+  isOlderThanRemote: boolean;
 }
 
 export const ArticleInfo = ({
@@ -28,6 +29,7 @@ export const ArticleInfo = ({
   errorMessages,
   qiitaItemUrl,
   slide,
+  isOlderThanRemote,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(
     localStorage.getItem("openInfoState") === "true" ? true : false
@@ -88,6 +90,18 @@ export const ArticleInfo = ({
         </InfoItem>
         <InfoItem title="スライドモード">{slide ? "ON" : "OFF"}</InfoItem>
       </details>
+      {isOlderThanRemote && (
+        <div css={errorContentsStyle}>
+          <p css={errorStyle}>
+            <MaterialSymbol fill={true} css={exclamationIconStyle}>
+              error
+            </MaterialSymbol>
+            {
+              "この記事ファイルの内容は、Qiita上の記事より古い可能性があります。"
+            }
+          </p>
+        </div>
+      )}
       {errorMessages.length > 0 && (
         <div css={errorContentsStyle}>
           {errorMessages.map((errorMessage, index) => (

src/client/components/Header.tsx

@@ -13,6 +13,7 @@ import { Snackbar, Message as SnackbarMessage } from "./Snackbar";
 interface Props {
   id?: string;
   isItemPublishable: boolean;
+  isOlderThanRemote: boolean;
   itemPath: string;
   basename: string | null;
   handleMobileOpen: () => void;
@@ -21,6 +22,7 @@ interface Props {
 export const Header = ({
   id,
   isItemPublishable,
+  isOlderThanRemote,
   itemPath,
   basename,
   handleMobileOpen,
@@ -32,6 +34,16 @@ export const Header = ({
   const mobileSize = currentWidth <= breakpoint.S;
 
   const handlePublish = () => {
+    if (isOlderThanRemote) {
+      if (
+        !window.confirm(
+          "この記事はQiita上の記事より古い可能性があります。上書きしますか？"
+        )
+      ) {
+        return;
+      }
+    }
+
     const params = {
       method: "POST",
       headers: {

src/client/pages/items/show.tsx

@@ -84,6 +84,7 @@ export const ItemsShow = () => {
               isItemPublishable={
                 item.modified && item.error_messages.length === 0
               }
+              isOlderThanRemote={item.is_older_than_remote}
               itemPath={item.item_path}
               id={id}
               basename={basename}
@@ -98,6 +99,7 @@ export const ItemsShow = () => {
                   errorMessages={item.error_messages}
                   qiitaItemUrl={item.qiita_item_url}
                   slide={item.slide}
+                  isOlderThanRemote={item.is_older_than_remote}
                 />
                 <div css={articleWrapStyle}>
                   <Article

src/commands/publish.ts

@@ -13,6 +13,8 @@ export const publish = async (argv: string[]) => {
   const args = arg(
     {
       "--all": Boolean,
+      "--force": Boolean,
+      "-f": "--force",
     },
     { argv }
   );
@@ -41,6 +43,7 @@ export const publish = async (argv: string[]) => {
   }
 
   // Validate
+  const enableForcePublish = args["--force"];
   const invalidItemMessages = targetItems.reduce((acc, item) => {
     const frontmatterErrors = checkFrontmatterType(item);
     if (frontmatterErrors.length > 0)
@@ -50,6 +53,16 @@ export const publish = async (argv: string[]) => {
     if (validationErrors.length > 0)
       return [...acc, { name: item.name, errors: validationErrors }];
 
+    if (!enableForcePublish && item.isOlderThanRemote) {
+      return [
+        ...acc,
+        {
+          name: item.name,
+          errors: ["内容がQiita上の記事より古い可能性があります"],
+        },
+      ];
+    }
+
     return acc;
   }, [] as { name: string; errors: string[] }[]);
   if (invalidItemMessages.length > 0) {

src/lib/entities/qiita-item.ts

@@ -8,6 +8,7 @@ export class QiitaItem {
   public readonly rawBody: string;
   public readonly name: string;
   public readonly modified: boolean;
+  public readonly isOlderThanRemote: boolean;
   public readonly itemsShowPath: string;
   public readonly published: boolean;
   public readonly itemPath: string;
@@ -23,6 +24,7 @@ export class QiitaItem {
     rawBody,
     name,
     modified,
+    isOlderThanRemote,
     itemsShowPath,
     published,
     itemPath,
@@ -37,6 +39,7 @@ export class QiitaItem {
     rawBody: string;
     name: string;
     modified: boolean;
+    isOlderThanRemote: boolean;
     itemsShowPath: string;
     published: boolean;
     itemPath: string;
@@ -51,6 +54,7 @@ export class QiitaItem {
     this.rawBody = rawBody;
     this.name = name;
     this.modified = modified;
+    this.isOlderThanRemote = isOlderThanRemote;
     this.itemsShowPath = itemsShowPath;
     this.published = published;
     this.itemPath = itemPath;

src/lib/file-system-repo.ts

@@ -135,6 +135,14 @@ class FileContent {
     );
   }
 
+  isOlderThan(otherFileContent: FileContent | null): boolean {
+    if (!otherFileContent) return false;
+    const updatedAt = new Date(this.updatedAt);
+    const otherUpdatedAt = new Date(otherFileContent.updatedAt);
+
+    return updatedAt < otherUpdatedAt;
+  }
+
   clone({ id }: { id: string }): FileContent {
     return new FileContent({
       title: this.title,
@@ -353,6 +361,7 @@ export class FileSystemRepo {
       slide: localFileContent.slide,
       name: basename,
       modified: !localFileContent.equals(remoteFileContent),
+      isOlderThanRemote: localFileContent.isOlderThan(remoteFileContent),
       itemsShowPath: this.generateItemsShowPath(localFileContent.id, basename),
       published: remoteFileContent !== null,
       itemPath,
@@ -388,6 +397,7 @@ export class FileSystemRepo {
       slide: localFileContent.slide,
       name: basename,
       modified: !localFileContent.equals(remoteFileContent),
+      isOlderThanRemote: localFileContent.isOlderThan(remoteFileContent),
       itemsShowPath: this.generateItemsShowPath(localFileContent.id, basename),
       published: remoteFileContent !== null,
       itemPath,

src/lib/view-models/items.ts

@@ -15,6 +15,7 @@ export type ItemsIndexViewModel = {
 
 export type ItemsShowViewModel = {
   error_messages: string[];
+  is_older_than_remote: boolean;
   item_path: string;
   modified: boolean;
   organization_url_name: string | null;

src/server/api/items.ts

@@ -95,6 +95,7 @@ const itemsShow = async (req: Express.Request, res: Express.Response) => {
 
   const result: ItemsShowViewModel = {
     error_messages: errorMessages,
+    is_older_than_remote: item.isOlderThanRemote,
     item_path: itemPath,
     modified,
     organization_url_name: item.organizationUrlName,