From 669d90d7fe703c8d3305bb0eedb158c463aa029f Mon Sep 17 00:00:00 2001 From: appala venkata avinash Date: Wed, 27 Mar 2024 00:04:26 +0530 Subject: [PATCH 1/4] Added Trending Memes Sidebar --- src/components/Feed/index.js | 2 +- src/components/HashtagTool/TrendingSideBar.js | 122 ++++++++++++++++++ src/components/HashtagTool/index.js | 2 + src/components/Login/index.js | 47 +------ tailwind.config.js | 1 + 5 files changed, 131 insertions(+), 43 deletions(-) create mode 100644 src/components/HashtagTool/TrendingSideBar.js diff --git a/src/components/Feed/index.js b/src/components/Feed/index.js index adbc04c..e69e4a1 100644 --- a/src/components/Feed/index.js +++ b/src/components/Feed/index.js @@ -34,7 +34,7 @@ function Feed(props) { const loadMoreRef = useIntersectionObserver(props.onLoadMore); const triggerPoint = Math.max(0, props.notes.length - 10); return ( -
+
{props.notes.map((note, index) => (
diff --git a/src/components/HashtagTool/TrendingSideBar.js b/src/components/HashtagTool/TrendingSideBar.js new file mode 100644 index 0000000..d09ee7f --- /dev/null +++ b/src/components/HashtagTool/TrendingSideBar.js @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { ReactComponent as SearchSVG } from '../../Icons/SearchIconBlack.svg'; + +function TrendingSidebar() { + const suggestions = [ + 'bitcoin', + 'nostr', + 'grownstr', + 'plebchain', + 'siamstr', + 'btc', + 'meme', + 'privacy', + 'security', + 'memes', + 'tunestr', + 'music', + 'coffeechain', + 'press', + 'presse', + 'memestr', + 'photography', + 'funny', + 'france', + 'artstr', + 'foodstr', + 'news', + 'btcprague', + 'sats', + 'zaps', + 'china', + 'permaculture', + 'inflation', + 'primal', + 'plebs', + 'permies', + 'photestr', + 'homesteading', + 'bible', + 'biblestr', + 'christian', + 'crypto', + 'yestr', + 'new', + 'thainostrich', + 'nostrich', + 'wisdom', + 'hodl', + 'us', + 'dance', + ]; + + const [searchQuery, setSearchQuery] = useState(''); + const handleSearchChange = event => { + setSearchQuery(event.target.value); + }; + + const handleSearchSubmit = event => { + event.preventDefault(); + if (searchQuery.trim().length > 0) { + navigate(`/search/${searchQuery.trim()}`); + setSearchQuery(''); + } + }; + const [showAll, setShowAll] = useState(false); + const navigate = useNavigate(); + const handleTagClick = tag => { + navigate(`/search/${tag}`); + }; + const displayedSuggestions = showAll + ? suggestions + : suggestions.slice(0, 5); + + return ( + + ); +} +export default TrendingSidebar; diff --git a/src/components/HashtagTool/index.js b/src/components/HashtagTool/index.js index 9539c42..88a1c2c 100644 --- a/src/components/HashtagTool/index.js +++ b/src/components/HashtagTool/index.js @@ -3,6 +3,7 @@ import { relayInit, SimplePool } from 'nostr-tools'; import Feed from '../Feed'; import PostUpload from '../Post/newPost'; import Spinner from '../Spinner'; +import TrendingSidebar from './TrendingSideBar'; import Sidebar from './SideBar'; import { ReactComponent as UploadSvg } from '../../Icons/UploadSvg.svg'; @@ -309,6 +310,7 @@ export function HashtagTool() { /> )} +
); diff --git a/src/components/Login/index.js b/src/components/Login/index.js index 18d50e6..299e57d 100644 --- a/src/components/Login/index.js +++ b/src/components/Login/index.js @@ -1,11 +1,9 @@ import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; import './profile.css'; import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools'; import Menu from '../Menu'; import DropdownComponent from '../LoginDropDownComponent/DropDownComponent'; import { ReactComponent as Memestr } from '../../Icons/MemestrLogo.svg'; -import { ReactComponent as SearchSVG } from '../../Icons/SearchIconBlack.svg'; export function generateNewKeys() { const pk = generatePrivateKey(); @@ -22,20 +20,6 @@ function HeaderBar({ isSearchVisible }) { const [prevScrollY, setPrevScrollY] = useState(0); const scrollThreshold = 100; - const navigate = useNavigate(); - const [searchQuery, setSearchQuery] = useState(''); - const handleSearchChange = event => { - setSearchQuery(event.target.value); - }; - - const handleSearchSubmit = event => { - event.preventDefault(); - if (searchQuery.trim().length > 0) { - navigate(`/search/${searchQuery.trim()}`); - setSearchQuery(''); - } - }; - useEffect(() => { const handleScroll = () => { const scrollY = window.scrollY; @@ -57,7 +41,7 @@ function HeaderBar({ isSearchVisible }) { }; }, [prevScrollY]); - const headerClasses = `fixed w-full top-0 h-14 bg-white z-50 text-gray-700 border-b border-gray-200 ${ + const headerClasses = `fixed w-full top-0 h-14 bg-white z-50 text-gray-700 border-b border-gray-200 ${ !isScrolled || isSearchVisible ? 'transition-transform transform -translate-y-full ease-in-out duration-300' : '' @@ -65,37 +49,16 @@ function HeaderBar({ isSearchVisible }) { return (
-
-
+
+
-
+
-
-
-
- - -
-
+
diff --git a/tailwind.config.js b/tailwind.config.js index 6b0dba2..d43142f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { }, colors: { customBlue: '#09376B', + customGray: '#F7F9F9', }, }, }, From 8d579c0e3e767fbf4e3b3c1a117add201f189f55 Mon Sep 17 00:00:00 2001 From: appala venkata avinash Date: Wed, 27 Mar 2024 11:09:56 +0530 Subject: [PATCH 2/4] Modified z-index of post upload button --- src/components/HashtagTool/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/HashtagTool/index.js b/src/components/HashtagTool/index.js index 88a1c2c..b3b46ef 100644 --- a/src/components/HashtagTool/index.js +++ b/src/components/HashtagTool/index.js @@ -299,7 +299,8 @@ export function HashtagTool() { From 5d1392ed97c81c5e5121e4155cb707b1eb6134cb Mon Sep 17 00:00:00 2001 From: appala venkata avinash Date: Fri, 29 Mar 2024 00:07:23 +0530 Subject: [PATCH 3/4] Modified trending side bar design --- src/components/HashtagTool/TrendingSideBar.js | 81 +++++-------------- src/components/Login/index.js | 49 +++++++++-- 2 files changed, 61 insertions(+), 69 deletions(-) diff --git a/src/components/HashtagTool/TrendingSideBar.js b/src/components/HashtagTool/TrendingSideBar.js index d09ee7f..00f61bc 100644 --- a/src/components/HashtagTool/TrendingSideBar.js +++ b/src/components/HashtagTool/TrendingSideBar.js @@ -1,16 +1,15 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useNavigate } from 'react-router-dom'; -import { ReactComponent as SearchSVG } from '../../Icons/SearchIconBlack.svg'; function TrendingSidebar() { const suggestions = [ - 'bitcoin', + 'meme', 'nostr', 'grownstr', + 'bitcoin', 'plebchain', 'siamstr', 'btc', - 'meme', 'privacy', 'security', 'memes', @@ -50,71 +49,27 @@ function TrendingSidebar() { 'us', 'dance', ]; - - const [searchQuery, setSearchQuery] = useState(''); - const handleSearchChange = event => { - setSearchQuery(event.target.value); - }; - - const handleSearchSubmit = event => { - event.preventDefault(); - if (searchQuery.trim().length > 0) { - navigate(`/search/${searchQuery.trim()}`); - setSearchQuery(''); - } - }; - const [showAll, setShowAll] = useState(false); const navigate = useNavigate(); - const handleTagClick = tag => { - navigate(`/search/${tag}`); + const handleTagClick = suggestions => { + navigate(`/search/${suggestions}`); }; - const displayedSuggestions = showAll - ? suggestions - : suggestions.slice(0, 5); return ( -