From 17098d073be3bc42d1e8526becec88c0e78560bf Mon Sep 17 00:00:00 2001
From: appala venkata avinash <aa760@snu.edu.in>
Date: Wed, 17 Apr 2024 00:07:54 +0530
Subject: [PATCH 1/2] Added hashtags in the post container seperately

---
 src/components/Posts/index.js | 126 ++++++++++++++++++++++------------
 1 file changed, 82 insertions(+), 44 deletions(-)

diff --git a/src/components/Posts/index.js b/src/components/Posts/index.js
index f5076d0..bc842ee 100644
--- a/src/components/Posts/index.js
+++ b/src/components/Posts/index.js
@@ -1,6 +1,7 @@
 import { getEventHash, getSignature, nip19, SimplePool } from 'nostr-tools';
 import { fetchInvoice, getProfileMetadata, getZapEndpoint } from '../ZapHelper';
 import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
 import ZapModal from '../ZapHelper/ZapModal';
 import { ShareModal } from '../Share/modal';
@@ -94,6 +95,10 @@ export const removeHashtagsAndLinks = text => {
     return text.replace(/(https?:\/\/[^\s]+)/g, '');
 };
 
+export function extractHashtags(text) {
+    return text.match(/#\w+/g) || [];
+}
+
 export async function upvotePost(noteId, userPublicKey) {
     const storedData = localStorage.getItem('memestr');
 
@@ -322,6 +327,7 @@ function Posts(props) {
     let title = removeHashtagsAndLinks(props.note.content)
         .trimLeft()
         .trimRight();
+
     if (title.length === 0) {
         title = ' ';
     }
@@ -376,6 +382,7 @@ function Posts(props) {
     }
 
     let truncatedTitle = truncateTitle(title, 70);
+    let hashtags = extractHashtags(truncatedTitle);
     let titleWithLinks = convertHashtagsToLinks(truncatedTitle);
 
     function renderContent(imageLink) {
@@ -420,6 +427,10 @@ function Posts(props) {
             }
         });
     }
+    const navigate = useNavigate();
+    const handleTagClick = suggestions => {
+        navigate(`/search/${suggestions}`);
+    };
 
     let postUrl = `/post/${props.note.id}?voteCount=${votesCount}`;
     return (
@@ -446,51 +457,78 @@ function Posts(props) {
                     </div>
 
                     <div className="border-x border-grey-100 flex flex-col p-3">
-                        <div className="flex justify-between items-centre">
-                            <Link to={postUrl} className="flex items-center ">
-                                <CommentSvg className="h-4 w-4 text-black-600" />
-                                <span className="text-xs text-gray-600 ml-1">
-                                    {commentCount > 0 ? commentCount : ''}
-                                </span>
-                            </Link>
-
-                            <button
-                                onClick={handleZapButton}
-                                className={`flex items-center ${
-                                    fillZap
-                                        ? 'text-yellow-300'
-                                        : 'text-black-600'
-                                }`}>
-                                <ZapSvg className="h-4 w-4 text-black-600" />
-                                {processedValue && (
-                                    <span className="text-xs ml-1">
-                                        {processedValue}
+                        <div className="flex gap-2 py-2">
+                            {hashtags.slice(0, 4).map((tag, index) => (
+                                <button
+                                    key={index}
+                                    onClick={() =>
+                                        handleTagClick(tag.substring(1))
+                                    }
+                                    className="bg-gray-200 text-black rounded-full px-4 py-1 text-sm focus:outline-none">
+                                    {tag.substring(1)}
+                                </button>
+                            ))}
+                        </div>
+
+                        <div className="flex justify-between items-center">
+                            <div className="flex items-center">
+                                <Link
+                                    to={postUrl}
+                                    className="flex items-center">
+                                    <CommentSvg className="h-4 w-4 text-black-600" />
+                                    <span className="text-xs text-gray-600 ml-1">
+                                        {commentCount > 0 ? commentCount : ''}
+                                    </span>
+                                </Link>
+                            </div>
+
+                            <div className="flex items-center">
+                                <button
+                                    onClick={handleZapButton}
+                                    className={`flex items-center ${
+                                        fillZap
+                                            ? 'text-yellow-300'
+                                            : 'text-black-600'
+                                    }`}>
+                                    <ZapSvg className="h-4 w-4 text-black-600" />
+                                    {processedValue && (
+                                        <span className="text-xs ml-1">
+                                            {processedValue}
+                                        </span>
+                                    )}
+                                    <ZapModal
+                                        isOpenm={isModalOpen}
+                                        onConfirm={handleConfirm}
+                                    />
+                                </button>
+                            </div>
+
+                            <div className="flex items-center">
+                                <button
+                                    onClick={handleLikeButtonClick}
+                                    disabled={isTodisabled()}
+                                    className={`flex items-center ${
+                                        fillLike
+                                            ? 'text-red-600'
+                                            : 'text-black-600'
+                                    }`}>
+                                    <LikeSvg
+                                        fill={fillLike ? 'red' : 'none'}
+                                        className="h-4 w-4"
+                                    />
+                                    <span className="text-xs ml-1 text-black-600">
+                                        {votesCount}
                                     </span>
-                                )}
-                                <ZapModal
-                                    isOpenm={isModalOpen}
-                                    onConfirm={handleConfirm}
-                                />
-                            </button>
-
-                            <button
-                                onClick={handleLikeButtonClick}
-                                disabled={isTodisabled()}
-                                className={`flex items-center ${
-                                    fillLike ? 'text-red-600' : 'text-black-600'
-                                }`}>
-                                <LikeSvg
-                                    fill={fillLike ? 'red' : 'none'}
-                                    className="h-4 w-4"
-                                />
-                                <span className="text-xs ml-1 text-black-600">
-                                    {votesCount}
-                                </span>
-                            </button>
-
-                            <button onClick={openShareModal} className="p-1">
-                                <ShareButtonSvg className="h-4 w-4 text-gray-600" />
-                            </button>
+                                </button>
+                            </div>
+
+                            <div className="flex items-center">
+                                <button
+                                    onClick={openShareModal}
+                                    className="p-1">
+                                    <ShareButtonSvg className="h-4 w-4 text-gray-600" />
+                                </button>
+                            </div>
                         </div>
                     </div>
 

From cd835f298d5dd5b7d0849a658f4d83fc668af694 Mon Sep 17 00:00:00 2001
From: appala venkata avinash <aa760@snu.edu.in>
Date: Thu, 9 May 2024 18:35:34 +0530
Subject: [PATCH 2/2] Modified Container Design

---
 src/components/Posts/index.js | 89 ++++++++++++++---------------------
 1 file changed, 35 insertions(+), 54 deletions(-)

diff --git a/src/components/Posts/index.js b/src/components/Posts/index.js
index bc842ee..98a1b2e 100644
--- a/src/components/Posts/index.js
+++ b/src/components/Posts/index.js
@@ -95,6 +95,11 @@ export const removeHashtagsAndLinks = text => {
     return text.replace(/(https?:\/\/[^\s]+)/g, '');
 };
 
+export const removeHashtags = text => {
+    const withoutHastags = text.replace(/#\w+/g, '');
+    return withoutHastags.replace(/(https?:\/\/[^\s]+)/g, '');
+};
+
 export function extractHashtags(text) {
     return text.match(/#\w+/g) || [];
 }
@@ -356,34 +361,9 @@ function Posts(props) {
         }
     }
 
-    function convertHashtagsToLinks(text) {
-        const hashtagRegex = /#(\w+)(?=\s|#|$)/g;
-        const tokens = [];
-        let match;
-        let lastIndex = 0;
-        while ((match = hashtagRegex.exec(text)) !== null) {
-            if (match.index > lastIndex) {
-                tokens.push(text.slice(lastIndex, match.index));
-            }
-            tokens.push(
-                <Link
-                    to={`/search/${match[1]}`}
-                    key={match[1]}
-                    className="text-customBlue hover:text-customBlue-700 hover:decoration-customBlue-700 transition duration-300 ease-in-out hover:scale-112">
-                    {match[0]}
-                </Link>,
-            );
-            lastIndex = match.index + match[0].length;
-        }
-        if (lastIndex < text.length) {
-            tokens.push(text.slice(lastIndex));
-        }
-        return tokens;
-    }
-
     let truncatedTitle = truncateTitle(title, 70);
     let hashtags = extractHashtags(truncatedTitle);
-    let titleWithLinks = convertHashtagsToLinks(truncatedTitle);
+    let titleWithLinks = removeHashtags(truncatedTitle);
 
     function renderContent(imageLink) {
         try {
@@ -437,39 +417,13 @@ function Posts(props) {
         <>
             <div className="flex flex-col items-center">
                 <div className="bg-white mt-4  overflow-hidden rounded-sm w-full max-w-md">
-                    {/* Post Header: Title and Time */}
-                    <div className="py-2 px-1 pb-1 border-t border-x border-gray-300 rounded-t-md">
-                        <div className="flex justify-between items-center">
-                            <h3 className="font-bold font-nunito">
-                                {titleWithLinks}
-                            </h3>
-                            <span className="text-xs text-gray-500">
-                                {timeDifference.duration}
-                                {timeDifference.unit}
-                            </span>
-                        </div>
-                    </div>
-
                     {/* Post Media Content */}
 
-                    <div className="h-max lg:px-1 bg-gray-200 border border-gray-300">
+                    <div className="h-max lg: bg-gray-200 border border-gray-300">
                         {renderContent(imageLink)}
                     </div>
-
+                    <div className="border-t border-grey-100 rounded-b-md "></div>
                     <div className="border-x border-grey-100 flex flex-col p-3">
-                        <div className="flex gap-2 py-2">
-                            {hashtags.slice(0, 4).map((tag, index) => (
-                                <button
-                                    key={index}
-                                    onClick={() =>
-                                        handleTagClick(tag.substring(1))
-                                    }
-                                    className="bg-gray-200 text-black rounded-full px-4 py-1 text-sm focus:outline-none">
-                                    {tag.substring(1)}
-                                </button>
-                            ))}
-                        </div>
-
                         <div className="flex justify-between items-center">
                             <div className="flex items-center">
                                 <Link
@@ -531,6 +485,33 @@ function Posts(props) {
                             </div>
                         </div>
                     </div>
+                    <div className="border-t border-grey-100 rounded-b-md "></div>
+
+                    <div className="border-x border-grey-100 flex justify-between items-center px-1 ">
+                        <div className="flex gap-2 py-2">
+                            {hashtags.slice(0, 4).map((tag, index) => (
+                                <button
+                                    key={index}
+                                    onClick={() =>
+                                        handleTagClick(tag.substring(1))
+                                    }
+                                    className="bg-gray-200 text-black rounded-full px-4 py-1 text-sm focus:outline-none">
+                                    {tag.substring(1)}
+                                </button>
+                            ))}
+                        </div>
+
+                        <span className="text-xs text-gray-500">
+                            {timeDifference.duration}
+                            {timeDifference.unit}
+                        </span>
+                    </div>
+
+                    <div className="border-x border-grey-100">
+                        <h3 className="font-bold font-nunito px-1">
+                            {titleWithLinks}
+                        </h3>
+                    </div>
 
                     <div className="border-t border-grey-100 rounded-b-md "></div>
                 </div>