From 652e099d8877a629b916881550ed34f7e2a51b05 Mon Sep 17 00:00:00 2001
From: Ryuzaki01 <shinji666mmc@gmail.com>
Date: Sat, 16 Sep 2023 18:25:38 +0700
Subject: [PATCH 1/2] + Typescript Cleanup

---
 example/src/ConversationScreen.tsx | 21 ++++++++++++---------
 example/src/HomeScreen.tsx         |  2 +-
 example/src/XmtpContext.tsx        |  4 ++--
 example/src/hooks.tsx              |  2 +-
 example/src/storage.ts             |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/example/src/ConversationScreen.tsx b/example/src/ConversationScreen.tsx
index 1b79f967b..9e22e9c96 100644
--- a/example/src/ConversationScreen.tsx
+++ b/example/src/ConversationScreen.tsx
@@ -36,12 +36,17 @@ import { PermissionStatus } from "expo-modules-core";
 import type { DocumentPickerAsset } from "expo-document-picker";
 import type { ImagePickerAsset } from "expo-image-picker";
 
+type Attachment = {
+  file?: DocumentPickerAsset
+  image?: ImagePickerAsset
+}
+
 /// Show the messages in a conversation.
 export default function ConversationScreen({
   route,
 }: NativeStackScreenProps<NavigationParamList, "conversation">) {
   let { topic } = route.params;
-  let messageListRef = useRef<FlatList>();
+  let messageListRef = useRef<FlatList>(null);
   let {
     data: messages,
     refetch: refreshMessages,
@@ -52,8 +57,7 @@ export default function ConversationScreen({
   let [replyingTo, setReplyingTo] = useState<string | null>(null);
   let [text, setText] = useState("");
   let [isShowingAttachmentModal, setShowingAttachmentModal] = useState(false);
-  let [attachment, setAttachment] = useState<
-    { image: ImagePickerAsset } | { file: DocumentPickerAsset } | null
+  let [attachment, setAttachment] = useState<Attachment | null
   >(null);
   let [isAttachmentPreviewing, setAttachmentPreviewing] = useState(false);
   let [isSending, setSending] = useState(false);
@@ -255,8 +259,7 @@ function AttachmentPreviewModal({
   onRequestClose,
 }: {
   attachment:
-    | { image: ImagePickerAsset }
-    | { file: DocumentPickerAsset }
+    Attachment
     | null;
   visible: boolean;
   onRequestClose: () => void;
@@ -264,7 +267,7 @@ function AttachmentPreviewModal({
   let isImage = attachment?.image?.type === "image";
   return (
     <CenteredModal visible={visible} onRequestClose={onRequestClose}>
-      {isImage && (
+      {(isImage && attachment?.image) && (
         <Image
           source={attachment.image}
           style={{
@@ -306,7 +309,7 @@ function AttachmentInputHeader({
   onRemove,
 }: {
   topic: string;
-  attachment: { file: DocumentPickerAsset } | { image: ImagePickerAsset };
+  attachment: Attachment;
   onPress: () => void;
   onRemove: () => void;
 }) {
@@ -323,7 +326,7 @@ function AttachmentInputHeader({
       }}
     >
       <TouchableOpacity onPress={onPress}>
-        {isImage && (
+        {(isImage && attachment?.image) && (
           <Image
             source={attachment.image}
             style={{
@@ -609,7 +612,7 @@ function AttachmentModal({
                   copyToCacheDirectory: true,
                   multiple: false,
                 });
-                if (result.type === "success" && result.assets?.length) {
+                if (!result.canceled && result.assets?.length) {
                   onAttachedFile(result.assets[0]);
                 }
               }}
diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx
index 2d29ce75e..f120debc0 100644
--- a/example/src/HomeScreen.tsx
+++ b/example/src/HomeScreen.tsx
@@ -1,7 +1,7 @@
 import { NavigationParamList } from "./Navigation";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { useXmtp } from "./XmtpContext";
-import { useConversationList, useLastMessage, useMessages } from "./hooks";
+import { useConversationList, useMessages } from "./hooks";
 import {
   Button,
   FlatList,
diff --git a/example/src/XmtpContext.tsx b/example/src/XmtpContext.tsx
index b93e780cd..963cb73ed 100644
--- a/example/src/XmtpContext.tsx
+++ b/example/src/XmtpContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState } from "react";
+import {createContext, FC, useContext, useMemo, useState} from "react";
 import * as XMTP from "xmtp-react-native-sdk";
 
 const XmtpContext = createContext<{
@@ -9,7 +9,7 @@ const XmtpContext = createContext<{
   setClient: () => {},
 });
 export const useXmtp = () => useContext(XmtpContext);
-export function XmtpContextProvider({ children }) {
+export const XmtpContextProvider: FC<any> = ({ children }) => {
   let [client, setClient] = useState<XMTP.Client | null>(null);
   let context = useMemo(() => ({ client, setClient }), [client, setClient]);
   return (
diff --git a/example/src/hooks.tsx b/example/src/hooks.tsx
index dcaafe763..ce50cd60a 100644
--- a/example/src/hooks.tsx
+++ b/example/src/hooks.tsx
@@ -248,7 +248,7 @@ export function usePrepareRemoteAttachment({
   fileUri,
   mimeType,
 }: {
-  fileUri?: `file://${string}`;
+  fileUri?: string;
   mimeType?: string;
 }): {
   remoteAttachment: RemoteAttachmentContent | undefined;
diff --git a/example/src/storage.ts b/example/src/storage.ts
index 62cd03536..23297650e 100644
--- a/example/src/storage.ts
+++ b/example/src/storage.ts
@@ -25,7 +25,7 @@ export async function uploadFile(
   return url;
 }
 
-export async function downloadFile(url: string): Promise<`file://${string}`> {
+export async function downloadFile(url: string): Promise<string> {
   console.log("downloading from", url);
   let res = await ReactNativeBlobUtil.config({ fileCache: true }).fetch(
     "GET",

From fd38436a052941a592a4643f8adb886e23587370 Mon Sep 17 00:00:00 2001
From: Ryuzaki01 <shinji666mmc@gmail.com>
Date: Mon, 18 Sep 2023 10:17:29 +0700
Subject: [PATCH 2/2] + Fix XmtpProvider Props typecheck

---
 example/src/XmtpContext.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/example/src/XmtpContext.tsx b/example/src/XmtpContext.tsx
index 963cb73ed..35139a78d 100644
--- a/example/src/XmtpContext.tsx
+++ b/example/src/XmtpContext.tsx
@@ -1,4 +1,4 @@
-import {createContext, FC, useContext, useMemo, useState} from "react";
+import {createContext, FC, ReactNode, useContext, useMemo, useState} from "react";
 import * as XMTP from "xmtp-react-native-sdk";
 
 const XmtpContext = createContext<{
@@ -9,7 +9,10 @@ const XmtpContext = createContext<{
   setClient: () => {},
 });
 export const useXmtp = () => useContext(XmtpContext);
-export const XmtpContextProvider: FC<any> = ({ children }) => {
+type Props = {
+  children: ReactNode
+}
+export const XmtpContextProvider: FC<Props> = ({ children }) => {
   let [client, setClient] = useState<XMTP.Client | null>(null);
   let context = useMemo(() => ({ client, setClient }), [client, setClient]);
   return (