From 5a7389b7e8118e8f6a2b9b5845a0757c84e16547 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Fri, 21 Apr 2023 08:20:12 +0700 Subject: [PATCH] updated image picker --- src/components/channels/messages/item.tsx | 6 +++++- src/components/form/base.tsx | 2 +- src/components/form/channel.tsx | 19 +++++++++-------- src/components/form/chat.tsx | 22 ++++++++++++------- src/components/form/imagePicker.tsx | 26 +++++++++++++++++++---- src/stores/channel.tsx | 3 +++ src/stores/chat.tsx | 3 +++ 7 files changed, 58 insertions(+), 23 deletions(-) diff --git a/src/components/channels/messages/item.tsx b/src/components/channels/messages/item.tsx index 7aae21ac..a2fb5769 100644 --- a/src/components/channels/messages/item.tsx +++ b/src/components/channels/messages/item.tsx @@ -3,9 +3,13 @@ import { MuteButton } from '@components/channels/messages/muteButton'; import { ReplyButton } from '@components/channels/messages/replyButton'; import { MessageUser } from '@components/chats/messageUser'; +import { messageParser } from '@utils/parser'; + import { memo } from 'react'; const ChannelMessageItem = ({ data }: { data: any }) => { + const content = messageParser(data.content); + return (
@@ -13,7 +17,7 @@ const ChannelMessageItem = ({ data }: { data: any }) => {
- {data.content} + {content}
diff --git a/src/components/form/base.tsx b/src/components/form/base.tsx index 9b3e1609..ee65d252 100644 --- a/src/components/form/base.tsx +++ b/src/components/form/base.tsx @@ -53,7 +53,7 @@ export default function FormBase() {
- +
diff --git a/src/components/form/channel.tsx b/src/components/form/channel.tsx index fcb5b373..c1eccbf7 100644 --- a/src/components/form/channel.tsx +++ b/src/components/form/channel.tsx @@ -1,30 +1,31 @@ -import ImagePicker from '@components/form/imagePicker'; +import { ImagePicker } from '@components/form/imagePicker'; import { RelayContext } from '@components/relaysProvider'; import { UserMini } from '@components/user/mini'; -import { channelReplyAtom } from '@stores/channel'; +import { channelContentAtom, channelReplyAtom } from '@stores/channel'; import { FULL_RELAYS } from '@stores/constants'; import { dateToUnix } from '@utils/getDate'; import useLocalStorage from '@rehooks/local-storage'; import { Cancel } from 'iconoir-react'; -import { useAtomValue } from 'jotai'; +import { useAtom, useAtomValue } from 'jotai'; import { useResetAtom } from 'jotai/utils'; import { getEventHash, signEvent } from 'nostr-tools'; -import { useCallback, useContext, useState } from 'react'; +import { useCallback, useContext } from 'react'; export const FormChannel = ({ eventId }: { eventId: string | string[] }) => { const [pool, relays]: any = useContext(RelayContext); - - const [value, setValue] = useState(''); const [activeAccount]: any = useLocalStorage('account', {}); + const [value, setValue] = useAtom(channelContentAtom); + const resetValue = useResetAtom(channelContentAtom); + const channelReply = useAtomValue(channelReplyAtom); const resetChannelReply = useResetAtom(channelReplyAtom); const submitEvent = useCallback(() => { - let tags; + let tags: any[][]; if (channelReply.id !== null) { tags = [ @@ -49,7 +50,7 @@ export const FormChannel = ({ eventId }: { eventId: string | string[] }) => { // publish note pool.publish(event, FULL_RELAYS); // reset state - setValue(''); + resetValue(); // reset channel reply resetChannelReply(); }, [ @@ -112,7 +113,7 @@ export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
- +
diff --git a/src/components/form/chat.tsx b/src/components/form/chat.tsx index 939e0f3f..3879a6a5 100644 --- a/src/components/form/chat.tsx +++ b/src/components/form/chat.tsx @@ -1,18 +1,24 @@ -import ImagePicker from '@components/form/imagePicker'; +import { ImagePicker } from '@components/form/imagePicker'; import { RelayContext } from '@components/relaysProvider'; +import { chatContentAtom } from '@stores/chat'; +import { FULL_RELAYS } from '@stores/constants'; + import { dateToUnix } from '@utils/getDate'; import useLocalStorage from '@rehooks/local-storage'; +import { useAtom } from 'jotai'; +import { useResetAtom } from 'jotai/utils'; import { getEventHash, nip04, signEvent } from 'nostr-tools'; -import { useCallback, useContext, useState } from 'react'; +import { useCallback, useContext } from 'react'; export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) { const [pool, relays]: any = useContext(RelayContext); - - const [value, setValue] = useState(''); const [activeAccount]: any = useLocalStorage('account', {}); + const [value, setValue] = useAtom(chatContentAtom); + const resetValue = useResetAtom(chatContentAtom); + const encryptMessage = useCallback( async (privkey: string) => { return await nip04.encrypt(privkey, receiverPubkey, value); @@ -33,12 +39,12 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) event.id = getEventHash(event); event.sig = signEvent(event, activeAccount.privkey); // publish note - pool.publish(event, relays); + pool.publish(event, FULL_RELAYS); // reset state - setValue(''); + resetValue(); }) .catch(console.error); - }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool, relays]); + }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool]); const handleEnterPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -62,7 +68,7 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
- +
diff --git a/src/components/form/imagePicker.tsx b/src/components/form/imagePicker.tsx index 9f904c60..e234ab2a 100644 --- a/src/components/form/imagePicker.tsx +++ b/src/components/form/imagePicker.tsx @@ -1,3 +1,5 @@ +import { channelContentAtom } from '@stores/channel'; +import { chatContentAtom } from '@stores/chat'; import { noteContentAtom } from '@stores/note'; import { createBlobFromFile } from '@utils/createBlobFromFile'; @@ -8,9 +10,25 @@ import { Plus } from 'iconoir-react'; import { useSetAtom } from 'jotai'; import { useState } from 'react'; -export const ImagePicker = () => { +export const ImagePicker = ({ type }: { type: string }) => { + let atom; + + switch (type) { + case 'note': + atom = noteContentAtom; + break; + case 'chat': + atom = chatContentAtom; + break; + case 'channel': + atom = channelContentAtom; + break; + default: + throw new Error('Invalid type'); + } + const [loading, setLoading] = useState(false); - const setNoteContent = useSetAtom(noteContentAtom); + const setValue = useSetAtom(atom); const openFileDialog = async () => { const selected: any = await open({ @@ -18,7 +36,7 @@ export const ImagePicker = () => { filters: [ { name: 'Image', - extensions: ['png', 'jpeg', 'jpg', 'webp', 'avif'], + extensions: ['png', 'jpeg', 'jpg', 'gif'], }, ], }); @@ -47,7 +65,7 @@ export const ImagePicker = () => { }); const webpImage = 'https://void.cat/d/' + res.data.file.id + '.webp'; - setNoteContent((content) => content + ' ' + webpImage); + setValue((content: string) => content + ' ' + webpImage); setLoading(false); } }; diff --git a/src/stores/channel.tsx b/src/stores/channel.tsx index e76ae9d6..eb670587 100644 --- a/src/stores/channel.tsx +++ b/src/stores/channel.tsx @@ -9,3 +9,6 @@ export const sortedChannelMessagesAtom = atom((get) => { const messages = get(channelMessagesAtom); return messages.sort((x: { created_at: number }, y: { created_at: number }) => x.created_at - y.created_at); }); + +// channel message content +export const channelContentAtom = atomWithReset(''); diff --git a/src/stores/chat.tsx b/src/stores/chat.tsx index a16559f2..cfa20e02 100644 --- a/src/stores/chat.tsx +++ b/src/stores/chat.tsx @@ -6,3 +6,6 @@ export const sortedChatMessagesAtom = atom((get) => { const messages = get(chatMessagesAtom); return messages.sort((x: { created_at: number }, y: { created_at: number }) => x.created_at - y.created_at); }); + +// chat content +export const chatContentAtom = atomWithReset('');