mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-30 00:41:00 +00:00
Merge pull request #21 from reyamir/fix/performance
Improved resource usage
This commit is contained in:
commit
8f37268e4d
@ -1,6 +1,8 @@
|
|||||||
const removeImports = require('next-remove-imports')();
|
/**
|
||||||
|
* @type {import('next').NextConfig}
|
||||||
|
*/
|
||||||
|
|
||||||
module.exports = removeImports({
|
const nextConfig = {
|
||||||
reactStrictMode: false,
|
reactStrictMode: false,
|
||||||
swcMinify: true,
|
swcMinify: true,
|
||||||
images: {
|
images: {
|
||||||
@ -9,11 +11,10 @@ module.exports = removeImports({
|
|||||||
typescript: {
|
typescript: {
|
||||||
ignoreBuildErrors: true,
|
ignoreBuildErrors: true,
|
||||||
},
|
},
|
||||||
experimental: {
|
|
||||||
scrollRestoration: true,
|
|
||||||
},
|
|
||||||
webpack: (config) => {
|
webpack: (config) => {
|
||||||
config.experiments = { ...config.experiments, topLevelAwait: true };
|
config.experiments = { ...config.experiments, topLevelAwait: true };
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
|
|
||||||
|
module.exports = nextConfig;
|
||||||
|
21
package.json
21
package.json
@ -20,28 +20,23 @@
|
|||||||
"@radix-ui/react-icons": "^1.3.0",
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
"@radix-ui/react-popover": "^1.0.5",
|
"@radix-ui/react-popover": "^1.0.5",
|
||||||
"@radix-ui/react-tabs": "^1.0.3",
|
"@radix-ui/react-tabs": "^1.0.3",
|
||||||
"@supabase/supabase-js": "^2.12.1",
|
"@supabase/supabase-js": "^2.13.0",
|
||||||
"@tanstack/query-core": "^4.27.0",
|
|
||||||
"@tanstack/react-query": "^4.28.0",
|
|
||||||
"@tanstack/react-virtual": "3.0.0-beta.54",
|
|
||||||
"@tauri-apps/api": "^1.2.0",
|
"@tauri-apps/api": "^1.2.0",
|
||||||
"boring-avatars": "^1.7.0",
|
|
||||||
"dayjs": "^1.11.7",
|
"dayjs": "^1.11.7",
|
||||||
"destr": "^1.2.2",
|
"destr": "^1.2.2",
|
||||||
"emoji-mart": "^5.5.2",
|
"emoji-mart": "^5.5.2",
|
||||||
"framer-motion": "^9.1.7",
|
"framer-motion": "^9.1.7",
|
||||||
"jotai": "^2.0.3",
|
"jotai": "^2.0.3",
|
||||||
"jotai-cache": "^0.3.0",
|
"jotai-cache": "^0.3.0",
|
||||||
"jotai-tanstack-query": "^0.6.0",
|
|
||||||
"next": "^13.2.4",
|
"next": "^13.2.4",
|
||||||
"next-remove-imports": "^1.0.10",
|
|
||||||
"nostr-relaypool": "^0.5.18",
|
"nostr-relaypool": "^0.5.18",
|
||||||
"nostr-tools": "^1.8.1",
|
"nostr-tools": "^1.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-hook-form": "^7.43.8",
|
"react-hook-form": "^7.43.9",
|
||||||
"react-player": "^2.12.0",
|
"react-player": "^2.12.0",
|
||||||
"react-string-replace": "^1.1.0",
|
"react-string-replace": "^1.1.0",
|
||||||
|
"react-virtuoso": "^4.1.1",
|
||||||
"tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
|
"tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
|
||||||
"unique-names-generator": "^4.7.1",
|
"unique-names-generator": "^4.7.1",
|
||||||
"ws": "^8.13.0"
|
"ws": "^8.13.0"
|
||||||
@ -50,14 +45,14 @@
|
|||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"@tauri-apps/cli": "^1.2.3",
|
"@tauri-apps/cli": "^1.2.3",
|
||||||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
||||||
"@types/node": "^18.15.10",
|
"@types/node": "^18.15.11",
|
||||||
"@types/react": "^18.0.30",
|
"@types/react": "^18.0.31",
|
||||||
"@types/react-dom": "^18.0.11",
|
"@types/react-dom": "^18.0.11",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||||
"@typescript-eslint/parser": "^5.57.0",
|
"@typescript-eslint/parser": "^5.57.0",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"csstype": "^3.1.1",
|
"csstype": "^3.1.1",
|
||||||
"eslint": "^8.36.0",
|
"eslint": "^8.37.0",
|
||||||
"eslint-config-next": "^13.2.4",
|
"eslint-config-next": "^13.2.4",
|
||||||
"eslint-config-prettier": "^8.8.0",
|
"eslint-config-prettier": "^8.8.0",
|
||||||
"eslint-plugin-react": "^7.32.2",
|
"eslint-plugin-react": "^7.32.2",
|
||||||
@ -66,9 +61,9 @@
|
|||||||
"lint-staged": "^13.2.0",
|
"lint-staged": "^13.2.0",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"prettier": "^2.8.7",
|
"prettier": "^2.8.7",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.5",
|
"prettier-plugin-tailwindcss": "^0.2.6",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"tailwindcss": "^3.2.7",
|
"tailwindcss": "^3.3.1",
|
||||||
"typescript": "^4.9.5"
|
"typescript": "^4.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
871
pnpm-lock.yaml
871
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
|||||||
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
|
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
|
||||||
import { platform } from '@tauri-apps/api/os';
|
import { platform } from '@tauri-apps/api/os';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { useLayoutEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function AppActions() {
|
export default function AppActions() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -19,7 +19,7 @@ export default function AppActions() {
|
|||||||
router.reload();
|
router.reload();
|
||||||
};
|
};
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useEffect(() => {
|
||||||
const getPlatform = async () => {
|
const getPlatform = async () => {
|
||||||
const result = await platform();
|
const result = await platform();
|
||||||
setOS(result);
|
setOS(result);
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import { PlusIcon } from '@radix-ui/react-icons';
|
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
const AppActions = dynamic(() => import('@components/appHeader/actions'), {
|
const AppActions = dynamic(() => import('@components/appHeader/actions'), {
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
import { createFollows } from '@utils/storage';
|
import { createFollows } from '@utils/storage';
|
||||||
import { tagsToArray } from '@utils/transform';
|
import { tagsToArray } from '@utils/transform';
|
||||||
@ -10,15 +8,13 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|||||||
import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
|
import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
|
||||||
import { writeText } from '@tauri-apps/api/clipboard';
|
import { writeText } from '@tauri-apps/api/clipboard';
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { nip19 } from 'nostr-tools';
|
import { nip19 } from 'nostr-tools';
|
||||||
import { memo, useContext, useEffect, useRef } from 'react';
|
import { memo, useContext, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
|
export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const userData = destr(user.metadata);
|
const userData = destr(user.metadata);
|
||||||
@ -77,7 +73,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
|
|||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
<DropdownMenu.Portal>
|
<DropdownMenu.Portal>
|
||||||
<DropdownMenu.Content
|
<DropdownMenu.Content
|
||||||
className="min-w-[220px] rounded-md bg-zinc-900/80 p-1.5 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
className="min-w-[220px] rounded-md bg-zinc-900/80 p-1.5 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
||||||
side="right"
|
side="right"
|
||||||
sideOffset={5}
|
sideOffset={5}
|
||||||
align="start"
|
align="start"
|
||||||
|
@ -20,7 +20,7 @@ export default function AccountColumn() {
|
|||||||
}, [getAppVersion]);
|
}, [getAppVersion]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
|
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4">
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<Link
|
<Link
|
||||||
href="/explore"
|
href="/explore"
|
||||||
|
@ -5,11 +5,11 @@ import { activeAccountAtom } from '@stores/account';
|
|||||||
|
|
||||||
import { getAccounts } from '@utils/storage';
|
import { getAccounts } from '@utils/storage';
|
||||||
|
|
||||||
import { useAtom } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function AccountList() {
|
export default function AccountList() {
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [users, setUsers] = useState([]);
|
const [users, setUsers] = useState([]);
|
||||||
|
|
||||||
const renderAccount = useCallback(
|
const renderAccount = useCallback(
|
||||||
|
@ -1,29 +1,14 @@
|
|||||||
import { MessageList } from '@components/columns/navigator/messages/list';
|
|
||||||
|
|
||||||
import { activeAccountAtom } from '@stores/account';
|
|
||||||
|
|
||||||
import { getAllFollowsByID } from '@utils/storage';
|
|
||||||
|
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||||
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
||||||
import { useAtom } from 'jotai';
|
import { useState } from 'react';
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export default function Messages() {
|
export default function Chats() {
|
||||||
const [open, setOpen] = useState(true);
|
const [open, setOpen] = useState(true);
|
||||||
const [follows, setFollows] = useState([]);
|
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getAllFollowsByID(activeAccount.id)
|
|
||||||
.then((res: any) => setFollows(res))
|
|
||||||
.catch(console.error);
|
|
||||||
}, [activeAccount.id]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
|
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
|
||||||
<div className="flex h-full flex-col gap-1 px-2 pb-8">
|
<div className="flex h-full flex-col gap-1 px-2 pb-8">
|
||||||
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
|
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||||
open ? 'rotate-180' : ''
|
open ? 'rotate-180' : ''
|
||||||
@ -35,9 +20,7 @@ export default function Messages() {
|
|||||||
Chats
|
Chats
|
||||||
</h3>
|
</h3>
|
||||||
</Collapsible.Trigger>
|
</Collapsible.Trigger>
|
||||||
<Collapsible.Content className="h-full">
|
<Collapsible.Content className="h-full"></Collapsible.Content>
|
||||||
<MessageList data={follows} />
|
|
||||||
</Collapsible.Content>
|
|
||||||
</div>
|
</div>
|
||||||
</Collapsible.Root>
|
</Collapsible.Root>
|
||||||
);
|
);
|
@ -1,4 +1,4 @@
|
|||||||
import Messages from '@components/columns/navigator/messages';
|
import Chats from '@components/columns/navigator/chats';
|
||||||
import Newsfeed from '@components/columns/navigator/newsfeed';
|
import Newsfeed from '@components/columns/navigator/newsfeed';
|
||||||
|
|
||||||
export default function NavigatorColumn() {
|
export default function NavigatorColumn() {
|
||||||
@ -6,8 +6,8 @@ export default function NavigatorColumn() {
|
|||||||
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
|
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
|
||||||
{/* Newsfeed */}
|
{/* Newsfeed */}
|
||||||
<Newsfeed />
|
<Newsfeed />
|
||||||
{/* Messages */}
|
{/* Chats */}
|
||||||
<Messages />
|
<Chats />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,33 +0,0 @@
|
|||||||
import { UserMini } from '@components/user/mini';
|
|
||||||
|
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
||||||
import { Suspense, memo, useRef } from 'react';
|
|
||||||
|
|
||||||
export const MessageList = memo(function MessageList({ data }: { data: any }) {
|
|
||||||
const parentRef = useRef(null);
|
|
||||||
|
|
||||||
const virtualizer = useVirtualizer({
|
|
||||||
count: data.length,
|
|
||||||
estimateSize: () => 32,
|
|
||||||
getScrollElement: () => parentRef.current,
|
|
||||||
});
|
|
||||||
const items = virtualizer.getVirtualItems();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
|
||||||
<Suspense fallback={<p className="text-sm text-zinc-400">Loading...</p>}>
|
|
||||||
{items.length > 0 && (
|
|
||||||
<div className="relative mb-24 w-full" style={{ height: virtualizer.getTotalSize() }}>
|
|
||||||
<div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
|
|
||||||
{items.map((virtualRow) => (
|
|
||||||
<div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
|
|
||||||
<UserMini pubkey={data[virtualRow.index].pubkey} />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -10,7 +10,7 @@ export default function Newsfeed() {
|
|||||||
return (
|
return (
|
||||||
<Collapsible.Root open={open} onOpenChange={setOpen}>
|
<Collapsible.Root open={open} onOpenChange={setOpen}>
|
||||||
<div className="flex flex-col gap-1 px-2">
|
<div className="flex flex-col gap-1 px-2">
|
||||||
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
|
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||||
open ? 'rotate-180' : ''
|
open ? 'rotate-180' : ''
|
@ -4,21 +4,18 @@ import { RelayContext } from '@components/relaysProvider';
|
|||||||
|
|
||||||
import { activeAccountAtom } from '@stores/account';
|
import { activeAccountAtom } from '@stores/account';
|
||||||
import { noteContentAtom } from '@stores/note';
|
import { noteContentAtom } from '@stores/note';
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
import { PersonIcon } from '@radix-ui/react-icons';
|
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtom, useAtomValue } from 'jotai';
|
||||||
import { useResetAtom } from 'jotai/utils';
|
import { useResetAtom } from 'jotai/utils';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
|
||||||
export default function FormBase() {
|
export default function FormBase() {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
const [value, setValue] = useAtom(noteContentAtom);
|
const [value, setValue] = useAtom(noteContentAtom);
|
||||||
const resetValue = useResetAtom(noteContentAtom);
|
const resetValue = useResetAtom(noteContentAtom);
|
||||||
|
|
||||||
|
@ -2,20 +2,18 @@ import { ImageWithFallback } from '@components/imageWithFallback';
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { activeAccountAtom } from '@stores/account';
|
import { activeAccountAtom } from '@stores/account';
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
|
|
||||||
export default function FormComment({ eventID }: { eventID: any }) {
|
export default function FormComment({ eventID }: { eventID: any }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
|
|
||||||
const profile = destr(activeAccount.metadata);
|
const profile = destr(activeAccount.metadata);
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import Avatar from 'boring-avatars';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { memo, useEffect, useState } from 'react';
|
import { memo, useEffect, useState } from 'react';
|
||||||
|
|
||||||
@ -20,27 +21,6 @@ export const ImageWithFallback = memo(function ImageWithFallback({
|
|||||||
}, [src]);
|
}, [src]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Image src={error ? DEFAULT_AVATAR : src} alt={alt} fill={fill} className={className} onError={setError} priority />
|
||||||
{error ? (
|
|
||||||
<Avatar
|
|
||||||
size={44}
|
|
||||||
name={alt}
|
|
||||||
variant="beam"
|
|
||||||
square={true}
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Image
|
|
||||||
src={src}
|
|
||||||
alt={alt}
|
|
||||||
fill={fill}
|
|
||||||
className={className}
|
|
||||||
onError={setError}
|
|
||||||
placeholder="blur"
|
|
||||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -9,7 +9,6 @@ import { UserMention } from '@components/user/mention';
|
|||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
import ReactPlayer from 'react-player/lazy';
|
|
||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
||||||
@ -21,10 +20,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
|||||||
const tags = destr(event.tags);
|
const tags = destr(event.tags);
|
||||||
// handle urls
|
// handle urls
|
||||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||||
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
|
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||||
// image url
|
// image url
|
||||||
return <ImagePreview key={match + i} url={match} />;
|
return <ImagePreview key={match + i} url={match} />;
|
||||||
} else if (ReactPlayer.canPlay(match)) {
|
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||||
|
// youtube
|
||||||
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
|
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||||
|
// video
|
||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
@ -80,7 +83,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onClick={(e) => openThread(e)}
|
onClick={(e) => openThread(e)}
|
||||||
className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
|
className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
|
||||||
>
|
>
|
||||||
<>{getParent}</>
|
<>{getParent}</>
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
|
@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
|
|||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
import ReactPlayer from 'react-player/lazy';
|
|
||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
|
export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
|
||||||
@ -17,10 +16,14 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
|
|||||||
const tags = destr(event.tags);
|
const tags = destr(event.tags);
|
||||||
// handle urls
|
// handle urls
|
||||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||||
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
|
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||||
// image url
|
// image url
|
||||||
return <ImagePreview key={match + i} url={match} />;
|
return <ImagePreview key={match + i} url={match} />;
|
||||||
} else if (ReactPlayer.canPlay(match)) {
|
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||||
|
// youtube
|
||||||
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
|
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||||
|
// video
|
||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
@ -42,6 +45,9 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
|
|||||||
if (tags[match][0] === 'p') {
|
if (tags[match][0] === 'p') {
|
||||||
// @-mentions
|
// @-mentions
|
||||||
return <UserMention key={match + i} pubkey={tags[match][1]} />;
|
return <UserMention key={match + i} pubkey={tags[match][1]} />;
|
||||||
|
} else if (tags[match][0] === 'e') {
|
||||||
|
// note-mentions
|
||||||
|
return <NoteRepost key={match + i} id={tags[match][1]} />;
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -52,7 +58,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
|
|||||||
}, [event.content, event.tags]);
|
}, [event.content, event.tags]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">
|
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
|
@ -2,7 +2,6 @@ import { RelayContext } from '@components/relaysProvider';
|
|||||||
|
|
||||||
import { activeAccountAtom } from '@stores/account';
|
import { activeAccountAtom } from '@stores/account';
|
||||||
import { hasNewerNoteAtom } from '@stores/note';
|
import { hasNewerNoteAtom } from '@stores/note';
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
import { createCacheNote, getAllFollowsByID, updateLastLoginTime } from '@utils/storage';
|
import { createCacheNote, getAllFollowsByID, updateLastLoginTime } from '@utils/storage';
|
||||||
@ -10,15 +9,14 @@ import { pubkeyArray } from '@utils/transform';
|
|||||||
|
|
||||||
import { TauriEvent } from '@tauri-apps/api/event';
|
import { TauriEvent } from '@tauri-apps/api/event';
|
||||||
import { appWindow, getCurrent } from '@tauri-apps/api/window';
|
import { appWindow, getCurrent } from '@tauri-apps/api/window';
|
||||||
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
|
import { useAtomValue, useSetAtom } from 'jotai';
|
||||||
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
export default function NoteConnector() {
|
export default function NoteConnector() {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
|
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
|
||||||
const relays = useAtomValue(relaysAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
|
|
||||||
const [isOnline] = useState(true);
|
const [isOnline] = useState(true);
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
@ -53,7 +51,7 @@ export default function NoteConnector() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
|
<div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
|
||||||
<span className="relative flex h-1.5 w-1.5">
|
<span className="relative flex h-1.5 w-1.5">
|
||||||
<span
|
<span
|
||||||
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
|
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
|
||||||
|
@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
|
|||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
import ReactPlayer from 'react-player/lazy';
|
|
||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
|
export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
|
||||||
@ -17,10 +16,14 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
|
|||||||
const tags = destr(event.tags);
|
const tags = destr(event.tags);
|
||||||
// handle urls
|
// handle urls
|
||||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||||
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
|
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||||
// image url
|
// image url
|
||||||
return <ImagePreview key={match + i} url={match} />;
|
return <ImagePreview key={match + i} url={match} />;
|
||||||
} else if (ReactPlayer.canPlay(match)) {
|
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||||
|
// youtube
|
||||||
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
|
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||||
|
// video
|
||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
@ -65,7 +68,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5 flex items-center border-t border-b border-zinc-800 py-2">
|
<div className="mt-5 flex items-center border-b border-t border-zinc-800 py-2">
|
||||||
<NoteMetadata
|
<NoteMetadata
|
||||||
eventID={event.id}
|
eventID={event.id}
|
||||||
eventPubkey={event.pubkey}
|
eventPubkey={event.pubkey}
|
||||||
|
@ -12,7 +12,7 @@ import CommentIcon from '@assets/icons/comment';
|
|||||||
import * as Dialog from '@radix-ui/react-dialog';
|
import * as Dialog from '@radix-ui/react-dialog';
|
||||||
import { SizeIcon } from '@radix-ui/react-icons';
|
import { SizeIcon } from '@radix-ui/react-icons';
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { memo, useContext, useState } from 'react';
|
import { memo, useContext, useState } from 'react';
|
||||||
@ -31,10 +31,9 @@ export const NoteComment = memo(function NoteComment({
|
|||||||
eventContent: any;
|
eventContent: any;
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
@ -81,12 +80,12 @@ export const NoteComment = memo(function NoteComment({
|
|||||||
<UserExtend pubkey={eventPubkey} time={eventTime} />
|
<UserExtend pubkey={eventPubkey} time={eventTime} />
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
<div className="prose prose-zinc max-w-none break-words leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
|
<div className="prose prose-zinc max-w-none break-words leading-tight dark:prose-invert prose-headings:mb-2 prose-headings:mt-3 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
|
||||||
{eventContent}
|
{eventContent}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* divider */}
|
{/* divider */}
|
||||||
<div className="absolute top-0 left-[21px] h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
||||||
</div>
|
</div>
|
||||||
{/* comment form */}
|
{/* comment form */}
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
|
@ -1,14 +1,13 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { activeAccountAtom } from '@stores/account';
|
import { activeAccountAtom } from '@stores/account';
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
import LikeIcon from '@assets/icons/like';
|
import LikeIcon from '@assets/icons/like';
|
||||||
import LikedIcon from '@assets/icons/liked';
|
import LikedIcon from '@assets/icons/liked';
|
||||||
|
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { memo, useContext, useEffect, useState } from 'react';
|
import { memo, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
@ -21,10 +20,9 @@ export const NoteReaction = memo(function NoteReaction({
|
|||||||
eventID: string;
|
eventID: string;
|
||||||
eventPubkey: string;
|
eventPubkey: string;
|
||||||
}) {
|
}) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
|
|
||||||
const [isReact, setIsReact] = useState(false);
|
const [isReact, setIsReact] = useState(false);
|
||||||
const [like, setLike] = useState(0);
|
const [like, setLike] = useState(0);
|
||||||
|
@ -2,11 +2,8 @@ import { NoteComment } from '@components/note/meta/comment';
|
|||||||
import { NoteReaction } from '@components/note/meta/reaction';
|
import { NoteReaction } from '@components/note/meta/reaction';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createCacheCommentNote } from '@utils/storage';
|
import { createCacheCommentNote } from '@utils/storage';
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function NoteMetadata({
|
export default function NoteMetadata({
|
||||||
@ -20,8 +17,7 @@ export default function NoteMetadata({
|
|||||||
eventTime: any;
|
eventTime: any;
|
||||||
eventContent: any;
|
eventContent: any;
|
||||||
}) {
|
}) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [likes, setLikes] = useState(0);
|
const [likes, setLikes] = useState(0);
|
||||||
const [comments, setComments] = useState(0);
|
const [comments, setComments] = useState(0);
|
||||||
|
@ -6,20 +6,15 @@ import { RelayContext } from '@components/relaysProvider';
|
|||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@components/user/extend';
|
||||||
import { UserMention } from '@components/user/mention';
|
import { UserMention } from '@components/user/mention';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createCacheNote, getNoteByID } from '@utils/storage';
|
import { createCacheNote, getNoteByID } from '@utils/storage';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import ReactPlayer from 'react-player';
|
|
||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [event, setEvent] = useState(null);
|
const [event, setEvent] = useState(null);
|
||||||
const unsubscribe = useRef(null);
|
const unsubscribe = useRef(null);
|
||||||
|
|
||||||
@ -68,10 +63,14 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
|||||||
const tags = destr(event.tags);
|
const tags = destr(event.tags);
|
||||||
// handle urls
|
// handle urls
|
||||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||||
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
|
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||||
// image url
|
// image url
|
||||||
return <ImagePreview key={match + i} url={match} />;
|
return <ImagePreview key={match + i} url={match} />;
|
||||||
} else if (ReactPlayer.canPlay(match)) {
|
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||||
|
// youtube
|
||||||
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
|
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||||
|
// video
|
||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
@ -109,7 +108,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
|||||||
if (event) {
|
if (event) {
|
||||||
return (
|
return (
|
||||||
<div className="relative pb-5">
|
<div className="relative pb-5">
|
||||||
<div className="absolute top-0 left-[21px] h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
|
@ -2,19 +2,15 @@ import { RelayContext } from '@components/relaysProvider';
|
|||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@components/user/extend';
|
||||||
import { UserMention } from '@components/user/mention';
|
import { UserMention } from '@components/user/mention';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createCacheNote, getNoteByID } from '@utils/storage';
|
import { createCacheNote, getNoteByID } from '@utils/storage';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
|
export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [event, setEvent] = useState(null);
|
const [event, setEvent] = useState(null);
|
||||||
const unsubscribe = useRef(null);
|
const unsubscribe = useRef(null);
|
||||||
|
|
||||||
@ -91,7 +87,7 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
|
|||||||
|
|
||||||
if (event) {
|
if (event) {
|
||||||
return (
|
return (
|
||||||
<div className="relative mt-3 mb-2 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
|
<div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
|
@ -1,17 +1,12 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
import { UserFollow } from '@components/user/follow';
|
import { UserFollow } from '@components/user/follow';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function ProfileFollowers({ id }: { id: string }) {
|
export default function ProfileFollowers({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays: any = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [followers, setFollowers] = useState(null);
|
const [followers, setFollowers] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -1,16 +1,11 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
import { UserFollow } from '@components/user/follow';
|
import { UserFollow } from '@components/user/follow';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function ProfileFollows({ id }: { id: string }) {
|
export default function ProfileFollows({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays: any = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [follows, setFollows] = useState(null);
|
const [follows, setFollows] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -1,13 +1,11 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
@ -15,9 +13,7 @@ import { useContext, useEffect, useState } from 'react';
|
|||||||
const DEFAULT_BANNER = 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
|
const DEFAULT_BANNER = 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
|
||||||
|
|
||||||
export default function ProfileMetadata({ id }: { id: string }) {
|
export default function ProfileMetadata({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays: any = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [profile, setProfile] = useState(null);
|
const [profile, setProfile] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -38,17 +34,12 @@ export default function ProfileMetadata({ id }: { id: string }) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="relative -top-8 z-10 px-4">
|
<div className="relative -top-8 z-10 px-4">
|
||||||
<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
|
<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
|
||||||
{profile?.picture ? (
|
<ImageWithFallback
|
||||||
<ImageWithFallback src={profile.picture} alt={id} fill={true} className="rounded-lg object-cover" />
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
) : (
|
alt={id}
|
||||||
<Avatar
|
fill={true}
|
||||||
size={64}
|
className="rounded-lg object-cover"
|
||||||
name={id}
|
/>
|
||||||
variant="beam"
|
|
||||||
square={true}
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,16 +1,11 @@
|
|||||||
import { NoteBase } from '@components/note/base';
|
import { NoteBase } from '@components/note/base';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export default function ProfileNotes({ id }: { id: string }) {
|
export default function ProfileNotes({ id }: { id: string }) {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
const relays: any = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -3,7 +3,25 @@ import { createContext, useMemo } from 'react';
|
|||||||
|
|
||||||
export const RelayContext = createContext({});
|
export const RelayContext = createContext({});
|
||||||
|
|
||||||
export default function RelayProvider({ relays, children }: { relays: Array<string>; children: React.ReactNode }) {
|
const relays = [
|
||||||
const value = useMemo(() => new RelayPool(relays, { useEventCache: false, logSubscriptions: false }), [relays]);
|
'wss://relay.damus.io',
|
||||||
return <RelayContext.Provider value={value}>{children}</RelayContext.Provider>;
|
'wss://nostr-pub.wellorder.net',
|
||||||
|
'wss://nostr.bongbong.com',
|
||||||
|
'wss://nostr.zebedee.cloud',
|
||||||
|
'wss://nostr.fmt.wiz.biz',
|
||||||
|
'wss://relay.snort.social',
|
||||||
|
'wss://offchain.pub',
|
||||||
|
'wss://relay.current.fyi',
|
||||||
|
'wss://nostr.bitcoiner.social',
|
||||||
|
'wss://relay.nostr.info',
|
||||||
|
'wss://nostr-01.dorafactory.org',
|
||||||
|
'wss://nostr.zhongwen.world',
|
||||||
|
'wss://nostro.cc',
|
||||||
|
'wss://relay.nostr.net.in',
|
||||||
|
'wss://nos.lol',
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function RelayProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
const pool = useMemo(() => new RelayPool(relays, { useEventCache: false, logSubscriptions: false }), []);
|
||||||
|
return <RelayContext.Provider value={[pool, relays]}>{children}</RelayContext.Provider>;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
|
|
||||||
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { createCacheProfile } from '@utils/storage';
|
import { createCacheProfile } from '@utils/storage';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
@ -30,9 +32,12 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
||||||
{profile?.picture && (
|
<ImageWithFallback
|
||||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
)}
|
alt={pubkey}
|
||||||
|
fill={true}
|
||||||
|
className="rounded-full object-cover"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-1 flex-col items-start text-start">
|
<div className="flex w-full flex-1 flex-col items-start text-start">
|
||||||
<span className="truncate font-medium leading-tight text-zinc-200">
|
<span className="truncate font-medium leading-tight text-zinc-200">
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
|
|
||||||
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { createCacheProfile, getCacheProfile } from '@utils/storage';
|
import { createCacheProfile, getCacheProfile } from '@utils/storage';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
||||||
import { fetch } from '@tauri-apps/api/http';
|
import { fetch } from '@tauri-apps/api/http';
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
@ -52,22 +53,12 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
|
|||||||
onClick={(e) => openUserPage(e)}
|
onClick={(e) => openUserPage(e)}
|
||||||
className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
|
className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
|
||||||
>
|
>
|
||||||
{profile?.picture ? (
|
<ImageWithFallback
|
||||||
<ImageWithFallback
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
src={profile.picture}
|
alt={pubkey}
|
||||||
alt={pubkey}
|
fill={true}
|
||||||
fill={true}
|
className="rounded-md border border-white/10 object-cover"
|
||||||
className="rounded-md border border-white/10 object-cover"
|
/>
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Avatar
|
|
||||||
size={44}
|
|
||||||
name={pubkey}
|
|
||||||
variant="beam"
|
|
||||||
square={true}
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex w-full justify-between">
|
<div className="flex w-full justify-between">
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
|
|
||||||
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { createCacheProfile } from '@utils/storage';
|
import { createCacheProfile } from '@utils/storage';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
@ -30,9 +32,12 @@ export const UserFollow = memo(function UserFollow({ pubkey }: { pubkey: string
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
||||||
{profile?.picture && (
|
<ImageWithFallback
|
||||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
)}
|
alt={pubkey}
|
||||||
|
fill={true}
|
||||||
|
className="rounded-full object-cover"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-1 flex-col items-start text-start">
|
<div className="flex w-full flex-1 flex-col items-start text-start">
|
||||||
<span className="truncate font-medium leading-tight text-zinc-200">
|
<span className="truncate font-medium leading-tight text-zinc-200">
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
|
|
||||||
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { createCacheProfile, getCacheProfile } from '@utils/storage';
|
import { createCacheProfile, getCacheProfile } from '@utils/storage';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
||||||
import { fetch } from '@tauri-apps/api/http';
|
import { fetch } from '@tauri-apps/api/http';
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
@ -42,22 +43,12 @@ export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: str
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
|
||||||
{profile?.picture ? (
|
<ImageWithFallback
|
||||||
<ImageWithFallback
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
src={profile.picture}
|
alt={pubkey}
|
||||||
alt={pubkey}
|
fill={true}
|
||||||
fill={true}
|
className="rounded-md border border-white/10 object-cover"
|
||||||
className="rounded-md border border-white/10 object-cover"
|
/>
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Avatar
|
|
||||||
size={44}
|
|
||||||
name={pubkey}
|
|
||||||
variant="beam"
|
|
||||||
square={true}
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex-1">
|
<div className="w-full flex-1">
|
||||||
<div className="flex w-full justify-between">
|
<div className="flex w-full justify-between">
|
||||||
|
@ -1,59 +1,44 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||||
|
|
||||||
import { createCacheProfile, getCacheProfile } from '@utils/storage';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
|
import { getCacheProfile } from '@utils/storage';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
import { fetch } from '@tauri-apps/api/http';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import destr from 'destr';
|
|
||||||
import { memo, useCallback, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
|
export const UserMini = ({ pubkey }: { pubkey: string }) => {
|
||||||
const [profile, setProfile] = useState(null);
|
const [profile, setProfile] = useState(null);
|
||||||
|
|
||||||
const fetchProfile = useCallback(async (id: string) => {
|
const fetchCacheProfile = useCallback(async (id: string) => {
|
||||||
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
|
const res = await getCacheProfile(id);
|
||||||
method: 'GET',
|
const data = JSON.parse(res.metadata);
|
||||||
timeout: 30,
|
setProfile(data);
|
||||||
});
|
|
||||||
return res.data;
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getCacheProfile(pubkey).then((res) => {
|
fetchCacheProfile(pubkey).catch(console.error);
|
||||||
if (res) {
|
}, [fetchCacheProfile, pubkey]);
|
||||||
setProfile(destr(res.metadata));
|
|
||||||
} else {
|
|
||||||
fetchProfile(pubkey)
|
|
||||||
.then((res: any) => {
|
|
||||||
setProfile(destr(res.content));
|
|
||||||
createCacheProfile(pubkey, res.content);
|
|
||||||
})
|
|
||||||
.catch(console.error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, [fetchProfile, pubkey]);
|
|
||||||
|
|
||||||
return (
|
if (profile) {
|
||||||
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
|
return (
|
||||||
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
|
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
|
||||||
{profile?.picture ? (
|
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
|
||||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
|
<ImageWithFallback
|
||||||
) : (
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
<Avatar
|
alt={pubkey}
|
||||||
size={20}
|
fill={true}
|
||||||
name={pubkey}
|
className="rounded object-cover"
|
||||||
variant="beam"
|
|
||||||
square={true}
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
/>
|
||||||
)}
|
</div>
|
||||||
|
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
|
||||||
|
<p className="truncate leading-tight text-zinc-300">
|
||||||
|
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
|
);
|
||||||
<p className="truncate leading-tight text-zinc-300">
|
} else {
|
||||||
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
|
return <></>;
|
||||||
</p>
|
}
|
||||||
</div>
|
};
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
@ -13,7 +13,6 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
|
|||||||
</div>
|
</div>
|
||||||
<div className="relative flex min-h-0 w-full flex-1">
|
<div className="relative flex min-h-0 w-full flex-1">
|
||||||
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
|
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
|
||||||
<div className="absolute top-0 left-0 h-12 w-full" />
|
|
||||||
<AccountColumn />
|
<AccountColumn />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
|
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
|
||||||
|
@ -1,11 +1,5 @@
|
|||||||
import RelayProvider from '@components/relaysProvider';
|
import RelayProvider from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
import { Provider, useAtomValue } from 'jotai';
|
|
||||||
import { queryClientAtom } from 'jotai-tanstack-query';
|
|
||||||
import { useHydrateAtoms } from 'jotai/react/utils';
|
|
||||||
import type { NextPage } from 'next';
|
import type { NextPage } from 'next';
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
import { ReactElement, ReactNode } from 'react';
|
import { ReactElement, ReactNode } from 'react';
|
||||||
@ -21,25 +15,9 @@ type AppPropsWithLayout = AppProps & {
|
|||||||
Component: NextPageWithLayout;
|
Component: NextPageWithLayout;
|
||||||
};
|
};
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
const HydrateAtoms = ({ children }) => {
|
|
||||||
useHydrateAtoms([[queryClientAtom, queryClient]]);
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
||||||
// Use the layout defined at the page level, if available
|
// Use the layout defined at the page level, if available
|
||||||
const getLayout = Component.getLayout ?? ((page) => page);
|
const getLayout = Component.getLayout ?? ((page) => page);
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
return (
|
return <RelayProvider>{getLayout(<Component {...pageProps} />)}</RelayProvider>;
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<Provider>
|
|
||||||
<HydrateAtoms>
|
|
||||||
<RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
|
|
||||||
</HydrateAtoms>
|
|
||||||
</Provider>
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
@ -1,38 +1,45 @@
|
|||||||
import BaseLayout from '@layouts/base';
|
import BaseLayout from '@layouts/base';
|
||||||
|
|
||||||
import { getAccounts } from '@utils/storage';
|
import { activeAccountAtom } from '@stores/account';
|
||||||
|
|
||||||
|
import { getActiveAccount } from '@utils/storage';
|
||||||
|
|
||||||
import LumeSymbol from '@assets/icons/Lume';
|
import LumeSymbol from '@assets/icons/Lume';
|
||||||
|
|
||||||
|
import { useSetAtom } from 'jotai';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect } from 'react';
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect } from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const setActiveAccount = useSetAtom(activeAccountAtom);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getAccounts()
|
getActiveAccount()
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
if (res.length > 0) {
|
if (res) {
|
||||||
router.push('/init');
|
// update local storage
|
||||||
|
setActiveAccount(res);
|
||||||
|
// redirect
|
||||||
|
router.replace('/init');
|
||||||
} else {
|
} else {
|
||||||
router.push('/onboarding');
|
router.replace('/onboarding');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(console.error);
|
.catch(console.error);
|
||||||
}, [router]);
|
}, [router, setActiveAccount]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-full overflow-hidden">
|
<div className="relative h-full overflow-hidden">
|
||||||
{/* dragging area */}
|
{/* dragging area */}
|
||||||
<div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
|
<div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
|
||||||
{/* end dragging area */}
|
{/* end dragging area */}
|
||||||
<div className="relative flex h-full flex-col items-center justify-center">
|
<div className="relative flex h-full flex-col items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
<LumeSymbol className="h-16 w-16 text-black dark:text-white" />
|
<LumeSymbol className="h-16 w-16 text-black dark:text-white" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
||||||
Here's an interesting fact:
|
Here's an interesting fact:
|
||||||
</h3>
|
</h3>
|
||||||
<p className="font-medium text-zinc-300 dark:text-zinc-600">
|
<p className="font-medium text-zinc-300 dark:text-zinc-600">
|
||||||
Bitcoin and Nostr can be used by anyone, and no one can stop you!
|
Bitcoin and Nostr can be used by anyone, and no one can stop you!
|
||||||
|
@ -11,7 +11,7 @@ import { pubkeyArray } from '@utils/transform';
|
|||||||
|
|
||||||
import LumeSymbol from '@assets/icons/Lume';
|
import LumeSymbol from '@assets/icons/Lume';
|
||||||
|
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import {
|
import {
|
||||||
JSXElementConstructor,
|
JSXElementConstructor,
|
||||||
@ -27,12 +27,11 @@ import {
|
|||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [activeAccount] = useAtom(activeAccountAtom);
|
|
||||||
|
|
||||||
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
||||||
const [done, setDone] = useState(false);
|
const [done, setDone] = useState(false);
|
||||||
|
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
const unsubscribe = useRef(null);
|
const unsubscribe = useRef(null);
|
||||||
const timer = useRef(null);
|
const timer = useRef(null);
|
||||||
@ -81,7 +80,7 @@ export default function Page() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
router.push('/newsfeed/following');
|
router.replace('/newsfeed/following');
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
@ -93,7 +92,7 @@ export default function Page() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative h-full overflow-hidden">
|
<div className="relative h-full overflow-hidden">
|
||||||
{/* dragging area */}
|
{/* dragging area */}
|
||||||
<div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
|
<div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
|
||||||
{/* end dragging area */}
|
{/* end dragging area */}
|
||||||
<div className="relative flex h-full flex-col items-center justify-center">
|
<div className="relative flex h-full flex-col items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
@ -6,11 +6,8 @@ import { NoteComment } from '@components/note/comment';
|
|||||||
import { NoteExtend } from '@components/note/extend';
|
import { NoteExtend } from '@components/note/extend';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { getAllCommentNotes, getNoteByID } from '@utils/storage';
|
import { getAllCommentNotes, getNoteByID } from '@utils/storage';
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import {
|
import {
|
||||||
JSXElementConstructor,
|
JSXElementConstructor,
|
||||||
@ -23,13 +20,11 @@ import {
|
|||||||
} from 'react';
|
} from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const id = router.query.id || null;
|
const id = router.query.id || null;
|
||||||
|
|
||||||
const relays: any = useAtomValue(relaysAtom);
|
|
||||||
|
|
||||||
const [rootEvent, setRootEvent] = useState(null);
|
const [rootEvent, setRootEvent] = useState(null);
|
||||||
const [comments, setComments] = useState([]);
|
const [comments, setComments] = useState([]);
|
||||||
|
|
||||||
|
@ -5,48 +5,109 @@ import FormBase from '@components/form/base';
|
|||||||
import { NoteBase } from '@components/note/base';
|
import { NoteBase } from '@components/note/base';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
|
|
||||||
import { notesAtom } from '@stores/note';
|
import { hasNewerNoteAtom } from '@stores/note';
|
||||||
|
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
import { getLatestNotes, getNotes } from '@utils/storage';
|
||||||
|
|
||||||
|
import { ArrowUpIcon } from '@radix-ui/react-icons';
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, Suspense, useRef } from 'react';
|
import {
|
||||||
|
JSXElementConstructor,
|
||||||
|
ReactElement,
|
||||||
|
ReactFragment,
|
||||||
|
ReactPortal,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import { Virtuoso } from 'react-virtuoso';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const [data]: any = useAtom(notesAtom);
|
const [data, setData] = useState([]);
|
||||||
const parentRef = useRef(null);
|
const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
|
||||||
|
|
||||||
const virtualizer = useVirtualizer({
|
const virtuosoRef = useRef(null);
|
||||||
count: data.length,
|
const now = useRef(new Date());
|
||||||
estimateSize: () => 500,
|
const limit = useRef(20);
|
||||||
getScrollElement: () => parentRef.current,
|
const offset = useRef(0);
|
||||||
getItemKey: (index) => data[index].id,
|
|
||||||
});
|
const itemContent: any = useCallback(
|
||||||
const items = virtualizer.getVirtualItems();
|
(index: string | number) => {
|
||||||
|
return <NoteBase event={data[index]} />;
|
||||||
|
},
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
|
||||||
|
const computeItemKey = useCallback(
|
||||||
|
(index: string | number) => {
|
||||||
|
return data[index].id;
|
||||||
|
},
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
|
||||||
|
const initialData = useCallback(async () => {
|
||||||
|
const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
|
||||||
|
setData((data) => [...data, ...result]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadMore = useCallback(async () => {
|
||||||
|
offset.current += limit.current;
|
||||||
|
// next query
|
||||||
|
const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
|
||||||
|
setData((data) => [...data, ...result]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadLatest = useCallback(async () => {
|
||||||
|
offset.current += limit.current;
|
||||||
|
// next query
|
||||||
|
const result: any = await getLatestNotes(dateToUnix(now.current));
|
||||||
|
// update data
|
||||||
|
setData((data) => [...result, ...data]);
|
||||||
|
// hide newer trigger
|
||||||
|
setHasNewerNote(false);
|
||||||
|
// scroll to top
|
||||||
|
virtuosoRef.current.scrollToIndex({ index: 0 });
|
||||||
|
}, [setHasNewerNote]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initialData().catch(console.error);
|
||||||
|
}, [initialData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
<div className="relative h-full w-full">
|
||||||
<div className="relative">
|
{hasNewerNote && (
|
||||||
<FormBase />
|
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
|
||||||
</div>
|
<button
|
||||||
<Suspense fallback={<Placeholder />}>
|
onClick={() => loadLatest()}
|
||||||
<div>
|
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
|
||||||
{items.length > 0 && (
|
>
|
||||||
<div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
|
<ArrowUpIcon className="h-3.5 w-3.5" />
|
||||||
<div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
|
Load latest
|
||||||
{items.map((virtualRow) => (
|
</button>
|
||||||
<div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
|
|
||||||
<NoteBase event={data[virtualRow.index]} />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</Suspense>
|
)}
|
||||||
|
<Virtuoso
|
||||||
|
ref={virtuosoRef}
|
||||||
|
data={data}
|
||||||
|
itemContent={itemContent}
|
||||||
|
computeItemKey={computeItemKey}
|
||||||
|
components={COMPONENTS}
|
||||||
|
overscan={200}
|
||||||
|
endReached={loadMore}
|
||||||
|
className="scrollbar-hide h-full w-full overflow-y-auto"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const COMPONENTS = {
|
||||||
|
Header: () => <FormBase />,
|
||||||
|
EmptyPlaceholder: () => <Placeholder />,
|
||||||
|
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||||
|
};
|
||||||
|
|
||||||
Page.getLayout = function getLayout(
|
Page.getLayout = function getLayout(
|
||||||
page:
|
page:
|
||||||
| string
|
| string
|
||||||
|
@ -2,12 +2,9 @@ import BaseLayout from '@layouts/base';
|
|||||||
|
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createAccount } from '@utils/storage';
|
import { createAccount } from '@utils/storage';
|
||||||
|
|
||||||
import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
|
import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
|
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
|
||||||
@ -20,9 +17,8 @@ const config: Config = {
|
|||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [type, setType] = useState('password');
|
const [type, setType] = useState('password');
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
@ -3,13 +3,10 @@ import BaseLayout from '@layouts/base';
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
import { UserBase } from '@components/user/base';
|
import { UserBase } from '@components/user/base';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createFollows } from '@utils/storage';
|
import { createFollows } from '@utils/storage';
|
||||||
|
|
||||||
import { CheckCircledIcon } from '@radix-ui/react-icons';
|
import { CheckCircledIcon } from '@radix-ui/react-icons';
|
||||||
import { createClient } from '@supabase/supabase-js';
|
import { createClient } from '@supabase/supabase-js';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import {
|
import {
|
||||||
@ -64,12 +61,11 @@ const initialList = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { id, privkey }: any = router.query || '';
|
const { id, privkey }: any = router.query || '';
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [list, setList]: any = useState(initialList);
|
const [list, setList]: any = useState(initialList);
|
||||||
const [follows, setFollows] = useState([]);
|
const [follows, setFollows] = useState([]);
|
||||||
@ -110,7 +106,7 @@ export default function Page() {
|
|||||||
if (res === 'ok') {
|
if (res === 'ok') {
|
||||||
// publish to relays
|
// publish to relays
|
||||||
pool.publish(event, relays);
|
pool.publish(event, relays);
|
||||||
router.push('/');
|
router.replace('/');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(console.error);
|
.catch(console.error);
|
||||||
|
@ -2,14 +2,11 @@ import BaseLayout from '@layouts/base';
|
|||||||
|
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { relaysAtom } from '@stores/relays';
|
|
||||||
|
|
||||||
import { createAccount, createFollows } from '@utils/storage';
|
import { createAccount, createFollows } from '@utils/storage';
|
||||||
import { tagsToArray } from '@utils/transform';
|
import { tagsToArray } from '@utils/transform';
|
||||||
import { truncate } from '@utils/truncate';
|
import { truncate } from '@utils/truncate';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { getPublicKey, nip19 } from 'nostr-tools';
|
import { getPublicKey, nip19 } from 'nostr-tools';
|
||||||
@ -24,13 +21,12 @@ import {
|
|||||||
} from 'react';
|
} from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const pool: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const privkey: any = router.query.privkey || null;
|
const privkey: any = router.query.privkey || null;
|
||||||
const pubkey = privkey ? getPublicKey(privkey) : null;
|
const pubkey = privkey ? getPublicKey(privkey) : null;
|
||||||
|
|
||||||
const relays = useAtomValue(relaysAtom);
|
|
||||||
const [profile, setProfile] = useState(null);
|
const [profile, setProfile] = useState(null);
|
||||||
const [done, setDone] = useState(false);
|
const [done, setDone] = useState(false);
|
||||||
|
|
||||||
@ -77,7 +73,7 @@ export default function Page() {
|
|||||||
|
|
||||||
// submit then redirect to home
|
// submit then redirect to home
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
router.push('/');
|
router.replace('/');
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
import { isSSR } from '@utils/ssr';
|
import { atomWithStorage, createJSONStorage } from 'jotai/utils';
|
||||||
import { getActiveAccount } from '@utils/storage';
|
|
||||||
|
|
||||||
import { atomWithCache } from 'jotai-cache';
|
const createMyJsonStorage = () => {
|
||||||
|
const storage = createJSONStorage(() => localStorage);
|
||||||
|
const getItem = (key) => {
|
||||||
|
const value = storage.getItem(key);
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
return { ...storage, getItem };
|
||||||
|
};
|
||||||
|
|
||||||
export const activeAccountAtom = atomWithCache(async () => {
|
export const activeAccountAtom = atomWithStorage('activeAccount', {}, createMyJsonStorage());
|
||||||
const response = isSSR ? {} : await getActiveAccount();
|
|
||||||
return response;
|
|
||||||
});
|
|
||||||
|
1
src/stores/constants.tsx
Normal file
1
src/stores/constants.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';
|
@ -1,24 +1,7 @@
|
|||||||
import { isSSR } from '@utils/ssr';
|
|
||||||
import { getAllNotes } from '@utils/storage';
|
|
||||||
|
|
||||||
import { atom } from 'jotai';
|
import { atom } from 'jotai';
|
||||||
import { atomsWithQuery } from 'jotai-tanstack-query';
|
|
||||||
import { atomWithReset } from 'jotai/utils';
|
import { atomWithReset } from 'jotai/utils';
|
||||||
|
|
||||||
// note content
|
// note content
|
||||||
export const noteContentAtom = atomWithReset('');
|
export const noteContentAtom = atomWithReset('');
|
||||||
// notify user that connector has receive newer note
|
// notify user that connector has receive newer note
|
||||||
export const hasNewerNoteAtom = atom(false);
|
export const hasNewerNoteAtom = atom(false);
|
||||||
// query notes from database
|
|
||||||
export const [notesAtom] = atomsWithQuery(() => ({
|
|
||||||
queryKey: ['notes'],
|
|
||||||
queryFn: async ({ queryKey: [] }) => {
|
|
||||||
const res = isSSR ? [] : await getAllNotes();
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
refetchInterval: 1000000,
|
|
||||||
refetchOnReconnect: true,
|
|
||||||
refetchOnWindowFocus: true,
|
|
||||||
refetchOnMount: true,
|
|
||||||
keepPreviousData: false,
|
|
||||||
}));
|
|
||||||
|
@ -89,9 +89,19 @@ export async function getCacheProfile(id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// get all notes
|
// get all notes
|
||||||
export async function getAllNotes() {
|
export async function getNotes(time, limit, offset) {
|
||||||
const db = await connect();
|
const db = await connect();
|
||||||
return await db.select(`SELECT * FROM cache_notes GROUP BY parent_id ORDER BY created_at DESC LIMIT 500`);
|
return await db.select(
|
||||||
|
`SELECT * FROM cache_notes WHERE created_at <= "${time}" GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}"`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// get all latest notes
|
||||||
|
export async function getLatestNotes(time) {
|
||||||
|
const db = await connect();
|
||||||
|
return await db.select(
|
||||||
|
`SELECT * FROM cache_notes WHERE created_at > "${time}" GROUP BY parent_id ORDER BY created_at DESC`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// get note by id
|
// get note by id
|
||||||
|
Loading…
Reference in New Issue
Block a user