Fix/hooks (#69)

* fix hook + start reimpl conversation and chat

* fix backend export + tsconfig

* readd test relayer

apps/data-backend/src/graphql.ts

@@ -59,7 +59,7 @@ const resolvers = {
 };
 
 // Create the Apollo Server
-const server = new ApolloServer({ 
+export const server = new ApolloServer({ 
   typeDefs,
   resolvers,
   context: () => ({ prisma }),

apps/data-backend/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "lib": [

apps/mobile/src/components/Chat copy/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Conversation as ConversationType } from '../../types/messages';
+import { useStyles } from '../../hooks';
+import { View, Image, Text } from 'react-native';
+import { MessageInput } from '../PrivateMessageInput';
+import { MessagesList } from '../PrivateMessages/MessagesList.tsx';
+import stylesheet from './styles';
+import { IconButton } from '../IconButton';
+
+export type ChatProps = {
+	conversation: ConversationType;
+	handleGoBack: () => void;
+};
+
+export const Chat: React.FC<ChatProps> = ({ conversation, handleGoBack }) => {
+
+	const styles = useStyles(stylesheet);
+	const user = conversation.user;
+	const avatar = user.avatar ? {uri: user.avatar } : require('../../assets/pepe-logo.png');
+
+	const handleSendMessage = (message: string) => {
+		//todo: integrate hook here
+		//todo: encrypt message
+		//todo: send message
+	};
+
+	return (
+		<>
+			<View style={styles.header}>
+				<IconButton icon="ChevronLeftIcon" size={20} onPress={handleGoBack} style={styles.backButton} />
+        		<View style={styles.headerContent}>
+          			<Image source={avatar} style={styles.avatar} />
+          			<Text style={styles.name}>{user.name}</Text>
+        		</View>
+      		</View>
+			<View style={styles.container}>
+				<MessagesList messages={conversation.messages} />
+				<MessageInput onSend={handleSendMessage} />
+			</View>
+		</>
+	);
+};

apps/mobile/src/components/Chat/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Conversation as ConversationType } from '../../types/messages';
+import { useStyles } from '../../hooks';
+import { View, Image, Text } from 'react-native';
+import { MessageInput } from '../PrivateMessageInput';
+import { MessagesList } from '../PrivateMessages/MessagesList.tsx';
+import stylesheet from './styles';
+import { IconButton } from '../IconButton';
+
+export type ChatProps = {
+	conversation: ConversationType;
+	handleGoBack: () => void;
+};
+
+export const Chat: React.FC<ChatProps> = ({ conversation, handleGoBack }) => {
+
+	const styles = useStyles(stylesheet);
+	const user = conversation.user;
+	const avatar = user.avatar ? {uri: user.avatar } : require('../../assets/pepe-logo.png');
+
+	const handleSendMessage = (message: string) => {
+		//todo: integrate hook here
+		//todo: encrypt message
+		//todo: send message
+	};
+
+	return (
+		<>
+			<View style={styles.header}>
+				<IconButton icon="ChevronLeftIcon" size={20} onPress={handleGoBack} style={styles.backButton} />
+        		<View style={styles.headerContent}>
+          			<Image source={avatar} style={styles.avatar} />
+          			<Text style={styles.name}>{user.name}</Text>
+        		</View>
+      		</View>
+			<View style={styles.container}>
+				<MessagesList messages={conversation.messages} />
+				<MessageInput onSend={handleSendMessage} />
+			</View>
+		</>
+	);
+};

apps/mobile/src/components/DmUser/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Conversation as ConversationType } from '../../types/messages';
+import { useStyles } from '../../hooks';
+import { View, Image, Text } from 'react-native';
+import { MessageInput } from '../PrivateMessageInput';
+import { MessagesList } from '../PrivateMessages/MessagesList.tsx';
+import stylesheet from './styles';
+import { IconButton } from '../IconButton';
+import { useSendPrivateMessage } from 'afk_nostr_sdk';
+import { NDKUser } from '@nostr-dev-kit/ndk';
+import { useToast } from '../../hooks/modals';
+import { useQueryClient } from '@tanstack/react-query';
+import { Input } from '../Input';
+
+
+interface IFormPrivateMessage {
+	publicKey?: string;
+	user?: NDKUser;
+	receiverPublicKeyProps?: string
+}
+export const FormPrivateMessageInput: React.FC<IFormPrivateMessage> = ({ user, publicKey, receiverPublicKeyProps }) => {
+	const styles = useStyles(stylesheet);
+	const avatar = user?.profile?.banner ?? require('../../assets/pepe-logo.png');
+
+	const [receiverPublicKey, setReceiverPublicKey] = React.useState(receiverPublicKeyProps)
+	const [content, setContent] = React.useState<string | undefined>()
+	const sendPrivateMessage = useSendPrivateMessage()
+	const { showToast } = useToast()
+	const queryClient = useQueryClient();
+
+	const handleSendMessage = async (message: string) => {
+
+		if (!content) {
+			showToast({ title: "Please add a content", type: "error" })
+			return;
+		}
+
+		if (!receiverPublicKey) {
+			showToast({ title: "Please choose a Nostr public key", type: "error" })
+			return;
+		}
+
+		//todo: integrate hook here
+		//todo: encrypt message
+		//todo: send message
+		await sendPrivateMessage.mutateAsync(
+			{ receiverPublicKey: receiverPublicKey, content, },
+			{
+				onSuccess: () => {
+
+				},
+			},
+		);
+
+	};
+
+	return (
+		<>
+			{/* <View style={styles.header}>
+				<IconButton icon="ChevronLeftIcon" size={20} onPress={handleGoBack} style={styles.backButton} />
+				<View style={styles.headerContent}>
+					<Image source={avatar} style={styles.avatar} />
+					<Text style={styles.name}>{user.name}</Text>
+				</View>
+			</View> */}
+			<View style={styles.container}>
+				<Input value={receiverPublicKey} onChangeText={setReceiverPublicKey} placeholder="Receiver" />
+
+				<MessageInput onSend={handleSendMessage} />
+			</View>
+		</>
+	);
+};

apps/mobile/src/components/PrivateMessages/Chat/index.tsx

@@ -3,7 +3,7 @@ import { ConversationType } from '../../../types/messages';
 import { useStyles } from '../../../hooks';
 import { View, Image, Text } from 'react-native';
 import { MessageInput } from '../PrivateMessageInput';
-import { MessagesList } from '../../MessagesList.tsx';
+import { MessagesList } from '../MessagesList.tsx';
 import stylesheet from './styles';
 import { IconButton } from '../../IconButton';
 

apps/mobile/src/components/PrivateMessages/FormPrivateMessage/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ConversationType } from '../../../types/messages';
 import { useStyles } from '../../../hooks';
 import { View, Image, Text } from 'react-native';
-import { MessagesList } from '../../MessagesList.tsx';
+import { MessagesList } from '../MessagesList.tsx';
 import stylesheet from './styles';
 import { IconButton } from '../../IconButton';
 import { useSendPrivateMessage } from 'afk_nostr_sdk';

apps/mobile/src/components/MessagesList.tsx/index.tsx → apps/mobile/src/components/PrivateMessages/MessagesList.tsx/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, Text, FlatList } from 'react-native';
-import { Message } from '../../types/messages';
+import { Message } from '../../../types/messages';
 import stylesheet from './styles';
-import { useStyles } from '../../hooks';
+import { useStyles } from '../../../hooks';
 
 export type MessagesListProps = {
 	messages: Message[];

apps/mobile/src/components/MessagesList.tsx/styles.ts → apps/mobile/src/components/PrivateMessages/MessagesList.tsx/styles.ts

@@ -1,4 +1,4 @@
-import { ThemedStyleSheet } from '../../styles';
+import { ThemedStyleSheet } from '../../../styles';
 
 export default ThemedStyleSheet((theme) => ({
 	list: {

apps/mobile/src/components/Toast/styles.ts

@@ -29,6 +29,7 @@ export default ThemedStyleSheet((theme, type: 'success' | 'info' | 'error') => (
 
   closeIcon: {
     backgroundColor: theme.colors.transparent,
+    color: theme.colors.text,
     padding: Spacing.none,
   },
 }));

apps/mobile/src/context/Toast/styles.ts

@@ -5,7 +5,8 @@ export default ThemedStyleSheet((theme) => ({
   // export default StyleSheet.create({
   container: {
     position: 'absolute',
-    top: 0,
+    // top: 0,
+    bottom: 45,
     left: 0,
     right: 0,
     zIndex: 100,

apps/mobile/src/modules/DirectMessages/index.tsx

@@ -1,21 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, View } from 'react-native';
 import { useStyles } from '../../hooks';
-import { ConversationType} from '../../types/messages';
+import { ConversationType } from '../../types/messages';
 import { conversationsData } from '../../utils/dummyData';
 import stylesheet from './styles';
 import { Chat } from '../../components/PrivateMessages/Chat';
 import { Conversation as ConversationPreview, Input } from '../../components';
 import { FormPrivateMessage } from '../../components/PrivateMessages/FormPrivateMessage';
-import { useMyGiftWrapMessages } from 'afk_nostr_sdk';
+import { useMyGiftWrapMessages, useMyMessagesSent } from 'afk_nostr_sdk';
 
 export const DirectMessages: React.FC = () => {
 
   const styles = useStyles(stylesheet);
   const [conversations, setConversations] = useState<ConversationType[]>([]);
   const [selectedConversation, setSelectedConversation] = useState<ConversationType | null>(null);
 
-  const giftMessage = useMyGiftWrapMessages()
+  const giftMessages = useMyGiftWrapMessages()
+  const messagesSent = useMyMessagesSent()
   useEffect(() => {
     // Fetch the list of messages
     // const { conversationsData } = useGetMessages();
@@ -26,6 +27,9 @@ export const DirectMessages: React.FC = () => {
     setSelectedConversation(null);
   };
 
+  console.log("giftMessages", giftMessages?.data?.pages)
+  console.log("messagesSent", messagesSent?.data?.pages)
+
   return (
     <>
 
@@ -46,20 +50,18 @@ export const DirectMessages: React.FC = () => {
           </View>
         )}
 
-      <FlatList
-        data={giftMessage?.data?.pages?.flat()}
+      {/* <FlatList
+        data={messagesSent?.data?.pages?.flat()}
         keyExtractor={(conversation) => conversation.id}
-        renderItem={({ item }) =>  {
-
-            console.log("item",item)
-            return(
-              <ConversationPreview conversation={item} onPressed={() => setSelectedConversation(item)} />
-
-            )
-          }
+        renderItem={({ item }) => {
+          // console.log("item",item)
+          return (
+            <ConversationPreview conversation={item} onPressed={() => setSelectedConversation(item)} />
+          )
+        }
         }
         ItemSeparatorComponent={() => <View style={styles.separator} />}
-      />
+      /> */}
     </>
 
   );

apps/mobile/src/screens/ChannelDetail/index.tsx

@@ -4,6 +4,7 @@ import {useStyles} from '../../hooks';
 import {ChannelDetailComponent} from '../../modules/ChannelDetailPage';
 import {ChannelDetailScreenProps} from '../../types';
 import stylesheet from './styles';
+import { Header, IconButton } from '../../components';
 
 export const ChannelDetail: React.FC<ChannelDetailScreenProps> = ({navigation, route}) => {
   const {postId, post} = route.params;
@@ -12,14 +13,14 @@ export const ChannelDetail: React.FC<ChannelDetailScreenProps> = ({navigation, r
 
   return (
     <View style={styles.container}>
-      {/* <Header
+      <Header
         showLogo={false}
         left={<IconButton icon="ChevronLeftIcon" size={24} onPress={navigation.goBack}
         />}
-        right={<IconButton icon="MoreHorizontalIcon" size={24} ></IconButton>}
+        // right={<IconButton icon="MoreHorizontalIcon" size={24} ></IconButton>}
 
-        title="Channel"
-      /> */}
+        title="ChannelDetail"
+      />
       <ChannelDetailComponent route={route} navigation={navigation}></ChannelDetailComponent>
     </View>
   );

packages/afk_nostr_sdk/src/hooks/index.ts

@@ -34,4 +34,5 @@ export {useLeaveGroupRequest} from './group/private/useLeaveRequest';
 export {useRepost} from './useRepost';
 export {useSendPrivateMessage} from './messages/useSendPrivateMessage';
 export {useMyGiftWrapMessages} from './messages/useMyGiftWrapMessages';
+export {useMyMessagesSent} from './messages/useMyMessagesSent';
 

packages/afk_nostr_sdk/src/hooks/messages/useMyMessagesSent.ts

@@ -0,0 +1,37 @@
+import {useInfiniteQuery} from '@tanstack/react-query';
+import { useNostrContext } from '../../context';
+import { useAuth } from '../../store';
+
+export type UseRootProfilesOptions = {
+  authors?: string[];
+  search?: string;
+};
+
+export const useMyMessagesSent = (options?: UseRootProfilesOptions) => {
+  const {ndk} = useNostrContext();
+  const {publicKey} = useAuth()
+  return useInfiniteQuery({
+    initialPageParam: 0,
+    queryKey: ['myMessagesSent', options?.authors, options?.search, ndk],
+    getNextPageParam: (lastPage: any, allPages, lastPageParam) => {
+      if (!lastPage?.length) return undefined;
+
+      const pageParam = lastPage[lastPage.length - 1].created_at - 1;
+
+      if (!pageParam || pageParam === lastPageParam) return undefined;
+      return pageParam;
+    },
+    queryFn: async ({pageParam}) => {
+      const giftsWrap = await ndk.fetchEvents({
+        kinds: [1059 as number],
+        authors: options?.authors,
+        search: options?.search,
+        // until: pageParam || Math.round(Date.now() / 1000),
+        limit: 20,
+      });
+
+      return [...giftsWrap];
+    },
+    placeholderData: {pages: [], pageParams: []},
+  });
+};