From 9d635d472e4ec8fc0f192d4c8cf358f3b6494850 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 25 Apr 2023 18:19:55 +0700 Subject: [PATCH] add muted popover --- src/components/channels/channelBlackList.tsx | 52 +++++++++++++++ .../channels/updateChannelModal.tsx | 4 +- src/components/user/muted.tsx | 65 +++++++++++++++++++ src/pages/channel/index.page.tsx | 18 ++--- src/utils/storage.tsx | 10 ++- tailwind.config.js | 1 + 6 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 src/components/channels/channelBlackList.tsx create mode 100644 src/components/user/muted.tsx diff --git a/src/components/channels/channelBlackList.tsx b/src/components/channels/channelBlackList.tsx new file mode 100644 index 00000000..8934c236 --- /dev/null +++ b/src/components/channels/channelBlackList.tsx @@ -0,0 +1,52 @@ +import { UserMuted } from '@components/user/muted'; + +import { Popover, Transition } from '@headlessui/react'; +import { MicMute } from 'iconoir-react'; +import { Fragment } from 'react'; + +export const ChannelBlackList = ({ blacklist }: { blacklist: any }) => { + return ( + + {({ open }) => ( + <> + + + + + +
+
+
+

+ Your muted list +

+

+ Currently, unmute only affect locally, when you move to new client, muted list will loaded again +

+
+
+
+ {blacklist.map((item: any) => ( + + ))} +
+
+ + + + )} + + ); +}; diff --git a/src/components/channels/updateChannelModal.tsx b/src/components/channels/updateChannelModal.tsx index 3522bc88..804455de 100644 --- a/src/components/channels/updateChannelModal.tsx +++ b/src/components/channels/updateChannelModal.tsx @@ -125,8 +125,8 @@ export const UpdateChannelModal = ({ id }: { id: string }) => { - Channels are freedom square, everyone can speech freely, no one can stop you or deceive what to - speech + New metadata will be published on all relays, and will be immediately available to all users, so + please carefully. diff --git a/src/components/user/muted.tsx b/src/components/user/muted.tsx new file mode 100644 index 00000000..6a7abab7 --- /dev/null +++ b/src/components/user/muted.tsx @@ -0,0 +1,65 @@ +import { DEFAULT_AVATAR } from '@stores/constants'; + +import { useProfileMetadata } from '@utils/hooks/useProfileMetadata'; +import { shortenKey } from '@utils/shortenKey'; + +import { useState } from 'react'; + +export const UserMuted = ({ data }: { data: any }) => { + const profile = useProfileMetadata(data.content); + const [status, setStatus] = useState(data.status); + + const unmute = async () => { + const { updateItemInBlacklist } = await import('@utils/storage'); + const res = await updateItemInBlacklist(data.content, 0); + if (res) { + setStatus(0); + } + }; + + const mute = async () => { + const { updateItemInBlacklist } = await import('@utils/storage'); + const res = await updateItemInBlacklist(data.content, 1); + if (res) { + setStatus(1); + } + }; + + return ( +
+
+
+ {data.content} +
+
+ + {profile?.display_name || profile?.name} + + {shortenKey(data.content)} +
+
+
+ {status === 1 ? ( + + ) : ( + + )} +
+
+ ); +}; diff --git a/src/pages/channel/index.page.tsx b/src/pages/channel/index.page.tsx index 5f395ec0..b51faf6d 100644 --- a/src/pages/channel/index.page.tsx +++ b/src/pages/channel/index.page.tsx @@ -1,4 +1,5 @@ import { AccountContext } from '@components/accountProvider'; +import { ChannelBlackList } from '@components/channels/channelBlackList'; import { ChannelProfile } from '@components/channels/channelProfile'; import { UpdateChannelModal } from '@components/channels/updateChannelModal'; import { FormChannel } from '@components/form/channel'; @@ -12,7 +13,6 @@ import { dateToUnix, hoursAgo } from '@utils/getDate'; import { usePageContext } from '@utils/hooks/usePageContext'; import { arrayObjToPureArr } from '@utils/transform'; -import { EyeClose } from 'iconoir-react'; import { useSetAtom } from 'jotai'; import { useResetAtom } from 'jotai/utils'; import { Suspense, lazy, useContext, useRef } from 'react'; @@ -21,12 +21,14 @@ import useSWRSubscription from 'swr/subscription'; const ChannelMessages = lazy(() => import('@components/channels/messages')); let mutedList: any = []; -let hidedList: any = []; +let activeMutedList: any = []; +let activeHidedList: any = []; if (typeof window !== 'undefined') { - const { getBlacklist, getActiveAccount } = await import('@utils/storage'); + const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@utils/storage'); const activeAccount = await getActiveAccount(); - hidedList = await getBlacklist(activeAccount.id, 43); + activeHidedList = await getActiveBlacklist(activeAccount.id, 43); + activeMutedList = await getActiveBlacklist(activeAccount.id, 44); mutedList = await getBlacklist(activeAccount.id, 44); } @@ -45,8 +47,8 @@ export function Page() { const resetChannelReply = useResetAtom(channelReplyAtom); const now = useRef(new Date()); - const hided = arrayObjToPureArr(hidedList); - const muted = arrayObjToPureArr(mutedList); + const hided = arrayObjToPureArr(activeHidedList); + const muted = arrayObjToPureArr(activeMutedList); useSWRSubscription(id, () => { // reset channel reply @@ -87,9 +89,7 @@ export function Page() {
-
- -
+ {activeAccount.pubkey === channelPubkey && }
diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx index 4f308e50..ff774865 100644 --- a/src/utils/storage.tsx +++ b/src/utils/storage.tsx @@ -174,7 +174,15 @@ export async function updateLastLogin(value: number) { // get blacklist by kind and account id export async function getBlacklist(account_id: number, kind: number) { const db = await connect(); - return await db.select(`SELECT content FROM blacklist WHERE account_id = "${account_id}" AND kind = "${kind}";`); + return await db.select(`SELECT * FROM blacklist WHERE account_id = "${account_id}" AND kind = "${kind}";`); +} + +// get active blacklist by kind and account id +export async function getActiveBlacklist(account_id: number, kind: number) { + const db = await connect(); + return await db.select( + `SELECT content FROM blacklist WHERE account_id = "${account_id}" AND kind = "${kind}" AND status = 1;` + ); } // add to blacklist diff --git a/tailwind.config.js b/tailwind.config.js index 28957051..49e92342 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,6 +25,7 @@ module.exports = { inset 0 0 0 0.3px hsl(0deg 0% 100% / 30%), 0 0 0 0.5px hsl(0deg 0% 100% / 40%); `, + popover: `0px 0px 7px rgba(0,0,0,0.52)`, inner: ` 0 2px 2px rgb(4 4 7 / 45%), 0 8px 24px rgb(4 4 7 / 60%)