Skip to content

Commit

Permalink
UI improvement, new contract
Browse files Browse the repository at this point in the history
  • Loading branch information
luloxi committed Oct 14, 2024
1 parent f9c1322 commit 63b8abd
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 13 deletions.
2 changes: 1 addition & 1 deletion packages/nextjs/app/create/Create.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const Create = ({ onClose }: { onClose: any }) => {
};

generateTokenURIString();
}, [description, uploadedImageIpfsPath]);
}, [name, externalUrl, description, uploadedImageIpfsPath]);

return (
<>
Expand Down
18 changes: 9 additions & 9 deletions packages/nextjs/components/punk-society/BookmarkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({ postId }) => {
}

setBookmarkedPost(true); // Optimistically update the state
setBookmarkCount(prevCount => prevCount + 1); // Optimistically update the like count
setBookmarkCount(prevCount => prevCount + 1); // Optimistically update the bookmark count

try {
await writeContractAsync({
Expand All @@ -47,14 +47,14 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({ postId }) => {
notification.success("Bookmarked successfully!");
} catch (error) {
setBookmarkedPost(false); // Revert the optimistic update if the transaction fails
setBookmarkCount(prevCount => prevCount - 1); // Revert the like count
setBookmarkCount(prevCount => prevCount - 1); // Revert the bookmark count
notification.error("Bookmarking failed, please try again.");
}
};

const handleRemoveBookmark = async () => {
setBookmarkedPost(false); // Optimistically update the state
setBookmarkCount(prevCount => prevCount - 1); // Optimistically update the like count
setBookmarkCount(prevCount => prevCount - 1); // Optimistically update the bookmark count

try {
await writeContractAsync({
Expand All @@ -66,7 +66,7 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({ postId }) => {
console.error("Error during removing bookmark:", error);
notification.error("Removing bookmark failed, please try again.");
setBookmarkedPost(true); // Revert the state if the transaction fails
setBookmarkCount(prevCount => prevCount + 1); // Revert the like count
setBookmarkCount(prevCount => prevCount + 1); // Revert the bookmark count
}
};

Expand All @@ -83,7 +83,7 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({ postId }) => {
}, [postBookmarks]);

return (
<div className="like-button-container">
<div className="bookmark-button-container">
{bookmarkedPost ? (
<button className="icon-button" onClick={handleRemoveBookmark}>
<SolidBookmarkIcon className="text-orange-500 bookmark-icon" />
Expand All @@ -94,19 +94,19 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({ postId }) => {
</button>
)}

<span className="like-counter">{bookmarkCount}</span>
<span className="bookmark-counter">{bookmarkCount}</span>
<style jsx>{`
.like-button-container {
.bookmark-button-container {
display: flex;
align-items: center;
}
.like-button {
.bookmark-button {
font-size: 24px; /* Adjust the size of the heart icon */
border: none;
background: none;
cursor: pointer;
}
.like-counter {
.bookmark-counter {
margin-left: 8px;
font-size: 16px;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/components/punk-society/PostCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import BookmarkButton from "./BookmarkButton";
import CommentSection from "./CommentSection";
// import CommentSection from "./CommentSection";
// import LikeButton from "./LikedButton";
// import { ProfileAddress } from "./ProfileAddress";
import {
Expand All @@ -30,7 +30,7 @@ export interface Post extends Partial<NFTMetaData> {

export const PostCard = ({ post }: { post: Post }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [showCommentSection, setShowCommentSection] = useState(false);
// const [showCommentSection, setShowCommentSection] = useState(false);

const { data: profileInfo } = useScaffoldReadContract({
contractName: "BasedProfile",
Expand Down Expand Up @@ -156,7 +156,7 @@ export const PostCard = ({ post }: { post: Post }) => {
</button>
</div>
</div>
{showCommentSection && <CommentSection postId={BigInt(post.postId || 0)} />}
{/* {showCommentSection && <CommentSection postId={BigInt(post.postId || 0)} />} */}
</div>

{/* Modal for fullscreen image */}
Expand Down

0 comments on commit 63b8abd

Please sign in to comment.