fix note + user details page + readme + screens + readme

JoyboyCommunity/README.md

@@ -44,12 +44,15 @@ Home page:
 [UI video discussions](https://t.me/JoyboyStarknet/206/397)
 
 Create Nostr account
-  <img src="../resources/screens/create-account.png" alt="create-account" height="300"/>
+<img src="../resources/screens/create-account.png" alt="create-account" height="300"/>
 
 Feed by default
-  <img src="../resources/screens/feed-default.png" alt="feed-default" height="300"/>
+<img src="../resources/screens/feed-default.png" alt="feed-default" height="300"/>
 
 User feed with notes
+<img src="../resources/screens/user-profile-details.png" alt="feed-default" height="300"/>
 
+My profile page: WIP
+<img src="../resources/screens/my-profile.png" alt="my-profile" height="300"/>
 
 Pick a good first issue with the mobile labels, and let's contribute and keep building cool things in Open-source.

JoyboyCommunity/src/hooks/useLocalstorage.ts

@@ -3,10 +3,8 @@ import CryptoJS from "react-native-crypto-js";
 import {
   base64ToUint8Array,
   uint8ArrayToBase64,
-  uint8ArrayToString,
   utf8StringToUint8Array,
 } from "../utils/format";
-// import CryptoJS from "crypto-js";
 
 export const useLocalstorage = () => {
   // Function to encrypt and store the private key
@@ -34,18 +32,14 @@ export const useLocalstorage = () => {
     readablePrivateKey?: string
   ) => {
     try {
-      console.log("privateKey", privateKey?.toString());
-
       const base64Key = uint8ArrayToBase64(privateKey);
-      console.log("base64Key", base64Key?.toString());
 
       const encryptedPrivateKeyArray = CryptoJS.AES.encrypt(
         base64Key,
         password
       ).toString();
 
       await AsyncStorage.setItem("symmetricKey", password);
-      console.log("base64Key", base64Key);
 
       // Store the encrypted private key using AsyncStorage
       await AsyncStorage.setItem(

JoyboyCommunity/src/hooks/useNostr.tsx

@@ -1,4 +1,5 @@
 import {
+  Filter,
   NostrEvent,
   SimplePool,
   VerifiedEvent,
@@ -12,6 +13,7 @@ import { generateSecretKey, getPublicKey } from "nostr-tools";
 import NDK, { NDKEvent, NDKNip07Signer } from "@nostr-dev-kit/ndk";
 import { RELAYS_PROD } from "../utils/relay";
 import { uint8ArrayToHex } from "../utils/format";
+import { queryProfile } from "nostr-tools/lib/types/nip05";
 export const useNostr = () => {
   const pool = new SimplePool();
   const relays = RELAYS_PROD;
@@ -141,6 +143,39 @@ export const useNostr = () => {
     }
   };
 
+  const getEventsByQuery = async (
+    ids: string[] = ["1", "3"],
+    filter?: Filter,
+    relaysProps?: string[]
+  ) => {
+    try {
+      let events = await pool.querySync(relaysProps ?? relays, {
+        ids: ids,
+        ...filter,
+      });
+      return events;
+    } catch (e) {
+      console.log("error getEventsByQuery", e);
+    }
+  };
+
+  const getUserQuery = async (
+    pubkey: string,
+    id: string = "0",
+    isSetEvents?: boolean
+  ) => {
+    try {
+      let events = await pool.get(relays, {
+        kinds: [Number(id)],
+        authors: [pubkey],
+      });
+      return events;
+      // return await queryProfile(pubkey);
+    } catch (e) {
+      console.log("error getUserQuery", e);
+    }
+  };
+
   const getEventsNotesFromPubkey = async (
     pubkey: string,
     relaysUser?: string[],
@@ -160,6 +195,26 @@ export const useNostr = () => {
     }
   };
 
+  const getEventsFromPubkey = async (
+    pubkey: string,
+    relaysUser?: string[],
+    isSetEvents?: boolean,
+    kinds?: number[]
+  ) => {
+    try {
+      let events = await pool.querySync(relaysUser ?? relays, {
+        kinds: kinds ?? [1, 3],
+        authors: [pubkey],
+      });
+      if (isSetEvents) {
+        setEventsData(events);
+      }
+      return events;
+    } catch (e) {
+      console.log("error getUser", e);
+    }
+  };
+
   const sendNote = (
     sk: Uint8Array,
     content: string,
@@ -220,5 +275,8 @@ export const useNostr = () => {
     getEventsNotesFromPubkey,
     sendNote,
     getPublicKeyByPk,
+    getUserQuery,
+    getEventsFromPubkey,
+    getEventsByQuery,
   };
 };

JoyboyCommunity/src/screens/UserDetailScreen.tsx

@@ -10,10 +10,11 @@ import {
   Platform,
   FlatList,
   useWindowDimensions,
+  ActivityIndicator,
 } from "react-native";
 import { RouteProp, useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
-import { RootStackParamList } from "../types";
+import { IUserEvent, RootStackParamList } from "../types";
 import { useNostr } from "../hooks/useNostr";
 import { Event as EventNostr } from "nostr-tools";
 import styled, { useTheme } from "styled-components";
@@ -124,14 +125,16 @@ const ThirdRoute = (datas: EventNostr[]) => {
 
 /** @TODO fetch user */
 const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
-  const { getEvent, getUser, getEventsNotesFromPubkey } = useNostr();
+  const { getEvent, getUser, getEventsNotesFromPubkey, getUserQuery } =
+    useNostr();
 
   const { userId: userQuery } = route.params;
   const [eventProfile, setEventProfile] = useState<NDKUser | undefined>();
   const [eventsTool, setEventsTool] = useState<EventNostr[] | undefined>();
   const [events, setEvents] = useState<EventNostr[] | undefined>();
   const [imgUser, setImageUser] = useState<string | undefined>();
   const [isLoading, setIsLoading] = useState<boolean | undefined>(false);
+  const [profile, setProfile] = useState<IUserEvent | undefined>();
   const navigation = useNavigation();
   const [index, setIndex] = React.useState(0);
   const [contentParsed, setContentParsed] = useState<string | undefined>();
@@ -159,14 +162,19 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
 
       if (userQuery) {
         let eventUser = await getUser(userQuery);
-        console.log("eventUser", eventUser);
-        console.log("eventUser profile", eventUser?.profile);
-        // let profile = await eventUser?.fetchProfile();
-        // console.log("profile", profile);
         setEventProfile(eventUser);
+        let userQueryReq = await getUserQuery(userQuery);
 
+        /** NIP-05 Metadata is in string 
+         * kind:0 
+         * Parsed content to UserMetadata
+        */
+        let contentParsed = JSON.parse(userQueryReq?.content);
+        let profile: IUserEvent = contentParsed;
+        console.log("profile", profile);
+        setProfile(profile);
+
         let events = await getEventsNotesFromPubkey(userQuery);
-        console.log("events user", events);
         setEvents(events);
         return events;
       }
@@ -196,6 +204,7 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
           return (
             <Post
               //  post={item}
+              sourceUser={profile?.picture}
               event={item}
             />
           );
@@ -208,7 +217,7 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
       />
     );
   };
-  
+
   const renderScene = SceneMap({
     posts: FirstRoute,
     replies: SecondRoute,
@@ -253,9 +262,7 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
   };
 
   return (
-    <ScrollView
-    style={styles.container}
-    >
+    <ScrollView style={styles.container}>
       <BackButton onPress={() => handleGoBack()}>
         <Typography
           variant="ts19m"
@@ -264,16 +271,41 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
           Back
         </Typography>
       </BackButton>
-      <View 
-      style={styles.profileContainer}>
-        <Image
-          source={
-            eventProfile?.profile?.image ??
-            require("../../assets/joyboy-logo.png")
-          }
-          style={styles.profilePicture}
-        />
+      <View style={{ position: "relative", marginTop: -10, height: 270 }}>
+        {profile?.banner && (
+          <Image
+            source={{ uri: profile?.banner }}
+            style={{
+              width: Platform.OS != "android" ? "100%" : 250,
+
+              height: 200,
+              resizeMode: "cover",
+              marginTop: 8,
+            }}
+          />
+        )}
 
+        <View style={{ position: "relative" }}>
+          <Image
+            source={{
+              uri: profile?.picture ?? require("../../assets/joyboy-logo.png"),
+            }}
+            style={{
+              borderWidth: 2,
+              borderColor: "white",
+              height: 100,
+              width: 100,
+              resizeMode: "cover",
+              borderRadius: 50,
+              left: 12,
+              top: 0,
+              transform: [{ translateY: -50 }],
+            }}
+          />
+        </View>
+      </View>
+      <View style={styles.profileContainer}>
+        {isLoading && <ActivityIndicator></ActivityIndicator>}
         <Text
           style={styles.text}
           // numberOfLines={1}
@@ -286,15 +318,15 @@ const UserDetailScreen: React.FC<Props> = ({ route, userId }) => {
           style={styles.text}
           // colorCode={theme.black[10]}
         >
-          {eventProfile?.profile?.name}
+          {eventProfile?.profile?.name ?? profile?.name}
         </Text>
 
         <Text
           // variant="ts15r"
           style={styles.text}
           // colorCode={theme.black[10]}
         >
-          {eventProfile?.profile?.bio}
+          {eventProfile?.profile?.bio ?? profile?.about}
         </Text>
 
         {/* Render user details here */}
@@ -324,7 +356,7 @@ const styles = StyleSheet.create({
     // flex: 1,
     height: 350,
     color: "white",
-    padding: 4,
+    // padding: 4,
     gap: 4,
     flex: 0.9,
   },
@@ -351,7 +383,6 @@ const styles = StyleSheet.create({
     textAlign: "left",
     marginBottom: 20,
     width: Platform.OS != "android" ? "100%" : 250,
-
   },
   listContainer: {
     width: Platform.OS != "android" ? "100%" : 250,

JoyboyCommunity/src/shared/components/Post.tsx

@@ -1,4 +1,11 @@
-import { View, Text, Image, Pressable, TouchableOpacity, Platform } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  TouchableOpacity,
+  Platform,
+} from "react-native";
 import React from "react";
 import styled from "styled-components/native";
 import { Event as EventNostr } from "nostr-tools";
@@ -21,6 +28,7 @@ interface PostProps {
     pubkey: string;
   }; // TODO FIX and use only typed event
   event?: EventNostr;
+  sourceUser?: string;
 }
 
 export default function Post(props: PostProps) {
@@ -37,7 +45,7 @@ export default function Post(props: PostProps) {
       <View style={{ flex: 0.1 }}>
         <Pressable onPress={() => handleProfilePress(event?.pubkey)}>
           <Image
-            source={require("../../../assets/joyboy-logo.png")}
+            source={props?.sourceUser ?? require("../../../assets/joyboy-logo.png")}
             style={{ width: 44, height: 44 }}
           />
         </Pressable>

JoyboyCommunity/src/types/index.ts

@@ -36,4 +36,16 @@ export interface NIP05Content {
   display_name?:string;
   npub?:string;
   created_at?:string;
+}
+
+
+export interface IUserEvent {
+  about?:string;
+  display_name?:string;
+  lud16?:string;
+  website?:string;
+  picture?:string;
+  nip05?:string;
+  banner?:string;
+  name?:string;
 }

README.md

@@ -151,18 +151,21 @@ Proposal for UI Mobile.
 Here are some work already merge and available for test:
 
 Home page: 
-  <img src="resources/screens/onboard.png" alt="onboard" height="300"/>
+<img src="resources/screens/onboard.png" alt="onboard" height="300"/>
 
 [UI video discussions](https://t.me/JoyboyStarknet/206/397)
 
-Create Nostr account
-  <img src="resources/screens/create-account.png" alt="create-account" height="300"/>
+Create Nostr account:
+<img src="resources/screens/create-account.png" alt="create-account" height="300"/>
 
 Feed by default
-  <img src="resources/screens/feed-default.png" alt="feed-default" height="300"/>
+<img src="resources/screens/feed-default.png" alt="feed-default" height="300"/>
 
 User feed with notes
-  <img src="resources/screens/user-page-feed.png" alt="user-page-feed" height="300"/>
+<img src="resources/screens/user-profile-details.png" alt="user-profile-details" height="300"/>
+
+My profile
+<img src="resources/screens/user-profile.png" alt="my-profile" height="300"/>
 
 Pick an issue with the labels "mobile" to start work on React-native and contribute!