fix: minor pages bugs (#786)

* fix: dashboard workspace activity mutation * fix/minor_pages_bugs
2023-04-11 23:19:47 +05:30 · 2023-04-11 23:19:47 +05:30 · f734aad10d
commit f734aad10d
parent 6279a04267
4 changed files with 130 additions and 164 deletions
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@ -3,30 +3,24 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";

-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";

-import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
-import {
-  BoltIcon,
-  SparklesIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { SparklesIcon } from "@heroicons/react/24/outline";

 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
 import pagesService from "services/pages.service";
+import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, CustomMenu, TextArea } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import issuesService from "services/issues.service";
-import aiService from "services/ai.service";

 type Props = {
  handleClose: () => void;
@ -34,10 +28,6 @@ type Props = {
  setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
  focus?: keyof IPageBlock;
  setGptAssistantModal: () => void;
-  handleBlockSync?: () => void;
-  handleCopyText?: () => void;
-  pushBlockIntoIssues?: () => void;
-  deletePageBlock?: () => void;
 };

 const defaultValues = {
@ -60,12 +50,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
  setIsSyncing,
  focus,
  setGptAssistantModal,
-  handleBlockSync,
-  handleCopyText,
-  pushBlockIntoIssues,
-  deletePageBlock,
 }) => {
-
  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);

  const router = useRouter();
@ -92,69 +77,75 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
    reset();
  }, [handleClose, reset, data]);

-  const createPageBlock = async (formData: Partial<IPageBlock>) => {
-    if (!workspaceSlug || !projectId || !pageId) return;
+  const createPageBlock = useCallback(
+    async (formData: Partial<IPageBlock>) => {
+      if (!workspaceSlug || !projectId || !pageId) return;

-    await pagesService
-      .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
-        name: formData.name,
-        description: formData.description ?? "",
-        description_html: formData.description_html ?? "<p></p>",
-      })
-      .then((res) => {
-        mutate<IPageBlock[]>(
-          PAGE_BLOCKS_LIST(pageId as string),
-          (prevData) => [...(prevData as IPageBlock[]), res],
-          false
-        );
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Page could not be created. Please try again.",
-        });
-      })
-      .finally(() => onClose());
-  };
+      await pagesService
+        .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
+          name: formData.name,
+          description: formData.description ?? "",
+          description_html: formData.description_html ?? "<p></p>",
+        })
+        .then((res) => {
+          mutate<IPageBlock[]>(
+            PAGE_BLOCKS_LIST(pageId as string),
+            (prevData) => [...(prevData as IPageBlock[]), res],
+            false
+          );
+        })
+        .catch(() => {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Page could not be created. Please try again.",
+          });
+        })
+        .finally(() => onClose());
+    },
+    [workspaceSlug, projectId, pageId, onClose, setToastAlert]
+  );

-  const updatePageBlock = async (formData: Partial<IPageBlock>) => {
-    if (!workspaceSlug || !projectId || !pageId || !data) return;
+  const updatePageBlock = useCallback(
+    async (formData: Partial<IPageBlock>) => {
+      if (!workspaceSlug || !projectId || !pageId || !data) return;

-    if (data.issue && data.sync && setIsSyncing) setIsSyncing(true);
+      if (data.issue && data.sync && setIsSyncing) setIsSyncing(true);

-    mutate<IPageBlock[]>(
-      PAGE_BLOCKS_LIST(pageId as string),
-      (prevData) =>
-        prevData?.map((p) => {
-          if (p.id === data.id) return { ...p, ...formData };
+      mutate<IPageBlock[]>(
+        PAGE_BLOCKS_LIST(pageId as string),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.id === data.id) return { ...p, ...formData };

-          return p;
-        }),
-      false
-    );
+            return p;
+          }),
+        false
+      );

-    await pagesService
-      .patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, data.id, {
-        name: formData.name,
-        description: formData.description,
-        description_html: formData.description_html,
-      })
-      .then((res) => {
-        mutate(PAGE_BLOCKS_LIST(pageId as string));
-        if (data.issue && data.sync)
-          issuesService
-            .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
-              name: res.name,
-              description: res.description,
-              description_html: res.description_html,
-            })
-            .finally(() => {
-              if (setIsSyncing) setIsSyncing(false);
-            });
-      })
-      .finally(() => onClose());
-  };
+      await pagesService
+        .patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, data.id, {
+          name: formData.name,
+          description: formData.description,
+          description_html: formData.description_html,
+        })
+        .then((res) => {
+          mutate(PAGE_BLOCKS_LIST(pageId as string));
+          if (data.issue && data.sync)
+            issuesService
+              .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
+                name: res.name,
+                description: res.description,
+                description_html: res.description_html,
+              })
+              .finally(() => {
+                if (setIsSyncing) setIsSyncing(false);
+              });
+        })
+        .finally(() => onClose());
+    },
+    [workspaceSlug, projectId, pageId, data, onClose, setIsSyncing]
+  );

  const handleAutoGenerateDescription = async () => {
    if (!workspaceSlug || !projectId) return;
@ -193,7 +184,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
            title: "Error!",
            message: "Some error occurred. Please try again.",
          });
-      }).finally(()=>setIAmFeelingLucky(false));
+      })
+      .finally(() => setIAmFeelingLucky(false));
  };

  useEffect(() => {
@ -221,57 +213,41 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
    };
  }, [handleClose]);

+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        if (data) handleSubmit(updatePageBlock)();
+        else handleSubmit(createPageBlock)();
+      }
+    };
+
+    window.addEventListener("keydown", submitForm);
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [createPageBlock, updatePageBlock, data, handleSubmit]);
+
  return (
    <div>
      <form
-        className="border divide-y rounded-md shadow-md"
+        className="border divide-y rounded-[10px] shadow"
        onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
      >
-        <div className="px-4 pt-4">
+        <div className="px-2 pt-2">
          <div className="flex justify-between">
            <TextArea
              id="name"
              name="name"
              placeholder="Title"
              register={register}
-              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-xl font-semibold ring-0 focus:ring-gray-200"
+              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium ring-0 focus:ring-gray-200"
              role="textbox"
              autoComplete="off"
              maxLength={255}
            />
-            <CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
-              {data?.issue ? (
-                <>
-                  <CustomMenu.MenuItem onClick={handleBlockSync}>
-                    <span className="flex items-center gap-1">
-                      <ArrowPathIcon className="h-4 w-4" />
-                      <span>Turn sync {data?.sync ? "off" : "on"}</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center gap-1">
-                      <LinkIcon className="h-4 w-4" />
-                      Copy issue link
-                    </span>
-                  </CustomMenu.MenuItem>
-                </>
-              ) : (
-                <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
-                  <span className="flex items-center gap-1">
-                    <LayerDiagonalIcon className="h-4 w-4" />
-                    Push into issues
-                  </span>
-                </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem onClick={deletePageBlock}>
-                <span className="flex items-center gap-1">
-                  <TrashIcon className="h-4 w-4" />
-                  Delete block
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
          </div>
-          <div className="page-block-section text-[#495057] relative">
+          <div className="page-block-section text-gray-500 relative -mt-2">
            <Controller
              name="description"
              control={control}
@ -308,17 +284,19 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                  </>
                )}
              </button>
-              {data && <button
-                type="button"
-                className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
-                onClick={() => {
-                  onClose();
-                  setGptAssistantModal();
-                }}
-              >
-                <SparklesIcon className="h-4 w-4" />
-                AI
-              </button>}
+              {data && (
+                <button
+                  type="button"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
+                  onClick={() => {
+                    onClose();
+                    setGptAssistantModal();
+                  }}
+                >
+                  <SparklesIcon className="h-4 w-4" />
+                  AI
+                </button>
+              )}
            </div>
          </div>
        </div>
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@ -43,7 +43,6 @@ type Props = {
  block: IPageBlock;
  projectDetails: IProject | undefined;
  index: number;
-  handleNewBlock: () => void;
 };

 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@ -55,12 +54,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
  ),
 });

-export const SinglePageBlock: React.FC<Props> = ({
-  block,
-  projectDetails,
-  index,
-  handleNewBlock,
-}) => {
+export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index }) => {
  const [isSyncing, setIsSyncing] = useState(false);
  const [createBlockForm, setCreateBlockForm] = useState(false);
  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
@ -280,18 +274,6 @@ export const SinglePageBlock: React.FC<Props> = ({
    reset({ ...block });
  }, [reset, block]);

-  useEffect(() => {
-    window.addEventListener("keydown", (e: KeyboardEvent) => {
-      if (e.key === "Enter" && !createBlockForm) handleNewBlock();
-    });
-
-    return () => {
-      window.removeEventListener("keydown", (e: KeyboardEvent) => {
-        if (e.key === "Enter" && !createBlockForm) handleNewBlock();
-      });
-    };
-  }, [handleNewBlock, createBlockForm]);
-
  return (
    <Draggable draggableId={block.id} index={index} isDragDisabled={createBlockForm}>
      {(provided, snapshot) => (
@ -308,10 +290,6 @@ export const SinglePageBlock: React.FC<Props> = ({
                handleClose={() => setCreateBlockForm(false)}
                data={block}
                setIsSyncing={setIsSyncing}
-                deletePageBlock={deletePageBlock}
-                handleBlockSync={handleBlockSync}
-                handleCopyText={handleCopyText}
-                pushBlockIntoIssues={pushBlockIntoIssues}
              />
            </div>
          ) : (
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";

 import { useRouter } from "next/router";

@ -34,7 +34,7 @@ import {
  LockOpenIcon,
  PlusIcon,
  StarIcon,
-  LinkIcon
+  LinkIcon,
 } from "@heroicons/react/24/outline";
 import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
 // helpers
@ -161,7 +161,7 @@ const SinglePage: NextPage = () => {
        title: "Success",
        message: "Added to favorites",
      });
-    });;
+    });

    pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
      page: pageId as string,
@ -184,10 +184,13 @@ const SinglePage: NextPage = () => {
        title: "Success",
        message: "Removed from favorites",
      });
-    });;
+    });

-    pagesService
-      .removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
+    pagesService.removePageFromFavorites(
+      workspaceSlug as string,
+      projectId as string,
+      pageId as string
+    );
  };

  const handleOnDragEnd = (result: DropResult) => {
@ -249,12 +252,12 @@ const SinglePage: NextPage = () => {
    );
  };

-  const handleNewBlock = () => {
+  const handleNewBlock = useCallback(() => {
    setCreateBlockForm(true);
    scrollToRef.current?.scrollIntoView({
      behavior: "smooth",
    });
-  };
+  }, [setCreateBlockForm, scrollToRef]);

  const options =
    labels?.map((label) => ({
@ -281,6 +284,18 @@ const SinglePage: NextPage = () => {
    });
  }, [reset, pageDetails]);

+  useEffect(() => {
+    const openCreateBlockForm = (e: KeyboardEvent) => {
+      if (e.shiftKey && e.key === "Enter") handleNewBlock();
+    };
+
+    window.addEventListener("keydown", openCreateBlockForm);
+
+    return () => {
+      window.removeEventListener("keydown", openCreateBlockForm);
+    };
+  }, [handleNewBlock, createBlockForm]);
+
  return (
    <ProjectAuthorizationWrapper
      meta={{
@ -465,7 +480,7 @@ const SinglePage: NextPage = () => {
              onBlur={handleSubmit(updatePage)}
              onChange={(e) => setValue("name", e.target.value)}
              required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-3xl font-semibold outline-none ring-0 "
+              className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 "
              role="textbox"
            />
          </div>
@ -483,7 +498,6 @@ const SinglePage: NextPage = () => {
                              block={block}
                              projectDetails={projectDetails}
                              index={index}
-                              handleNewBlock={handleNewBlock}
                            />
                          ))}
                          {provided.placeholder}
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@ -177,21 +177,17 @@ const ProjectPages: NextPage = () => {
        <div className="space-y-4">
          <form
            onSubmit={handleSubmit(createPage)}
-            className="flex relative justify-between gap-2 mb-12 rounded-[6px] h-[80px] border border-gray-200 bg-white p-2 shadow-md"
+            className="flex items-center relative justify-between gap-2 mb-12 rounded-[6px] border border-gray-200 bg-white p-2 shadow"
          >
            <Input
              type="text"
              name="name"
              register={register}
-              className="border-none text-start font-semibold flex break-all text-2xl outline-none focus:ring-0"
+              className="border-none font-medium flex break-all text-xl outline-none focus:ring-0"
              placeholder="Title"
            />
            {watch("name") !== "" && (
-              <PrimaryButton
-                type="submit"
-                loading={isSubmitting}
-                className="h-8 absolute top-6 right-2"
-              >
+              <PrimaryButton type="submit" loading={isSubmitting}>
                {isSubmitting ? "Creating..." : "Create"}
              </PrimaryButton>
            )}