Moved note operation thunks to api slice

src/frontend/src/features/notes/api/contracts.ts

@@ -4,3 +4,20 @@ export interface GetNotesRequest {
   pageId: number;
   mealType?: MealType;
 }
+
+export interface CreateNoteRequest {
+  mealType: MealType;
+  productId: number;
+  pageId: number;
+  productQuantity: number;
+  displayOrder: number;
+}
+
+export interface EditNoteRequest {
+  id: number;
+  mealType: MealType;
+  productId: number;
+  pageId: number;
+  productQuantity: number;
+  displayOrder: number;
+}

src/frontend/src/features/notes/api/notesApi.ts

@@ -1,13 +1,39 @@
 import { api } from 'src/api';
 import { createUrl } from 'src/utils';
 import { type NoteItem } from '../models';
-import { type GetNotesRequest } from './contracts';
+import { type EditNoteRequest, type CreateNoteRequest, type GetNotesRequest } from './contracts';
 
 export const notesApi = api.injectEndpoints({
   endpoints: builder => ({
     getNotes: builder.query<NoteItem[], GetNotesRequest>({
       query: request => createUrl('/api/v1/notes', { ...request }),
       providesTags: ['note'],
     }),
+
+    createNote: builder.mutation<void, CreateNoteRequest>({
+      query: request => ({
+        method: 'POST',
+        url: '/api/v1/notes',
+        body: request,
+      }),
+      invalidatesTags: ['note', 'page'],
+    }),
+
+    editNote: builder.mutation<void, EditNoteRequest>({
+      query: ({ id, ...request }) => ({
+        method: 'PUT',
+        url: `/api/v1/notes/${id}`,
+        body: request,
+      }),
+      invalidatesTags: ['note'],
+    }),
+
+    deleteNote: builder.mutation<void, number>({
+      query: id => ({
+        method: 'DELETE',
+        url: `/api/v1/notes/${id}`,
+      }),
+      invalidatesTags: ['note', 'page'],
+    }),
   }),
 });

src/frontend/src/features/notes/components/NotesTable.tsx

@@ -11,9 +11,10 @@ import {
 } from '@mui/material';
 import { type FC, useEffect, useState, useMemo } from 'react';
 import { productsApi } from 'src/features/products';
-import { useAppDispatch, useAppSelector, useRouterId } from 'src/hooks';
+import { useRouterId } from 'src/hooks';
+import { notesApi } from '../api';
+import { toCreateNoteRequest } from '../mapping';
 import { type NoteItem, type MealType, type NoteCreateEdit } from '../models';
-import { createNote } from '../thunks';
 import NoteInputDialog from './NoteInputDialog';
 import NotesTableRow from './NotesTableRow';
 
@@ -24,10 +25,9 @@ interface NotesTableProps {
 
 const NotesTable: FC<NotesTableProps> = ({ mealType, notes }: NotesTableProps) => {
   const pageId = useRouterId('id');
-  const status = useAppSelector(state => state.notes.operationStatusesByMealType[mealType]);
   const [getProducts, getProductsRequest] = productsApi.useLazyGetProductSelectOptionsQuery();
+  const [createNote, createNoteResponse] = notesApi.useCreateNoteMutation();
   const [isDialogOpened, setIsDialogOpened] = useState(false);
-  const dispatch = useAppDispatch();
 
   const maxDisplayOrderForNotesGroup = useMemo(
     () =>
@@ -39,10 +39,10 @@ const NotesTable: FC<NotesTableProps> = ({ mealType, notes }: NotesTableProps) =
   );
 
   useEffect(() => {
-    if (status === 'succeeded') {
+    if (createNoteResponse.isSuccess) {
       setIsDialogOpened(false);
     }
-  }, [dispatch, mealType, status]);
+  }, [createNoteResponse.isSuccess]);
 
   const handleDialogOpen = (): void => {
     setIsDialogOpened(true);
@@ -53,12 +53,8 @@ const NotesTable: FC<NotesTableProps> = ({ mealType, notes }: NotesTableProps) =
   };
 
   const handleAddNote = (note: NoteCreateEdit): void => {
-    void dispatch(
-      createNote({
-        mealType,
-        note,
-      }),
-    );
+    const request = toCreateNoteRequest(note);
+    void createNote(request);
   };
 
   const handleLoadProducts = async (): Promise<void> => {

src/frontend/src/features/notes/components/NotesTableRow.tsx

@@ -4,10 +4,10 @@ import { IconButton, TableCell, TableRow, Tooltip } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { type FC, useEffect, useState } from 'react';
 import { type ProductSelectOption } from 'src/features/products';
-import { useAppDispatch, useAppSelector, useRouterId } from 'src/hooks';
-import { toProductSelectOption } from '../mapping';
+import { useRouterId } from 'src/hooks';
+import { notesApi } from '../api';
+import { toEditNoteRequest, toProductSelectOption } from '../mapping';
 import { type NoteCreateEdit, type NoteItem } from '../models';
-import { deleteNote, editNote } from '../thunks';
 import DeleteNoteDialog from './DeleteNoteDialog';
 import NoteInputDialog from './NoteInputDialog';
 
@@ -37,18 +37,24 @@ const NotesTableRow: FC<NotesTableRowProps> = ({
 }: NotesTableRowProps) => {
   const classes = useStyles();
   const pageId = useRouterId('id');
-  const dispatch = useAppDispatch();
-  const status = useAppSelector(state => state.notes.operationStatusesByMealType[note.mealType]);
 
   const [isEditDialogOpened, setIsEditDialogOpened] = useState(false);
   const [isDeleteDialogOpened, setIsDeleteDialogOpened] = useState(false);
 
+  const [editNote, editNoteResponse] = notesApi.useEditNoteMutation();
+  const [deleteNote, deleteNoteResponse] = notesApi.useDeleteNoteMutation();
+
   useEffect(() => {
-    if (status === 'succeeded') {
+    if (editNoteResponse.isSuccess) {
       setIsEditDialogOpened(false);
+    }
+  }, [editNoteResponse.isSuccess]);
+
+  useEffect(() => {
+    if (deleteNoteResponse.isSuccess) {
       setIsDeleteDialogOpened(false);
     }
-  }, [status]);
+  }, [deleteNoteResponse.isSuccess]);
 
   const handleEditOpen = (): void => {
     setIsEditDialogOpened(true);
@@ -59,13 +65,8 @@ const NotesTableRow: FC<NotesTableRowProps> = ({
   };
 
   const handleEditSubmit = (noteData: NoteCreateEdit): void => {
-    void dispatch(
-      editNote({
-        id: note.id,
-        mealType: noteData.mealType,
-        note: noteData,
-      }),
-    );
+    const request = toEditNoteRequest(note.id, noteData);
+    void editNote(request);
   };
 
   const handleDeleteOpen = (): void => {
@@ -76,13 +77,8 @@ const NotesTableRow: FC<NotesTableRowProps> = ({
     setIsDeleteDialogOpened(false);
   };
 
-  const handleDeleteSubmit = ({ id, mealType }: NoteItem): void => {
-    void dispatch(
-      deleteNote({
-        id,
-        mealType,
-      }),
-    );
+  const handleDeleteSubmit = ({ id }: NoteItem): void => {
+    void deleteNote(id);
   };
 
   return (

src/frontend/src/features/notes/mapping.ts

@@ -1,5 +1,6 @@
 import { type ProductSelectOption } from '../products';
-import { type NoteItem } from './models';
+import { type EditNoteRequest, type CreateNoteRequest } from './api';
+import { type NoteCreateEdit, type NoteItem } from './models';
 
 export const toProductSelectOption = ({
   productId,
@@ -10,3 +11,29 @@ export const toProductSelectOption = ({
   name: productName,
   defaultQuantity: productDefaultQuantity,
 });
+
+export const toCreateNoteRequest = ({
+  mealType,
+  productId,
+  pageId,
+  productQuantity,
+  displayOrder,
+}: NoteCreateEdit): CreateNoteRequest => ({
+  mealType,
+  productId,
+  pageId,
+  productQuantity,
+  displayOrder,
+});
+
+export const toEditNoteRequest = (
+  id: number,
+  { mealType, productId, pageId, productQuantity, displayOrder }: NoteCreateEdit,
+): EditNoteRequest => ({
+  id,
+  mealType,
+  productId,
+  pageId,
+  productQuantity,
+  displayOrder,
+});

src/frontend/src/store.ts

@@ -2,7 +2,6 @@ import { configureStore } from '@reduxjs/toolkit';
 import { api } from './api';
 import { useAppDispatch, useAppSelector } from './features/__shared__/hooks';
 import authReducer from './features/auth/store';
-import notesReducer from './features/notes/slice';
 import pagesReducer from './features/pages/slice';
 import productsReducer from './features/products/store';
 
@@ -14,7 +13,6 @@ export const configureAppStore = () =>
       auth: authReducer,
       pages: pagesReducer,
       products: productsReducer,
-      notes: notesReducer,
     },
 
     middleware: getDefaultMiddleware => getDefaultMiddleware().concat(api.middleware),