Merge pull request #73 from oss-slu/InlineMediaIssue

Made a comment on what appears to be where changes are needed at first glance

__tests__/InsertImageNoteScreen.test.tsx

@@ -0,0 +1,30 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+import React from 'react';
+import { shallow } from "enzyme";
+import AddNoteScreen from '../lib/screens/AddNoteScreen';
+
+describe("AddNoteScreen", () => {
+  it("adds image to editor", () => {
+    const wrapper = shallow(<AddNoteScreen />);
+
+    // Mock richTextRef
+    const richTextRef = { current: { insertImage: jest.fn() } };
+
+    //hard code copy paste of function
+    const addImageToEditor = (imageUri: string) => {
+      richTextRef.current?.insertImage(imageUri);
+    };
+    // Mock image URI
+    const imageUri = '__tests__/TestResources/TestImage.jpg';
+
+    // Call addImageToEditor function
+    addImageToEditor(imageUri);
+
+    // Verify that the function was called with the correct argument
+    expect(richTextRef.current.insertImage).toHaveBeenCalledWith(imageUri);
+  });
+});

lib/components/photoScroller.tsx

@@ -30,10 +30,12 @@ const PhotoScroller = forwardRef(
       newMedia,
       setNewMedia,
       active,
+      insertImageToEditor,
     }: {
       newMedia: Media[];
       setNewMedia: React.Dispatch<React.SetStateAction<Media[]>>;
       active: Boolean;
+      insertImageToEditor: Function;
     },
     ref
   ) => {
@@ -83,6 +85,7 @@ const PhotoScroller = forwardRef(
           uri: uploadedUrl,
         });
         setNewMedia([...newMedia, newMediaItem]);
+        insertImageToEditor(uploadedUrl);
       } else if (
         uri.endsWith(".jpg") ||
         uri.endsWith("png") ||
@@ -96,6 +99,9 @@ const PhotoScroller = forwardRef(
           uri: uploadedUrl,
         });
         setNewMedia([...newMedia, newMediaItem]);
+        if (insertImageToEditor) {
+          insertImageToEditor(uploadedUrl, 'Captured Image');
+        }
       } else if (
         uri.endsWith(".MOV") ||
         uri.endsWith(".mov") ||

lib/screens/AddNoteScreen.tsx

@@ -74,6 +74,10 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
     }
   };
 
+  const addImageToEditor = (imageUri: string) => {
+    richTextRef.current?.insertImage(imageUri);
+  };
+
   const saveNote = async () => {
     if (titleText === "") {
       navigation.goBack();
@@ -195,7 +199,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
         </TouchableOpacity>
       </View>
       <View style={{ backgroundColor: "white" }}>
-        <PhotoScroller active={viewMedia} newMedia={newMedia} setNewMedia={setNewMedia} />
+        <PhotoScroller active={viewMedia} newMedia={newMedia} setNewMedia={setNewMedia} insertImageToEditor={addImageToEditor} />
         {viewAudio && (
           <AudioContainer newAudio={newAudio} setNewAudio={setNewAudio} />
         )}
@@ -311,6 +315,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
         </ScrollView>
       </View>
     </View>
+
   );
 };
 

lib/screens/EditNoteScreen.tsx

@@ -7,6 +7,7 @@ import {
   useWindowDimensions,
   Text,
 } from "react-native";
+import * as ImagePicker from 'expo-image-picker';
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { Ionicons } from "@expo/vector-icons";
 import { Note } from "../../types";
@@ -34,6 +35,7 @@ const user = User.getInstance();
 const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   route,
   navigation,
+  insertImageToEditor,
 }) => {
   const { note, onSave } = route.params;
   const [title, setTitle] = useState(note.title);
@@ -116,6 +118,11 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
     }
   };
 
+  const addImageToEditor = (imageUri: string) => {
+    richTextRef.current?.insertImage(imageUri);
+  };
+
+
   const handleSaveNote = async () => {
     try {
       const editedNote: Note = {
@@ -239,6 +246,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           active={viewMedia}
           newMedia={media}
           setNewMedia={setMedia}
+          insertImageToEditor={addImageToEditor}
         />
         {viewAudio && (
           <AudioContainer newAudio={newAudio} setNewAudio={setNewAudio} />
@@ -372,6 +380,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
               placeholder="Write your note here"
               onChange={(text) => setText(text)}
               initialContentHTML={text}
+              //at first glance I believe changes need to be made here.
               onCursorPosition={(position) => {
                 handleScroll(position);
               }}

types.ts

@@ -55,6 +55,7 @@ export type EditNoteScreenProps = {
   navigation: {
     goBack: () => void;
   };
+  insertImageToEditor: (capturedImage: string) => void;
 };
 
 export type RootTabParamList = {