Entry post editing/publishing enhancements

.github/workflows/any.yml

@@ -0,0 +1,25 @@
+name: PR build
+on:
+  push:
+    branches:
+      - 'bugfix/*'
+      - 'feature/*'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: npm install, lint and/or test
+      run: |
+        yarn
+    - name: build
+      run: yarn build
+      env:
+        CI: true

next.config.js

@@ -75,6 +75,15 @@ const config = {
         source: "/:author(@.+)/:permlink/edit",
         destination: "/entry/created/:author/:permlink/edit"
       },
+      // As We added preview once
+      {
+        source: "/:category/:author(@.+)/:permlink/preview",
+        destination: "/entry/:category/:author/:permlink"
+      },
+      {
+        source: "/:author(@.+)/:permlink/preview",
+        destination: "/entry/created/:author/:permlink"
+      },
       {
         source: "/:category/:author(@.+)/:permlink",
         destination: "/entry/:category/:author/:permlink"

src/api/mutations/update-reply.ts

@@ -5,10 +5,12 @@ import { CommentOptions, Entry, MetaData } from "@/entities";
 import { comment, formatError } from "@/api/operations";
 import { error } from "@/features/shared";
 import { EcencyEntriesCacheManagement } from "@/core/caches";
+import { useValidatePostUpdating } from "@/api/mutations/validate-post-updating";
 
-export function useUpdateReply(entry?: Entry | null, onSuccess?: () => void) {
+export function useUpdateReply(entry?: Entry | null, onSuccess?: () => Promise<void>) {
   const activeUser = useGlobalStore((state) => state.activeUser);
 
+  const { mutateAsync: validatePostUpdating } = useValidatePostUpdating();
   const { updateEntryQueryData } = EcencyEntriesCacheManagement.useUpdateEntry();
 
   return useMutation({
@@ -39,6 +41,11 @@ export function useUpdateReply(entry?: Entry | null, onSuccess?: () => void) {
         options ?? null,
         point
       );
+      try {
+        await validatePostUpdating({ entry, text });
+        await onSuccess?.();
+      } catch (e) {}
+
       return {
         ...entry,
         json_metadata: jsonMeta,
@@ -54,7 +61,6 @@ export function useUpdateReply(entry?: Entry | null, onSuccess?: () => void) {
 
       // remove reply draft
       ss.remove(`reply_draft_${entry.author}_${entry.permlink}`);
-      onSuccess?.();
     },
     onError: (e) => error(...formatError(e))
   });

src/api/mutations/validate-post-updating.ts

@@ -0,0 +1,22 @@
+import { useMutation } from "@tanstack/react-query";
+import { Entry } from "@/entities";
+import { getPost } from "@/api/bridge";
+
+export function useValidatePostUpdating() {
+  return useMutation({
+    mutationKey: ["validate-post-updating"],
+    mutationFn: async ({ entry, text, title }: { entry: Entry; text: string; title?: string }) => {
+      const response = await getPost(entry.author, entry.permlink);
+
+      if (title && response?.title !== title) {
+        throw new Error("[PostUpdateValidation] Post title isn`t matching yet");
+      }
+
+      if (response?.body !== text) {
+        throw new Error("[PostUpdateValidation] Post text isn`t matching yet");
+      }
+    },
+    retry: 3,
+    retryDelay: 3000
+  });
+}

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-footer-controls.tsx

@@ -73,7 +73,14 @@ export function EntryFooterControls({ entry }: Props) {
           entry={entry}
           alignBottom={true}
           separatedSharing={true}
-          toggleEdit={() => router.push(`/${entry.url}/edit`)}
+          toggleEdit={() => {
+            if (typeof entry.parent_author === "string") {
+              // It will trigger in-place editor
+              router.push(`/${entry.category}/@${entry.author}/${entry.permlink}?edit=true`);
+            } else {
+              router.push(`/${entry.url}/edit`);
+            }
+          }}
         />
       </div>
     </div>

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-body-viewer.tsx

@@ -40,7 +40,7 @@ export function EntryPageBodyViewer({ entry, rawParam, isEdit }: Props) {
           </SelectionPopover>
         </>
       )}
-      {isEdit && <EntryPageEdit entry={entry} />}
+      <EntryPageEdit entry={entry} isEdit={isEdit} />
     </EntryPageViewerManager>
   );
 }

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-edit.tsx

@@ -6,26 +6,31 @@ import { Entry } from "@/entities";
 import { useRouter } from "next/navigation";
 import { EntryPageContext } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/context";
 import { useUpdateReply } from "@/api/mutations";
-import { makeJsonMetaDataReply } from "@/utils";
+import { delay, makeJsonMetaDataReply } from "@/utils";
 import appPackage from "../../../../../../../../package.json";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import { PREFIX } from "@/utils/local-storage";
+import { EcencyEntriesCacheManagement } from "@/core/caches";
 
 export interface Props {
   entry: Entry;
+  isEdit: boolean;
 }
 
-export function EntryPageEdit({ entry }: Props) {
+export function EntryPageEdit({ entry: initialEntry, isEdit }: Props) {
   const router = useRouter();
+  const { data: entry } = EcencyEntriesCacheManagement.getEntryQuery(initialEntry).useClientQuery();
 
+  const [_, __, clearText] = useLocalStorage(PREFIX + "_c_t", "");
   const { commentsInputRef } = useContext(EntryPageContext);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const { mutateAsync: updateReplyApi, isPending: isUpdateReplyLoading } = useUpdateReply(
-    entry,
-    () => {
-      router.push(entry.url);
-      // reload(); TODO
-    }
-  );
+  const { mutateAsync: updateReplyApi, isPending } = useUpdateReply(entry, async () => {
+    setIsLoading(true);
+    await delay(2000);
+    router.push(`/${entry?.category}/@${entry?.author}/${entry?.permlink}`);
+  });
   const updateReply = async (text: string) => {
     if (entry) {
       return updateReplyApi({
@@ -37,17 +42,29 @@ export function EntryPageEdit({ entry }: Props) {
     return;
   };
 
+  useEffect(() => {
+    if (!isEdit) {
+      setIsLoading(false);
+      clearText();
+    }
+  }, [entry?.author, entry?.permlink, isEdit, clearText]);
+
   return (
-    <Comment
-      defText={entry.body}
-      submitText={i18next.t("g.update")}
-      entry={entry}
-      onSubmit={updateReply}
-      cancellable={true}
-      onCancel={() => router.back()}
-      inProgress={isUpdateReplyLoading}
-      autoFocus={true}
-      inputRef={commentsInputRef}
-    />
+    isEdit && (
+      <div className="relative">
+        <Comment
+          defText={entry!.body}
+          submitText={i18next.t("g.update")}
+          entry={entry!!}
+          onSubmit={updateReply}
+          clearOnSubmit={false}
+          cancellable={true}
+          onCancel={() => router.back()}
+          inProgress={isLoading || isPending}
+          autoFocus={true}
+          inputRef={commentsInputRef}
+        />
+      </div>
+    )
   );
 }

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx

@@ -68,7 +68,7 @@ export default async function EntryPage({
             <span itemScope={true} itemType="http://schema.org/Article">
               <EntryPageContent
                 category={category}
-                isEdit={false}
+                isEdit={searchParams["edit"] === "true" ?? false}
                 entry={entry}
                 rawParam={searchParams["raw"] ?? ""}
               />

src/app/client-providers.tsx

@@ -3,7 +3,6 @@
 import React, { PropsWithChildren } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { UIManager } from "@ui/core";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ChatProvider } from "@/app/chat-provider";
 import { ClientInit } from "@/app/client-init";
 import { makeQueryClient } from "@/core/react-query";
@@ -37,7 +36,7 @@ export function ClientProviders(props: PropsWithChildren) {
         </PushNotificationsProvider>
         <Announcements />
       </UIManager>
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
     </QueryClientProvider>
   );
 }

src/app/submit/_api/publish.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import * as bridgeApi from "../../../api/bridge";
+import { getPost } from "../../../api/bridge";
 import { markAsPublished, updateSpeakVideoInfo } from "@/api/threespeak";
 import { comment, formatError, reblog } from "@/api/operations";
 import { useThreeSpeakManager } from "../_hooks";
@@ -12,6 +13,7 @@ import { useGlobalStore } from "@/core/global-store";
 import { BeneficiaryRoute, Entry, FullAccount, RewardType } from "@/entities";
 import {
   createPermlink,
+  delay,
   isCommunity,
   makeApp,
   makeCommentOptions,
@@ -25,6 +27,27 @@ import { useRouter } from "next/navigation";
 import { QueryIdentifiers } from "@/core/react-query";
 import { EcencyEntriesCacheManagement } from "@/core/caches";
 
+/**
+ * Helps to validate if post was really created on Blockchain
+ */
+async function validatePostCreating(author: string, permlink: string, attempts = 0) {
+  if (attempts === 3) {
+    return;
+  }
+
+  let response: Entry | undefined;
+  try {
+    response = await getPost(author, permlink);
+  } catch (e) {
+    response = undefined;
+  }
+  if (!response) {
+    await delay(3000);
+    attempts += 1;
+    return validatePostCreating(author, permlink, attempts);
+  }
+}
+
 export function usePublishApi(onClear: () => void) {
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -155,11 +178,13 @@ export function usePublishApi(onClear: () => void) {
         };
         updateEntryQueryData([entry]);
 
+        await validatePostCreating(entry.author, entry.permlink);
+
         success(i18next.t("submit.published"));
         onClear();
         clearActivePoll();
         const newLoc = makeEntryPath(parentPermlink, author, permlink);
-        router.push(newLoc + "/preview");
+        router.push(newLoc);
 
         //Mark speak video as published
         if (!!unpublished3SpeakVideo && activeUser.username === unpublished3SpeakVideo.owner) {