Revize bb690a9a

re #10569: NotesView: Get Notes

src/api/api.ts

@@ -6 +6 @@
     baseURL: BASE_URL,
     withCredentials: true
 })
-

src/api/notesservice.ts

@@ +1 @@
+import { SortOptions } from "../types/general"
 import { axiosInstance } from "./api"
 
 
 export const getItemNotesRequest = async (itemId : string) => {
     return await axiosInstance.get(
-        `/api/notes/?item_id[]=${itemId}`
+        `/notes/?item_id[]=${itemId}`
     )
 }
 
+export const getAllNotesRequest = async (myComments : boolean, generalComments : boolean, sortOptions: { items: SortOptions, date: SortOptions }) => {
+    let url = `/notes/?my_notes=${myComments}&general_notes=${generalComments}`;
+
+    if(sortOptions.date != SortOptions.None){
+        url += "&order_by=date&order_dir="+sortOptions.date;
+    }
+    if(sortOptions.items != SortOptions.None){
+        url += "&order_by=items&order_dir="+sortOptions.items;
+    }
+
+    return await axiosInstance.get(
+        url
+    )
+}
+
+
+

src/components/item/ItemView.tsx

@@ -55 +55 @@
                             {item.fullView && item.imageUrl && (
                                 <Center background="primary.100" marginTop="5%">
                                     <Text>Resembling object</Text>
-                                    <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
+                                    <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }}/>
                                 </Center>)}
                             {item.fullView && (
                                 <Card shadow="1" marginTop="5%" marginBottom="5%">
@@ -138 +138 @@
                 notesLoading ?
                     <LoadingBox text="Notes loading" />
                     :
-                    <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")}/>
+                    <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => {}}/>
             )}
 
             {/* item notes switch tab */}

src/components/notes/NoteView.tsx

@@ -13 +13 @@
 
     const [text, setText] = useState(note.note);
 
-    const getDateString = (date: Date): string => {
-        return date.toLocaleDateString("en-US",
+    const getDateString = (timestamp: Date): string => {
+        return new Date(timestamp).toLocaleString("en-US",
             { year: "numeric", month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }
         ).replace(/,/g, "").replace(/ /g, "-").replace(/-(?!.*-)/, " ");
     }
@@ -31 +31 @@
             if (text == note.note) {
                 setIsEdited(false);
             }
-            else{
+            else {
                 // confirm dialog
                 props.setConfirmDialog({
                     headerText: "Cancel Edit",
@@ -55 +55 @@
             confirmText: "Delete",
             confirmColor: "danger",
             onClose: () => { props.setConfirmDialog(null) },
-            onSubmit: () => { props.handleDelete(note.uuid);props.setConfirmDialog(null) }
+            onSubmit: () => { props.handleDelete(note.uuid); props.setConfirmDialog(null) }
         });
     }
 
@@ -74 +74 @@
         <HStack marginTop="5%">
             <Box width="10" height="10" marginTop="2.5%">
                 <Avatar bg={note.noteColor} size="sm" source={{
-                    uri: AVATAR_URL + "/" + note.avatarUrl
-                }}>
+                    uri: AVATAR_URL + "/" + note.avatarUrl                                     
+                    // TODO bude zde nebo v atributu ta připona?
+                    + ".png"                }}>
                     {getUsernameInitials(note.username)}
                 </Avatar>
             </Box>

src/pages/NotesViewPage.tsx

@@ -9 +9 @@
 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 { getAllNotes } from "../stores/actions/notesThunks"
+import { login } from "../stores/actions/userThunks"
 const NotesViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
+  const { notes, notesLoading, requestPending } = useSelector((state: RootState) => state.noteViewState)
+  const dispatch = useDispatch<AppDispatch>();
+
   const [isSortOpen, setIsSortOpen] = useState(false);
 
   const [myCommentsCheck, setMyCommentsCheck] = useState(false);
@@ -18 +26 @@
 
   const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
 
-  const cancelRef = React.useRef(null)
-
-  const notes = [
-    {
-      uuid: "fadfsfdsaf",
-      username: "Alice",
-      userId: "123",
-      note: "Buy milk and bread",
-      avatarUrl: "martin.png",
-      items: [],
-      createdTime: new Date("2022-01-01T10:00:00Z"),
-      updatedTime: new Date("2022-01-01T12:00:00Z"),
-      noteColor: "#FFA500",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Bob",
-      userId: "456",
-      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
-      avatarUrl: "https://example.com/avatar2.jpg",
-      items: ["Jane"],
-      createdTime: new Date("2022-01-02T10:00:00Z"),
-      updatedTime: new Date("2022-01-02T14:00:00Z"),
-      noteColor: "#6495ED",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Charlie",
-      userId: "789",
-      note: "Pick up dry cleaning",
-      avatarUrl: "https://example.com/avatar3.jpg",
-      items: ["dry cleaning"],
-      createdTime: new Date("2022-01-03T10:00:00Z"),
-      updatedTime: new Date("2022-01-03T12:30:00Z"),
-      noteColor: "#FFA07A",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Dave",
-      userId: "012",
-      note: "Finish report by Friday",
-      avatarUrl: "https://example.com/avatar4.jpg",
-      items: ["report"],
-      createdTime: new Date("2022-01-04T10:00:00Z"),
-      updatedTime: new Date("2022-01-04T16:00:00Z"),
-      noteColor: "#7B68EE",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Eve",
-      userId: "345",
-      note: "Buy flowers for mom's birthday",
-      avatarUrl: "https://example.com/avatar5.jpg",
-      items: ["flowers"],
-      createdTime: new Date("2022-01-05T10:00:00Z"),
-      updatedTime: new Date("2022-01-05T18:00:00Z"),
-      noteColor: "#F08080",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Frank",
-      userId: "678",
-      note: "Schedule dentist appointment",
-      avatarUrl: "https://example.com/avatar6.jpg",
-      items: ["dentist appointment"],
-      createdTime: new Date("2022-01-06T10:00:00Z"),
-      updatedTime: new Date("2022-01-06T11:00:00Z"),
-      noteColor: "#98FB98",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Grace",
-      userId: "901",
-      note: "Book hotel for vacation",
-      avatarUrl: "https://example.com/avatar7.jpg",
-      items: ["hotel"],
-      createdTime: new Date("2022-01-07T10:00:00Z"),
-      updatedTime: new Date("2022-01-07T15:00:00Z"),
-      noteColor: "#87CEFA",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Alice",
-      userId: "123",
-      note: "Buy milk and bread",
-      avatarUrl: "https://example.com/avatar1.jpg",
-      items: ["milk", "bread"],
-      createdTime: new Date("2022-01-01T10:00:00Z"),
-      updatedTime: new Date("2022-01-01T12:00:00Z"),
-      noteColor: "#FFA500",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Bob",
-      userId: "456",
-      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
-      avatarUrl: "https://example.com/avatar2.jpg",
-      items: ["Jane"],
-      createdTime: new Date("2022-01-02T10:00:00Z"),
-      updatedTime: new Date("2022-01-02T14:00:00Z"),
-      noteColor: "#6495ED",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Charlie",
-      userId: "789",
-      note: "Pick up dry cleaning",
-      avatarUrl: "https://example.com/avatar3.jpg",
-      items: ["dry cleaning"],
-      createdTime: new Date("2022-01-03T10:00:00Z"),
-      updatedTime: new Date("2022-01-03T12:30:00Z"),
-      noteColor: "#FFA07A",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Dave",
-      userId: "012",
-      note: "Finish report by Friday",
-      avatarUrl: "https://example.com/avatar4.jpg",
-      items: ["report"],
-      createdTime: new Date("2022-01-04T10:00:00Z"),
-      updatedTime: new Date("2022-01-04T16:00:00Z"),
-      noteColor: "#7B68EE",
-    },
-    {
-      uuid: "fadfsfdsaf",
-      username: "Eve",
-      userId: "345",
-      note: "Buy flowers for mom's birthday",
-      avatarUrl: "https://example.com/avatar5.jpg",
-      items: ["flowers"],
-      createdTime: new Date("2022-01-05T10:00:00Z"),
-      updatedTime: new Date("2022-01-05T18:00:00Z"),
-      noteColor: "#F08080",
-    }];
+  const cancelRef = React.useRef(null);
 
   const [confirmDialog, setConfirmDialog] = React.useState<{
     headerText?: string;
@@ -202 +76 @@
     }
   };
 
+  // initial: load notes
+  useEffect(() => {
+    log.debug("NotesViewPage", "useEffect", "getNotes");
+    getNotes();
+  }, [])
+
+  // general comments check changed
+  useEffect(() => {
+    if(!notesLoading){
+      log.debug("NotesViewPage", "useEffect", "getNotes");
+      getNotes();
+    }
+  }, [generalCommentsCheck, myCommentsCheck])
+
+
   const getNotes = () => {
-    console.log("Get NOTES");
+    dispatch(getAllNotes({
+      myComments: myCommentsCheck,
+      generalComments: generalCommentsCheck,
+      sortOptions: sortSettings
+    }));
   }
 
   const handleReply = (messageId: string, userName: string) => {
@@ -219 +112 @@
     console.log("Handling delete:" + messageId);
   }
 
+  console.log("notes loading: " + notesLoading);
+
   return (
     <Box width="90%" marginLeft="5%">
       <VStack>
@@ -261 +156 @@
           <VStack width="70%" space="0">
             <Flex direction="row" alignItems="center" justify="flex-end">
               <Text>My comments</Text>
-              <Switch isChecked={myCommentsCheck} onValueChange={() => 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={() => 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%"}>
-          <NotesListView notes={notes} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} />
+          {
+            notesLoading ? (<LoadingBox text="Loading notes"/>)
+              :
+              (<NotesListView notes={notes} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} />)
+          }
         </Box>
         {replyingTo != null &&
           <Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">

src/stores/actions/itemThunks.ts

@@ -111 +111 @@
                     for(let i = 0; i < response.data.length; i++){
                         let note = response.data[i];
                         notes.push({
+                            uuid: (note as any).uuid,
                             username: (note as any).created_by,
                             userId: (note as any).created_by_id,
                             note: (note as any).note,

src/stores/actions/notesThunks.ts

@@ +1 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { getAllNotesRequest } from "../../api/notesservice"
+import { SortOptions } from "../../types/general";
+
+
+export const getAllNotes = createAsyncThunk(
+    "notes/getAllNotes",
+    async ({ myComments, generalComments, sortOptions }: { myComments : boolean, generalComments : boolean, sortOptions: { items: SortOptions, date: SortOptions }}) => {
+        try {
+            console.log("GET notes/getNotes/");
+
+            const response = await getAllNotesRequest(myComments, generalComments, sortOptions);
+
+            console.log(response);
+
+            if (response.status === 200) {
+                if(response.data.length > 0){
+
+                    let notes = [];
+                    for(let i = 0; i < response.data.length; i++){
+                        let note = response.data[i];
+                        notes.push({
+                            uuid: (note as any).uuid,
+                            username: (note as any).created_by,
+                            userId: (note as any).created_by_id,
+                            note: (note as any).note,
+                            avatarUrl: (note as any).avatar,
+                            items: (note as any).items,
+                            createdTime: (note as any).created, 
+                            updatedTime: (note as any).updated,
+                            noteColor: (note as any).note_color,
+                        })
+                    }
+
+                    return {
+                        notes,
+                    }
+                }
+                else{
+                    // no notes
+                    return {
+                        notes: [],
+                    }
+                }
+            }
+            else {
+                console.log("Error");
+                return Promise.reject(response.data ? response.data : "Error")
+            }
+        } catch (err: any) {
+            console.log(err);
+            return Promise.reject(err.response.data)
+        }
+    }
+)

src/stores/reducers/notesSlice.ts

@@ +1 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { getAllNotes } from "../actions/notesThunks"
+import { Certainty, ItemViewState, Item } from "../../types/item";
+import { Note, NotesViewState } from "../../types/note";
+
+
+
+const initialState: NotesViewState = {
+    notes: [],
+    notesLoading: true, // for reading notes
+    requestPending: false, // for updating or deleting note
+    lastError: ""
+}
+
+export const noteSlice = createSlice({
+    name: "note",
+    initialState: initialState,
+    reducers: {
+    },
+    extraReducers: (builder) => {
+            // getAllNotes
+            builder.addCase(getAllNotes.fulfilled, (state, action) => {
+                state.notesLoading = false;
+                state.notes = action.payload.notes;
+            })
+            builder.addCase(getAllNotes.pending, (state, action) => {
+                state.notesLoading = true;
+            })
+            builder.addCase(getAllNotes.rejected, (state, action) => {
+                state.notesLoading = false;
+                state.lastError = action.error.message
+            })
+    }
+})
+
+export default noteSlice.reducer

src/stores/store.ts

@@ -3 +3 @@
 import itemReducer from "./reducers/itemSlice"
 import searchFormReducer from "./reducers/searchFormSlice"
 import listViewReducer from "./reducers/listViewSlice"
+import noteViewReducer from "./reducers/notesSlice"
 
 const store = configureStore({
     reducer: {
         user: userReducer,
         itemViewState: itemReducer,
+        noteViewState: noteViewReducer,
         searchForm: searchFormReducer,
         listView: listViewReducer,
     },

src/types/note.ts

@@ -10 +10 @@
     noteColor: string
 }
 
+
+export type NotesViewState = {
+    notes: Note[] 
+    notesLoading: boolean
+    requestPending: boolean
+    lastError?: string
+}
+