Revize f386a4fe

re #10818 Toast: implementation to pages

src/components/listView/ListView.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react"
-import { ScrollView, Text, VStack } from "native-base"
+import { ScrollView, Text, VStack, useToast } from "native-base"
 import { useSelector } from "react-redux"
 import { RootState } from "../../stores/store"
 import ItemPreview from "./ItemPreview"
 import { ItemPreviewType } from "../../types/listViewTypes"
 import { log } from "../../logging/logger"
 import ListViewInventoryGroup from "./ListViewInventoryGroup"
+import { ErrorToast } from "../toast/ErrorToast"
 
 type ListViewProps = {
     navigation: any
@@ -17 +18 @@
     const numberOfResults = useSelector((state: RootState) => state.listView.numOfResults)
 
 
+    const lastError = useSelector((state: RootState) => state.listView.lastError)
+    const toast = useToast();
+
+    useEffect(() => {
+        if (lastError) {
+            toast.closeAll()
+            toast.show({
+                render: ({
+                    id
+                }) => {
+                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
+                },
+                duration: 3000
+            });
+        }
+    }, [lastError])
+
     return (
         <>
-            <Text fontSize={ 16 } fontWeight={ "bold" } color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>
-            { inventories && inventories.length > 0 ?
+            <Text fontSize={16} fontWeight={"bold"} color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>
+            {inventories && inventories.length > 0 ?
                 (inventories.length > 1 ?
                     inventories.map((inventory) => (
-                            <ListViewInventoryGroup
-                                inventoryName={ inventory.name }
-                                inventoryLabel={ inventory.label }
-                                navigation={ props.navigation }
-                            />
-                        )
+                        <ListViewInventoryGroup
+                            inventoryName={inventory.name}
+                            inventoryLabel={inventory.label}
+                            navigation={props.navigation}
+                        />
+                    )
                     ) : (
                         <ListViewInventoryGroup
-                            inventoryName={ inventories[0].name }
-                            inventoryLabel={ inventories[0].label }
-                            navigation={ props.navigation }
-                            defaultOpen={ true }
+                            inventoryName={inventories[0].name}
+                            inventoryLabel={inventories[0].label}
+                            navigation={props.navigation}
+                            defaultOpen={true}
                         />
                     )) : (
-                    <Text alignSelf={ "center" }>No results found</Text>
+                    <Text alignSelf={"center"}>No results found</Text>
                 )
             }
         </>

src/components/notes/NotesListView.tsx

@@ -8 +8 @@
 import { AppDispatch } from "../../stores/store";
 import { useDispatch } from "react-redux";
 import { Dimensions } from "react-native";
+import { InfoToast } from "../toast/InfoToast";
 
 
 
 const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
     const notes = props.notes;
 
-    const toast = useToast();
-
     const [newComment, setNewComment] = useState<string>("");
     const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
 
+    const toast = useToast();
+
     const [renderedNotes, setRenderedNotes] = useState(6);
 
     const cancelRef = React.useRef(null);
@@ -53 +54 @@
         }
     }, [dispatch, props.requestPending]);
 
+
+
     const handleScrollEnd = (event: any) => {
         const offsetY = event.nativeEvent.contentOffset.y;
         const contentHeight = event.nativeEvent.contentSize.height;
@@ -63 +66 @@
             const nextBatchSize = 5; // Number of notes to render in the next batch
 
             if ((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length) {
+                toast.closeAll()
+                toast.show({
+                    render: ({
+                        id
+                    }) => {
+                        return <InfoToast text={"All notes loaded..."} onClose={() => toast.close(id)} />;
+                    },
+                    duration: 3000
+                });
                 setRenderedNotes(notes.length);
-                // TODO toast display info all rendered
+
             }
             else if ((renderedNotes + nextBatchSize) != notes.length) {
+                toast.closeAll()
+                toast.show({
+                    render: ({
+                        id
+                    }) => {
+                        return <InfoToast text={"Loading more notes..."} onClose={() => toast.close(id)} />;
+                    },
+                    duration: 3000
+                });
                 setRenderedNotes(renderedNotes + nextBatchSize);
-                // TODO toast display loading more notes
+
             }
         }
     };
@@ -83 +104 @@
                             <VStack>
                                 {
                                     notes.slice(0, renderedNotes).map((note, index) => {
-                                        
-                                        if(replyingTo?.messageId == note.uuid){
+
+                                        if (replyingTo?.messageId == note.uuid) {
                                             return <NoteView higlighted key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
                                         }
-                                        
+
                                         return <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />;
-                                        
+
                                     })
                                 }
                             </VStack>
@@ -107 +128 @@
 
                     {/* Replying to */}
                     {replyingTo != null &&
-                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{backgroundColor: "#FFF8E1"}}>
+                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{ backgroundColor: "#FFF8E1" }}>
                             <Text>Replying to {replyingTo.userName}</Text>
-                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20 }/>
+                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20} />
                         </Flex>
                     }
 

src/pages/HomePage.tsx

@@ -1 @@
-import { Center, Image, Pressable, ScrollView, Text } from "native-base"
+import { Center, Image, Pressable, ScrollView, Text, useToast } from "native-base"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
 import { useContext, useEffect, useState } from "react"
@@ -9 +9 @@
 import { RootDrawerParamList } from "./Navigation"
 import { log } from "../logging/logger"
 import { HOME_PAGE_IMG_URL } from "../api/constants"
+import { ErrorToast } from "../components/toast/ErrorToast"
 // import { Image } from "react-native"
 
 const HomePage = ({navigation}: DrawerScreenProps<RootDrawerParamList, 'Home'>) => {
     const data = useSelector((state: RootState) => state.homePage.data)
     const loading = useSelector((state: RootState) => state.homePage.loading)
-    const lastError = useSelector((state: RootState) => state.homePage.lastError)
-
+    const lastError = useSelector((state: RootState) => state.itemViewState.lastError)
+    const toast = useToast();
+  
     useEffect(() => {
         if (lastError) {
-
+            toast.closeAll()
+            toast.show({
+                render: ({
+                    id
+                }) => {
+                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
+                },
+                duration: 3000
+            });
         }
-
     }, [lastError])
 
     const [aspectRatio, setAspectRatio] = useState(1.0)

src/pages/ItemViewPage.tsx

@@ -11 +11 @@
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
+import { useToast } from "native-base"
+import { ErrorToast } from "../components/toast/ErrorToast"
 
 
 const ItemViewPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList, 'Item'>) => {
@@ -31 +33 @@
 
   const { item, itemLoading, notes, notesLoading, concordances } = useSelector((state: RootState) => state.itemViewState)
 
+  const lastError = useSelector((state: RootState) => state.itemViewState.lastError)
+  const toast = useToast();
+
+  useEffect(() => {
+      if (lastError) {
+          toast.closeAll()
+          toast.show({
+              render: ({
+                  id
+              }) => {
+                  return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
+              },
+              duration: 3000
+          });
+      }
+  }, [lastError])
+
   // initial: load main item
   useEffect(() => {
     dispatch(getItem(route.params.itemId));

src/pages/LoginPage.tsx

@@ -30 +30 @@
     const [password, setPassword] = useState("")
 
     const lastError = useSelector((state: RootState) => state.user.lastError)
-
     const toast = useToast();
 
-
     useEffect(() => {
         if (lastError) {
             toast.closeAll()
@@ -46 +44 @@
                 duration: 3000
             });
         }
-
     }, [lastError])
 
     const dispatch = useDispatch<AppDispatch>()

src/pages/NotesViewPage.tsx

@@ -1 +1 @@
 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"
+import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack, useToast } from "native-base"
 import { SortOptions } from "../types/general"
 import { Note } from "../types/note"
 import NotesListView from "../components/notes/NotesListView"
@@ -10 +10 @@
 import LoadingBox from "../components/loading/LoadingBox"
 import { createNote, getAllNotes } from "../stores/actions/notesThunks"
 import { RootDrawerParamList } from "./Navigation"
+import { ErrorToast } from "../components/toast/ErrorToast"
 
 const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
@@ -22 +23 @@
   const [myCommentsCheck, setMyCommentsCheck] = useState(false);
   const [generalCommentsCheck, setGeneralCommentsCheck] = useState(true);
 
+  const lastError = useSelector((state: RootState) => state.noteViewState.lastError)
+  const toast = useToast();
+
+  useEffect(() => {
+      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({
     items: SortOptions.None,
     date: SortOptions.None