From 10bd4fd5747762eb01f57c4e185439505013adf0 Mon Sep 17 00:00:00 2001
From: Steve Thomas <steve13thomas@gmail.com>
Date: Mon, 24 Mar 2025 20:37:01 +0000
Subject: [PATCH 1/5] feat: add like and share button

---
 src/components/PostsCard.jsx | 103 +++++++++++++++++++++++++----------
 1 file changed, 73 insertions(+), 30 deletions(-)

diff --git a/src/components/PostsCard.jsx b/src/components/PostsCard.jsx
index 60a66041..1be9e6b4 100644
--- a/src/components/PostsCard.jsx
+++ b/src/components/PostsCard.jsx
@@ -1,33 +1,76 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
 const PostCard = ({ post }) => {
-    return (
-      <div className="bg-white shadow-lg rounded-2xl p-4 max-w-lg w-full">
-        {/* Optional Post Image */}
-        {post.image_url ? (
-          <img
-            src={post.image_url}
-            alt={post.title}
-            className="w-full h-48 object-cover rounded-xl"
-          />
-        ) : (
-          <div className="w-full h-48 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500">
-            No Image
-          </div>
-        )}
-  
-        {/* Post Content */}
-        <div className="mt-4">
-          <h2 className="text-xl font-bold text-gray-900">{post.title}</h2>
-          <p className="text-gray-700 mt-2">{post.content}</p>
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(post.likes || 0);
+
+  const handleLike = () => {
+    setLiked(!liked);
+    setLikeCount(prev => liked ? prev - 1 : prev + 1);
+    // Optional: Send API request to backend here
+  };
+
+  const handleShare = () => {
+    const shareText = `${post.title} - ${post.content}`;
+    navigator.clipboard.writeText(shareText);
+    alert("Post copied to clipboard!");
+    // Optional: Implement Web Share API if you want native share dialog
+  };
+
+  return (
+    <div className="bg-white shadow-lg rounded-2xl p-4 max-w-lg w-full">
+      {post.image_url ? (
+        <img
+          src={post.image_url}
+          alt={post.title}
+          className="w-full h-48 object-cover rounded-xl"
+        />
+      ) : (
+        <div className="w-full h-48 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500">
+          No Image
         </div>
-  
-        {/* Optional Post Location */}
-        {post.location && (
-          <div className="mt-4 text-sm text-gray-500">
-            📍 <span>{post.location}</span>
-          </div>
-        )}
+      )}
+
+      <div className="mt-4">
+        <h2 className="text-xl font-bold text-gray-900">{post.title}</h2>
+        <p className="text-gray-700 mt-2">{post.content}</p>
       </div>
-    );
-  };
-  
-  export default PostCard;
\ No newline at end of file
+
+      {post.location && (
+        <div className="mt-4 text-sm text-gray-500">
+          📍 <span>{post.location}</span>
+        </div>
+      )}
+
+      <div className="mt-4 flex justify-between items-center">
+        <button
+          onClick={handleLike}
+          className={`px-4 py-2 rounded-xl text-sm font-medium ${
+            liked ? "bg-red-100 text-red-600" : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          ❤️ {liked ? "Liked" : "Like"} ({likeCount})
+        </button>
+        <button
+          onClick={handleShare}
+          className="px-4 py-2 bg-blue-100 text-blue-600 rounded-xl text-sm font-medium"
+        >
+          🔗 Share
+        </button>
+      </div>
+    </div>
+  );
+};
+
+PostCard.propTypes = {
+  post: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    image_url: PropTypes.string,
+    location: PropTypes.string,
+    likes: PropTypes.number,
+  }).isRequired,
+};
+
+export default PostCard;
\ No newline at end of file

From 44325e534112842f27383930b2c8a4ee5f0f8c9d Mon Sep 17 00:00:00 2001
From: Steve Thomas <steve13thomas@gmail.com>
Date: Mon, 24 Mar 2025 20:40:34 +0000
Subject: [PATCH 2/5] fix: allow liking and sharing from dashboard

---
 src/components/PostsFeed.jsx | 131 +++++++++++++++++++++--------------
 1 file changed, 80 insertions(+), 51 deletions(-)

diff --git a/src/components/PostsFeed.jsx b/src/components/PostsFeed.jsx
index 1b134165..99bdf3be 100644
--- a/src/components/PostsFeed.jsx
+++ b/src/components/PostsFeed.jsx
@@ -1,57 +1,86 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import PostCard from "./PostsCard"; // ✅ Correct import
-
-const PostsFeed = ({ type = "friends" }) => { 
-  console.log("Rendering PostsFeed with type:", type); // ✅ Debugging
-
-  // Example post data
-  const allPosts = [
-    {
-      id: 1,
-      title: "Weekend Vibes",
-      content: "Excited for the weekend! 🎉",
-      image_url: "https://cdn2.hubspot.net/hubfs/364394/blogs/Admit-A-Bull/images/blog-post/080618-the-importance-of-sleep-for-college-students/the-importance-of-sleep-for-college-students-index.jpg",
-      location: "Dublin, Ireland",
-      user: "Alice Johnson",
-    },
-    {
-      id: 2,
-      title: "Project Complete!",
-      content: "Just finished my project! 💻",
-      image_url: "https://www.universityofcalifornia.edu/sites/default/files/styles/article_default_banner/public/college_voting_faq_header.jpg?h=7eca08bd&itok=3bUKecU1",
-      location: "San Francisco, USA",
-      user: "Mark Lee",
-    },
-    {
-      id: 3,
-      title: "Sunset Bliss",
-      content: "Beautiful sunset today! 🌅",
-      image_url: "https://due.uci.edu/files/2017/08/uci_beach_august_nl.png",
-      location: "Paris, France",
-      user: "Sophia Wang",
-    },
-    {
-      id: 4,
-      title: "Game Night!",
-      content: "Anyone up for a game night? 🎲",
-      image_url: "https://www.usnews.com/object/image/00000190-3ba9-d6ee-a7ff-7fbb4cfe0000/gettyimages-1473712269.jpg?update-time=1718987895511&size=responsive640",
-      location: "New York, USA",
-      user: "John Doe",
-    },
-  ];
-
-  const posts = type === "friends" ? allPosts.slice(0, 2) : allPosts; // ✅ Show all for "all" type
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
+
+const PostCard = ({ post }) => {
+  const navigate = useNavigate();
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(post.likes || 0);
+
+  const handleLike = (e) => {
+    e.stopPropagation();
+    setLiked(!liked);
+    setLikeCount((prev) => (liked ? prev - 1 : prev + 1));
+  };
+
+  const handleShare = (e) => {
+    e.stopPropagation();
+    const shareText = `${post.title} - ${post.content}`;
+    navigator.clipboard.writeText(shareText);
+    alert("Post copied to clipboard!");
+  };
+
+  const handleClick = () => {
+    navigate(`/post/${post.id}`);
+  };
 
   return (
-    <div className="w-full max-w-2xl mx-auto p-4 space-y-4">
-      {posts.map((post) => (
-        <Link key={post.id} to={`/post/${post.id}`} className="block hover:opacity-80 transition">
-          <PostCard post={post} />
-        </Link>
-      ))}
+    <div
+      onClick={handleClick}
+      className="bg-white shadow-lg rounded-2xl p-4 max-w-lg w-full cursor-pointer hover:opacity-90 transition"
+    >
+      {post.image_url ? (
+        <img
+          src={post.image_url}
+          alt={post.title}
+          className="w-full h-48 object-cover rounded-xl"
+        />
+      ) : (
+        <div className="w-full h-48 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500">
+          No Image
+        </div>
+      )}
+
+      <div className="mt-4">
+        <h2 className="text-xl font-bold text-gray-900">{post.title}</h2>
+        <p className="text-gray-700 mt-2">{post.content}</p>
+      </div>
+
+      {post.location && (
+        <div className="mt-4 text-sm text-gray-500">
+          📍 <span>{post.location}</span>
+        </div>
+      )}
+
+      <div className="mt-4 flex justify-between items-center">
+        <button
+          onClick={handleLike}
+          className={`px-4 py-2 rounded-xl text-sm font-medium ${
+            liked ? "bg-red-100 text-red-600" : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          ❤️ {liked ? "Liked" : "Like"} ({likeCount})
+        </button>
+        <button
+          onClick={handleShare}
+          className="px-4 py-2 bg-blue-100 text-blue-600 rounded-xl text-sm font-medium"
+        >
+          🔗 Share
+        </button>
+      </div>
     </div>
   );
 };
 
-export default PostsFeed;
\ No newline at end of file
+PostCard.propTypes = {
+  post: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    image_url: PropTypes.string,
+    location: PropTypes.string,
+    likes: PropTypes.number,
+  }).isRequired,
+};
+
+export default PostCard;
\ No newline at end of file

From 6022f800abd0a5a4433cf0a9da0dedc9d73dea0e Mon Sep 17 00:00:00 2001
From: Steve Thomas <steve13thomas@gmail.com>
Date: Mon, 24 Mar 2025 20:50:31 +0000
Subject: [PATCH 3/5] fix: correct initial wrong commit

---
 src/components/PostsFeed.jsx | 127 +++++++++++++----------------------
 1 file changed, 47 insertions(+), 80 deletions(-)

diff --git a/src/components/PostsFeed.jsx b/src/components/PostsFeed.jsx
index 99bdf3be..c8204ba3 100644
--- a/src/components/PostsFeed.jsx
+++ b/src/components/PostsFeed.jsx
@@ -1,86 +1,53 @@
-import { useState } from "react";
-import PropTypes from "prop-types";
-import { useNavigate } from "react-router-dom";
-
-const PostCard = ({ post }) => {
-  const navigate = useNavigate();
-  const [liked, setLiked] = useState(false);
-  const [likeCount, setLikeCount] = useState(post.likes || 0);
-
-  const handleLike = (e) => {
-    e.stopPropagation();
-    setLiked(!liked);
-    setLikeCount((prev) => (liked ? prev - 1 : prev + 1));
-  };
-
-  const handleShare = (e) => {
-    e.stopPropagation();
-    const shareText = `${post.title} - ${post.content}`;
-    navigator.clipboard.writeText(shareText);
-    alert("Post copied to clipboard!");
-  };
-
-  const handleClick = () => {
-    navigate(`/post/${post.id}`);
-  };
+import React from "react";
+import PostCard from "./PostsCard"; // ✅ Correct import
+
+const PostsFeed = ({ type = "friends" }) => {
+  console.log("Rendering PostsFeed with type:", type);
+
+  const allPosts = [
+    {
+      id: 1,
+      title: "Weekend Vibes",
+      content: "Excited for the weekend! 🎉",
+      image_url: "https://cdn2.hubspot.net/hubfs/364394/blogs/Admit-A-Bull/images/blog-post/080618-the-importance-of-sleep-for-college-students/the-importance-of-sleep-for-college-students-index.jpg",
+      location: "Dublin, Ireland",
+      user: "Alice Johnson",
+    },
+    {
+      id: 2,
+      title: "Project Complete!",
+      content: "Just finished my project! 💻",
+      image_url: "https://www.universityofcalifornia.edu/sites/default/files/styles/article_default_banner/public/college_voting_faq_header.jpg?h=7eca08bd&itok=3bUKecU1",
+      location: "San Francisco, USA",
+      user: "Mark Lee",
+    },
+    {
+      id: 3,
+      title: "Sunset Bliss",
+      content: "Beautiful sunset today! 🌅",
+      image_url: "https://due.uci.edu/files/2017/08/uci_beach_august_nl.png",
+      location: "Paris, France",
+      user: "Sophia Wang",
+    },
+    {
+      id: 4,
+      title: "Game Night!",
+      content: "Anyone up for a game night? 🎲",
+      image_url: "https://www.usnews.com/object/image/00000190-3ba9-d6ee-a7ff-7fbb4cfe0000/gettyimages-1473712269.jpg?update-time=1718987895511&size=responsive640",
+      location: "New York, USA",
+      user: "John Doe",
+    },
+  ];
+
+  const posts = type === "friends" ? allPosts.slice(0, 2) : allPosts;
 
   return (
-    <div
-      onClick={handleClick}
-      className="bg-white shadow-lg rounded-2xl p-4 max-w-lg w-full cursor-pointer hover:opacity-90 transition"
-    >
-      {post.image_url ? (
-        <img
-          src={post.image_url}
-          alt={post.title}
-          className="w-full h-48 object-cover rounded-xl"
-        />
-      ) : (
-        <div className="w-full h-48 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500">
-          No Image
-        </div>
-      )}
-
-      <div className="mt-4">
-        <h2 className="text-xl font-bold text-gray-900">{post.title}</h2>
-        <p className="text-gray-700 mt-2">{post.content}</p>
-      </div>
-
-      {post.location && (
-        <div className="mt-4 text-sm text-gray-500">
-          📍 <span>{post.location}</span>
-        </div>
-      )}
-
-      <div className="mt-4 flex justify-between items-center">
-        <button
-          onClick={handleLike}
-          className={`px-4 py-2 rounded-xl text-sm font-medium ${
-            liked ? "bg-red-100 text-red-600" : "bg-gray-100 text-gray-600"
-          }`}
-        >
-          ❤️ {liked ? "Liked" : "Like"} ({likeCount})
-        </button>
-        <button
-          onClick={handleShare}
-          className="px-4 py-2 bg-blue-100 text-blue-600 rounded-xl text-sm font-medium"
-        >
-          🔗 Share
-        </button>
-      </div>
+    <div className="w-full max-w-2xl mx-auto p-4 space-y-4">
+      {posts.map((post) => (
+        <PostCard key={post.id} post={post} />
+      ))}
     </div>
   );
 };
 
-PostCard.propTypes = {
-  post: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    title: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    image_url: PropTypes.string,
-    location: PropTypes.string,
-    likes: PropTypes.number,
-  }).isRequired,
-};
-
-export default PostCard;
\ No newline at end of file
+export default PostsFeed;
\ No newline at end of file

From 57485fa832957a821a0ec0ef63359e3118a46b2e Mon Sep 17 00:00:00 2001
From: Steve Thomas <steve13thomas@gmail.com>
Date: Mon, 24 Mar 2025 20:58:22 +0000
Subject: [PATCH 4/5] feat: support native app sharing

---
 src/components/PostsCard.jsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/PostsCard.jsx b/src/components/PostsCard.jsx
index 1be9e6b4..9fc3abdb 100644
--- a/src/components/PostsCard.jsx
+++ b/src/components/PostsCard.jsx
@@ -11,11 +11,24 @@ const PostCard = ({ post }) => {
     // Optional: Send API request to backend here
   };
 
-  const handleShare = () => {
-    const shareText = `${post.title} - ${post.content}`;
-    navigator.clipboard.writeText(shareText);
-    alert("Post copied to clipboard!");
-    // Optional: Implement Web Share API if you want native share dialog
+  const handleShare = (e) => {
+    e.stopPropagation();
+    const shareData = {
+      title: post.title,
+      text: post.content,
+      url: window.location.origin + `/post/${post.id}`,
+    };
+  
+    if (navigator.share) {
+      navigator
+        .share(shareData)
+        .then(() => console.log("Post shared successfully"))
+        .catch((error) => console.error("Sharing failed:", error));
+    } else {
+      // Fallback for unsupported browsers
+      navigator.clipboard.writeText(shareData.url);
+      alert("Share not supported on this browser. Link copied to clipboard!");
+    }
   };
 
   return (
@@ -65,6 +78,7 @@ const PostCard = ({ post }) => {
 
 PostCard.propTypes = {
   post: PropTypes.shape({
+    id: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     image_url: PropTypes.string,

From aa0c3314e2e9f183a1f6fbcb1782e33ae626836b Mon Sep 17 00:00:00 2001
From: Steve Thomas <steve13thomas@gmail.com>
Date: Mon, 24 Mar 2025 20:58:46 +0000
Subject: [PATCH 5/5] refactor: add prop validation

---
 src/components/PostsFeed.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/PostsFeed.jsx b/src/components/PostsFeed.jsx
index c8204ba3..23dbc607 100644
--- a/src/components/PostsFeed.jsx
+++ b/src/components/PostsFeed.jsx
@@ -1,5 +1,6 @@
-import React from "react";
 import PostCard from "./PostsCard"; // ✅ Correct import
+import PropTypes from "prop-types"; 
+
 
 const PostsFeed = ({ type = "friends" }) => {
   console.log("Rendering PostsFeed with type:", type);
@@ -50,4 +51,8 @@ const PostsFeed = ({ type = "friends" }) => {
   );
 };
 
+PostsFeed.propTypes = {
+  type: PropTypes.string
+};
+
 export default PostsFeed;
\ No newline at end of file