mirror of
https://github.com/lumehq/lume.git
synced 2025-04-05 10:28:06 +02:00
updated create channel modal
This commit is contained in:
Ren Amamiya
parent
13a2950b03
commit
bb944ab683
@ -44,7 +44,7 @@
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"@tauri-apps/cli": "^1.2.3",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
||||
"@types/node": "^18.15.13",
|
||||
"@types/node": "^18.16.0",
|
||||
"@types/react": "^18.0.38",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
@ -62,7 +62,7 @@
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.1",
|
||||
"postcss": "^8.4.23",
|
||||
"prettier": "^2.8.7",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
||||
"prop-types": "^15.8.1",
|
||||
"tailwindcss": "^3.3.1",
|
||||
|
||||
46
pnpm-lock.yaml
generated
46
pnpm-lock.yaml
generated
@ -14,7 +14,7 @@ specifiers:
|
||||
'@tauri-apps/api': ^1.2.0
|
||||
'@tauri-apps/cli': ^1.2.3
|
||||
'@trivago/prettier-plugin-sort-imports': ^4.1.1
|
||||
'@types/node': ^18.15.13
|
||||
'@types/node': ^18.16.0
|
||||
'@types/react': ^18.0.38
|
||||
'@types/react-dom': ^18.0.11
|
||||
'@typescript-eslint/eslint-plugin': ^5.59.0
|
||||
@ -38,7 +38,7 @@ specifiers:
|
||||
nostr-relaypool: ^0.5.18
|
||||
nostr-tools: ^1.10.1
|
||||
postcss: ^8.4.23
|
||||
prettier: ^2.8.7
|
||||
prettier: ^2.8.8
|
||||
prettier-plugin-tailwindcss: ^0.2.7
|
||||
prop-types: ^15.8.1
|
||||
react: ^18.2.0
|
||||
@ -88,8 +88,8 @@ dependencies:
|
||||
devDependencies:
|
||||
'@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
|
||||
'@tauri-apps/cli': 1.2.3
|
||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
|
||||
'@types/node': 18.15.13
|
||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
|
||||
'@types/node': 18.16.0
|
||||
'@types/react': 18.0.38
|
||||
'@types/react-dom': 18.0.11
|
||||
'@typescript-eslint/eslint-plugin': 5.59.0_p5urazbkpxqwbpulw3y4eskliy
|
||||
@ -107,12 +107,12 @@ devDependencies:
|
||||
husky: 8.0.3
|
||||
lint-staged: 13.2.1
|
||||
postcss: 8.4.23
|
||||
prettier: 2.8.7
|
||||
prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
|
||||
prettier: 2.8.8
|
||||
prettier-plugin-tailwindcss: 0.2.7_vx2i665krt45esupzuhn5o4zsy
|
||||
prop-types: 15.8.1
|
||||
tailwindcss: 3.3.1_postcss@8.4.23
|
||||
typescript: 4.9.5
|
||||
vite: 4.3.1_@types+node@18.15.13
|
||||
vite: 4.3.1_@types+node@18.16.0
|
||||
vite-plugin-ssr: 0.4.115_vite@4.3.1
|
||||
vite-plugin-top-level-await: 1.3.0_vite@4.3.1
|
||||
vite-tsconfig-paths: 4.2.0_mzhihm7zd2gyalpll4qoudvuha
|
||||
@ -1541,7 +1541,7 @@ packages:
|
||||
'@tauri-apps/cli-win32-x64-msvc': 1.2.3
|
||||
dev: true
|
||||
|
||||
/@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.7:
|
||||
/@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.8:
|
||||
resolution:
|
||||
{ integrity: sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw== }
|
||||
peerDependencies:
|
||||
@ -1557,7 +1557,7 @@ packages:
|
||||
'@babel/types': 7.17.0
|
||||
javascript-natural-sort: 0.7.1
|
||||
lodash: 4.17.21
|
||||
prettier: 2.8.7
|
||||
prettier: 2.8.8
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
@ -1572,9 +1572,9 @@ packages:
|
||||
{ integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== }
|
||||
dev: true
|
||||
|
||||
/@types/node/18.15.13:
|
||||
/@types/node/18.16.0:
|
||||
resolution:
|
||||
{ integrity: sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q== }
|
||||
{ integrity: sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ== }
|
||||
|
||||
/@types/phoenix/1.5.6:
|
||||
resolution:
|
||||
@ -1613,7 +1613,7 @@ packages:
|
||||
resolution:
|
||||
{ integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ== }
|
||||
dependencies:
|
||||
'@types/node': 18.15.13
|
||||
'@types/node': 18.16.0
|
||||
dev: false
|
||||
|
||||
/@typescript-eslint/eslint-plugin/5.59.0_p5urazbkpxqwbpulw3y4eskliy:
|
||||
@ -1761,7 +1761,7 @@ packages:
|
||||
vite: ^4
|
||||
dependencies:
|
||||
'@swc/core': 1.3.53
|
||||
vite: 4.3.1_@types+node@18.15.13
|
||||
vite: 4.3.1_@types+node@18.16.0
|
||||
transitivePeerDependencies:
|
||||
- '@swc/helpers'
|
||||
dev: true
|
||||
@ -4258,7 +4258,7 @@ packages:
|
||||
engines: { node: '>= 0.8.0' }
|
||||
dev: true
|
||||
|
||||
/prettier-plugin-tailwindcss/0.2.7_yk5p2qt6yzw3zyyilt4azle7eu:
|
||||
/prettier-plugin-tailwindcss/0.2.7_vx2i665krt45esupzuhn5o4zsy:
|
||||
resolution:
|
||||
{ integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w== }
|
||||
engines: { node: '>=12.17.0' }
|
||||
@ -4311,13 +4311,13 @@ packages:
|
||||
prettier-plugin-twig-melody:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
|
||||
prettier: 2.8.7
|
||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
|
||||
prettier: 2.8.8
|
||||
dev: true
|
||||
|
||||
/prettier/2.8.7:
|
||||
/prettier/2.8.8:
|
||||
resolution:
|
||||
{ integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw== }
|
||||
{ integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== }
|
||||
engines: { node: '>=10.13.0' }
|
||||
hasBin: true
|
||||
dev: true
|
||||
@ -5214,7 +5214,7 @@ packages:
|
||||
fast-glob: 3.2.12
|
||||
picocolors: 1.0.0
|
||||
sirv: 2.0.2
|
||||
vite: 4.3.1_@types+node@18.15.13
|
||||
vite: 4.3.1_@types+node@18.16.0
|
||||
dev: true
|
||||
|
||||
/vite-plugin-top-level-await/1.3.0_vite@4.3.1:
|
||||
@ -5226,7 +5226,7 @@ packages:
|
||||
'@rollup/plugin-virtual': 3.0.1
|
||||
'@swc/core': 1.3.53
|
||||
uuid: 9.0.0
|
||||
vite: 4.3.1_@types+node@18.15.13
|
||||
vite: 4.3.1_@types+node@18.16.0
|
||||
transitivePeerDependencies:
|
||||
- '@swc/helpers'
|
||||
- rollup
|
||||
@ -5244,13 +5244,13 @@ packages:
|
||||
debug: 4.3.4
|
||||
globrex: 0.1.2
|
||||
tsconfck: 2.1.1_typescript@4.9.5
|
||||
vite: 4.3.1_@types+node@18.15.13
|
||||
vite: 4.3.1_@types+node@18.16.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
- typescript
|
||||
dev: true
|
||||
|
||||
/vite/4.3.1_@types+node@18.15.13:
|
||||
/vite/4.3.1_@types+node@18.16.0:
|
||||
resolution:
|
||||
{ integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg== }
|
||||
engines: { node: ^14.18.0 || >=16.0.0 }
|
||||
@ -5276,7 +5276,7 @@ packages:
|
||||
terser:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/node': 18.15.13
|
||||
'@types/node': 18.16.0
|
||||
esbuild: 0.17.18
|
||||
postcss: 8.4.23
|
||||
rollup: 3.20.7
|
||||
|
||||
@ -2,12 +2,10 @@ import { createBlobFromFile } from '@utils/createBlobFromFile';
|
||||
|
||||
import { open } from '@tauri-apps/api/dialog';
|
||||
import { Body, fetch } from '@tauri-apps/api/http';
|
||||
import { Plus } from 'iconoir-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export const ImagePicker = () => {
|
||||
export const AvatarUploader = ({ valueState }: { valueState: any }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const openFileDialog = async () => {
|
||||
const selected: any = await open({
|
||||
@ -44,17 +42,16 @@ export const ImagePicker = () => {
|
||||
});
|
||||
const webpImage = 'https://void.cat/d/' + res.data.file.id + '.webp';
|
||||
|
||||
setValue(webpImage);
|
||||
valueState(webpImage);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
console.log(value);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => openFileDialog()}
|
||||
className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
|
||||
type="button"
|
||||
className="inline-flex h-6 cursor-pointer items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
|
||||
>
|
||||
{loading ? (
|
||||
<svg
|
||||
@ -71,7 +68,7 @@ export const ImagePicker = () => {
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<Plus width={16} height={16} className="text-zinc-400" />
|
||||
<span className="leading-none">Upload</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { AvatarUploader } from '@components/avatarUploader';
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
|
||||
import { defaultChannelsAtom } from '@stores/channel';
|
||||
import { FULL_RELAYS } from '@stores/constants';
|
||||
import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
|
||||
|
||||
import { dateToUnix } from '@utils/getDate';
|
||||
import { createChannel } from '@utils/storage';
|
||||
@ -11,19 +12,22 @@ import useLocalStorage from '@rehooks/local-storage';
|
||||
import { Cancel, Plus } from 'iconoir-react';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { getEventHash, signEvent } from 'nostr-tools';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
export const CreateChannelModal = () => {
|
||||
const [pool]: any = useContext(RelayContext);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeAccount]: any = useLocalStorage('account', {});
|
||||
const [image, setImage] = useState(DEFAULT_AVATAR);
|
||||
|
||||
const setChannel = useSetAtom(defaultChannelsAtom);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isDirty, isValid },
|
||||
} = useForm();
|
||||
|
||||
@ -37,6 +41,7 @@ export const CreateChannelModal = () => {
|
||||
};
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, activeAccount.privkey);
|
||||
console.log(event);
|
||||
|
||||
// publish channel
|
||||
pool.publish(event, FULL_RELAYS);
|
||||
@ -57,6 +62,10 @@ export const CreateChannelModal = () => {
|
||||
reset();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setValue('picture', image);
|
||||
}, [setValue, image]);
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
@ -82,6 +91,7 @@ export const CreateChannelModal = () => {
|
||||
</h5>
|
||||
<Dialog.Close asChild>
|
||||
<button
|
||||
type="button"
|
||||
autoFocus={false}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
@ -97,6 +107,21 @@ export const CreateChannelModal = () => {
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex h-full w-full flex-col gap-4">
|
||||
<input
|
||||
type={'hidden'}
|
||||
{...register('picture')}
|
||||
value={image}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
|
||||
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
|
||||
<img src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
|
||||
<div className="absolute bottom-3 right-3 z-10">
|
||||
<AvatarUploader valueState={setImage} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
|
||||
Channel name *
|
||||
@ -110,17 +135,6 @@ export const CreateChannelModal = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
|
||||
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('picture')}
|
||||
spellCheck={false}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Description</label>
|
||||
<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user