From 69720cdfe074cab41be848d0c815727c21d358bd Mon Sep 17 00:00:00 2001
From: Vaibhav-kesarwani <vaibhavkesarwani100@gmail.com>
Date: Mon, 22 Jul 2024 22:55:56 +0530
Subject: [PATCH 1/2] make the post card clickable

---
 frontend/package-lock.json           |  90 +++--------------
 frontend/src/components/PostCard.tsx | 144 ++++++++++++++-------------
 2 files changed, 85 insertions(+), 149 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 16a39cde..dc5430fd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,14 +24,12 @@
         "file-saver": "^2.0.5",
         "framer-motion": "^11.2.10",
         "highlight.js": "^11.10.0",
-        "i18next": "^23.11.5",
         "jszip": "^3.10.1",
         "lottie-react": "^2.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-fast-marquee": "^1.6.4",
         "react-hot-toast": "^2.4.1",
-        "react-i18next": "^14.1.2",
         "react-icons": "^5.2.1",
         "react-parallax-tilt": "^1.7.231",
         "react-router-dom": "^6.24.0",
@@ -1908,19 +1906,6 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
-      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
     "node_modules/@rollup/rollup-linux-x64-musl": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz",
@@ -3720,38 +3705,6 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
-    "node_modules/html-parse-stringify": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
-      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
-      "license": "MIT",
-      "dependencies": {
-        "void-elements": "3.1.0"
-      }
-    },
-    "node_modules/i18next": {
-      "version": "23.12.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.12.1.tgz",
-      "integrity": "sha512-l4y291ZGRgUhKuqVSiqyuU2DDzxKStlIWSaoNBR4grYmh0X+pRYbFpTMs3CnJ5ECKbOI8sQcJ3PbTUfLgPRaMA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://locize.com"
-        },
-        {
-          "type": "individual",
-          "url": "https://locize.com/i18next.html"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2"
-      }
-    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -4849,28 +4802,6 @@
         "react-dom": ">=16"
       }
     },
-    "node_modules/react-i18next": {
-      "version": "14.1.3",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.3.tgz",
-      "integrity": "sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "html-parse-stringify": "^3.0.1"
-      },
-      "peerDependencies": {
-        "i18next": ">= 23.2.3",
-        "react": ">= 16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@@ -5182,6 +5113,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
+      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5794,15 +5737,6 @@
         }
       }
     },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
index 0a61a227..17a3dcb5 100644
--- a/frontend/src/components/PostCard.tsx
+++ b/frontend/src/components/PostCard.tsx
@@ -178,81 +178,83 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
   };
 
   return (
-    <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] 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/${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] 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>
+          <Link
+            to={`/app/posts/${post.id}`}
+            className="inline-block mt-4 text-blue-400 hover:text-blue-300 transition-colors duration-200 rounded-3xl border-2 border-blue-500 hover:border-blue-300 px-4 py-2"
+          >
+            Read More
+          </Link>
+          </button>
+          {currentUser && currentUser.id === post.author.id && (
+            <div className="flex space-x-2">
+              <button>
               <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"
+                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"
               >
-                {tag}
+                <FaEdit size={23} />
               </Link>
-            ))}
-          </div>
-      <div className="flex justify-between mt-1 ">
-        <button>
-        <Link
-          to={`/app/posts/${post.id}`}
-          className="inline-block mt-4 text-blue-400 hover:text-blue-300 transition-colors duration-200 rounded-3xl border-2 border-blue-500 hover:border-blue-300 px-4 py-2"
-        >
-          Read More
-        </Link>
-        </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>
-            <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>
-        )}
+              </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>
-      {renderReactions()}
-    </div>
+    </Link>
   );
 };
 

From f7fc238c422e11b707e764e06a80ef7a972182a9 Mon Sep 17 00:00:00 2001
From: Vaibhav-kesarwani <vaibhavkesarwani100@gmail.com>
Date: Tue, 23 Jul 2024 11:27:17 +0530
Subject: [PATCH 2/2] remove the read more button

---
 frontend/src/components/PostCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
index 17a3dcb5..b6111b49 100644
--- a/frontend/src/components/PostCard.tsx
+++ b/frontend/src/components/PostCard.tsx
@@ -223,14 +223,14 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
               ))}
             </div>
         <div className="flex justify-between mt-1 ">
-          <button>
+          {/* <button>
           <Link
             to={`/app/posts/${post.id}`}
             className="inline-block mt-4 text-blue-400 hover:text-blue-300 transition-colors duration-200 rounded-3xl border-2 border-blue-500 hover:border-blue-300 px-4 py-2"
           >
             Read More
           </Link>
-          </button>
+          </button> */}
           {currentUser && currentUser.id === post.author.id && (
             <div className="flex space-x-2">
               <button>