Skip to content

Commit

Permalink
fix: bug fix and delte button added in post view section
Browse files Browse the repository at this point in the history 
bugs fixed and added create post button
  • Loading branch information
@jasurobo
jasurobo committed Nov 30, 2021
1 parent 83ebf66 commit 0dc4af3
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 100 deletions.
88 changes: 57 additions & 31 deletions component/myblogs/MyBlogs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
import React, { useState, useEffect } from "react";
import moment from "moment";
import MyBlogsstyles from "../../styles/MyBlogs.module.css";
import Link from "next/link";
import Cookies from "universal-cookie";
import ModalConfirm from "../../component/popup/ModalConfirm";
import notify from "../../lib/notify";
import PostService from "../../services/PostService";
import Image from "next/image";

export default function MyBlogs({ posts }) {
console.log(posts, 'postss');
export default function MyBlogs({ posts, fetchPosts }) {
const cookies = new Cookies();
const userCookie = cookies.get("userNullcast");

async function deletePost(postId) {
try {
const { message } = await PostService.deletePostById(
userCookie,
postId
);
notify(message);
fetchPosts();
} catch (err) {
notify(err?.response?.data?.message ?? err?.message, 'error');
}
}
// console.log('deletePost' ,postId);

return (
<div
className={`w-full mt-4 bg-white py-5 rounded border shadow-sm overflow-y-auto height_list`}
Expand Down Expand Up @@ -37,45 +58,50 @@ export default function MyBlogs({ posts }) {
</div>
<div className="flex items-center">
<div
className={`flex items-center w-28 justify-center rounded-full h-8 mr-3 ${
item.status === "approved" && MyBlogsstyles.successBg
} ${item.status === "pending" && MyBlogsstyles.warningBg} ${
item.status === "drafted" && MyBlogsstyles.draftedBg
} ${
item.status === "published" && MyBlogsstyles.publishedBg
} ${item.status === "rejected" && MyBlogsstyles.dangerBg}`}
className={`flex items-center w-32 justify-center rounded-full h-8 mr-3 ${item.status === "approved" && MyBlogsstyles.successBg
} ${item.status === "pending" && MyBlogsstyles.warningBg} ${item.status === "drafted" && MyBlogsstyles.draftedBg
} ${item.status === "published" && MyBlogsstyles.publishedBg
} ${item.status === "rejected" && MyBlogsstyles.dangerBg}`}
>
<div
className={`w-2 h-2 mr-2 rounded-full ${
item.status === "approved" && MyBlogsstyles.successDot
} ${
item.status === "pending" && MyBlogsstyles.warningDot
} ${
item.status === "drafted" && MyBlogsstyles.draftedDot
} ${
item.status === "published" &&
className={`w-2 h-2 mr-2 rounded-full ${item.status === "approved" && MyBlogsstyles.successDot
} ${item.status === "pending" && MyBlogsstyles.warningDot
} ${item.status === "drafted" && MyBlogsstyles.draftedDot
} ${item.status === "published" &&
MyBlogsstyles.publishedDot
} ${
item.status === "rejected" && MyBlogsstyles.dangerDot
}`}
} ${item.status === "rejected" && MyBlogsstyles.dangerDot
}`}
></div>
<span
className={`capitalize ${
item.status === "approved" && MyBlogsstyles.successText
} ${
item.status === "pending" && MyBlogsstyles.warningText
} ${
item.status === "drafted" && MyBlogsstyles.draftedText
} ${
item.status === "published" &&
className={`capitalize ${item.status === "approved" && MyBlogsstyles.successText
} ${item.status === "pending" && MyBlogsstyles.warningText
} ${item.status === "drafted" && MyBlogsstyles.draftedText
} ${item.status === "published" &&
MyBlogsstyles.publishedText
} ${
item.status === "rejected" && MyBlogsstyles.dangerText
}`}
} ${item.status === "rejected" && MyBlogsstyles.dangerText
}`}
>
{item.status}
</span>
</div>
<div
className="w-28 flex justify-center">
<ModalConfirm
trigger={
<div
className={`flex items-center px-4 justify-center rounded-full h-8 cursor-pointer hover:opacity-50 duration-500 ${MyBlogsstyles.dangerText} ${MyBlogsstyles.dangerBg}`}
>
Delete
</div>
}
handleSubmit={() => deletePost(item.post_id)}
purpose={"delete"}
buttonColor={"red"}
heading={"Are you sure"}
text="Are you sure you want to delete this post?"
secondaryText="This cannot be undone"
/>
</div>
{/* EDIT button goes to posts/write route*/}
<Link
href={{
Expand Down
94 changes: 30 additions & 64 deletions component/myblogs/WriteNav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default function WriteNav({
const [currentPost, setCurrentPost] = useState({
id: 0,
banner_image: "",
// canonicalUrl: "",
tags: [],
tagsId: [],
shortDescription: "",
Expand All @@ -44,8 +43,6 @@ export default function WriteNav({
slug: ""
});
useEffect(() => {
console.log("writenavprop", { post });

setCurrentPost(prevValue => ({ ...prevValue, ...post }));
// userState.setTags();
}, [post]);
Expand All @@ -71,7 +68,7 @@ export default function WriteNav({
/**
* gets tags from db and sets the tags
* options in label and value format
* @author akhilalekha
* @author jasir
*/
async function getSettingsTags() {
try {
Expand All @@ -97,7 +94,7 @@ export default function WriteNav({
/**
* posts tags to db and sets state for user tags
* @param e react select handle change event
* @author akhilalekha
* @author jasir
*/
const handleTags = async (e) => {
// console.log("handle tags", e);
Expand Down Expand Up @@ -150,57 +147,37 @@ export default function WriteNav({
/**
* gets form data and passes to parent getsettings function
* @param e form submit event
* @author akhilalekha
* @author jasir
*/
const formSubmit = async (e) => {
//get form settings data - imageUpload canonicalUrl tags shortDescription metaTitle metaDescription
e.preventDefault();
// console.log(e.target);

const postUrl = e.target.slug.value || "";
// console.log({ postUrl });
// console.log(`${baseUrl}/${postUrl}`);
// let tags = Array.from(e.target.tags) || "";
// // console.log("tags length: ", tags.length);
// if (tags.length > 0) {
// tags = tags.map((tag) => tag.value);
// // console.log("multiple tags", tags);
// } else {
// tags = e.target.tags.value;
// // console.log("single tag", tags);
// }

const shortDes = e.target.shortDescription.value || "";
const metaTitle = e.target.metaTitle.value || "";
const metaDes = e.target.metaDescription.value || "";
const settingsData = {
// tags: tagsId,
// url: `p/${currentPost._id}`,
banner_image: currentPost.banner_image ? currentPost.banner_image : null,
// shortDescription: shortDes,
og_description: shortDes,
meta_title: metaTitle,
// metaDescription: metaDes,
meta_description: metaDes,
slug: postUrl,
mobiledoc: currentPost.mobiledoc,
};
if (settingsData.slug === ""){
if (settingsData.slug === "") {
delete settingsData.slug;
getSettings(settingsData);
}
else {
getSettings(settingsData);
}
// console.log(
// Object.values(settingsData).some((k) => k !== "" || k !== null)
// );
// send prop
};

/**
* gets form data and passes to parent getsettings function
* @param e handle change event for other fields
* except tags and image
* @author akhilalekha
* @author jasir
*/

const handleChange = (e) => {
Expand All @@ -219,16 +196,9 @@ export default function WriteNav({
/**
* gets img data and uploads to s3 bucket
* @param e handle change event for file upload field
* @author akhilalekha
* @author jasir
*/
const handleImageUpload = async (image) => {
// console.log(e.target.files[0]);
// const imageUrl = URL.createObjectURL(e.target.files[0]);
// console.log(imageUrl);
// setImageSrc(imageUrl);

// console.log(e.target.files[0]);
// const imageFile = e.target.files[0] || "";
const imageFile = image;
const imageData = {
stage: "dev",
Expand All @@ -240,7 +210,6 @@ export default function WriteNav({
setLoading(true);
try {
const s3ImageUrl = await SharedService.uploadImage(imageFile, imageData);
// console.log(s3ImageUrl);

setCurrentPost((prevValue) => {
return {
Expand All @@ -258,7 +227,7 @@ export default function WriteNav({
/**
* resets banner image state when user clicks on delete
* @param e handle change event for img delete button
* @author akhilalekha
* @author jasir
*/
const handleImageDelete = async (e) => {
setCurrentPost((prevValue) => {
Expand All @@ -273,16 +242,15 @@ export default function WriteNav({

/**
* deletes post by id
* @author akhilalekha
* @author jasir
*/
async function deletePost() {
try {
const { msg, data } = await PostService.deletePostById(
const { message } = await PostService.deletePostById(
userCookie,
currentPost.id
);
// console.log(msg);
notify("Post deleted successfully");
notify(message);
router.push({
pathname: "/posts",
query: {
Expand All @@ -297,15 +265,13 @@ export default function WriteNav({
}

const handleBackOption = () => {
// console.log(previousUrl);
router.push(previousUrl);
};

const handlePublish = () => {
const res = submitForReview();
res.then((msg) => {
res.then((message) => {
handlePopup();
// console.log(msg);
});
};
const handlePopup = () => {
Expand Down Expand Up @@ -349,23 +315,23 @@ export default function WriteNav({
<span className="text-gray-500 ml-1">{"/ Edit"}</span>
</div>
<div className="items-center py-3 md:flex hidden">
<ModalConfirm
trigger={
<div
className="bg-green-710 hover:bg-white border border-green-710 text-white hover-green-pink-710 flex items-center text-sm font-semibold px-4 py-2 mr-3 rounded-sm cursor-pointer duration-700"
>
<p>Publish</p>
</div>
}
handleSubmit={handlePublish}
purpose={"publish"}
buttonColor={"green"}
heading={"Are you sure"}
text=" you want to publish this post?"
secondaryText="This cannot be undone"
/>
<ModalConfirm
trigger={
<div

className="bg-green-710 hover:bg-white border border-green-710 text-white hover-green-pink-710 flex items-center text-sm font-semibold px-4 py-2 mr-3 rounded-sm cursor-pointer duration-700"
>
<p>Publish</p>
</div>
}
handleSubmit={handlePublish}
purpose={"publish"}
buttonColor={"green"}
heading={"Are you sure"}
text=" you want to publish this post?"
secondaryText="This cannot be undone"
/>

<div
onClick={saveToDraft}
className="bg-black hover:bg-white border border-black text-white hover:text-black flex items-center text-sm font-semibold px-4 py-2 mr-3 rounded-sm cursor-pointer duration-700"
Expand Down
2 changes: 1 addition & 1 deletion pages/posts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function Posts() {
{loaded ? (
postData.posts.length > 0 ? (
<div>
<MyBlogs posts={postData.posts} currentPage={postData.page} />
<MyBlogs posts={postData.posts} currentPage={postData.page} fetchPosts={() => getPosts()} />
</div>
) : !tagFilter && !statusFilter ? (
<div className="text-gray-700 text-center font-semibold mt-8">
Expand Down
10 changes: 6 additions & 4 deletions pages/posts/write.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,6 @@ export default function Write({
iframeRef.current.contentWindow.postMessage({ msg: "savePost" }, TARGET);
setTimeout(() => {
// wait for the response post message to get the post from the state
console.log(postElement.current.scratch );
// console.log(postElement.current.scratch);
const newMobiledoc = postElement?.current.scratch;
const title = postElement?.current.titleScratch || "[Untitled]";
Expand All @@ -192,18 +191,21 @@ export default function Write({

async function submitForReview() {
iframeRef.current.contentWindow.postMessage({ msg: "savePost" }, TARGET);
setTimeout(() => {
//change status to "pending" if submitted for review
// console.log(postId);
const newMobiledoc = postElement?.current.scratch;
const title = postElement?.current.titleScratch || "[Untitled]";
try {
const statusUpdate = {
status: "pending",
// mobiledoc: postElement.current.scratch,
mobiledoc: post.mobiledoc,
title: title,
mobiledoc: newMobiledoc,
};
updatePostById(postId,statusUpdate);
} catch (err) {
notify(err?.response?.data?.message ?? err?.message, 'error');
}
}, 500);
}

const getSettings = async (settingsData) => {
Expand Down

0 comments on commit 0dc4af3

Please sign in to comment.