From f5cbc598620b92dbb3a467136fcb8f13b0fe6baf Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Fri, 7 Jun 2024 12:06:00 -0400
Subject: [PATCH] initial interview template, add interviews/tools to
 userpostsid query

---
 .../editorHooks/libs/getCreatePostData.js     |  11 +-
 .../libs/helpers/editorDataFormatter.js       |   6 +
 .../libs/templates/interviewTemplate.js       | 423 ++++++++++++++++++
 .../Editor/editorHooks/newPost/useCreate.js   |   4 +-
 .../Editor/editorHooks/newPost/useLoad.js     |  13 +-
 components/StickyFooterInterview.js           |   4 +-
 lib/api.js                                    |   7 +
 lib/queries/getUserRelatedPostsFromPostId.js  |  14 +
 pages/toolbox/[slug].js                       |  27 +-
 pages/toolbox/post/[id]/interview/[slug].js   | 175 ++++++++
 pages/toolbox/post/[id]/interview/index.js    | 123 +++++
 pages/write.js                                |   4 +-
 12 files changed, 799 insertions(+), 12 deletions(-)
 create mode 100644 components/Editor/editorHooks/libs/templates/interviewTemplate.js
 create mode 100644 lib/queries/getUserRelatedPostsFromPostId.js
 create mode 100644 pages/toolbox/post/[id]/interview/[slug].js
 create mode 100644 pages/toolbox/post/[id]/interview/index.js

diff --git a/components/Editor/editorHooks/libs/getCreatePostData.js b/components/Editor/editorHooks/libs/getCreatePostData.js
index 7c58faef..118f820c 100644
--- a/components/Editor/editorHooks/libs/getCreatePostData.js
+++ b/components/Editor/editorHooks/libs/getCreatePostData.js
@@ -4,13 +4,15 @@ import {
   getContent,
   getLegacyFeaturedImage,
   uid,
+  getPostRelation
 } from "./helpers/editorDataFormatter";
 
 export const getCreatePostData = ({
   editor,
   forReview,
   postObject,
-  user
+  user,
+  relatedPost
 }) => {
   const html = editor.getHTML();
   const json = editor.getJSON()?.content;
@@ -25,6 +27,9 @@ export const getCreatePostData = ({
   //create post slug - just use a unique id and the date
   const slug = `${uid()}--${user?.profile?.id}`;
 
+  const postRelation = getPostRelation({ relatedPost, postObject });
+  
+
   let entry = {
     type: "article",
     status: forReview ? "pending" : "draft",
@@ -38,6 +43,10 @@ export const getCreatePostData = ({
     user: user?.profile?.id,
   };
 
+  if(postRelation) {
+    entry.tools = [postRelation];
+  }
+
   //change the date on save only if postStatus==draft or postStatus==pending publish
   if (postObject?.status !== "publish") {
     entry.date = new Date();
diff --git a/components/Editor/editorHooks/libs/helpers/editorDataFormatter.js b/components/Editor/editorHooks/libs/helpers/editorDataFormatter.js
index 3ffed26b..f93ed35f 100644
--- a/components/Editor/editorHooks/libs/helpers/editorDataFormatter.js
+++ b/components/Editor/editorHooks/libs/helpers/editorDataFormatter.js
@@ -161,3 +161,9 @@ export const getPostDate = ({ postObject }) => {
 export const uid = function () {
   return Date.now().toString(36) + Math.random().toString(36).substr(2);
 };
+
+
+export const getPostRelation = ({ postObject, relatedPost }) => {
+
+  return relatedPost;
+};
\ No newline at end of file
diff --git a/components/Editor/editorHooks/libs/templates/interviewTemplate.js b/components/Editor/editorHooks/libs/templates/interviewTemplate.js
new file mode 100644
index 00000000..c44a6e53
--- /dev/null
+++ b/components/Editor/editorHooks/libs/templates/interviewTemplate.js
@@ -0,0 +1,423 @@
+export const getInterViewTemplate = ({ productName }) => {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "heading",
+        attrs: {
+          level: 1,
+        },
+        content: [
+          {
+            type: "text",
+            text: `${productName}: Creator Story`,
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "Welcome to your creator story! This is an interview template that will help share your story and show the human behind the product. The purpose is to showcase work you're excited about, whilst also helping and inspiring readers with their own projects. ",
+          },
+        ],
+      },
+      {
+        type: "bulletList",
+        content: [
+          {
+            type: "listItem",
+            content: [
+              {
+                type: "paragraph",
+                content: [
+                  {
+                    type: "text",
+                    marks: [
+                      {
+                        type: "italic",
+                      },
+                    ],
+                    text: "Add your responses under the headings marked with Q.",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: "listItem",
+            content: [
+              {
+                type: "paragraph",
+                content: [
+                  {
+                    type: "text",
+                    marks: [
+                      {
+                        type: "italic",
+                      },
+                    ],
+                    text: "Feel free to add your own questions to steer the article ",
+                  },
+                ],
+              },
+              {
+                type: "paragraph",
+              },
+            ],
+          },
+          {
+            type: "listItem",
+            content: [
+              {
+                type: "paragraph",
+                content: [
+                  {
+                    type: "text",
+                    marks: [
+                      {
+                        type: "italic",
+                      },
+                    ],
+                    text: "Long answers are encouraged, we will scope it down where needed when editing the submission",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: "listItem",
+            content: [
+              {
+                type: "paragraph",
+                content: [
+                  {
+                    type: "text",
+                    marks: [
+                      {
+                        type: "italic",
+                      },
+                    ],
+                    text: "Add pictures and videos (this editor is still WIP, so add links to videos if they don't upload)",
+                  },
+                ],
+              },
+              {
+                type: "paragraph",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "Once completed, submit it for review, and we'll work with you to turn it into a piece ",
+          },
+          {
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: {
+                  href: "https://prototypr.io/post/framer-sites-building-landing-pages-that-tell-stories-with-olvy",
+                  target: "_blank",
+                  rel: null,
+                  class: null,
+                },
+              },
+              {
+                type: "italic",
+              },
+            ],
+            text: "like this one",
+          },
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: " or ",
+          },
+          {
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: {
+                  href: "https://prototypr.io/post/from-design-system-to-nft-design-system-creating-tinyfaces",
+                  target: "_blank",
+                  rel: null,
+                  class: null,
+                },
+              },
+              {
+                type: "italic",
+              },
+            ],
+            text: "this one",
+          },
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: ". ",
+          },
+        ],
+      },
+      {
+        type: "horizontalRule",
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 1,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Introduction",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "What's your story? This section is to share your background and what inspires you.",
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Q. Tell us about yourself, current work and side projects",
+          },
+        ],
+      },
+      {
+        type: "horizontalRule",
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 1,
+        },
+        content: [
+          {
+            type: "text",
+            text: `What inspired you to work on ${productName}?`,
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "How you decided what to work on, and what inspires and drives you to do it. It will also help other people decide on what they should work on.",
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: `Q. What is ${productName}, and how did you discover the problem you’re trying to solve?`,
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Q. Who is it for, and how are you discovering your first users?",
+          },
+        ],
+      },
+      {
+        type: "horizontalRule",
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 1,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Sharing the process",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "This section gives a look into your craft, and also teaches readers how they can approach certain tasks you undertook.",
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: `Q. What are the piece(s) of ${productName} you're most proud of, and why?`,
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Q. Share some of the process behind creating a piece you're proud of? What tools did you use along the way, and for what purpose?",
+          },
+        ],
+      },
+      {
+        type: "horizontalRule",
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 1,
+        },
+        content: [
+          {
+            type: "text",
+            text: `What's Next for ${productName}?`,
+          },
+        ],
+      },
+
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "Share your plans for the future of your project, and what you're excited about.",
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Q. Where do you want to take the project next? ",
+          },
+        ],
+      },
+      {
+        type: "heading",
+        attrs: {
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Q. Do you have any predictions about the future of your project industry?",
+          },
+        ],
+      },
+      {
+        type: "horizontalRule",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "Once you're done, submit the article for review. ",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [
+              {
+                type: "italic",
+              },
+            ],
+            text: "An editor (Graeme) will work on it and get back to you with edits and any additional questions.",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  };
+};
diff --git a/components/Editor/editorHooks/newPost/useCreate.js b/components/Editor/editorHooks/newPost/useCreate.js
index 16579a79..29ee3356 100644
--- a/components/Editor/editorHooks/newPost/useCreate.js
+++ b/components/Editor/editorHooks/newPost/useCreate.js
@@ -3,9 +3,9 @@ import { getCreatePostData } from "../libs/getCreatePostData";
 var axios = require("axios");
 
 const useCreate = () => {
-  const createPost = async ({ user, editor, forReview }) => {
+  const createPost = async ({ user, editor, forReview, relatedPost }) => {
 
-    const { entry } = getCreatePostData({ user, editor, forReview });
+    const { entry } = getCreatePostData({ user, editor, forReview, relatedPost });
 
     let publishPostEndpointConfig = {
       method: "post",
diff --git a/components/Editor/editorHooks/newPost/useLoad.js b/components/Editor/editorHooks/newPost/useLoad.js
index bbf9b453..9df7a11c 100644
--- a/components/Editor/editorHooks/newPost/useLoad.js
+++ b/components/Editor/editorHooks/newPost/useLoad.js
@@ -9,7 +9,9 @@ import { useEffect, useState } from "react";
  * @param {*} usr
  * @returns
  */
-const useLoad = user => {
+import { getInterViewTemplate } from "../libs/templates/interviewTemplate";
+
+const useLoad = ({user, interview, productName}) => {
   const [loading, setLoading] = useState(true);
 
   const [postStatus] = useState("draft");
@@ -27,12 +29,19 @@ const useLoad = user => {
 
   const refetch = async () => {
     let retrievedObject = localStorage.getItem("wipContent");
+    if(interview){
+      retrievedObject = localStorage.getItem("wipInterview");
+    }
     if (retrievedObject) {
       setInitialContent(JSON.parse(retrievedObject));
       setLoading(false);
-    } else {
+    } 
+    else {
       //it's a new post
       setInitialContent(false)
+      if(interview){
+        setInitialContent(getInterViewTemplate({productName:'Prototypr Publisher'}));
+      }
       setLoading(false);
     }
   };
diff --git a/components/StickyFooterInterview.js b/components/StickyFooterInterview.js
index 32067492..da00e4d5 100644
--- a/components/StickyFooterInterview.js
+++ b/components/StickyFooterInterview.js
@@ -14,7 +14,7 @@ export function getScrollPercent() {
   return ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100;
 }
 
-const StickyFooterInterview = ({ title, description, buttonText }) => {
+const StickyFooterInterview = ({ title, description, buttonText, post }) => {
   const [isVisible, setVisible] = useState(true);
 //   const [userClosed, setUserClosed] = useState(false);
 
@@ -113,7 +113,7 @@ const StickyFooterInterview = ({ title, description, buttonText }) => {
               </div>
             </div>
             <div className="my-auto ml-4 md:ml-0 flex-none w-full md:w-[fit-content] md:block flex justify-start md:justify-end">
-              <Link className="w-[fit-content]" href="/onboard">
+              <Link className="w-[fit-content]" href={`/toolbox/post/${post.id}/interview`}>
                 <Button
                   className="py-1 md:w-auto p-0 py-[0.1rem] bg-yellow-300/90 hover:bg-yellow-300 text-yellow-900 px-[1rem]"
                   variant={"confirmRounded"}
diff --git a/lib/api.js b/lib/api.js
index 9a962a8c..2a561f87 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -47,6 +47,7 @@ import allNewsQuery from "./queries/allNewsQuery";
 import allProductsQuery from "./queries/allProductsQuery";
 import { addBase64s } from "./utils/blurHashToDataURL";
 import creatorArticlesQuery from "./queries/creatorArticlesQuery";
+import getUserRelatedPostsFromPostId from "./queries/getUserRelatedPostsFromPostId";
 
 /**
  * main fetch
@@ -731,6 +732,12 @@ export async function getSlugFromArticleId(user, slug) {
   return data;
 }
 
+export async function getUserRelatedPostsFromId(user, slug) {
+  // userArticleQuery
+  const data = await fetchAPIAuthenticated(user, getUserRelatedPostsFromPostId, { slug });
+  return data;
+}
+
 //jobs
 export async function getUserJobById(user, id) {
   // console.log("user haha ->", user);
diff --git a/lib/queries/getUserRelatedPostsFromPostId.js b/lib/queries/getUserRelatedPostsFromPostId.js
new file mode 100644
index 00000000..88f9352d
--- /dev/null
+++ b/lib/queries/getUserRelatedPostsFromPostId.js
@@ -0,0 +1,14 @@
+export default `
+query UserArticle($slug:ID!) {
+  userPostId(id: $slug) {
+    id
+    slug
+    interviews{
+      slug
+    }
+    tools{
+      slug
+    }
+  }
+}
+`;
diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
index 37312b6d..8c0f5ea8 100644
--- a/pages/toolbox/[slug].js
+++ b/pages/toolbox/[slug].js
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 // import Button from "@/components/Primitives/Button";
 import Link from "next/link";
 import ErrorPage from "next/error";
@@ -33,6 +33,8 @@ import {
   getTool,
   // getAllToolsForHomeStatic,
   getPopularTopics,
+  getSlugFromArticleId,
+  getUserRelatedPostsFromId,
 } from "@/lib/api";
 // import ToolCard from "@/components/v4/card/ToolCard";
 // import BigTag from "@/components/v4/tag/BigTag";
@@ -94,6 +96,25 @@ const ToolContent = ({
     }
   }, [post.attributes?.content]);
 
+  const [hasInterview, setHasInterview] = useState('loading');
+  useEffect(()=>{
+    if(user?.isLoggedIn && post?.attributes?.creators?.data?.some(item => item.id == user.id)){
+      //query the user endpoint where drafts are returned
+      const fetchPostWithDrafts = async (user, postId) => {
+        const { userPostId } = await getUserRelatedPostsFromId(user, postId);
+        //this is named weirdly - it's actually the post object
+        if(userPostId?.interviews?.length){
+          setHasInterview(true);
+        }else{
+          setHasInterview(false);
+        }
+      }
+        
+      fetchPostWithDrafts(user, post.id)
+    }
+
+  },[post?.attributes?.creators, user])
+
 
   return (
     <>
@@ -450,9 +471,9 @@ const ToolContent = ({
         />
       )}
 
-      {(user?.isLoggedIn && post?.attributes?.creators?.data?.some(item => item.id == user.id) && !post.attributes?.interviews?.data?.length) && (
+      {(user?.isLoggedIn && post?.attributes?.creators?.data?.some(item => item.id == user.id) && (hasInterview!=='loading' && hasInterview==false)) && (
         <>
-        <StickyFooterInterview title="Tell your creator story" description={"Get featured in the newsletter by answering a creator interview"} />
+        <StickyFooterInterview post={post} title="Tell your creator story" description={"Get featured in the newsletter by answering a creator interview"} />
         </>
       )}
       {/* <NewsletterSection title="Get the best tools every week"/> */}
diff --git a/pages/toolbox/post/[id]/interview/[slug].js b/pages/toolbox/post/[id]/interview/[slug].js
new file mode 100644
index 00000000..bc7e9770
--- /dev/null
+++ b/pages/toolbox/post/[id]/interview/[slug].js
@@ -0,0 +1,175 @@
+import dynamic from "next/dynamic";
+
+import Fallback from "@/components/atom/Fallback/Fallback";
+import useUser from "@/lib/iron-session/useUser";
+// import Layout from "@/components/layout-editor";
+
+import Editor from "@/components/Editor/Editor";
+import { useEffect } from "react";
+import useLoad from "@/components/Editor/editorHooks/editPost/useLoad";
+import useUpdate from "@/components/Editor/editorHooks/editPost/useUpdate";
+
+import { useConfirmTabClose } from "@/components/Editor/useConfirmTabClose";
+import EditorNav from "@/components/EditorNav";
+import { addTwitterScript } from "@/components/Editor/editorHooks/libs/addTwitterScript";
+
+const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
+
+/**
+ * Edit post page
+ * used to edit existing post given the slug
+ *
+ * uses the 'edit' version of useLoad
+ * /components/Editor/editorHooks/editPost/useLoad
+ * this hook loads the editor with the existing post content from the backend
+ *
+ * @param {*} props
+ * @returns
+ */
+export default function EditPostPage(props) {
+  const { user } = useUser({
+    redirectTo: "/onboard",
+    redirectIfFound: false,
+  });
+
+  useEffect(() => {
+    addTwitterScript();
+  }, []);
+
+  //useLoad hook
+  const {
+    canEdit,
+    initialContent,
+    postStatus,
+    postObject,
+    slug,
+    postId,
+    refetch,
+    setPostObject,
+  } = useLoad(user);
+
+  //useUpdate hook
+  const {
+    //update post content
+    updatePostById,
+    //update post settings
+    updateSettings,
+    setHasUnsavedChanges,
+    hasUnsavedChanges,
+  } = useUpdate();
+
+  useConfirmTabClose(hasUnsavedChanges);
+
+  /**
+   * savePost
+   * when save or submit for publishing button is clicked
+   * save the post to the backend
+   * @param {*} param0
+   */
+  const savePost = async ({ editor, forReview }) => {
+    try {
+      const updatedPostObject = await updatePostById({
+        editor: editor,
+        postId: postId,
+        user: user,
+        forReview: forReview,
+        postStatus: postStatus,
+        postObject: postObject,
+      });
+
+      //update the postObject from useLoad hook
+      if(updatedPostObject) {
+        setPostObject(updatedPostObject);
+        //confirm no unsaved changes
+        setHasUnsavedChanges(false);
+      }
+      return true;
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+
+  /**
+   * updateSettings
+   */
+  const updatePostSettings = async ({ settings }) => {
+    try {
+      const updatedPostObject = await updateSettings({
+        postId: postId,
+        user: user,
+        settings: settings,
+        postObject: postObject,
+      });
+
+      if(updatedPostObject) {
+        setPostObject(updatedPostObject);
+      }
+
+      return true;
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+
+  /**
+   * updatePost
+   * when editor onUpdate is triggered,
+   * do whatever - in this case, set hasUnsavedChanges to true
+   *
+   * - not autosaving yet until saving doesn't have issues (like overwriting fields wrongly)
+   * - using save post button to save for now
+   * @param {*} param0
+   */
+  const updatePost = ({ editor, json, forReview = false }) => {
+    // console.log("updatePost");
+    setHasUnsavedChanges(true);
+  };
+
+  return (
+    <>
+      <EditorNav postStatus={postStatus} />
+
+      <div className="h-full w-full">
+        <div id="editor-container" className="w-full h-full mx-auto  relative">
+          {/* {!user && <Fallback />} */}
+
+          {/* only load editor if initialContent has loaded */}
+          {(user && !user?.isLoggedIn) || initialContent == null ? (
+            <>
+              {/* <Layout> */}
+              <div className="relative w-full h-screen flex">
+                <div className="my-auto mx-auto">
+                  <Spinner />
+                </div>
+              </div>
+              {/* </Layout> */}
+            </>
+          ) : (
+            user?.isLoggedIn && (
+              <div>
+                <Editor
+                  canEdit={canEdit}
+                  initialContent={initialContent}
+                  postStatus={postStatus}
+                  //used for updating existing post
+                  slug={slug}
+                  postId={postId}
+                  postObject={postObject}
+                  //save and update content
+                  savePost={savePost}
+                  updatePost={updatePost}
+                  //refetch post needed when the featured image is updated in post settings
+                  refetchPost={refetch}
+                  //update post settings
+                  updatePostSettings={updatePostSettings}
+                />
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/pages/toolbox/post/[id]/interview/index.js b/pages/toolbox/post/[id]/interview/index.js
new file mode 100644
index 00000000..3d815c86
--- /dev/null
+++ b/pages/toolbox/post/[id]/interview/index.js
@@ -0,0 +1,123 @@
+import dynamic from "next/dynamic";
+// import Layout from "@/components/layout-editor";
+
+import useUser from "@/lib/iron-session/useUser";
+import { useEffect } from "react";
+import { addTwitterScript } from "@/components/Editor/editorHooks/libs/addTwitterScript";
+
+import Editor from "@/components/Editor/Editor";
+const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
+
+import useLoad from "@/components/Editor/editorHooks/newPost/useLoad";
+import useCreate from "@/components/Editor/editorHooks/newPost/useCreate";
+
+import { useRouter } from "next/router";
+import EditorNav from "@/components/EditorNav";
+
+/**
+ * Write
+ * used to create new post
+ *
+ * uses the 'new post' version of useLoad
+ * /components/Editor/editorHooks/newPost/useLoad
+ * this hook loads the editor with any content stored in local storage
+ *
+ * @returns
+ */
+export default function InterviewEditor() {
+  const router = useRouter();
+
+  const { user } = useUser({
+    // redirectTo: '/account',
+    redirectTo: "/onboard",
+    redirectIfFound: false,
+  });
+
+  /**
+   * embed twitter widget if not already loaded
+   */
+  useEffect(() => {
+    addTwitterScript();
+  }, []);
+
+  //useLoad hook
+  //initialContent is null until loaded - so is 'false' when it's a new post
+  const { canEdit, loading, initialContent, postStatus } = useLoad({user, interview:true});
+
+  //create new post hook
+  const { createPost } = useCreate();
+
+  /**
+   * updatePost
+   * when editor onUpdate is triggered,
+   * save the content to local storage
+   * @param {*} param0
+   */
+  const updatePost = ({ editor, json }) => {
+    // send the content to an API here (if new post only)
+    localStorage.setItem("wipInterview", JSON.stringify(json));
+  };
+
+  /**
+   * savePost
+   * when save button is clicked
+   * save the post to the backend
+   *
+   * for new post, create a new post and redirect to the new post
+   * @param {*} param0
+   * @returns
+   */
+  const savePost = async ({ editor, forReview }) => {
+    try {
+      const { id } = router.query;
+
+      const postInfo = await createPost({ user, editor, forReview, relatedPost:id });
+      //set the new slug
+      localStorage.removeItem("wipInterview");
+      
+
+      router.push(`/toolbox/post/${id}/interview/${postInfo?.id}`);
+    } catch (e) {
+      return false;
+    }
+  };
+
+  return (
+    <>
+      <EditorNav postStatus={postStatus} />
+
+      <div className="h-full w-full" id="editor-container">
+        <div className="w-full h-full mx-auto  relative">
+          {/* {!user && <Fallback />} */}
+
+          {/* only load editor if initialContent is not null */}
+          {(user && !user?.isLoggedIn) || initialContent == null ? (
+            // <Layout>
+            <div className="my-auto h-screen flex flex-col justify-center text-center">
+              <div className="mx-auto opacity-50">
+                <Spinner />
+              </div>
+            </div>
+          ) : (
+            // </Layout>
+            user?.isLoggedIn && (
+              <>
+                <div className="my-4">
+                  <Editor
+                    canEdit={canEdit}
+                    initialContent={initialContent}
+                    postStatus={postStatus}
+                    //functions
+                    createPost={createPost}
+                    savePost={savePost}
+                    updatePost={updatePost}
+                  />
+                </div>
+              </>
+            )
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/pages/write.js b/pages/write.js
index 676450cb..4474e8c9 100644
--- a/pages/write.js
+++ b/pages/write.js
@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 // import Layout from "@/components/layout-editor";
 
-import Fallback from "@/components/atom/Fallback/Fallback";
+// import Fallback from "@/components/atom/Fallback/Fallback";
 import useUser from "@/lib/iron-session/useUser";
 import { useEffect } from "react";
 import { addTwitterScript } from "@/components/Editor/editorHooks/libs/addTwitterScript";
@@ -43,7 +43,7 @@ export default function Write() {
 
   //useLoad hook
   //initialContent is null until loaded - so is 'false' when it's a new post
-  const { canEdit, loading, initialContent, postStatus } = useLoad(user);
+  const { canEdit, loading, initialContent, postStatus } = useLoad({user});
 
   //create new post hook
   const { createPost } = useCreate();