Skip to content

Commit

Permalink
Merge pull request #574 from Parth18Shah/tag_filter
Browse files Browse the repository at this point in the history 
Corrected the tag filter + Added placeholder for it + Minor UI Improvements
  • Loading branch information
@akbatra567
akbatra567 authored Aug 8, 2024
2 parents e773f81 + 7a5c933 commit c15f69f
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 122 deletions.
133 changes: 68 additions & 65 deletions frontend/src/components/PostCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import toast from "react-hot-toast";
import { Link } from "react-router-dom";
import { FaEdit } from "react-icons/fa";
import bgHero from "../assets/bgHero.png";
import { MdFavorite,MdFavoriteBorder } from "react-icons/md";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";

type Props = {
post: IPost;
Expand Down Expand Up @@ -184,74 +184,77 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
};

return (
<Link to={`/app/posts/${post.id}`}
key={post.id}
className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
>
<div className="flex justify-between items-center">
<h2 className="text-xl font-bold mb-3 text-[#c94aff] bg-white dark:text-[#c94aff] dark:bg-blue-950">{post.title}</h2>
{isFavorite ? (
<MdFavorite
onClick={handleRemoveFromFavorite}
size={33}
className="cursor-pointer text-[#fe4c4c]"
/>
) : (
<MdFavoriteBorder
onClick={handleAddToFavorite}
size={33}
className="cursor-pointer text-[#e74e4e] dark:text-white"
/>
)}
</div>
<p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">
{post.description.length > 100
? `${post.description.slice(0, 100)}...`
: post.description}
</p>
<p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">By :
<Link to={`/app/profile/${post.author.id}`} data-tooltip-content={`View ${post.author.username} profile 👀`} data-tooltip-id="my-tooltip" className="text-base">
<strong className="text-sky-500">
{' '} @{post.author.username}{' '}
</strong>
</Link>
</p>

<div className="flex flex-wrap gap-2">
{post.tags.map((tag, index) => (
<Link
to={`/app/posts?tags=${tag}`}
key={index}
className="inline-flex items-center px-2 py-1 border-2 border-[#5f67de] text-[#5f67de] font-semibold dark:border-white dark:text-white dark:bg-transparent text-sm rounded-md transition-colors duration-300 hover:bg-[#5f67de] hover:text-white dark:hover:bg-white dark:hover:text-black"
>
{tag}
</Link>
))}
</div>
<div className="flex justify-between mt-1 ">
<button>
{renderReactions()}
</button>
{currentUser && currentUser.id === post.author.id && (
<div className="flex space-x-2">
<button>
<Link to={`/app/posts/${post.id}`}>
<div
key={post.id}
className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
>
<div className="flex justify-between items-center">
<h2 className="text-xl font-bold mb-3 text-[#c94aff] dark:text-[#c94aff] ">{post.title}</h2>
{isFavorite ? (
<MdFavorite
onClick={handleRemoveFromFavorite}
size={33}
className="cursor-pointer text-[#fe4c4c]"
/>
) : (
<MdFavoriteBorder
onClick={handleAddToFavorite}
size={33}
className="cursor-pointer text-[#e74e4e] dark:text-white"
/>
)}
</div>
<p className="text-[#000435] dark:text-white mb-4">
{post.description.length > 100
? `${post.description.slice(0, 100)}...`
: post.description}
</p>
<p className="text-[#000435] dark:text-white mb-4">By :
<Link to={`/app/profile/${post.author.id}`} data-tooltip-content={`View ${post.author.username} profile 👀`} data-tooltip-id="my-tooltip" className="text-base">
<strong className="text-sky-500">
{' '} @{post.author.username}{' '}
</strong>
</Link>
</p>

<div className="flex flex-wrap gap-2">
{post.tags.map((tag, index) => (
<Link
to={`/app/posts/edit/${post.id}`}
className="justify-end mt-4 inline-block text-blue-400 hover:text-blue-300 transition-colors duration-200 border-2 border-blue-500 hover:border-blue-300 p-2 rounded-3xl"
to={`/app/posts?tags=${tag}`}
key={index}
className="inline-flex items-center px-2 py-1 border-2 border-[#5f67de] text-[#5f67de] font-semibold dark:border-white dark:text-white dark:bg-transparent text-sm rounded-md transition-colors duration-300 hover:bg-[#5f67de] hover:text-white dark:hover:bg-white dark:hover:text-black"
>
<FaEdit size={23} />
{tag}
</Link>
</button>
<button
onClick={handleDelete}
disabled={isDeleting}
className=""
> <Link className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 dark:border-red-500 hover:border-red-400 p-2 rounded-3xl" to={""}>
{isDeleting ? "Deleting..." : <MdDeleteOutline size={23} />}
))}
</div>
<div className="flex justify-between mt-1 ">
<button>
{renderReactions()}
</button>
{currentUser && currentUser.id === post.author.id && (
<div className="flex space-x-2">
<button>
<Link
to={`/app/posts/edit/${post.id}`}
className="justify-end mt-4 inline-block text-blue-400 hover:text-blue-300 transition-colors duration-200 border-2 border-blue-500 hover:border-blue-300 p-2 rounded-3xl"
>
<FaEdit size={23} />
</Link>
</button>
</div>
)}
</button>
<button
onClick={handleDelete}
disabled={isDeleting}
className=""
> <Link className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 dark:border-red-500 hover:border-red-400 p-2 rounded-3xl" to={""}>
{isDeleting ? "Deleting..." : <MdDeleteOutline size={23} />}
</Link>
</button>
</div>
)}
</div>
{/* {renderReactions()} */}
</div>
</Link>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/EditPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const EditPost = () => {

const handleAddTag = () => {
if (tagInput.length > 0 && !post.tags.includes(tagInput)) {
setPost({ ...post, tags: [...post.tags, tagInput] });
setPost({ ...post, tags: [...post.tags, tagInput.toLowerCase()] });
setTagInput("");
}
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/NewPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const NewPost = () => {

const handleAddTag = () => {
if (tagInput.length > 0 && !tags.includes(tagInput)) {
setTags([...tags, tagInput]);
setTags([...tags, tagInput.toLowerCase()]);
setTagInput("");
}
};
Expand Down
112 changes: 57 additions & 55 deletions frontend/src/pages/Posts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Posts = () => {
removeTag: deleteTag,
searchQuery,
setSearchQuery,
fetchPosts,
fetchPosts,
} = usePosts({
initialPage: 1,
pageSize: 12,
Expand All @@ -33,9 +33,12 @@ const Posts = () => {
const [tagInput, setTagInput] = useState("");
const [filterTags, setFilterTags] = useState<string[]>([]);
const filterRef = useRef<HTMLDivElement>(null);

const filteredPosts = posts;

const allTags = filteredPosts.map(post => post.tags).flat();
const uniqueTags = [...new Set(allTags)];
const tagsToDisplay = uniqueTags.slice(0, 3);
var placeholderTags = tagsToDisplay.length > 0 ? tagsToDisplay.join(", ") : "";
placeholderTags = placeholderTags + (uniqueTags.length > 3 ? " ..." : "");
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (filterRef.current && !filterRef.current.contains(event.target as Node)) {
Expand All @@ -44,7 +47,7 @@ const Posts = () => {
};

document.title = "Style Share | Our Posts 📃";

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
Expand Down Expand Up @@ -93,8 +96,8 @@ const Posts = () => {

return (
<div
className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]"
style={{
className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]"
style={{
backgroundImage: `url(${bgHero})`,
backgroundSize: "cover",
backgroundPosition: "center",
Expand All @@ -108,7 +111,7 @@ const Posts = () => {
backgroundPosition: "center",
}}
>
<h1 className="text-2xl font-semibold mb-4 text-white">Posts</h1>
<h1 className="text-2xl font-semibold mb-4 text-black dark:text-white">Posts</h1>
<div className="w-full flex flex-col sm:flex-row justify-between items-center mb-4 relative space-y-4 sm:space-y-0 sm:space-x-4">
<div className="flex space-x-4">
<button
Expand All @@ -130,7 +133,7 @@ const Posts = () => {
value={tagInput}
onChange={(e) => setTagInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Add tag"
placeholder={`Add tag${placeholderTags ? ` like ${placeholderTags}` : ""}`}
className="p-2 w-full rounded bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
/>
</div>
Expand Down Expand Up @@ -180,56 +183,55 @@ const Posts = () => {
</div>
</div>
{filteredPosts.length === 0 ? (
<div className="text-center text-white">No Posts</div>
<div className="text-center text-black dark:text-white">No Posts</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
{filteredPosts.map((post) => (
<PostCard
key={post.id}
post={post}
currentUser={currentUser}
onDelete={handleDelete}
/>
))}
<div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
{filteredPosts.map((post) => (
<PostCard
key={post.id}
post={post}
currentUser={currentUser}
onDelete={handleDelete}
/>
))}
</div>
<div className="flex justify-center items-center mt-4 w-full space-x-2">
<button
onClick={handlePreviousPage}
disabled={page === 1}
className={`text-white px-4 py-2 rounded ${page === 1
? "bg-gray-600 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
Previous
</button>
{Array.from({ length: totalPages }, (_, i) => (
<button
key={i}
onClick={() => handlePageClick(i + 1)}
className={`text-white px-4 py-2 rounded ${page === i + 1
? "bg-blue-500 text-white"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
{i + 1}
</button>
))}
<button
onClick={handleNextPage}
disabled={page === totalPages}
className={`text-white px-6 py-2 rounded ${page === totalPages
? "bg-gray-600 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
Next
</button>
</div>
</div>
)}
<div className="flex justify-center items-center mt-4 w-full space-x-2">
<button
onClick={handlePreviousPage}
disabled={page === 1}
className={`text-white px-4 py-2 rounded ${
page === 1
? "bg-gray-600 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
Previous
</button>
{Array.from({ length: totalPages }, (_, i) => (
<button
key={i}
onClick={() => handlePageClick(i + 1)}
className={`text-white px-4 py-2 rounded ${
page === i + 1
? "bg-blue-500 text-white"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
{i + 1}
</button>
))}
<button
onClick={handleNextPage}
disabled={page === totalPages}
className={`text-white px-6 py-2 rounded ${
page === totalPages
? "bg-gray-600 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700"
}`}
>
Next
</button>
</div>
</div>
</div>
);
Expand Down

0 comments on commit c15f69f

Please sign in to comment.