Skip to content

Commit

Permalink
post dash
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Jun 5, 2024
1 parent cc692ef commit 756e1fd
Show file tree
Hide file tree
Showing 11 changed files with 308 additions and 130 deletions.
2 changes: 1 addition & 1 deletion components/Dashboard/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Dashboard = ({ postStatus, postType, currentTab }) => {
return (
<>
<div>
<div className="grid grid-cols-12 gap-4 md:gap-6">
<div className="grid grid-cols-12 gap-4">
{loading ? [1, 2, 3, 4, 5, 6].map(i => <Skeleton key={i} />) : null}

{!loading &&
Expand Down
253 changes: 154 additions & 99 deletions components/Dashboard/PostCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,131 +17,186 @@
*/
import format from "date-fns/format";
import Link from "next/link";
import Button from "@/components/Primitives/Button";
import toast from "react-hot-toast";
import DeletePostButton from "@/components/modal/deletePostModal";
import { ArrowSquareOut, ChartBar, Gift, NotePencil } from "@/components/icons";
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuArrow,
RightSlot,
IconButton,
} from "@/components/Locale/LocaleSwitcher";
import { DotsThree } from "@/components/icons";

var axios = require("axios");


const PostCard = ({ post, refetch, user }) => {
const deletePost = async id => {
if (id) {
let currentPostData = {
method: "delete",
url: `${process.env.NEXT_PUBLIC_API_URL}/api/posts/${id}`,
headers: {
Authorization: `Bearer ${user?.jwt}`,
},
};

const deletePost = async (id) => {
if (id) {
let currentPostData = {
method: "delete",
url: `${process.env.NEXT_PUBLIC_API_URL}/api/posts/${id}`,
headers: {
Authorization: `Bearer ${user?.jwt}`,
},
};

try {
const resp = await axios(currentPostData);
// console.log("HELLO", resp);
if (resp.status === 200) {
toast.success("Your post has been deleted!", {
duration: 5000,
});
refetch();
}
} catch (error) {
console.log(error);
toast.success("Oops, something went wrong!", {
try {
const resp = await axios(currentPostData);
// console.log("HELLO", resp);
if (resp.status === 200) {
toast.success("Your post has been deleted!", {
duration: 5000,
});
refetch();
}
} else {
toast.success("Could not find that post!", {
} catch (error) {
console.log(error);
toast.success("Oops, something went wrong!", {
duration: 5000,
});
}
};

return (
<div className="flex flex-row justify-between p-4 md:p-6 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">
{(post.status!=='publish' && post.status!=='draft') &&
<div>
<span
className={`text-[10px] uppercase w-auto px-4 py-1 ${
post.status === "draft"
? "bg-yellow-500"
: post.status === "pending"
? "bg-orange-500"
: "bg-green-500"
} text-white rounded-[20px] my-2`}
>
{post.status}
</span>
</div>}
<div className="">
<Link href={post.type=='article'?`/p/${post.id}`:`/toolbox/post/${post.id}`}>
<h3 className="text-xl mb-2 font-semibold max-w-2xl ">
{post.title}
</h3>
</Link>
<div className="flex">
{post.type?<p className="text-sm capitalize text-gray-500">
{post.type}
</p>:''}
<div className="mx-2 my-auto text-sm text-gray-500">{` · `}</div>
<p className="text-sm text-gray-500">
} else {
toast.success("Could not find that post!", {
duration: 5000,
});
}
};

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={
post.type == "article"
? `/p/${post.id}`
: `/toolbox/post/${post.id}`
}
>
<h3 className="text-xl font-semibold max-w-2xl ">{post.title}</h3>
<p className="text-base text-gray-600 mb-3 max-w-[38rem] line-clamp-2 overflow-ellipses">
{post.excerpt}
</p>
<div className="flex gap-1.5">
<p className="text-sm my-auto text-gray-500">
{format(new Date(post.date), "LLLL d, yyyy")}
</p>
<div className="my-auto text-sm text-gray-500">{` · `}</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>
) : (
""
)}

{post.status !== "publish" && post.status !== "draft" && (
<>
<div className="my-auto text-sm text-gray-500">{` · `}</div>
<div
className={`text-[11px] uppercase font-semibold my-auto w-auto px-3 py-1 ${
post.status === "draft"
? "bg-yellow-100 text-yellow-800"
: post.status === "pending"
? "bg-orange-100 text-orange-800"
: "bg-green-100 text-green-800"
} rounded-full`}
>
{post.status}
</div>
</>
)}
</div>
</div>
</Link>
</div>

{/* {(post.status === "draft" || post.status === "pending") && ( */}
<div className="flex flex-row gap-1 my-auto">
<div>
</div>

{/* {(post.status === "draft" || post.status === "pending") && ( */}
<div className="flex flex-row gap-1 my-auto">
{/* <div>
<Link href={post.type=='article'?`/p/${post.id}`:`/toolbox/post/${post.id}`}>
<button className="text-sm bg-white underline text-black p-3 rounded-full hover:bg-gray-100">
<NotePencil size={18}/>
</button>
</Link>
</div> */}

{/* {post.status === "publish" && (
<div>
<a
target={"_blank"}
href={
post.type == "article"
? `/post/${post.slug}`
: `/toolbox/${post.slug}`
}
>
<button className="text-lg bg-white underline text-black p-3 rounded-full hover:bg-gray-100 ">
<ArrowSquareOut size={18} />
</button>
</a>
</div>

{post.status === "publish" && (
<div>
<a target={"_blank"} href={post.type=='article'?`/post/${post.slug}`:`/toolbox/${post.slug}`}>
<button className="text-lg bg-white underline text-black p-3 rounded-full hover:bg-gray-100 ">
<ArrowSquareOut size={18}/>
</button>
</a>
</div>
)}

{(post.status === "publish" && post.type=='article') && (
<div>
<Link href={`/dashboard/stats/${post.slug}`}>
<button className="text-lg bg-white underline text-black p-3 rounded-full hover:bg-gray-100 ">
<ChartBar size={18}/>
</button>
</Link>
</div>
)}
{post.type=='tool'? (
<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 ">
<Gift size={18}/>
</button>
</Link>
</div>
):''}

)} */}

{post.status === "publish" && post.type == "article" && (
<div>
<DeletePostButton
onClick={() => {
deletePost(post.id);
}}
/>
<Link href={`/dashboard/stats/${post.slug}`}>
<button className="text-lg bg-white underline text-black p-3 rounded-full hover:bg-gray-100 ">
<ChartBar size={18} />
</button>
</Link>
</div>
)}
{post.type == "tool" ? (
<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 ">
<Gift size={18} />
</button>
</Link>
</div>
) : (
""
)}

<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);
}}
/>
</DropdownMenuItem>

<DropdownMenuArrow offset={12} />
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
);
};
</div>
);
};

export default PostCard
export default PostCard;
2 changes: 1 addition & 1 deletion components/Editor/Menus/MenuButtons/FontFormatDropdown/FontFormatDropdownRadix.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const DropdownMenuArrow = StyledArrow;
// Your app...
const Box = styled('div', {});

const IconButton = styled('button', {
export const IconButton = styled('button', {
all: 'unset',
fontFamily: 'inherit',
borderRadius: '6px',
Expand Down
2 changes: 1 addition & 1 deletion components/Locale/LocaleSwitcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ const RightSlot = styled("div", {
"[data-disabled] &": { color: mauve.mauve8 },
});

const IconButton = styled("button", {
export const IconButton = styled("button", {
all: "unset",
fontFamily: "inherit",
borderRadius: "100%",
Expand Down
2 changes: 1 addition & 1 deletion components/meta.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default function Meta({ seo, articleJsonLd, productJsonLd }) {
{typeof window &&<script defer async="async" src="https://static.codepen.io/assets/embed/ei.js"></script>}
{typeof window &&<script defer async="async" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>}

{typeof window && <script dangerouslySetInnerHTML={{__html:`
{typeof window && <script id="support-script"async="async" defer dangerouslySetInnerHTML={{__html:`
(function(d,t) {
var BASE_URL="https://chatwoot-3n2v4-u6349.vm.elestio.app";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
Expand Down
8 changes: 5 additions & 3 deletions components/modal/deletePostModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import { Trash } from "@/components/icons";
const DeletePostButton = ({ onClick }) => (
<Dialog>
<DialogTrigger asChild>
<button className="text-sm bg-white underline text-black p-3 rounded-full hover:bg-gray-100">
<Trash size={18}/>
</button>
<div className="text-sm w-full text-left group-hover:text-white">
{/* <button className="text-sm bg-white text-black p-3 rounded-full hover:bg-gray-100"> */}
{/* <Trash size={18}/> */}
Delete
</div>
</DialogTrigger>
<DialogContent>
<DialogTitle>Delete Post</DialogTitle>
Expand Down
Loading

0 comments on commit 756e1fd

Please sign in to comment.