-
-
Notifications
You must be signed in to change notification settings - Fork 94
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* fix: resolved delete handler bug * feat: rendering the comments * refactor: some code refactoring * refactor: removed some consoles * feat: rendering comments with necessary UI
- Loading branch information
1 parent
d1308bc
commit a89649f
Showing
5 changed files
with
199 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { ThumbsUp, ThumbsDown, Repeat } from "react-feather" | ||
| import Image from "next/image" | ||
|
|
||
| type propType = { | ||
| comment: string | ||
| } | ||
|
|
||
| export default function Comment(props: propType) { | ||
| return ( | ||
| <div className="p-3 rounded-md shadow dark:shadow-gray-600 "> | ||
| <a className="flex items-center gap-3 mb-3" href="/user/65a4bf4bea208a60faff"> | ||
| <div className="w-12 h-12 rounded-full border flex items-center justify-center shadow"> | ||
| <Image | ||
| src="/assets/user.png" | ||
| alt="user" | ||
| width={135} | ||
| height={135} | ||
| className=" border-4 border-white dark:border-slate-800 rounded-full object-contain" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <h5 className="font-medium text-base">Anonymous User</h5> | ||
| <p className="font-thin text-xs/[10px] text-slate-950 dark:text-slate-400">3d ago</p> | ||
| </div> | ||
| </a> | ||
| <a href="/post/65af7e86627eb6f37cf4"> | ||
| <p className="text-md mb-4">{props.comment}</p> | ||
| </a> | ||
| <div className="flex justify-around"> | ||
| <article | ||
| className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary" | ||
| > | ||
| <ThumbsUp size={22} /> | ||
| </article> | ||
|
|
||
| <article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary"> | ||
| <ThumbsDown size={22} /> | ||
| </article> | ||
|
|
||
| <article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary"> | ||
| <Repeat size={22} orientation={'vertical'} /> | ||
| </article> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,131 @@ | ||
| import Link from "next/link"; | ||
| import { useRouter } from "next/router"; | ||
| import { Suspense } from "react"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { Suspense, useState } from "react"; | ||
|
|
||
| import SinglePost from "@/components/core/posts/SinglePost"; | ||
| import TrendingFeed from "@/components/core/trendingFeed"; | ||
| import Footer from "@/components/core/footer"; | ||
|
|
||
| import { PostInstanceType } from "@/types"; | ||
| import { ArrowLeft } from "react-feather"; | ||
|
|
||
|
|
||
| export default function PostById({ singlePostInfo }: { singlePostInfo: PostInstanceType }) { | ||
| const router = useRouter(); | ||
| import { toastify } from "@/helper/toastify"; | ||
| import isCtrlEnter from "@/helper/isCtrlEnter"; | ||
|
|
||
| return ( | ||
| <main className="flex sm:flex-row flex-col max-w-screen-lg mx-auto pt-8 content-center px-4"> | ||
| <div className="flex-[1]"> | ||
| <button onClick={() => router.back()} className="text-primary hover:text-primary-light"> | ||
| <ArrowLeft size={20} className="mr-2" /> | ||
| {"Back"} | ||
| </button> | ||
| </div> | ||
| <div className="flex-[5] mt-4 sm:mt-0"> | ||
| <SinglePost singlePost={singlePostInfo} /> | ||
| </div> | ||
| <div className="flex-[2] hidden md:block"> | ||
| <TrendingFeed /> | ||
|
|
||
| import { addComment } from "@/backend/posts.api"; | ||
|
|
||
| import { Loader } from "react-feather"; | ||
| import Loading from "@/app/feed/loading"; | ||
| import Comment from "@/components/core/comment"; | ||
|
|
||
| export default function PostById({ singlePostInfo, onLikeClick }: { singlePostInfo: PostInstanceType, onLikeClick?: any; }) { | ||
| const router = useRouter(); | ||
| let CHAR_LIMIT = 250; | ||
| const [comment_message, setComment_message] = useState(""); | ||
| const [commentCount, setCommentCount] = useState(singlePostInfo?.comments?.length || 0); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| const uploadComment = async (id: string | undefined, comment_message: string) => { | ||
| setLoading(true); | ||
| const previousComments = singlePostInfo.comments; | ||
| try { | ||
| if (previousComments === undefined || !id) return; | ||
| if (comment_message === "") { | ||
| toastify("Comment can not be empty", "error") | ||
| setLoading(false) | ||
| return; | ||
| } | ||
| const Comments = [...previousComments, comment_message]; | ||
| const res = await addComment(id, Comments); | ||
| setCommentCount(res?.comments.length || singlePostInfo?.comments?.length); | ||
| toastify("Comment added successfully", "success"); | ||
| singlePostInfo.comments?.push(comment_message) | ||
| setComment_message(""); | ||
| setLoading(false) | ||
| } catch (error) { | ||
| console.log(error); | ||
| toastify("Comment cannot be added", "error"); | ||
| setLoading(false) | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
| <> | ||
| <main className="flex flex-col sm:flex-row max-w-screen-lg mx-auto pt-8 content-center px-4"> | ||
| <div className="flex-[1]"> | ||
| <button onClick={() => router.back()} className="text-primary hover:text-primary-light"> | ||
| <ArrowLeft size={20} className="mr-2" /> | ||
| {"Back"} | ||
| </button> | ||
| </div> | ||
| <div> | ||
| <div className="flex-[5] mt-4 sm:mt-0"> | ||
| <div className="flex-[5] mt-2 sm:mt-0"> | ||
| <SinglePost singlePost={singlePostInfo} onLikeClick={singlePostInfo} /> | ||
| <div className=" flex flex-col shadow dark:shadow-gray-600 p-2 "> | ||
| <div className="relative"> | ||
|
|
||
| <textarea | ||
| onChange={(event: any) => setComment_message(event.target.value)} | ||
| value={comment_message} | ||
| name="comment" | ||
| className="dark:bg-secondary-light outline-none focus:ring rounded-lg p-3 text-black dark:text-white placholder:text-gray-400 text-lg w-full mb-2" | ||
| rows={4} | ||
| cols={50} | ||
| placeholder="Type your comment here" | ||
| maxLength={CHAR_LIMIT} | ||
| required | ||
| onKeyDown={(e) => { | ||
| if (isCtrlEnter(e)) uploadComment(singlePostInfo && singlePostInfo?.$id, comment_message); | ||
| }} | ||
| /> | ||
| <button | ||
| onClick={() => { | ||
| uploadComment(singlePostInfo && singlePostInfo?.$id, comment_message); | ||
| }} | ||
| className="absolute left-3 bottom-3 transition-all duration-300 bg-primary hover:bg-primary-light text-white font-normal py-1 px-8 my-3 rounded-full" | ||
| > | ||
| {loading ? ( | ||
| <Loader size={24} className="mx-auto animate-spin self-center" /> | ||
| ) : ( | ||
| <p>post</p> | ||
| )} | ||
| </button> | ||
| </div> | ||
| <div className=" "> | ||
| {/* <button onClick={handleTest}>test</button> */} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| {singlePostInfo.comments?.length == 0 && | ||
| <h1 className="text-white text-2xl text-center mt-5">There are no Comments!</h1> | ||
| } | ||
| <Suspense fallback={<Loading />}> | ||
| {singlePostInfo.comments != undefined | ||
| && singlePostInfo.comments?.length > 0 | ||
| && singlePostInfo.comments?.slice().reverse().map((comment, idx) => ( | ||
| <ul key={idx} className="rounded-lg"> | ||
| <Comment comment={comment} /> | ||
| </ul> | ||
| ))} | ||
| </Suspense> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
|
|
||
| </div> | ||
| </div> | ||
| <div className="flex-[2] hidden md:block"> | ||
| <TrendingFeed /> | ||
| </div> | ||
| </main> | ||
| </> | ||
| ); | ||
| } |
a89649fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
palettegram – ./
palettegram.vercel.app
palettegram-sanchitbajaj02.vercel.app
palettegram-git-master-sanchitbajaj02.vercel.app