fix: reset editor

src/app/api/pastes/route.ts

@@ -34,7 +34,9 @@ export async function POST(request: NextRequest) {
     const db = client.db('ccbin');
     const document = {
       ...payload,
-      expiryDate: new Date(payload.expiryDate), // Convert user-provided expiry date to Date object
+      expiryDate: payload.expiryDate
+        ? new Date(payload.expiryDate)
+        : new Date(Date.now() + 1 * (60 * 60 * 1000)), // Convert user-provided expiry date to Date object
     };
     const result = await db.collection('pastes').insertOne(document);
     return new Response(JSON.stringify(result), { status: 200 });

src/app/components/Editor.tsx

@@ -56,6 +56,8 @@ import Underline from '@editorjs/underline';
 import Warning from '@editorjs/warning';
 import { useEffect, useRef, useState } from 'react';
 
+import { useEditorContext } from '@/app/context/EditorContext';
+
 interface PropTypes {
   content?: OutputData | null;
   onlyReadable?: boolean;
@@ -68,13 +70,16 @@ interface EditorJSInstance {
     save: () => Promise<OutputData>;
   };
   destroy: () => void;
+  clear: () => void;
   // Add other methods/properties you plan to use
 }
 
 export default function Editor({ saveData, content, onlyReadable }: PropTypes) {
   const ejInstance = useRef<EditorJSInstance | null>(null);
   const [editorState, saveEditorState] = useState<OutputData>();
 
+  const { resetState } = useEditorContext();
+
   const initEditor = () => {
     const editor = new EditorJS({
       placeholder: 'Let`s write an awesome story!',
@@ -190,6 +195,10 @@ export default function Editor({ saveData, content, onlyReadable }: PropTypes) {
     });
   };
 
+  useEffect(() => {
+    ejInstance?.current?.clear();
+  }, [resetState]);
+
   // This will run only once
   useEffect(() => {
     if (ejInstance.current === null) {
@@ -215,14 +224,16 @@ export default function Editor({ saveData, content, onlyReadable }: PropTypes) {
       <div className='w-[50rem] self-center shadow-[0_-3px_29px_-5px_rgba(34,39,47,.14)] rounded-lg px-10 py-10 min-h-[40rem]'>
         <div id='editorjs'></div>
       </div>
-      <div className='flex justify-center mt-10'>
-        <button
-          className='text-center text-white bg-green-600 outline-none rounded-lg px-6 py-3 text-md'
-          onClick={handleSave}
-        >
-          Share Paste
-        </button>
-      </div>
+      {!onlyReadable && (
+        <div className='flex justify-center mt-10'>
+          <button
+            className='text-center text-white bg-green-600 outline-none rounded-lg px-6 py-3 text-md'
+            onClick={handleSave}
+          >
+            Share Paste
+          </button>
+        </div>
+      )}
     </div>
   );
 }

src/app/components/Header.tsx

@@ -2,8 +2,20 @@
 
 import { SunIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { useEditorContext } from '@/app/context/EditorContext';
 
 export default function Header() {
+  const { resetEditorState } = useEditorContext();
+
+  const router = useRouter();
+
+  const handleOnClick = () => {
+    router.push('/');
+    resetEditorState();
+  };
+
   return (
     <div className='flex justify-between text-center bg-gray-950 text-white py-5 px-20'>
       <div className='flex items-center space-x-4'>
@@ -18,7 +30,12 @@ export default function Header() {
       </div>
       <div className='flex space-x-5 items-center'>
         <SunIcon className='size-8 text-white' />
-        <button className='text-center bg-green-600 outline-none rounded-lg px-5 py-2 text-sm'>
+        <button
+          className='text-center bg-green-600 outline-none rounded-lg px-5 py-2 text-sm'
+          onClick={() => {
+            handleOnClick();
+          }}
+        >
           New Paste
         </button>
       </div>

src/app/context/EditorContext.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useState,
+} from 'react';
+
+type FooterContextType = {
+  resetState: boolean;
+  resetEditorState: () => void;
+};
+
+const EditorContext = createContext<FooterContextType | undefined>(undefined);
+
+export const useEditorContext = (): FooterContextType => {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error('useFooterContext must be used within a FooterProvider');
+  }
+  return context;
+};
+
+export const EditorProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [resetState, setResetState] = useState<boolean>(false);
+
+  const resetEditorState = (): void => {
+    setResetState((prevState) => !prevState);
+  };
+
+  // Provide the context value to children components
+  return (
+    <EditorContext.Provider value={{ resetState, resetEditorState }}>
+      {children}
+    </EditorContext.Provider>
+  );
+};

src/app/layout.tsx

@@ -5,10 +5,11 @@ import '@/styles/globals.css';
 // !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
 import '@/styles/colors.css';
 
-// import '@/styles/custom.css'
+// import '@/styles/custom.css';
 import Footer from '@/app/components/Footer';
 import Header from '@/app/components/Header';
 import { Toaster } from '@/app/components/ui/sonner';
+import { EditorProvider } from '@/app/context/EditorContext';
 import { siteConfig } from '@/constant/config';
 
 // !STARTERCONF Change these default meta
@@ -61,12 +62,14 @@ export default function RootLayout({
   return (
     <html>
       <body>
-        <div className='flex h-screen flex-col justify-between font-sans'>
-          <Header />
-          <main className='mb-auto'>{children}</main>
-          <Toaster />
-          <Footer />
-        </div>
+        <EditorProvider>
+          <div className='flex h-screen flex-col justify-between font-sans'>
+            <Header />
+            <main className='mb-auto'>{children}</main>
+            <Toaster />
+            <Footer />
+          </div>
+        </EditorProvider>
       </body>
     </html>
   );