- {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}
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
(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 (
<>
+
)}
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 (
+