From d264375c20ade7d86f84d6b5f4fddf185fe1adcd Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Fri, 7 Jun 2024 16:25:30 -0400
Subject: [PATCH] interview draft

---
 components/Dashboard/PostCard.jsx             | 96 ++++++++++++-------
 components/Editor/Editor.js                   |  2 +-
 .../libs/templates/interviewTemplate.js       |  2 +-
 .../Editor/editorHooks/newPost/useLoad.js     |  2 +-
 components/toolbox/AuthorCard.js              |  2 +-
 lib/queries/creatorArticlesQuery.js           |  1 +
 lib/queries/getUserRelatedPostsFromPostId.js  |  8 +-
 lib/queries/userArticlesQuery.js              |  1 +
 pages/toolbox/[slug].js                       |  1 -
 pages/toolbox/post/[id]/interview/index.js    | 55 ++++++++++-
 10 files changed, 119 insertions(+), 51 deletions(-)

diff --git a/components/Dashboard/PostCard.jsx b/components/Dashboard/PostCard.jsx
index 603dad39..41ce07e3 100644
--- a/components/Dashboard/PostCard.jsx
+++ b/components/Dashboard/PostCard.jsx
@@ -67,17 +67,22 @@ const PostCard = ({ post, refetch, user, edit }) => {
     }
   };
 
+
   return (
     <div className="flex flex-row justify-between p-4 h-full rounded-lg border shadow-sm border-black/5 hover:border-opacity-10 cursor-default bg-white hover:transition duration-300 ease-in-out col-span-12">
       <div className="flex flex-col grid gap-2 w-full flex-shrink">
         <div className="">
           <Link
             href={
-              (edit===false && post.type=='article')? `/post/${post.slug}`:
-              (edit===false && post.type=='tool')? `/toolbox/${post.slug}`:
-              post.type == "article"
-                ? `/p/${post.id}`
-                : `/toolbox/post/${post.id}`
+              edit === false && post.type == "article"
+                ? `/post/${post.slug}`
+                : edit === false && post.type == "tool"
+                  ? `/toolbox/${post.slug}`
+                  : post.type == "article" && post.tools?.length
+                    ? `/toolbox/post/${post.tools[0].id}/interview/${post.id}`
+                    : post.type == "article"
+                      ? `/p/${post.id}`
+                      : `/toolbox/post/${post.id}`
             }
           >
             <h3 className="text-xl font-semibold max-w-2xl ">{post.title}</h3>
@@ -89,7 +94,11 @@ const PostCard = ({ post, refetch, user, edit }) => {
                 {format(new Date(post.date), "LLLL d, yyyy")}
               </p>
               <div className="my-auto text-sm text-gray-500">{` · `}</div>
-              {post.type ? (
+              {post.type == "article" && post.tools?.length ? (
+                <div className="text-[11px] font-semibold my-auto bg-yellow-100 px-3 py-1 uppercase  rounded-full text-yellow-900">
+                  Interview
+                </div>
+              ) : post.type ? (
                 <div className="text-[11px] font-semibold my-auto bg-gray-100 px-3 py-1 uppercase  rounded-full text-gray-600">
                   {post.type}
                 </div>
@@ -97,6 +106,22 @@ const PostCard = ({ post, refetch, user, edit }) => {
                 ""
               )}
 
+              {post.type == "article" && post.tools?.length ? (
+                <>
+                <div className="my-auto text-sm text-gray-500">{` · `}</div>
+                <div className="flex-none my-auto">
+                  <Link target="_blank" href={`/toolbox/${post.tools[0].slug}`}>
+                    <img
+                      className="flex-none w-6 h-6 rounded-2xl my-auto"
+                      src={post.tools[0].logo?.url}
+                    />
+                  </Link>
+                </div>
+                </>
+              ) : (
+                ""
+              )}
+
               {post.status !== "publish" && post.status !== "draft" && (
                 <>
                   <div className="my-auto text-sm text-gray-500">{` · `}</div>
@@ -154,7 +179,7 @@ const PostCard = ({ post, refetch, user, edit }) => {
             </Link>
           </div>
         )}
-        {(post.type == "tool" && edit!==false) ? (
+        {post.type == "tool" && edit !== false ? (
           <div className="hidden md:block">
             <Link href={`/toolbox/post/${post.id}?step=3`}>
               <button className="text-lg bg-white underline text-black  p-3  rounded-full hover:bg-gray-100 ">
@@ -165,37 +190,38 @@ const PostCard = ({ post, refetch, user, edit }) => {
         ) : (
           ""
         )}
+        {edit !== false ? (
+          <div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <IconButton
+                  className="!text-gray-700"
+                  aria-label="Customise options"
+                >
+                  <DotsThree />
+                </IconButton>
+              </DropdownMenuTrigger>
 
-       {edit!==false? <div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <IconButton
-                className="!text-gray-700"
-                aria-label="Customise options"
-              >
-                <DotsThree />
-              </IconButton>
-            </DropdownMenuTrigger>
-
-            <DropdownMenuContent sideOffset={5}>
-              {/* <DropdownMenuSeparator /> */}
-              <DropdownMenuItem
-              className="group"
-                onSelect={(e) => {
-                 e.preventDefault()
-                }}
-              >
-                <DeletePostButton
-                  onClick={() => {
-                    deletePost(post.id);
+              <DropdownMenuContent sideOffset={5}>
+                {/* <DropdownMenuSeparator /> */}
+                <DropdownMenuItem
+                  className="group"
+                  onSelect={e => {
+                    e.preventDefault();
                   }}
-                />
-              </DropdownMenuItem>
+                >
+                  <DeletePostButton
+                    onClick={() => {
+                      deletePost(post.id);
+                    }}
+                  />
+                </DropdownMenuItem>
 
-              <DropdownMenuArrow offset={12} />
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>:null}
+                <DropdownMenuArrow offset={12} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ) : null}
       </div>
     </div>
   );
diff --git a/components/Editor/Editor.js b/components/Editor/Editor.js
index c797f457..d076c3e9 100644
--- a/components/Editor/Editor.js
+++ b/components/Editor/Editor.js
@@ -124,7 +124,7 @@ const Editor = ({
       // }),
       Placeholder.configure({
         showOnlyCurrent: false,
-        includeChildren: true,
+        includeChildren: false,
         placeholder: ({ node }) => {
           if (node.type.name === "heading") {
             return "Title";
diff --git a/components/Editor/editorHooks/libs/templates/interviewTemplate.js b/components/Editor/editorHooks/libs/templates/interviewTemplate.js
index c44a6e53..f62e8246 100644
--- a/components/Editor/editorHooks/libs/templates/interviewTemplate.js
+++ b/components/Editor/editorHooks/libs/templates/interviewTemplate.js
@@ -273,7 +273,7 @@ export const getInterViewTemplate = ({ productName }) => {
         content: [
           {
             type: "text",
-            text: "Q. Who is it for, and how are you discovering your first users?",
+            text: `Q. Who is ${productName} for, and how are you discovering your first users?`,
           },
         ],
       },
diff --git a/components/Editor/editorHooks/newPost/useLoad.js b/components/Editor/editorHooks/newPost/useLoad.js
index 9df7a11c..f85b054b 100644
--- a/components/Editor/editorHooks/newPost/useLoad.js
+++ b/components/Editor/editorHooks/newPost/useLoad.js
@@ -40,7 +40,7 @@ const useLoad = ({user, interview, productName}) => {
       //it's a new post
       setInitialContent(false)
       if(interview){
-        setInitialContent(getInterViewTemplate({productName:'Prototypr Publisher'}));
+        setInitialContent(getInterViewTemplate({productName:productName}));
       }
       setLoading(false);
     }
diff --git a/components/toolbox/AuthorCard.js b/components/toolbox/AuthorCard.js
index 3f3682b6..8f803b73 100644
--- a/components/toolbox/AuthorCard.js
+++ b/components/toolbox/AuthorCard.js
@@ -58,7 +58,7 @@ export default function AuthorCard({
             </div>
 
             <div className={`my-auto ${size=='small'?"mr-1":"w-3/5"}`}>
-              {size=='small'&& <h3 className="text-sm tracking-tight text-gray-500 ">Curated by</h3>}
+              {size=='small'&& <h3 className="text-sm tracking-tight text-gray-500 ">Posted by</h3>}
               <p
                 tabIndex={0}
                 className="text-base cursor-pointer leading-5 font-semibold text-gray-800"
diff --git a/lib/queries/creatorArticlesQuery.js b/lib/queries/creatorArticlesQuery.js
index a8fcb4b5..7276b420 100644
--- a/lib/queries/creatorArticlesQuery.js
+++ b/lib/queries/creatorArticlesQuery.js
@@ -9,6 +9,7 @@ query CreatorArticles($status:[String]!, $pageSize: Int, $offset: Int) {
       date
       status
       excerpt
+      tools
     }
     count
   }
diff --git a/lib/queries/getUserRelatedPostsFromPostId.js b/lib/queries/getUserRelatedPostsFromPostId.js
index 88f9352d..4187a084 100644
--- a/lib/queries/getUserRelatedPostsFromPostId.js
+++ b/lib/queries/getUserRelatedPostsFromPostId.js
@@ -3,12 +3,8 @@ query UserArticle($slug:ID!) {
   userPostId(id: $slug) {
     id
     slug
-    interviews{
-      slug
-    }
-    tools{
-      slug
-    }
+    interviews
+    tools
   }
 }
 `;
diff --git a/lib/queries/userArticlesQuery.js b/lib/queries/userArticlesQuery.js
index 4fdab1c0..db456fe8 100644
--- a/lib/queries/userArticlesQuery.js
+++ b/lib/queries/userArticlesQuery.js
@@ -9,6 +9,7 @@ query UserArticles($status:[String]!, $pageSize: Int, $offset: Int) {
       date
       status
       excerpt
+      tools
     }
     count
   }
diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
index 8c0f5ea8..92b0e960 100644
--- a/pages/toolbox/[slug].js
+++ b/pages/toolbox/[slug].js
@@ -33,7 +33,6 @@ import {
   getTool,
   // getAllToolsForHomeStatic,
   getPopularTopics,
-  getSlugFromArticleId,
   getUserRelatedPostsFromId,
 } from "@/lib/api";
 // import ToolCard from "@/components/v4/card/ToolCard";
diff --git a/pages/toolbox/post/[id]/interview/index.js b/pages/toolbox/post/[id]/interview/index.js
index 3d815c86..b6737f7e 100644
--- a/pages/toolbox/post/[id]/interview/index.js
+++ b/pages/toolbox/post/[id]/interview/index.js
@@ -13,6 +13,7 @@ import useCreate from "@/components/Editor/editorHooks/newPost/useCreate";
 
 import { useRouter } from "next/router";
 import EditorNav from "@/components/EditorNav";
+import { getToolById } from "@/lib/api";
 
 /**
  * Write
@@ -24,9 +25,8 @@ import EditorNav from "@/components/EditorNav";
  *
  * @returns
  */
-export default function InterviewEditor() {
+export default function InterviewEditor({tool}) {
   const router = useRouter();
-
   const { user } = useUser({
     // redirectTo: '/account',
     redirectTo: "/onboard",
@@ -42,7 +42,11 @@ export default function InterviewEditor() {
 
   //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});
+  const { canEdit, loading, initialContent, postStatus } = useLoad({
+    user,
+    interview: true,
+    productName:tool?.attributes?.title
+  });
 
   //create new post hook
   const { createPost } = useCreate();
@@ -71,10 +75,14 @@ export default function InterviewEditor() {
     try {
       const { id } = router.query;
 
-      const postInfo = await createPost({ user, editor, forReview, relatedPost:id });
+      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) {
@@ -82,6 +90,17 @@ export default function InterviewEditor() {
     }
   };
 
+
+  if(router.isFallback){
+    return (
+      <div className="my-auto h-screen flex flex-col justify-center text-center">
+        <div className="mx-auto opacity-50">
+          <Spinner />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <>
       <EditorNav postStatus={postStatus} />
@@ -121,3 +140,29 @@ export default function InterviewEditor() {
     </>
   );
 }
+
+export async function getStaticProps({ params, preview = null, locale }) {
+  let data;
+  try {
+    data = await getToolById(params.id, preview);
+  } catch (error) {
+    console.error('Failed to get tool:', error);
+    return {
+      notFound: true,
+    };
+  }
+
+  let tool = data?.posts?.data[0] || null;
+  return {
+    props: {
+      tool: tool || null,
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}
\ No newline at end of file