Revize b5ac7218

#re 10797 NoteViewPage refactor -> Responsive layout

src/components/notes/NoteView.tsx

@@ -74 +74 @@
         }
     }
 
-    note.items = ["helo"]
-
     return (
         <HStack marginTop={5}>
             <Box width="10" height="10" marginTop="2">

src/components/notes/NotesListView.tsx

@@ -7 +7 @@
 import { ConfirmDialog } from "../general/Dialogs";
 import { AppDispatch } from "../../stores/store";
 import { useDispatch } from "react-redux";
+import { Dimensions } from "react-native";
 
 const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
     const notes = props.notes;
@@ -18 +19 @@
 
     const dispatch = useDispatch<AppDispatch>();
 
+    const windowHeight = Dimensions.get('window').height;
+
     const [confirmDialog, setConfirmDialog] = React.useState<{
         headerText?: string;
         bodyText?: string;
@@ -31 +34 @@
     const handleReply = useCallback((messageId: string, userName: string) => {
         setReplyingTo({ messageId, userName });
     }, [setReplyingTo]);
-    
+
     const handleEdit = useCallback((note: Note) => {
         if (!props.requestPending) {
             dispatch(updateNote(note));
         }
     }, [dispatch, props.requestPending]);
-    
+
     const handleDelete = useCallback((messageId: string) => {
         if (!props.requestPending) {
             dispatch(deleteNote({ noteId: messageId }));
@@ -46 +49 @@
 
     return (
         <VStack>
-            <Box h={props.handleCreateComment == null ? "88%" : (replyingTo != null ? "65%" : "70%")}>
+            <Box height={windowHeight - 70 - 160 - (replyingTo ? 40 : 0)} marginBottom={2}>
+                {/* Notes */}
                 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
                     {
                         notes && notes.length > 0 ? (
                             <VStack>
-                                {notes.map((note, index) => (
-                                    <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
-                                ))}
+                                {notes.map((note, index) => {
+                                    if(index >= 5){
+                                        return null;
+                                    }
+                                    return (
+                                        <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
+                                    )
+                                })}
                             </VStack>
                         ) : (
                             <Text>There are no notes.</Text>
@@ -61 +70 @@
                     }
                 </ScrollView>
             </Box>
-            {
-                props.handleCreateComment != null && 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>
-            }
 
+            {/* Create comment */}
             {
                 props.handleCreateComment != null &&
-                <HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "6%"}>
-                    <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={() => props.handleCreateComment(newComment , replyingTo)} startIcon={<MessageIcon color="#FFF" />}></Button>
-                        </Box>
-                    </VStack>
-                </HStack>
+                <VStack>
+
+                    {/* Replying to */}
+                    {replyingTo != null &&
+                        <Flex direction="row" alignItems="center" justify="flex-end" marginRight={20} height={10}>
+                            <Text>Replying to {replyingTo.userName}</Text>
+                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
+                            </IconButton>
+                        </Flex>
+                    }
+                    
+
+                    {/* Add comment */}
+                    <HStack height={90} >
+                        <TextArea
+                            flex={1}
+                            placeholder="Add comment"
+                            fontSize={14}
+                            value={newComment}
+                            onChangeText={setNewComment}
+                            autoCompleteType={undefined}
+                        />
+                        <Flex marginLeft={2} marginBottom={8}>
+                            <Button onPress={() => props.handleCreateComment(newComment, replyingTo)} startIcon={<MessageIcon color="#FFF" />}>
+                                Send
+                            </Button>
+                        </Flex>
+                    </HStack>
+                </VStack>
             }
             <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
-        </VStack>
+        </VStack >
     );
 }
 

src/pages/NotesViewPage.tsx

@@ -1 @@
-import React, { useEffect, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack } from "native-base"
@@ -10 +10 @@
 import LoadingBox from "../components/loading/LoadingBox"
 import { createNote, getAllNotes } from "../stores/actions/notesThunks"
 import { RootDrawerParamList } from "./Navigation"
+import { Dimensions } from "react-native"
 const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
   const { notes, notesLoading, requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)
@@ -26 +27 @@
     date: SortOptions.None
   });
 
-  const handleSortChanged = (key: "items" | "date") => {
+  const handleSortChanged = useCallback((key: "items" | "date") => {
     let currentState = sortSettings[key];
     if (currentState == SortOptions.None) {
       setSortSettings({
@@ -46 +47 @@
         [key]: SortOptions.None
       })
     }
-  }
+  }, [setSortSettings]);
 
   const getSortIcon = (sortOption: SortOptions, size: string) => {
     switch (sortOption) {
@@ -103 +104 @@
 
 
   return (
-    <Box width="92%" marginLeft="5%">
+    <Box marginLeft={2.5} marginRight={2.5} marginTop={2.5}>
       <VStack>
-        <HStack marginTop="5%">
-          <Box width="30%" justifyContent={"center"}>
+        <HStack height={75} justifyContent="space-between">
+          <Box justifyContent={"center"}>
             <Popover // @ts-ignore
               trigger={triggerProps => {
                 return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
@@ -141 +142 @@
               </Popover.Content>
             </Popover>
           </Box>
-          <VStack width="70%" space="0">
-            <Flex direction="row" alignItems="center" justify="flex-end">
+
+          <VStack space={0.5}>
+            <Flex direction="row" alignItems="center" justify="flex-end" height={35}>
               <Text>My comments</Text>
               <Switch isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="md" />
             </Flex>
-            <Flex direction="row" alignItems="center" justify="flex-end" marginTop="-7.5%">
+            <Flex direction="row" alignItems="center" justify="flex-end" height={35}>
               <Text>General comments</Text>
               <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="md" />
             </Flex>
           </VStack>
         </HStack>
-        <Box>
-          {
-            notesLoading ? (
-              <LoadingBox text="Loading notes" />
-            )
-              :
-              (<NotesListView notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
-          }
-        </Box>
+        {
+          notesLoading ? (
+            <LoadingBox text="Loading notes" />
+          )
+            :
+            (<NotesListView notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
+        }
 
 
       </VStack>