Revize 2135f53d

re #10678: ItemNotes refactor NoteListView

src/pages/NotesViewPage.tsx

@@ -1 +1 @@
 import React, { useEffect, useState } from "react"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
-import { Box, Button, ChevronDownIcon, ChevronUpIcon, CloseIcon, Flex, HStack, Icon, IconButton, MinusIcon, Popover, Pressable, ScrollView, Switch, Text, TextArea, VStack } from "native-base"
+import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack } from "native-base"
 import { SortOptions } from "../types/general"
 import { Note } from "../types/note"
 import NotesListView from "../components/notes/NotesListView"
-import { G, Path } from "react-native-svg"
-import { MessageIcon } from "../components/general/Icons"
-import { ConfirmDialog } from "../components/general/Dialogs"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
 import LoadingBox from "../components/loading/LoadingBox"
-import { createNote, deleteNote, getAllNotes, updateNote } from "../stores/actions/notesThunks"
-import { login } from "../stores/actions/userThunks"
+import { createNote, getAllNotes } from "../stores/actions/notesThunks"
 import { RootDrawerParamList } from "./Navigation"
-const NotesViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
+const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
   const { notes, notesLoading, requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)
-  
+
   const dispatch = useDispatch<AppDispatch>();
 
   const [isSortOpen, setIsSortOpen] = useState(false);
-  
-  const [newComment, setNewComment] = useState<string>("");
 
   const [myCommentsCheck, setMyCommentsCheck] = useState(false);
   const [generalCommentsCheck, setGeneralCommentsCheck] = useState(true);
 
-  const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
-
-  const cancelRef = React.useRef(null);
-
-  const [confirmDialog, setConfirmDialog] = React.useState<{
-    headerText?: string;
-    bodyText?: string;
-    confirmText?: string;
-    confirmColor?: string;
-    cancelRef?: any;
-    onClose?: () => void;
-    onSubmit?: () => void;
-  } | null>(null);
-
   const [sortSettings, setSortSettings] = useState({
     items: SortOptions.None,
     date: SortOptions.None
@@ -83 +63 @@
   useEffect(() => {
     log.debug("NotesViewPage", "useEffect", "getNotes");
     getNotes();
-    
-    setNewComment("");
-    setReplyingTo(null);
   }, [triggerRefresh])
 
   // general comments check changed
   useEffect(() => {
-    if(!notesLoading){
+    if (!notesLoading) {
       log.debug("NotesViewPage", "useEffect", "getNotes");
       getNotes();
     }
@@ -105 +82 @@
     }));
   }
 
-  const handleReply = (messageId: string, userName: string) => {
-    setReplyingTo({ messageId, userName })
-  }
-
-  const handleEdit = (note : Note) => {
-    if(!requestPending)
-      dispatch(updateNote(note));
-  }
+  const handleCreateComment = (newComment : string, replyingTo : { messageId: string; userName: string } | null) => {
 
-  const handleDelete = (messageId: string) => {
-    if(!requestPending)
-      dispatch(deleteNote({noteId: messageId}))
-  }
+    console.log(newComment, replyingTo)
 
-  const handleCreateComment = () => {
-    if(!requestPending){
+    if (!requestPending) {
       // creating new comment
-      if(replyingTo != null){
-        dispatch(createNote( {
-          newNote: {note: newComment, reply_to: replyingTo.messageId} as Note
+      if (replyingTo != null) {
+        dispatch(createNote({
+          newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
         }))
       }
-      else{
+      else {
         dispatch(createNote({
-          newNote: {note: newComment} as Note
+          newNote: { note: newComment } as Note
         }))
       }
-    } 
+    }
   }
 
+
   return (
     <Box width="92%" marginLeft="5%">
       <VStack>
@@ -177 +144 @@
           <VStack width="70%" space="0">
             <Flex direction="row" alignItems="center" justify="flex-end">
               <Text>My comments</Text>
-              <Switch isChecked={myCommentsCheck} onValueChange={() => {if(!notesLoading) setMyCommentsCheck(!myCommentsCheck)}} size="md" />
+              <Switch isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="md" />
             </Flex>
             <Flex direction="row" alignItems="center" justify="flex-end" marginTop="-7.5%">
               <Text>General comments</Text>
-              <Switch isChecked={generalCommentsCheck} onValueChange={() => {if(!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck)}} size="md" />
+              <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="md" />
             </Flex>
           </VStack>
         </HStack>
-        <Box h={replyingTo != null ? "62.5%" : "67.5%"}>
-          {
-            notesLoading ? (<LoadingBox text="Loading notes"/>)
-              :
-              (<NotesListView notes={notes} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={navigation} />)
-          }
-        </Box>
-        {replyingTo != null &&
-          <Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">
-            <Text>Replying to {replyingTo.userName}</Text>
-            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
-            </IconButton>
-          </Flex>
+        {
+          notesLoading ? (<LoadingBox text="Loading notes" />)
+            :
+            (<NotesListView notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
         }
-        <HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "5%"}>
-          <TextArea placeholder="Add comment" width="90%" fontSize={14} value={newComment} onChangeText={setNewComment} autoCompleteType={undefined} ></TextArea>
-          <VStack>
-            <Box h={replyingTo != null ? "30%" : "45%"}></Box>
-            <Box marginLeft="2">
-              <Button onPress={handleCreateComment} startIcon={<MessageIcon color="#FFF" /> }></Button>
-            </Box>
-          </VStack>
-        </HStack>
+
       </VStack>
-      <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
     </Box>
   );
 }