Revize 9814562f

re #10895: NoteViewPage: Sort refactor

src/components/item/ItemView.tsx

@@ -251 +251 @@
         props.notesLoading ?
             (<LoadingBox text="Notes loading..." />)
             :
-            (<VStack paddingLeft={2.5} paddingRight={2.5}>
-                <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={2.5}>
+            (<VStack>
+                <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={2.5} marginLeft={2.5} marginRight={2.5}>
                     <Text fontWeight="semibold" mt={4} ml={2} fontSize="md" color="4D4D4D">Show related comments</Text>
                     <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="lg" marginRight={2} />
                 </Flex>

src/components/notes/NoteView.tsx

@@ -83 +83 @@
     }
 
     return (
-        <HStack style={props.higlighted && {backgroundColor: "#FFF8E1",borderBottomColor: '#FFD54F', borderBottomWidth: 1.5, paddingBottom: 10}} marginTop={5}>
+        <HStack style={props.higlighted && { backgroundColor: "#FFF8E1", borderBottomColor: '#FFD54F', borderBottomWidth: 1.5, paddingBottom: 10 }} marginTop={5}>
             <Box width="10" height="10" marginTop="2">
                 <Avatar bg={note.noteColor} size="sm" source={{
                     uri: AVATAR_URL + "/" + note.avatarUrl
@@ -119 +119 @@
 
                     {note.items && note.items.length > 0 &&
                         <Flex marginLeft={1} flex={0}>
-                            <Button p={1} variant="outline" size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
-                                {note.items[0]}
+                            <Button p={1} variant="solid" backgroundColor="#F4DFAB" borderRadius={8} size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
+                                <Text color="#654B07" fontSize={12}>
+                                    {note.items[0]}
+                                </Text>
                             </Button>
                         </Flex>
 
@@ -168 +170 @@
                     </Flex>
                 </HStack>
                 {showReplies &&
-                    <VStack style={{borderLeftColor: '#FFC107', borderLeftWidth: 1, paddingLeft: 5, marginTop: 5}}>
+                    <VStack style={{ borderLeftColor: '#FFC107', borderLeftWidth: 1, paddingLeft: 5, marginTop: 5 }}>
                         {note.replies?.map((note, index) => {
                             return (
                                 <NoteView key={index} note={note} handleReply={null} handleDelete={props.handleDelete} handleEdit={props.handleEdit} setConfirmDialog={props.setConfirmDialog} navigation={props.navigation} />

src/components/notes/NotesListView.tsx

@@ -92 +92 @@
     };
 
     return (
-        <VStack>
+        <VStack >
             <Box height={props.height - (replyingTo ? 40 : 0) ?? undefined} marginBottom={2}>
                 {/* Notes */}
-                <ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd}>
+                <ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd} paddingLeft={2.5} paddingRight={2.5}>
                     {
                         notes && notes.length > 0 ? (
                             <VStack>

src/pages/ItemViewPage.tsx

@@ -97 +97 @@
 
 
   const handleIndexChanged = useCallback((newIndex: number, swipe?: boolean) => {
-    if(swipe && item){
-      log.debug("swipe change")
-      console.log(newIndex)
-      console.log(index)
-      if(newIndex > fakeIndex){
-        // next items
-        if(item.nextItem){
-          navigation.navigate("Item", { itemId: item.nextItem.toString() })
-        }
-        else{
-          log.debug("no next item")
-        }
-      }
-      else if(newIndex < fakeIndex){
-        // previous items
-        if(item.prevItem){
-          navigation.navigate("Item", { itemId: item.prevItem.toString() })
-        }
-        else{
-          log.debug("no prev item")
-        }
-      }
-    }
-    else if (newIndex >= 0 && newIndex < concordances.length && index != newIndex) {
+    // if(swipe && item){
+    //   log.debug("swipe change")
+    //   console.log(newIndex)
+    //   console.log(index)
+    //   if(newIndex > index){
+    //     // next items
+    //     if(item.nextItem){
+    //       navigation.navigate("Item", { itemId: item.nextItem.toString() })
+    //     }
+    //     else{
+    //       log.debug("no next item")
+    //     }
+    //   }
+    //   else if(newIndex < index){
+    //     // previous items
+    //     if(item.prevItem){
+    //       navigation.navigate("Item", { itemId: item.prevItem.toString() })
+    //     }
+    //     else{
+    //       log.debug("no prev item")
+    //     }
+    //   }
+    // }
+    // else 
+    if (newIndex >= 0 && newIndex < concordances.length && index != newIndex) {
       console.log("index changed");
       setIndex(newIndex);
       if (concordances && concordances.length > 0) {

src/pages/NotesViewPage.tsx

@@ -30 +30 @@
   const toast = useToast();
 
   useEffect(() => {
-      if (lastError) {
-          toast.closeAll()
-          toast.show({
-              render: ({
-                  id
-              }) => {
-                  return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
-              },
-              duration: 3000
-          });
-      }
+    if (lastError) {
+      toast.closeAll()
+      toast.show({
+        render: ({
+          id
+        }) => {
+          return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
+        },
+        duration: 3000
+      });
+    }
   }, [lastError])
 
   const [sortSettings, setSortSettings] = useState({
@@ -48 +48 @@
     date: SortOptions.None
   });
 
+  console.log(sortSettings)
+
   const handleSortChanged = useCallback((key: "items" | "date", sortSettings: any) => {
     let currentState = sortSettings[key];
+    let otherKey = "items"
+
+    if (key == "items") {
+      otherKey = "date"
+    }
+
     if (currentState == SortOptions.None) {
       setSortSettings({
         ...sortSettings,
-        [key]: SortOptions.Asc
+        [key]: SortOptions.Asc,
+        [otherKey]: SortOptions.None
       })
     }
     else if (currentState == SortOptions.Asc) {
       setSortSettings({
         ...sortSettings,
-        [key]: SortOptions.Desc
+        [key]: SortOptions.Desc,
+        [otherKey]: SortOptions.None
       })
     }
     else {
       setSortSettings({
         ...sortSettings,
-        [key]: SortOptions.None
+        [key]: SortOptions.None,
+        [otherKey]: SortOptions.None
       })
     }
   }, [setSortSettings]);
 
-  const getSortIcon = (sortOption: SortOptions, size: string) => {
+  const getSortIcon = (sortOption: SortOptions, size: string, color?: string) => {
     switch (sortOption) {
       case SortOptions.Asc:
-        return <ChevronUpIcon size={size} />;
+        return <ChevronUpIcon size={size} color={color} />;
       case SortOptions.Desc:
-        return <ChevronDownIcon size={size} />;
+        return <ChevronDownIcon size={size} color={color} />;
       default:
-        return <MinusIcon size={size} />;
+        return <MinusIcon size={size} color={color} />;
     }
   };
 
@@ -112 +123 @@
       // creating new comment
       toast.show({
         render: ({
-            id
+          id
         }) => {
-            return <InfoToast  text={"Adding note"} onClose={() => toast.close(id)} />;
+          return <InfoToast text={"Adding note"} onClose={() => toast.close(id)} />;
         },
         duration: 2000
-    });
+      });
       if (replyingTo != null) {
         dispatch(createNote({
           newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
@@ -134 +145 @@
 
 
   return (
-    <Box marginLeft={2.5} marginRight={2.5} marginTop={2.5}>
+    <Box>
       <VStack>
-        <HStack height={75} justifyContent="space-between">
+        <HStack height={75} justifyContent="space-between" paddingLeft={2.5} paddingRight={2.5} marginTop={2.5}>
           <Box justifyContent={"center"}>
             <Popover // @ts-ignore
               trigger={triggerProps => {
-                return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
-                  Sort Options
+                return <Button width={150} backgroundColor="#F4DFAB" {...triggerProps} onPress={() => setIsSortOpen(true)}
+                  borderRadius={7}
+                  rightIcon={(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (getSortIcon(sortSettings.date != SortOptions.None ? sortSettings.date : sortSettings.items, "xs", "#654B07")) : undefined}
+                >
+                  <Text fontSize={14} color="#654B07">
+                    Sort {(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (sortSettings.date != SortOptions.None ? "by date" : "by items") : ""}
+                  </Text>
                 </Button>;
               }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
               <Popover.Content w="48">
                 <Popover.Arrow />
                 <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
-                <Popover.Header>Sort Options</Popover.Header>
+                <Popover.Header><Text fontSize={"md"} color="#654B07">Sort Options</Text></Popover.Header>
                 <Popover.Body>
                   <VStack>
                     <Button size="md" variant="outline" onPress={() => handleSortChanged("items", sortSettings)}
-                      rightIcon={getSortIcon(sortSettings.items, "sm")}
+                      rightIcon={getSortIcon(sortSettings.items, "sm", "#654B07")}
                     >
                       Items</Button>
                     <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date", sortSettings)}
-                      rightIcon={getSortIcon(sortSettings.date, "sm")}>
+                      rightIcon={getSortIcon(sortSettings.date, "sm", "#654B07")}>
                       Date</Button>
                   </VStack>
                 </Popover.Body>
@@ -164 +180 @@
                     <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
                       Cancel
                     </Button>
-                    <Button colorScheme="success" onPress={() => { setIsSortOpen(false); getNotes() }}>
-                      Save
+                    <Button backgroundColor={"#F4DFAB"} onPress={() => { setIsSortOpen(false); getNotes() }}>
+                      <Text color="#654B07">
+                        Save
+                      </Text>
                     </Button>
                   </Button.Group>
                 </Popover.Footer>