From 740dc85f13e80432d78c9baa30f0c17e33f66eca Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Mon, 24 Apr 2023 09:05:59 +0700 Subject: [PATCH] add active link --- package.json | 1 + pnpm-lock.yaml | 7 +++++ src/components/activeLink.tsx | 32 +++++++++++++++++++++ src/components/channels/channelListItem.tsx | 20 +++++++++++-- src/components/chats/chatListItem.tsx | 12 +++++++- src/components/link.tsx | 12 -------- src/components/navigation/newsfeed.tsx | 14 +++++---- 7 files changed, 76 insertions(+), 22 deletions(-) create mode 100644 src/components/activeLink.tsx delete mode 100644 src/components/link.tsx diff --git a/package.json b/package.json index a59fe67c..e6b11e4b 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-string-replace": "^1.1.0", "react-virtuoso": "^4.3.1", "swr": "^2.1.4", + "tailwind-merge": "^1.12.0", "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c0ce8d9..c9a1993e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,7 @@ specifiers: react-string-replace: ^1.1.0 react-virtuoso: ^4.3.1 swr: ^2.1.4 + tailwind-merge: ^1.12.0 tailwindcss: ^3.3.1 tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql typescript: ^4.9.5 @@ -82,6 +83,7 @@ dependencies: react-string-replace: 1.1.0 react-virtuoso: 4.3.1_biqbaboplfbrettd7655fr4n2y swr: 2.1.4_react@18.2.0 + tailwind-merge: 1.12.0 tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23 devDependencies: @@ -4433,6 +4435,11 @@ packages: use-sync-external-store: 1.2.0_react@18.2.0 dev: false + /tailwind-merge/1.12.0: + resolution: + { integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== } + dev: false + /tailwindcss/3.3.1_postcss@8.4.23: resolution: { integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== } diff --git a/src/components/activeLink.tsx b/src/components/activeLink.tsx new file mode 100644 index 00000000..2ce4a170 --- /dev/null +++ b/src/components/activeLink.tsx @@ -0,0 +1,32 @@ +import { usePageContext } from '@utils/hooks/usePageContext'; + +import { twMerge } from 'tailwind-merge'; + +export function ActiveLink({ + href, + className, + activeClassName, + children, +}: { + href: string; + className: string; + activeClassName: string; + children: React.ReactNode; +}) { + const pageContext = usePageContext(); + const pathName = pageContext.urlPathname; + + let newClassName = ''; + + if (href === pathName) { + newClassName = activeClassName; + } else { + newClassName = ''; + } + + return ( + + {children} + + ); +} diff --git a/src/components/channels/channelListItem.tsx b/src/components/channels/channelListItem.tsx index 3818f87d..f734c9c7 100644 --- a/src/components/channels/channelListItem.tsx +++ b/src/components/channels/channelListItem.tsx @@ -1,20 +1,34 @@ import { DEFAULT_AVATAR } from '@stores/constants'; import { useChannelMetadata } from '@utils/hooks/useChannelMetadata'; +import { usePageContext } from '@utils/hooks/usePageContext'; + +import { twMerge } from 'tailwind-merge'; export const ChannelListItem = ({ data }: { data: any }) => { const channel = useChannelMetadata(data.event_id, data.metadata); + const pageContext = usePageContext(); + + const searchParams: any = pageContext.urlParsed.search; + const pageID = searchParams.id; return (
- {data.event_id} + {data.event_id}
-
{channel?.name.toLowerCase()}
+
{channel?.name}
 ); diff --git a/src/components/chats/chatListItem.tsx b/src/components/chats/chatListItem.tsx index 32cdc1ab..893dcca9 100644 --- a/src/components/chats/chatListItem.tsx +++ b/src/components/chats/chatListItem.tsx @@ -1,15 +1,25 @@ import { DEFAULT_AVATAR } from '@stores/constants'; +import { usePageContext } from '@utils/hooks/usePageContext'; import { useProfileMetadata } from '@utils/hooks/useProfileMetadata'; import { shortenKey } from '@utils/shortenKey'; +import { twMerge } from 'tailwind-merge'; + export const ChatListItem = ({ pubkey }: { pubkey: string }) => { const profile = useProfileMetadata(pubkey); + const pageContext = usePageContext(); + + const searchParams: any = pageContext.urlParsed.search; + const pagePubkey = searchParams.pubkey; return (
{pubkey} diff --git a/src/components/link.tsx b/src/components/link.tsx deleted file mode 100644 index 93b3181c..00000000 --- a/src/components/link.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { usePageContext } from '@utils/hooks/usePageContext'; - -import { AnchorHTMLAttributes, ClassAttributes } from 'react'; - -export function Link( - props: JSX.IntrinsicAttributes & ClassAttributes & AnchorHTMLAttributes, - activeClass: string -) { - const pageContext = usePageContext(); - const className = [props.className, pageContext.urlPathname === props.href && activeClass].filter(Boolean).join(' '); - return ; -} diff --git a/src/components/navigation/newsfeed.tsx b/src/components/navigation/newsfeed.tsx index 1efb5d3b..2655c5c9 100644 --- a/src/components/navigation/newsfeed.tsx +++ b/src/components/navigation/newsfeed.tsx @@ -1,3 +1,5 @@ +import { ActiveLink } from '@components/activeLink'; + import * as Collapsible from '@radix-ui/react-collapsible'; import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react'; import { useState } from 'react'; @@ -19,22 +21,22 @@ export default function Newsfeed() {

Newsfeed

- Following - - + Circle - +