chore: minor fixes on pages (#557)

* feat: block sync

* chore: minor fixes on pages

* fix: remove dangerously set inner html

* fix: pages crud operations mutation

* fix: favorites mutation for recent pages

* fix: remove dangerously set inner html

apps/app/components/core/gpt-assistant-modal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
 
 // react-hook-form
 import { useForm } from "react-hook-form";
@@ -16,6 +17,7 @@ type Props = {
   handleClose: () => void;
   inset?: string;
   content: string;
+  htmlContent?: string;
   onResponse: (response: string) => void;
 };
 
@@ -24,11 +26,16 @@ type FormData = {
   task: string;
 };
 
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+});
+
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
   inset = "top-0 left-0",
   content,
+  htmlContent,
   onResponse,
 }) => {
   const [response, setResponse] = useState("");
@@ -62,15 +69,6 @@ export const GptAssistantModal: React.FC<Props> = ({
   const handleResponse = async (formData: FormData) => {
     if (!workspaceSlug || !projectId) return;
 
-    if (!content || content === "") {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please enter some description to get AI assistance.",
-      });
-      return;
-    }
-
     if (formData.task === "") {
       setToastAlert({
         type: "error",
@@ -82,11 +80,11 @@ export const GptAssistantModal: React.FC<Props> = ({
 
     await aiService
       .createGptTask(workspaceSlug as string, projectId as string, {
-        prompt: content,
+        prompt: content && content !== "" ? content : "",
         task: formData.task,
       })
       .then((res) => {
-        setResponse(res.response);
+        setResponse(res.response_html);
         setFocus("task");
 
         if (res.response === "") setInvalidResponse(true);
@@ -105,12 +103,28 @@ export const GptAssistantModal: React.FC<Props> = ({
       }`}
     >
       <form onSubmit={handleSubmit(handleResponse)} className="space-y-4">
+        {content && content !== "" && (
           <div className="text-sm">
-          Content: <p className="text-gray-500">{content}</p>
+            Content:
+            <RemirrorRichTextEditor
+              value={htmlContent ?? <p>{content}</p>}
+              customClassName="-mx-3 -my-3"
+              noBorder
+              borderOnFocus={false}
+              editable={false}
+            />
           </div>
+        )}
         {response !== "" && (
           <div className="text-sm">
-            Response: <p className="text-gray-500">{response}</p>
+            Response:
+            <RemirrorRichTextEditor
+              value={`<p>${response}</p>`}
+              customClassName="-mx-3 -my-3"
+              noBorder
+              borderOnFocus={false}
+              editable={false}
+            />
           </div>
         )}
         {invalidResponse && (
@@ -123,7 +137,11 @@ export const GptAssistantModal: React.FC<Props> = ({
           type="text"
           name="task"
           register={register}
-          placeholder="Tell OpenAI what action to perform on this content..."
+          placeholder={`${
+            content && content !== ""
+              ? "Tell AI what action to perform on this content..."
+              : "Ask AI anything..."
+          }`}
           autoComplete="off"
         />
         <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>

apps/app/components/issues/form.tsx

@@ -239,7 +239,11 @@ export const IssueForm: FC<IssueFormProps> = ({
                   control={control}
                   render={({ field: { value } }) => (
                     <RemirrorRichTextEditor
-                      value={value}
+                      value={
+                        !value || (typeof value === "object" && Object.keys(value).length === 0)
+                          ? watch("description_html")
+                          : value
+                      }
                       onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                       onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
                       placeholder="Description"

apps/app/components/pages/create-update-page-modal.tsx

@@ -45,12 +45,20 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
         mutate(RECENT_PAGES_LIST(projectId as string));
         mutate<IPage[]>(
           MY_PAGES_LIST(projectId as string),
-          (prevData) => [res, ...(prevData as IPage[])],
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
           false
         );
         mutate<IPage[]>(
           ALL_PAGES_LIST(projectId as string),
-          (prevData) => [res, ...(prevData as IPage[])],
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
           false
         );
         onClose();

apps/app/components/pages/delete-page-modal.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
+import { mutate } from "swr";
+
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -14,6 +16,13 @@ import { DangerButton, SecondaryButton } from "components/ui";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
 import type { IPage } from "types";
+// fetch-keys
+import {
+  ALL_PAGES_LIST,
+  FAVORITE_PAGES_LIST,
+  MY_PAGES_LIST,
+  RECENT_PAGES_LIST,
+} from "constants/fetch-keys";
 
 type TConfirmPageDeletionProps = {
   isOpen: boolean;
@@ -45,6 +54,22 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
     await pagesService
       .deletePage(workspaceSlug as string, data.project, data.id)
       .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          FAVORITE_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
         handleClose();
         setToastAlert({
           type: "success",

apps/app/components/pages/pages-view.tsx

@@ -57,7 +57,6 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   const handleAddToFavorites = (page: IPage) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(RECENT_PAGES_LIST(projectId as string));
     mutate<IPage[]>(
       ALL_PAGES_LIST(projectId as string),
       (prevData) =>
@@ -89,6 +88,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         page: page.id,
       })
       .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -107,7 +107,6 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   const handleRemoveFromFavorites = (page: IPage) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(RECENT_PAGES_LIST(projectId as string));
     mutate<IPage[]>(
       ALL_PAGES_LIST(projectId as string),
       (prevData) =>
@@ -137,6 +136,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
     pagesService
       .removePageFromFavorites(workspaceSlug as string, projectId as string, page.id)
       .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
         setToastAlert({
           type: "success",
           title: "Success!",

apps/app/components/pages/single-page-block.tsx

@@ -17,11 +17,16 @@ import useToast from "hooks/use-toast";
 import { CreateUpdateIssueModal } from "components/issues";
 import { GptAssistantModal } from "components/core";
 // ui
-import { CustomMenu, Loader, TextArea } from "components/ui";
+import { CustomMenu, Input, Loader, TextArea } from "components/ui";
 // icons
-import { LayerDiagonalIcon, WaterDropIcon } from "components/icons";
+import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
-import { CheckIcon } from "@heroicons/react/24/outline";
+import {
+  BoltIcon,
+  CheckIcon,
+  CursorArrowRaysIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -163,21 +168,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
   const handleAiAssistance = async (response: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    setValue("description", {
+    setValue("description", {});
-      type: "doc",
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
-      content: [
-        {
-          type: "paragraph",
-          content: [
-            {
-              text: response,
-              type: "text",
-            },
-          ],
-        },
-      ],
-    });
-    setValue("description_html", `<p>${response}</p>`);
     handleSubmit(updatePageBlock)()
       .then(() => {
         setToastAlert({
@@ -253,7 +245,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
         }}
       />
       <div className="-mx-3 -mt-2 flex items-center justify-between gap-2">
-        <TextArea
+        <Input
           id="name"
           name="name"
           placeholder="Block title"
@@ -261,11 +253,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
           onBlur={handleSubmit(updatePageBlock)}
           onChange={(e) => setValue("name", e.target.value)}
           required={true}
-          className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent text-base font-medium"
+          className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base font-medium ring-0 focus:ring-1 focus:ring-gray-200"
           role="textbox"
         />
         <div className="flex flex-shrink-0 items-center gap-2">
-          {block.sync && (
+          {block.issue && block.sync && (
             <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
               {isSyncing ? (
                 <ArrowPathIcon className="h-3 w-3 animate-spin" />
@@ -285,12 +277,13 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
           )}
           <button
             type="button"
-            className="-mr-2 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+            className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
             onClick={() => setGptAssistantModal((prevData) => !prevData)}
           >
+            <SparklesIcon className="h-4 w-4" />
             AI
           </button>
-          <CustomMenu label={<WaterDropIcon width={14} height={15} />} noBorder noChevron>
+          <CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
             {block.issue ? (
               <>
                 <CustomMenu.MenuItem onClick={handleBlockSync}>
@@ -312,7 +305,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
           </CustomMenu>
         </div>
       </div>
-      <div className="page-block-section relative -mx-3 -mt-5">
+      <div className="page-block-section font relative -mx-3 -mt-3">
         <Controller
           name="description"
           control={control}
@@ -327,8 +320,9 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
               onJSONChange={(jsonValue) => setValue("description", jsonValue)}
               onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
               placeholder="Block description..."
-              customClassName="text-gray-500"
+              customClassName="border border-transparent"
               noBorder
+              borderOnFocus
             />
           )}
         />
@@ -337,6 +331,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
           handleClose={() => setGptAssistantModal(false)}
           inset="top-2 left-0"
           content={block.description_stripped}
+          htmlContent={block.description_html}
           onResponse={handleAiAssistance}
         />
       </div>

apps/app/components/pages/single-page-list-item.tsx

@@ -6,13 +6,12 @@ import { useRouter } from "next/router";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
-import { PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { DocumentTextIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
 // types
 import { IPage } from "types";
-import { PencilScribbleIcon } from "components/icons";
 
 type TSingleStatProps = {
   page: IPage;
@@ -39,7 +38,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
           <div className="relative rounded p-4 hover:bg-gray-100">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <PencilScribbleIcon />
+                <DocumentTextIcon className="h-4 w-4" />
                 <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (

apps/app/components/project/single-sidebar-project.tsx

@@ -6,7 +6,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import {
   ContrastIcon,
   LayerDiagonalIcon,
@@ -53,7 +53,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
   {
     name: "Pages",
     href: `/${workspaceSlug}/projects/${projectId}/pages`,
-    icon: PencilScribbleIcon,
+    icon: DocumentTextIcon,
   },
   {
     name: "Settings",

apps/app/components/rich-text-editor/index.tsx

@@ -50,6 +50,7 @@ export interface IRemirrorRichTextEditor {
   customClassName?: string;
   gptOption?: boolean;
   noBorder?: boolean;
+  borderOnFocus?: boolean;
 }
 
 // eslint-disable-next-line no-duplicate-imports
@@ -69,6 +70,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     customClassName,
     gptOption = false,
     noBorder = false,
+    borderOnFocus = true,
   } = props;
 
   const [imageLoader, setImageLoader] = useState(false);
@@ -188,9 +190,9 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-4 relative focus:outline-none rounded-md focus:border-theme ${
+          `p-4 relative focus:outline-none rounded-md focus:border-gray-200 ${
             noBorder ? "" : "border"
-          } ${customClassName}`,
+          } ${borderOnFocus ? "focus:border" : ""} ${customClassName}`,
         ]}
         editable={editable}
         onBlur={() => {

apps/app/components/workspace/help-section.tsx

@@ -8,14 +8,12 @@ import { Transition } from "@headlessui/react";
 import useTheme from "hooks/use-theme";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { ArrowLongLeftIcon, ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import {
-  QuestionMarkCircleIcon,
+  ArrowLongLeftIcon,
-  BoltIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
-  DocumentIcon,
+  RocketLaunchIcon,
-  DiscordIcon,
+} from "@heroicons/react/24/outline";
-  GithubIcon,
+import { QuestionMarkCircleIcon, DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
-} from "components/icons";
 
 const helpOptions = [
   {
@@ -77,7 +75,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
         }}
         title="Shortcuts"
       >
-        <BoltIcon className="h-4 w-4 text-gray-500" />
+        <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
         {!sidebarCollapse && <span>Shortcuts</span>}
       </button>
       <button

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -24,7 +24,7 @@ import AppLayout from "layouts/app-layout";
 import { SinglePageBlock } from "components/pages";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, Loader, PrimaryButton, TextArea } from "components/ui";
+import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
 // icons
 import { ArrowLeftIcon, PlusIcon, ShareIcon, StarIcon } from "@heroicons/react/24/outline";
 import { ColorPalletteIcon } from "components/icons";
@@ -324,9 +324,14 @@ const SinglePage: NextPage<UserAuth> = (props) => {
               )}
             </div>
             <div className="flex items-center gap-4">
-              <span className="text-sm text-gray-500">
+              <Tooltip
-                {renderShortTime(pageDetails.created_at)}
+                tooltipContent={`Page last updated at ${renderShortTime(pageDetails.updated_at)}`}
+                theme="dark"
+              >
+                <span className="cursor-default text-sm text-gray-500">
+                  {renderShortTime(pageDetails.updated_at)}
                 </span>
+              </Tooltip>
               <PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
                 <ShareIcon className="h-4 w-4" />
                 Share
@@ -393,7 +398,7 @@ const SinglePage: NextPage<UserAuth> = (props) => {
               onBlur={handleSubmit(updatePage)}
               onChange={(e) => setValue("name", e.target.value)}
               required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 focus:ring-1 focus:ring-theme"
+              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 focus:ring-1 focus:ring-gray-200"
               role="textbox"
             />
           </div>
@@ -413,7 +418,7 @@ const SinglePage: NextPage<UserAuth> = (props) => {
                 )}
                 <button
                   type="button"
-                  className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
+                  className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 text-xs hover:bg-gray-200"
                   onClick={createPageBlock}
                   disabled={isAddingBlock}
                 >

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -120,12 +120,20 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
         mutate(RECENT_PAGES_LIST(projectId as string));
         mutate<IPage[]>(
           MY_PAGES_LIST(projectId as string),
-          (prevData) => [res, ...(prevData as IPage[])],
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
           false
         );
         mutate<IPage[]>(
           ALL_PAGES_LIST(projectId as string),
-          (prevData) => [res, ...(prevData as IPage[])],
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
           false
         );
       })

apps/app/services/ai.service.ts

@@ -1,5 +1,7 @@
 // services
 import APIService from "services/api.service";
+// types
+import { IGptResponse } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -12,7 +14,7 @@ class AiServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: { prompt: string; task: string }
-  ): Promise<any> {
+  ): Promise<IGptResponse> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/ai-assistant/`, data)
       .then((response) => response?.data)
       .catch((error) => {

apps/app/types/ai.d.ts

@@ -0,0 +1,4 @@
+export interface IGptResponse {
+  response: string;
+  response_html: string;
+}

apps/app/types/index.d.ts

@@ -9,6 +9,7 @@ export * from "./modules";
 export * from "./views";
 export * from "./integration";
 export * from "./pages";
+export * from "./ai";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object