-
-
-
- twMerge(
- 'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
- isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
- )
- }
- >
- Users
-
-
- twMerge(
- 'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
- isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
- )
- }
- >
- Relays
-
+
+
+
+
+
+
+ twMerge(
+ 'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
+ isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
+ )
+ }
+ >
+ Users
+
+
+ twMerge(
+ 'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
+ isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
+ )
+ }
+ >
+ Relays
+
+
+
+
+
+
-
-
-
-
-
-
-
+
);
}
diff --git a/src/app/browse/users.tsx b/src/app/browse/users.tsx
index 522b003e..c638c546 100644
--- a/src/app/browse/users.tsx
+++ b/src/app/browse/users.tsx
@@ -1,42 +1,116 @@
-import { DndContext } from '@dnd-kit/core';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import ReactFlow, {
+ Background,
+ ConnectionMode,
+ addEdge,
+ useEdgesState,
+ useNodesState,
+ useReactFlow,
+} from 'reactflow';
-import { UserDrawer } from '@app/browse/components/userDrawer';
-import { UserDropable } from '@app/browse/components/userDropable';
+import { Edge } from '@app/browse//components/edge';
+import { UserGroupNode } from '@app/browse//components/userGroupNode';
+import { Line } from '@app/browse/components/line';
+import { UserNode } from '@app/browse/components/userNode';
import { useStorage } from '@libs/storage/provider';
-import { User } from '@shared/user';
-
+import { useNostr } from '@utils/hooks/useNostr';
import { getMultipleRandom } from '@utils/transform';
+let id = 2;
+const getId = () => `${id++}`;
+const nodeTypes = { user: UserNode, userGroup: UserGroupNode };
+const edgeTypes = { buttonedge: Edge };
+
export function BrowseUsersScreen() {
const { db } = useStorage();
+ const { getContactsByPubkey } = useNostr();
+ const { project } = useReactFlow();
- const data = useMemo(() => getMultipleRandom(db.account.follows, 10), []);
+ const defaultContacts = useMemo(() => getMultipleRandom(db.account.follows, 10), []);
+ const reactFlowWrapper = useRef(null);
+ const connectingNodeId = useRef(null);
- const handleDragEnd = (event) => {
- console.log(event.id);
- };
+ const initialNodes = [
+ {
+ id: '0',
+ type: 'user',
+ position: { x: 141, y: 0 },
+ data: { list: [], title: '', pubkey: db.account.pubkey },
+ },
+ {
+ id: '1',
+ type: 'userGroup',
+ position: { x: 0, y: 200 },
+ data: { list: defaultContacts, title: 'Starting Point', pubkey: '' },
+ },
+ ];
+ const initialEdges = [{ id: 'e0-1', type: 'buttonedge', source: '0', target: '1' }];
+
+ const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+ const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
+
+ const onConnectStart = useCallback((_, { nodeId }) => {
+ connectingNodeId.current = nodeId;
+ }, []);
+
+ const onConnectEnd = useCallback(
+ async (event) => {
+ const targetIsPane = event.target.classList.contains('react-flow__pane');
+
+ if (targetIsPane) {
+ const { top, left } = reactFlowWrapper.current.getBoundingClientRect();
+
+ const id = getId();
+ const prevData = nodes.slice(-1)[0];
+ const randomPubkey = getMultipleRandom(prevData.data.list, 1)[0];
+
+ const newContactList = await getContactsByPubkey(randomPubkey);
+ const newNode = {
+ id,
+ type: 'userGroup',
+ position: project({ x: event.clientX - left, y: event.clientY - top }),
+ data: { list: newContactList, title: null, pubkey: randomPubkey },
+ };
+
+ setNodes((nds) => nds.concat(newNode));
+ setEdges((eds) =>
+ eds.concat({
+ id,
+ type: 'buttonedge',
+ source: connectingNodeId.current,
+ target: id,
+ })
+ );
+ }
+ },
+ [project]
+ );
return (
-
-
-
-
-
Follows
-
- {data.map((user) => (
-
- ))}
-
-
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/app/chats/components/list.tsx b/src/app/chats/components/list.tsx
index d4960fc2..86fbccf7 100644
--- a/src/app/chats/components/list.tsx
+++ b/src/app/chats/components/list.tsx
@@ -42,8 +42,8 @@ export function ChatsList() {
return (
- {chats.follows.map((item) => renderItem(item))}
- {chats.unknowns.length > 0 && }
+ {chats?.follows?.map((item) => renderItem(item))}
+ {chats?.unknowns?.length > 0 && }
);
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 1af0df66..2844924f 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -24,7 +24,10 @@ export function Navigation() {
return (
-
+
;
+ return (
+
+ );
}
if (variant === 'mention') {
diff --git a/src/stores/browse.ts b/src/stores/browse.ts
new file mode 100644
index 00000000..197e87b9
--- /dev/null
+++ b/src/stores/browse.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+interface BrowseState {
+ data: Array<{ title: string; data: string[] }>;
+ setData: ({ title, data }: { title: string; data: string[] }) => void;
+}
+
+export const useBrowse = create
()(
+ persist(
+ (set) => ({
+ data: [],
+ setData: (data) => {
+ set((state) => ({ data: [...state.data, data] }));
+ },
+ }),
+ {
+ name: 'browseUsers',
+ storage: createJSONStorage(() => localStorage),
+ }
+ )
+);
diff --git a/src/utils/hooks/useNostr.ts b/src/utils/hooks/useNostr.ts
index c7197faa..1d09fc09 100644
--- a/src/utils/hooks/useNostr.ts
+++ b/src/utils/hooks/useNostr.ts
@@ -19,6 +19,7 @@ import { useStronghold } from '@stores/stronghold';
import { createBlobFromFile } from '@utils/createBlobFromFile';
import { nHoursAgo } from '@utils/date';
+import { getMultipleRandom } from '@utils/transform';
import { NDKEventWithReplies, NostrBuildResponse } from '@utils/types';
export function useNostr() {
@@ -278,6 +279,22 @@ export function useNostr() {
return events;
};
+ const getContactsByPubkey = async (pubkey: string) => {
+ const user = ndk.getUser({ hexpubkey: pubkey });
+ const follows = [...(await user.follows())].map((user) => user.hexpubkey);
+ return getMultipleRandom([...follows], 10);
+ };
+
+ const getEventsByPubkey = async (pubkey: string) => {
+ const events = await fetcher.fetchAllEvents(
+ relayUrls,
+ { authors: [pubkey], kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article] },
+ { since: nHoursAgo(24) },
+ { sort: true }
+ );
+ return events as unknown as NDKEvent[];
+ };
+
const publish = async ({
content,
kind,
@@ -421,5 +438,7 @@ export function useNostr() {
publish,
createZap,
upload,
+ getContactsByPubkey,
+ getEventsByPubkey,
};
}