From 5961ea6f467010facdc8c50d8fbcc2ca2fa11df8 Mon Sep 17 00:00:00 2001
From: Niall Maher <nialljoemaher@gmail.com>
Date: Mon, 21 Oct 2024 20:37:28 +0100
Subject: [PATCH] Add new Navigation for editor (#1163)

* Add new navbar for editor

* Update article test
---
 app/(app)/create/[[...paramsArr]]/page.tsx    |  16 --
 app/(app)/layout.tsx                          |  23 +--
 app/(app)/my-posts/_client.tsx                |  10 +-
 .../create/[[...paramsArr]]/_client.tsx       | 108 ++++++------
 .../create/[[...paramsArr]]/navigation.tsx    | 160 ++++++++++++++++++
 .../create/[[...paramsArr]]/not-found.tsx     |   7 +
 app/(editor)/create/[[...paramsArr]]/page.tsx |  37 ++++
 app/layout.tsx                                |  21 ++-
 e2e/articles.spec.ts                          |   4 +-
 utils/post.ts                                 |   8 +-
 10 files changed, 295 insertions(+), 99 deletions(-)
 delete mode 100644 app/(app)/create/[[...paramsArr]]/page.tsx
 rename app/{(app) => (editor)}/create/[[...paramsArr]]/_client.tsx (92%)
 create mode 100644 app/(editor)/create/[[...paramsArr]]/navigation.tsx
 create mode 100644 app/(editor)/create/[[...paramsArr]]/not-found.tsx
 create mode 100644 app/(editor)/create/[[...paramsArr]]/page.tsx

diff --git a/app/(app)/create/[[...paramsArr]]/page.tsx b/app/(app)/create/[[...paramsArr]]/page.tsx
deleted file mode 100644
index 96ab2f28..00000000
--- a/app/(app)/create/[[...paramsArr]]/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { redirect } from "next/navigation";
-import Content from "./_client";
-import { getServerAuthSession } from "@/server/auth";
-
-export const metadata = {
-  title: "New post - Codú",
-};
-
-export default async function Page() {
-  const session = await getServerAuthSession();
-  if (!session) {
-    redirect("/get-started");
-  }
-
-  return <Content session={session} />;
-}
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 16def67f..cdb45497 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -79,22 +79,13 @@ export default async function RootLayout({
 
   return (
     <>
-      <ProgressBar />
-      <AuthProvider>
-        <ThemeProvider>
-          <TRPCReactProvider headers={headers()}>
-            <PromptProvider>
-              <Nav
-                session={session}
-                algoliaSearchConfig={algoliaSearchConfig}
-                username={userData?.username || null}
-              />
-              {children}
-              <Footer />
-            </PromptProvider>
-          </TRPCReactProvider>
-        </ThemeProvider>
-      </AuthProvider>
+      <Nav
+        session={session}
+        algoliaSearchConfig={algoliaSearchConfig}
+        username={userData?.username || null}
+      />
+      {children}
+      <Footer />
     </>
   );
 }
diff --git a/app/(app)/my-posts/_client.tsx b/app/(app)/my-posts/_client.tsx
index ad429ce0..ee9cfcd6 100644
--- a/app/(app)/my-posts/_client.tsx
+++ b/app/(app)/my-posts/_client.tsx
@@ -18,7 +18,7 @@ import { useSearchParams } from "next/navigation";
 import { api } from "@/server/trpc/react";
 import { Tabs } from "@/components/Tabs";
 import { PromptDialog } from "@/components/PromptService";
-import { PostStatus, getPostStatus } from "@/utils/post";
+import { status, getPostStatus } from "@/utils/post";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -135,7 +135,7 @@ const MyPosts = () => {
               }) => {
                 const postStatus = published
                   ? getPostStatus(new Date(published))
-                  : PostStatus.DRAFT;
+                  : status.DRAFT;
                 return (
                   <article
                     className="mb-4 border border-neutral-300 bg-white p-4 dark:bg-neutral-900"
@@ -158,11 +158,11 @@ const MyPosts = () => {
                     </p>
                     <div className="flex items-center">
                       <div className="flex-grow">
-                        {published && postStatus === PostStatus.SCHEDULED ? (
+                        {published && postStatus === status.SCHEDULED ? (
                           <>
                             {renderDate("Scheduled to publish on ", published)}
                           </>
-                        ) : published && postStatus === PostStatus.PUBLISHED ? (
+                        ) : published && postStatus === status.PUBLISHED ? (
                           <>
                             {/*If updatedAt is greater than published by more than on minutes show updated at else show published 
                               as on updating published updatedAt is automatically updated and is greater than published*/}
@@ -174,7 +174,7 @@ const MyPosts = () => {
                               <>{renderDate("Published on ", published)}</>
                             )}
                           </>
-                        ) : postStatus === PostStatus.DRAFT ? (
+                        ) : postStatus === status.DRAFT ? (
                           <>{renderDate("Last updated on ", updatedAt)}</>
                         ) : null}
                       </div>
diff --git a/app/(app)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
similarity index 92%
rename from app/(app)/create/[[...paramsArr]]/_client.tsx
rename to app/(editor)/create/[[...paramsArr]]/_client.tsx
index 1bd2a9fd..40118161 100644
--- a/app/(app)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -22,16 +22,23 @@ import { useMarkdownHotkeys } from "@/markdoc/editor/hotkeys/hotkeys.markdoc";
 import { useMarkdownShortcuts } from "@/markdoc/editor/shortcuts/shortcuts.markdoc";
 import { markdocComponents } from "@/markdoc/components";
 import { config } from "@/markdoc/config";
-import { useParams, useRouter } from "next/navigation";
+import { notFound, useParams, useRouter } from "next/navigation";
 import { usePrompt } from "@/components/PromptService";
 import { Switch } from "@/components/Switch/Switch";
 import copy from "copy-to-clipboard";
-import { PostStatus, getPostStatus, isValidScheduleTime } from "@/utils/post";
+import {
+  type PostStatus,
+  getPostStatus,
+  isValidScheduleTime,
+  status,
+} from "@/utils/post";
 import { ImageUp, LoaderCircle } from "lucide-react";
 import { uploadFile } from "@/utils/s3helpers";
 import { getUploadUrl } from "@/app/actions/getUploadUrl";
+import EditorNav from "./navigation";
+import { type Session } from "next-auth";
 
-const Create = () => {
+const Create = ({ session }: { session: Session | null }) => {
   const params = useParams();
   const router = useRouter();
 
@@ -52,6 +59,7 @@ const Create = () => {
   const [uploadStatus, setUploadStatus] = useState<
     "loading" | "error" | "success" | "default"
   >("default");
+  const [postStatus, setPostStatus] = useState<PostStatus | null>(null);
 
   const { unsavedChanges: _unsaved, setUnsavedChanges: _setUnsaved } =
     usePrompt();
@@ -186,16 +194,10 @@ const Create = () => {
       toast.error("Error saving");
     }
 
-    if (isSuccess) {
-      toast.success("Saved");
-    }
-
     if (draftFetchError) {
-      toast.error(
-        "Something went wrong fetching your draft, refresh your page or you may lose data",
-      );
+      notFound();
     }
-  }, [draftFetchError, isError, isSuccess]);
+  }, [draftFetchError, isError]);
 
   useEffect(() => {
     if (shouldRefetch) {
@@ -227,7 +229,6 @@ const Create = () => {
       await create({ ...formData });
     } else {
       await save({ ...formData, id: postId });
-      toast.success("Saved");
       setSavedTime(
         new Date().toLocaleString(undefined, {
           dateStyle: "medium",
@@ -243,9 +244,9 @@ const Create = () => {
     saveStatus === "loading" ||
     dataStatus === "loading";
 
-  const postStatus = data?.published
+  const currentPostStatus = data?.published
     ? getPostStatus(new Date(data.published))
-    : PostStatus.DRAFT;
+    : status.DRAFT;
 
   const onSubmit = async (inputData: SavePostInput) => {
     // validate markdoc syntax
@@ -264,7 +265,7 @@ const Create = () => {
 
     await savePost();
 
-    if (postStatus === PostStatus.PUBLISHED) {
+    if (currentPostStatus === status.PUBLISHED) {
       if (data) {
         router.push(`/articles/${data.slug}`);
       }
@@ -341,10 +342,21 @@ const Create = () => {
       published: published ? published : undefined,
     });
     setIsPostScheduled(published ? new Date(published) > new Date() : false);
+    setPostStatus(
+      published ? getPostStatus(new Date(published)) : status.DRAFT,
+    );
   }, [data]);
 
   useEffect(() => {
-    if (postStatus !== PostStatus.DRAFT) return;
+    if ((title + body).length < 5) {
+      setPostStatus(null);
+    } else if (postStatus === null) {
+      setPostStatus(status.DRAFT);
+    }
+  }, [title, body]);
+
+  useEffect(() => {
+    if (currentPostStatus !== status.DRAFT) return;
     if ((title + body).length < 5) return;
     if (debouncedValue === (data?.title || "") + data?.body) return;
     if (allowUpdate) savePost();
@@ -374,8 +386,21 @@ const Create = () => {
     }
   }, [publishStatus, publishData, isPostScheduled, router]);
 
+  const handlePublish = () => {
+    if (isDisabled) return;
+    setOpen(true);
+  };
+
   return (
     <>
+      <EditorNav
+        session={session}
+        username={session?.user?.name || null}
+        postStatus={postStatus}
+        unsavedChanges={unsavedChanges}
+        onPublish={handlePublish}
+        isDisabled={isDisabled}
+      />
       <form onSubmit={handleSubmit(onSubmit)}>
         <Transition show={open} as={Fragment}>
           <div className="old-input fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
@@ -549,7 +574,7 @@ const Create = () => {
                       </Disclosure>
                     </div>
                     <div className="mt-4 flex w-full justify-end sm:col-span-12 sm:mt-0">
-                      {postStatus === PostStatus.DRAFT && (
+                      {currentPostStatus === status.DRAFT && (
                         <button
                           type="button"
                           disabled={isDisabled}
@@ -578,14 +603,17 @@ const Create = () => {
                           </>
                         ) : (
                           <>
-                            {postStatus === PostStatus.DRAFT &&
-                              (isPostScheduled ? "Schedule" : "Publish now")}
-                            {postStatus === PostStatus.SCHEDULED &&
-                              (isPostScheduled
-                                ? "Save changes"
-                                : "Publish now")}
-                            {postStatus === PostStatus.PUBLISHED &&
-                              "Save changes"}
+                            {currentPostStatus === status.PUBLISHED
+                              ? "Save changes"
+                              : currentPostStatus === status.DRAFT
+                                ? isPostScheduled
+                                  ? "Schedule"
+                                  : "Publish now"
+                                : currentPostStatus === status.SCHEDULED
+                                  ? isPostScheduled
+                                    ? "Update schedule"
+                                    : "Publish now"
+                                  : "Publish"}
                           </>
                         )}
                       </button>
@@ -743,36 +771,6 @@ const Create = () => {
                               inputRef={textareaRef}
                             />
                           </div>
-
-                          <div className="flex items-center justify-between">
-                            <>
-                              {saveStatus === "loading" && (
-                                <p>Auto-saving...</p>
-                              )}
-                              {saveStatus === "error" && savedTime && (
-                                <p className="text-xs text-red-600 lg:text-sm">
-                                  {`Error saving, last saved: ${savedTime.toString()}`}
-                                </p>
-                              )}
-                              {saveStatus === "success" && savedTime && (
-                                <p className="text-xs text-neutral-400 lg:text-sm">
-                                  {`Saved: ${savedTime.toString()}`}
-                                </p>
-                              )}
-                            </>
-                            <div />
-
-                            <div className="flex">
-                              <button
-                                type="button"
-                                disabled={isDisabled}
-                                className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
-                                onClick={() => setOpen(true)}
-                              >
-                                Next
-                              </button>
-                            </div>
-                          </div>
                         </div>
                       )}
                     </div>
diff --git a/app/(editor)/create/[[...paramsArr]]/navigation.tsx b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
new file mode 100644
index 00000000..d1b5397d
--- /dev/null
+++ b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { api } from "@/server/trpc/react";
+import { Menu, Transition } from "@headlessui/react";
+import { BellIcon } from "@heroicons/react/20/solid";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+import { Fragment } from "react";
+import { type Session } from "next-auth";
+import Logo from "@/icons/logo.svg";
+import { type PostStatus, status } from "@/utils/post";
+
+type EditorNavProps = {
+  session: Session | null;
+  username: string | null;
+  postStatus: PostStatus | null;
+  unsavedChanges: boolean;
+  onPublish: () => void;
+  isDisabled: boolean;
+};
+
+const EditorNav = ({
+  session,
+  username,
+  postStatus,
+  unsavedChanges,
+  onPublish,
+  isDisabled,
+}: EditorNavProps) => {
+  const { data: count } = api.notification.getCount.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  const userNavigation = [
+    { name: "Your Profile", href: `/${username || "settings"}` },
+    { name: "Settings", href: "/settings" },
+    { name: "Sign out", onClick: () => signOut() },
+  ];
+
+  const hasNotifications = !!count && count > 0;
+
+  const getStatusText = () => {
+    if (postStatus === null) return null;
+
+    switch (postStatus) {
+      case status.DRAFT:
+        return unsavedChanges ? "Draft - Unsaved changes" : "Draft - Saved";
+      case status.PUBLISHED:
+        return unsavedChanges ? "Published - Unsaved changes" : "Published";
+      case status.SCHEDULED:
+        return unsavedChanges ? "Scheduled - Unsaved changes" : "Scheduled";
+      default:
+        return null;
+    }
+  };
+
+  const statusText = getStatusText();
+
+  return (
+    <nav className="sticky top-0 z-50 bg-white shadow-sm dark:bg-black">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-14 items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <Link href="/" className="flex items-center">
+              <Logo className="h-6 w-auto" />
+            </Link>
+
+            {statusText && (
+              <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                {statusText}
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <button
+              onClick={onPublish}
+              disabled={isDisabled}
+              className="rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-3 py-1.5 text-sm font-medium text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {postStatus === status.PUBLISHED ? "Save changes" : "Publish"}
+            </button>
+
+            {session && (
+              <>
+                <Link
+                  href="/notifications"
+                  className="focus-style relative rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                  <span className="sr-only">View notifications</span>
+                  {hasNotifications && (
+                    <div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-pink-500" />
+                  )}
+                  <BellIcon className="h-5 w-5" aria-hidden="true" />
+                </Link>
+                <Menu as="div" className="relative ml-3">
+                  <div>
+                    <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2">
+                      <span className="sr-only">Open user menu</span>
+                      {session.user?.image ? (
+                        <img
+                          className="h-8 w-8 rounded-full"
+                          src={session.user.image}
+                          alt={`${session.user.name}'s avatar`}
+                        />
+                      ) : (
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-neutral-300">
+                          {session.user?.name?.[0] || "U"}
+                        </div>
+                      )}
+                    </Menu.Button>
+                  </div>
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      {userNavigation.map((item) => (
+                        <Menu.Item key={item.name}>
+                          {({ active }) =>
+                            item.onClick ? (
+                              <button
+                                onClick={item.onClick}
+                                className={`${
+                                  active ? "bg-neutral-100" : ""
+                                } block w-full px-4 py-2 text-left text-sm text-neutral-700`}
+                              >
+                                {item.name}
+                              </button>
+                            ) : (
+                              <Link
+                                href={item.href}
+                                className={`${
+                                  active ? "bg-neutral-100" : ""
+                                } block px-4 py-2 text-sm text-neutral-700`}
+                              >
+                                {item.name}
+                              </Link>
+                            )
+                          }
+                        </Menu.Item>
+                      ))}
+                    </Menu.Items>
+                  </Transition>
+                </Menu>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default EditorNav;
diff --git a/app/(editor)/create/[[...paramsArr]]/not-found.tsx b/app/(editor)/create/[[...paramsArr]]/not-found.tsx
new file mode 100644
index 00000000..dae055d0
--- /dev/null
+++ b/app/(editor)/create/[[...paramsArr]]/not-found.tsx
@@ -0,0 +1,7 @@
+import NotFound from "@/components/NotFound/NotFound";
+
+const notfound = () => {
+  return <NotFound />;
+};
+
+export default notfound;
diff --git a/app/(editor)/create/[[...paramsArr]]/page.tsx b/app/(editor)/create/[[...paramsArr]]/page.tsx
new file mode 100644
index 00000000..8fd8a385
--- /dev/null
+++ b/app/(editor)/create/[[...paramsArr]]/page.tsx
@@ -0,0 +1,37 @@
+import { redirect } from "next/navigation";
+import Content from "./_client";
+import { getServerAuthSession } from "@/server/auth";
+
+export const metadata = {
+  title: "Edit Post - Codú",
+  description:
+    "Create and edit your articles with Codú's powerful writing editor. Share your knowledge and insights with the developer community.",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+  publisher: "Codú",
+  applicationName: "Codú",
+  keywords: [
+    "article editor",
+    "writing",
+    "blogging",
+    "tech articles",
+    "developer content",
+    "programming",
+    "web development",
+    "coding tutorials",
+    "technical writing",
+    "knowledge sharing",
+  ],
+  metadataBase: new URL("https://www.codu.co"),
+  openGraph: {
+    images: "/images/og/home-og.png",
+  },
+};
+
+export default async function Page() {
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect("/get-started");
+  }
+
+  return <Content session={session} />;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 9c60b2de..0f0fbd37 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,17 @@
-import "../styles/globals.css";
+import { headers } from "next/headers";
+import "@/styles/globals.css";
 import Fathom from "@/components/Fathom/Fathom";
-import React from "react";
 import A11yProvider from "@/components/A11yProvider/A11yProvider";
 import { Toaster } from "sonner";
 import { CSPostHogProvider } from "./providers";
 import dynamic from "next/dynamic";
 
+import ThemeProvider from "@/components/Theme/ThemeProvider";
+import { TRPCReactProvider } from "@/server/trpc/react";
+import AuthProvider from "@/context/AuthProvider";
+import ProgressBar from "@/components/ProgressBar/ProgressBar";
+import { PromptProvider } from "@/components/PromptService";
+
 const PostHogPageView = dynamic(
   () => import("@/components/PageViews/PageViews"),
   {
@@ -62,7 +68,16 @@ export default async function RootLayout({
         <body className="h-full">
           <PostHogPageView />
           <Toaster />
-          <A11yProvider>{children}</A11yProvider>
+          <A11yProvider>
+            <ProgressBar />
+            <AuthProvider>
+              <ThemeProvider>
+                <TRPCReactProvider headers={headers()}>
+                  <PromptProvider>{children}</PromptProvider>
+                </TRPCReactProvider>
+              </ThemeProvider>
+            </AuthProvider>
+          </A11yProvider>
         </body>
       </CSPostHogProvider>
     </html>
diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index c47fd357..efd9ff3d 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -181,8 +181,8 @@ test.describe("Authenticated Articles Page", () => {
       .getByPlaceholder("Enter your content here 💖")
       .fill(articleContent);
 
-    await expect(page.getByRole("button", { name: "Next" })).toBeVisible();
-    await page.getByRole("button", { name: "Next" }).click();
+    await expect(page.getByRole("button", { name: "Publish" })).toBeVisible();
+    await page.getByRole("button", { name: "Publish" }).click();
 
     await expect(
       page.getByRole("button", { name: "Publish now" }),
diff --git a/utils/post.ts b/utils/post.ts
index bfe14ebd..d12dd82d 100644
--- a/utils/post.ts
+++ b/utils/post.ts
@@ -1,6 +1,10 @@
-const [SCHEDULED, PUBLISHED, DRAFT] = ["scheduled", "published", "draft"];
+const SCHEDULED = "scheduled" as const;
+const PUBLISHED = "published" as const;
+const DRAFT = "draft" as const;
 
-export const PostStatus = {
+export type PostStatus = typeof SCHEDULED | typeof PUBLISHED | typeof DRAFT;
+
+export const status = {
   SCHEDULED,
   PUBLISHED,
   DRAFT,