From 5097437f7b9b6f886fbc3bfcc46a394c1f2c5926 Mon Sep 17 00:00:00 2001 From: ashutosh Date: Fri, 30 Aug 2024 21:14:22 +0530 Subject: [PATCH] "Updated BlogLike, CreateBlog, EditBlog, Comments, and layout files with various changes to functionality, styling, and imports." --- app/src/Layout/Components/BlogLike.tsx | 5 ++++- app/src/Layout/Components/CreateBlog.tsx | 26 ++++++++++++++++-------- app/src/Layout/Components/EditBlog.tsx | 2 +- app/src/Layout/UI/Comments.tsx | 3 ++- app/src/app/CreateBlog/page.tsx | 2 +- app/src/app/layout.tsx | 2 +- app/src/assets/blog.css | 10 +++++++++ 7 files changed, 37 insertions(+), 13 deletions(-) diff --git a/app/src/Layout/Components/BlogLike.tsx b/app/src/Layout/Components/BlogLike.tsx index 03fdfd6..cdffe5b 100644 --- a/app/src/Layout/Components/BlogLike.tsx +++ b/app/src/Layout/Components/BlogLike.tsx @@ -5,6 +5,7 @@ import useDebounce from '@/lib/Hooks/useDebounce'; import { RootState, AppDispatch } from '@/lib/Redux/store'; import { BiSolidUpvote, BiUpvote } from 'react-icons/bi'; import { LikeBlog } from '@/lib/Redux/Blogslice/Blogslice'; +import toast from 'react-hot-toast'; interface LikeProps { Likes: string[]; @@ -12,7 +13,7 @@ interface LikeProps { } function Like({ Likes, blogId }: LikeProps) { - const { userdata } = useSelector((state: RootState) => state.auth); + const { userdata, isLogin } = useSelector((state: RootState) => state.auth); const dispatch = useDispatch(); const [liked, setLiked] = React.useState(false); @@ -20,9 +21,11 @@ function Like({ Likes, blogId }: LikeProps) { if (userdata && userdata._id && Likes.includes(userdata._id)) { setLiked(true) } + }, [userdata, Likes]) const handleClick = useDebounce(() => { + !isLogin && toast.error("Please Login Again") dispatch(LikeBlog(blogId)); setLiked(!liked); }, 500); diff --git a/app/src/Layout/Components/CreateBlog.tsx b/app/src/Layout/Components/CreateBlog.tsx index 69ea9d6..f3c1679 100644 --- a/app/src/Layout/Components/CreateBlog.tsx +++ b/app/src/Layout/Components/CreateBlog.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { FormEvent, useState } from 'react'; +import React, { FormEvent, useEffect, useState } from 'react'; import Button from '@/UI/button'; import Heading from '@/UI/heading'; import { createBlog, editBlog } from '@/lib/Redux/Blogslice/Blogslice'; @@ -9,6 +9,7 @@ import { useDispatch, useSelector } from 'react-redux'; import "@/assets/blog.css" import dynamic from 'next/dynamic'; import toast from 'react-hot-toast'; +import Loading from '@/UI/loading'; const ReactQuill = dynamic(() => import('react-quill'), { ssr: false }); @@ -19,7 +20,11 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle const [title, setTitle] = useState(Blog?.title || ""); const [preview, setPreview] = useState(null); const dispatch = useDispatch(); - const { isLogin } = useSelector((state: RootState) => state.auth); + const { isLogin, status } = useSelector((state: RootState) => state.auth); + + useEffect(() => { + handlePreview() + }, [blogContent]) const handleBlogSave = (e: FormEvent) => { e.preventDefault(); @@ -60,6 +65,8 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle setPreview(blogContent); }; + + const resetForm = () => { setBlogContent(""); setTitle(""); @@ -69,7 +76,7 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle }; return ( -
+

Welcome to Your Blog Space @@ -78,9 +85,10 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle Express your thoughts, share your stories, and connect with a like-minded community.

+ {status == "loading" && }
- +
@@ -102,7 +111,7 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle
@@ -126,7 +135,7 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle
- {blogTags.length!==0 &&
+ {blogTags.length !== 0 &&
{blogTags.map((tag, index) => (
@@ -168,7 +177,8 @@ function CreateBlog({ Edit, Blog, Toggle }: { Edit?: boolean, Blog?: any, Toggle {preview && (

Preview

-
+

{title}

+
)}
diff --git a/app/src/Layout/Components/EditBlog.tsx b/app/src/Layout/Components/EditBlog.tsx index ebeedf7..0fe9955 100644 --- a/app/src/Layout/Components/EditBlog.tsx +++ b/app/src/Layout/Components/EditBlog.tsx @@ -1,5 +1,5 @@ "use client" -import { RootState } from '@/Redux/store' +import { RootState } from '@/lib/Redux/store' import React from 'react' import { useSelector } from 'react-redux' import CreateBlog from './CreateBlog' diff --git a/app/src/Layout/UI/Comments.tsx b/app/src/Layout/UI/Comments.tsx index 4bcb3f5..c04349e 100644 --- a/app/src/Layout/UI/Comments.tsx +++ b/app/src/Layout/UI/Comments.tsx @@ -8,6 +8,7 @@ import { MdDeleteForever } from 'react-icons/md'; import FetchUser from '../Components/fetchUser'; import { AiFillLike, AiOutlineLike } from 'react-icons/ai'; import useDebounce from '@/lib/Hooks/useDebounce'; +import toast from 'react-hot-toast'; function Comments({ comment }: { comment: Comment }) { const dispatch = useDispatch() @@ -15,7 +16,6 @@ function Comments({ comment }: { comment: Comment }) { const { userdata } = useSelector((state: RootState) => state.auth) const [liked, setliked] = useState(false) - console.log(comment) useEffect(() => { if (comment.likes.includes(userdata._id)) { setliked(true) @@ -27,6 +27,7 @@ function Comments({ comment }: { comment: Comment }) { setisDeleted(true) } const handleLikeComment = () => { + !userdata && toast.error("Please Login Again") dispatch(LikeComment(comment._id)) setliked(!liked) } diff --git a/app/src/app/CreateBlog/page.tsx b/app/src/app/CreateBlog/page.tsx index 0a40908..b2ded44 100644 --- a/app/src/app/CreateBlog/page.tsx +++ b/app/src/app/CreateBlog/page.tsx @@ -3,7 +3,7 @@ import { Metadata } from 'next' export const metadata: Metadata = { title: "CrateBlog || blogup", description: "build with blgup , share your stories", - }; +}; function Page() { return ( diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx index 27cc051..1863af7 100644 --- a/app/src/app/layout.tsx +++ b/app/src/app/layout.tsx @@ -9,7 +9,7 @@ const inter = Actor({ subsets: ["latin"], weight: "400" }); export const metadata: Metadata = { title: "BlogUp : latest blogs on Technology", - description: "Blog", + description: "A modern, responsive blogging platform designed for seamless content creation and sharing. Create, edit, and manage your blogs with an intuitive interface, rich text editor, and advanced features for an enhanced reading and writing experience. Perfect for bloggers, writers, and content creators.", }; export default function RootLayout({ diff --git a/app/src/assets/blog.css b/app/src/assets/blog.css index 5642905..424b6d6 100644 --- a/app/src/assets/blog.css +++ b/app/src/assets/blog.css @@ -16,6 +16,16 @@ transform: translateY(-5px); /* Lift effect */ } +.blog-container h1 { + font-size: 2.5rem; +} +.blog-container h2 { + font-size: 1.5rem; +} +.blog-container h3 { + font-size: 1.1rem; +} + .blog-container h1, .blog-container h2, .blog-container h3,