tagged posts on dashboard

Prototypr · Jun 5, 2024 · a6d0b61 · a6d0b61
1 parent f0fadbd
commit a6d0b61
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 21 deletions.
diff --git a/app/dashboard/published/page.js b/app/dashboard/published/page.js
@@ -48,7 +48,7 @@ export default async function AccountPage() {
           <Navigation activeTab={2} />
           {/* set post type to empty so it gets tools too */}
           <Dashboard
-            currentTab="draft"
+            currentTab="publish"
             postStatus={["publish"]}
             postType=""
           />

diff --git a/app/dashboard/tagged/page.js b/app/dashboard/tagged/page.js
@@ -0,0 +1,62 @@
+// import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+// import { cookies } from 'next/headers'
+
+import { fetchUser } from "../../actions";
+import Layout from "@/components/new-index/layoutForApp";
+// import { redirect } from 'next/navigation'
+// import AccountPageWrapper from './pageWrapper'
+import { HOME_OG_IMAGE_URL } from "@/lib/constants";
+import Dashboard from "@/components/Dashboard/Dashboard";
+import Navigation from "@/components/Dashboard/navigation";
+
+export const metadata = {
+  title: "Dashboard | Prototypr",
+  description: "Edit your posts, drafts, and tools on Prototypr",
+  image: "",
+  canonical: "https://prototypr.io",
+  url: "https://prototypr.io",
+  openGraph: {
+    url: "https://prototypr.io",
+    title: "Prototypr: Design, UX, Front-end development, and beyond.",
+    description:
+      "'Discover UX prototyping tools for designing mobile and desktop experiences. From UX design to front end development - find the right tool for the job.",
+    images: [{ url: HOME_OG_IMAGE_URL }],
+    site_name: "Prototypr",
+  },
+  twitter: {
+    handle: "@prototypr",
+    site: "@prototypr",
+    cardType: "summary_large_image",
+  },
+};
+
+export default async function AccountPage() {
+  const userData = await fetchUser();
+
+
+  return (
+    <Layout sessionUser={userData?.user?.id} background={"#fbfcff"}>
+      <div className="flex flex-col overflow-y-auto pt-[96px] mx-auto w-full">
+        {/* {userData?.user?.id} */}
+        <div
+          className="pb-20 mx-auto px-2 sm:px-6 lg:px-8 w-full"
+          style={{ maxWidth: 1200 }}
+        >
+          <div className="flex flex-row justify-between items-baseline mt-3">
+            <h1 className="my-3 text-3xl font-semibold">Your posts</h1>
+          </div>
+          <Navigation activeTab={3} />
+          {/* set post type to empty so it gets tools too */}
+          <Dashboard
+            currentTab="tagged"
+            postStatus={["publish"]}
+            postType=""
+            creatorArticles={true}
+            edit={false}
+          />
+        </div>
+        {/* <AccountPageWrapper userData={userData}/> */}
+      </div>
+    </Layout>
+  );
+}
diff --git a/components/Dashboard/Dashboard.jsx b/components/Dashboard/Dashboard.jsx
@@ -8,7 +8,7 @@ import PostCard from "./PostCard";
 import NewPagination from "../pagination";
 import Skeleton from "./Skeleton";
 
-const Dashboard = ({ postStatus, postType, currentTab }) => {
+const Dashboard = ({ postStatus, postType, currentTab, creatorArticles, edit }) => {
   const { user } = useUser({
     redirectIfFound: false,
     redirectTo: "/",
@@ -17,7 +17,8 @@ const Dashboard = ({ postStatus, postType, currentTab }) => {
   const { posts, loading, refetch, total, pageSize } = useFetchPosts(
     user,
     postStatus,
-    postType
+    postType,
+    creatorArticles
   );
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -38,12 +39,12 @@ const Dashboard = ({ postStatus, postType, currentTab }) => {
 
           {!loading &&
             posts?.map(post => (
-              <PostCard refetch={refetch} user={user} post={post} />
+              <PostCard refetch={refetch} user={user} post={post} edit={edit} />
             ))}
 
         </div>
         {!loading && !posts?.length && (
-          <EmptyState currentTab={currentTab} draft={false} />
+          <EmptyState edit={edit} currentTab={currentTab} draft={false} />
         )}
         <NewPagination
           total={total}

diff --git a/components/Dashboard/EmptyState.jsx b/components/Dashboard/EmptyState.jsx
@@ -1,7 +1,7 @@
 import NewPostDialog from "../Navbar/parts/NewPostDialog";
-import Button from "../Primitives/Button";
+// import Button from "../Primitives/Button";
 
-const EmptyState = ({currentTab }) => {
+const EmptyState = ({currentTab, edit }) => {
     return (
       <div className="mt-6 mx-auto rounded-lg border border-gray-300">
         <div className="pt-20 pb-20 px-6">
@@ -12,13 +12,14 @@ const EmptyState = ({currentTab }) => {
             style={{ opacity: "0.92" }}
           />
           <h1 className="text-lg text-gray-700 pt-0 mt-4 mb-8 text-center">
-            {currentTab=='draft'
+            {edit===false? `You've not been mentioned on any posts yet.`:
+            currentTab=='draft'
               ? `No drafts in progress.`
               : `You've not published anything.`}
           </h1>
-            <div class="flex justify-center w-full my-3">
+           {edit!==false? <div class="flex justify-center w-full my-3">
               <NewPostDialog button={true}/>
-            </div>
+            </div>:null}
         </div>
       </div>
     );

diff --git a/components/Dashboard/PostCard.jsx b/components/Dashboard/PostCard.jsx
@@ -34,7 +34,7 @@ import { DotsThree } from "@/components/icons";
 
 var axios = require("axios");
 
-const PostCard = ({ post, refetch, user }) => {
+const PostCard = ({ post, refetch, user, edit }) => {
   const deletePost = async id => {
     if (id) {
       let currentPostData = {
@@ -73,6 +73,8 @@ const PostCard = ({ post, refetch, user }) => {
         <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}`
@@ -152,7 +154,7 @@ const PostCard = ({ post, refetch, user }) => {
             </Link>
           </div>
         )}
-        {post.type == "tool" ? (
+        {(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 ">
@@ -164,7 +166,7 @@ const PostCard = ({ post, refetch, user }) => {
           ""
         )}
 
-        <div>
+       {edit!==false? <div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <IconButton
@@ -193,7 +195,7 @@ const PostCard = ({ post, refetch, user }) => {
               <DropdownMenuArrow offset={12} />
             </DropdownMenuContent>
           </DropdownMenu>
-        </div>
+        </div>:null}
       </div>
     </div>
   );

diff --git a/components/Dashboard/navigation.jsx b/components/Dashboard/navigation.jsx
@@ -17,7 +17,7 @@ const Navigation = ({activeTab}) =>{
         </div>
         </Link>
         <Link href="/dashboard/published">
-        <div className={"text-gray-700 mr-2"}>
+        <div className={"text-gray-700 mr-4"}>
           <div className={`${activeTab==2?"bg-gray-800 font-semibold text-white border-gray-800":'hover:bg-gray-100 border border-gray-400'} border border-1 flex p-3 rounded-full text-sm cursor-pointer w-full`}>
             <div className="flex">
             {/* <svg className="w-4 h-4 mr-2 my-auto"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2V4H5v16h14zM8 9h8v2H8V9zm0 4h8v2H8v-2z" fill="currentColor"/></svg> */}
@@ -26,6 +26,16 @@ const Navigation = ({activeTab}) =>{
           </div>
         </div>
         </Link>
+        <Link href="/dashboard/tagged">
+        <div className={"text-gray-700 mr-2"}>
+          <div className={`${activeTab==3?"bg-gray-800 font-semibold text-white border-gray-800":'hover:bg-gray-100 border border-gray-400'} border border-1 flex p-3 rounded-full text-sm cursor-pointer w-full`}>
+            <div className="flex">
+            {/* <svg className="w-4 h-4 mr-2 my-auto"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2V4H5v16h14zM8 9h8v2H8V9zm0 4h8v2H8v-2z" fill="currentColor"/></svg> */}
+              <div className="my-auto text-sm">Tagged</div>
+            </div>
+          </div>
+        </div>
+        </Link>
       </div>
     )
 }

diff --git a/components/Dashboard/useFetchPosts.js b/components/Dashboard/useFetchPosts.js
@@ -1,10 +1,10 @@
 "use client"
 import { useEffect, useState } from "react";
-import { getUserArticles } from "@/lib/api";
+import { getCreatorArticles, getUserArticles } from "@/lib/api";
 
 const PAGE_SIZE = 9
 
-const useFetchPosts = (user, postStatus, postType) => {
+const useFetchPosts = (user, postStatus, postType, creatorArticles) => {
 
     const [total, setTotal] = useState(null);
     const [posts, setPosts] = useState(null);
@@ -25,10 +25,17 @@ const useFetchPosts = (user, postStatus, postType) => {
         if(!user){
           return false
         }
-        const data = await getUserArticles({user, postStatus:postStatus, pageSize:PAGE_SIZE, offset:pageOffset, type:postType});
-        const postsFromUser = data.userPosts?.posts
-        setPosts(postsFromUser)
-        setTotal(data.userPosts?.count)
+        if(creatorArticles){
+          const data = await getCreatorArticles({user, postStatus:postStatus, pageSize:PAGE_SIZE, offset:pageOffset, type:postType});
+          const postsFromUser = data.creatorPosts?.posts
+          setPosts(postsFromUser)
+          setTotal(data.creatorPosts?.count)
+        }else{
+          const data = await getUserArticles({user, postStatus:postStatus, pageSize:PAGE_SIZE, offset:pageOffset, type:postType});
+          const postsFromUser = data.userPosts?.posts
+          setPosts(postsFromUser)
+          setTotal(data.userPosts?.count)
+        }
 
         setLoading(false)
       };

diff --git a/lib/api.js b/lib/api.js
@@ -46,6 +46,7 @@ import sponsoredPostByPaymentIdQuery from "./queries/sponsoredPostByPaymentIdQue
 import allNewsQuery from "./queries/allNewsQuery";
 import allProductsQuery from "./queries/allProductsQuery";
 import { addBase64s } from "./utils/blurHashToDataURL";
+import creatorArticlesQuery from "./queries/creatorArticlesQuery";
 
 /**
  * main fetch
@@ -675,6 +676,15 @@ export async function getUserArticles({ user, postStatus, pageSize, offset, type
   });
   return data;
 }
+export async function getCreatorArticles({ user, postStatus, pageSize, offset, type }) {
+  const data = await fetchAPIAuthenticated(user, creatorArticlesQuery, {
+    status: postStatus,
+    type:type?type:'',
+    pageSize,
+    offset,
+  });
+  return data;
+}
 export async function getAdminArticles({
   user,
   postStatus,

diff --git a/lib/queries/creatorArticlesQuery.js b/lib/queries/creatorArticlesQuery.js
@@ -0,0 +1,16 @@
+export default `
+query CreatorArticles($status:[String]!, $pageSize: Int, $offset: Int) {
+    creatorPosts(status: $status, pageSize:$pageSize, offset:$offset){
+    posts{
+      id
+      slug
+      type
+      title
+      date
+      status
+      excerpt
+    }
+    count
+  }
+}
+`