Revize b5ac7218

#re 10797 NoteViewPage refactor -> Responsive layout

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>