Add mobx models

package.json

@@ -6,6 +6,7 @@
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
+    "@tanstack/react-query": "^5.51.23",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -39,6 +40,8 @@
     "jest-watch-typeahead": "^1.0.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.4.5",
+    "mobx": "^6.13.1",
+    "mobx-react-lite": "^4.0.7",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",

src/components/App/App.tsx

@@ -4,8 +4,9 @@ import {
 } from "react-router-dom";
 import {ListPage} from "../pages/ListPage/ListPage";
 import {ItemPage} from "../pages/ItemPage/ItemPage";
-import {LoaderProvider} from "../../hooks/useLoader";
+import {LoaderProvider} from "../../hooks/useLoaderModel/useLoaderModel";
 import {Loader} from "../common/Loader/Loader";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 
 const router = createBrowserRouter([
   {
@@ -18,12 +19,16 @@ const router = createBrowserRouter([
   }
 ]);
 
+const client = new QueryClient();
+
 function App() {
   return (
-    <LoaderProvider>
-      <RouterProvider router={router}/>
-      <Loader/> {/* Логичней в LoaderProvider вынести - но для тестирования глобального стейта тут ;) */}
-    </LoaderProvider>
+    <QueryClientProvider client={client}>
+      <LoaderProvider>
+        <RouterProvider router={router}/>
+        <Loader/> {/* Логичней в LoaderProvider вынести - но для тестирования глобального стейта тут ;) */}
+      </LoaderProvider>
+    </QueryClientProvider>
   );
 }
 

src/components/common/Loader/Loader.tsx

@@ -1,10 +1,11 @@
 import {FC} from "react";
 import {Spinner} from "react-bootstrap";
 import './Loader.css';
-import {useLoader} from "../../../hooks/useLoader";
+import {useLoaderModel} from "../../../hooks/useLoaderModel";
+import {observer} from "mobx-react-lite";
 
-export const Loader: FC = () => {
-  const loader = useLoader();
+export const Loader: FC = observer(() => {
+  const loader = useLoaderModel();
 
   if (!loader.isLoading) {
     return null;
@@ -17,4 +18,4 @@ export const Loader: FC = () => {
       </Spinner>
     </div>
   )
-}
+})

src/components/pages/ItemPage/ItemPage.tsx

@@ -1,94 +1,63 @@
-import {FC, useCallback, useEffect, useState} from "react";
-import {useNavigate, useParams} from "react-router-dom";
-import {Item} from "../../../types/Item";
+import {FC} from "react";
+import {useNavigate} from "react-router-dom";
 import {api} from "../../../api";
 import {Button, Container, Form} from "react-bootstrap";
-import {useLoader} from "../../../hooks/useLoader";
+import {useLoaderModel} from "../../../hooks/useLoaderModel";
 import {ConfirmModal} from "../../common/ConfirmModal/ConfirmModal";
+import {observer} from "mobx-react-lite";
+import {useItemModel} from "./hooks/useItemModel";
 
-export const ItemPage: FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-
-  const loader = useLoader();
-
-  // Не использовать локальный стейт для демонстрации
-  const [item, setItem] = useState<Item | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [removeConfirmationOpened, setRemoveConfirmationOpened] = useState(false);
+export const ItemPage: FC = observer(() => {
+  const { model: itemModel, error, refetch } = useItemModel();
 
-  const fetch = useCallback(() => {
-    const hideLoader = loader.show();
-    // Специально не передал пропсом
-    // В демо тоже должен лежать отдельно в стейте (не в стейте списка для главной страницы)
-    //    что бы проверить инвалидацию при переходе между страницами
-    api.getItem(Number(id))
-      .then((response) => {
-        if ('error' in response) {
-          setError(response.error);
-          return;
-        }
-
-        setItem(response);
-      })
-      .finally(hideLoader);
-  }, []);
+  const navigate = useNavigate();
 
-  useEffect(() => {
-    fetch();
-  }, []);
+  const loader = useLoaderModel();
 
-  function renderContent() {
-    if (error) {
-      return (
-        <div style={{ color: 'red' }}>{error}</div>
-      )
-    }
+  if (error) {
+    return (
+      <div style={{ color: 'red' }}>{error}</div>
+    )
+  }
 
-    if (!item) {
-      return null;
-    }
+  if (!itemModel) {
+    return null;
+  }
 
-    return (
+  return (
+    <Container className='mt-3'>
+      <h1 className='mb-4'>Item</h1>
       <Form>
         <Form.Group className="mb-3">
           <Form.Check
             type="checkbox"
             label="Checked"
-            checked={item.checked}
-            onChange={() => setItem({ ...item, checked: !item.checked })}
+            checked={itemModel.checked}
+            onChange={() => itemModel.toggle()}
           />
         </Form.Group>
         <Form.Group className="mb-3">
           <Form.Label>Text</Form.Label>
           <Form.Control
-            value={item.text}
-            onChange={(e) => setItem({ ...item, text: e.target.value })}
+            value={itemModel.text}
+            onChange={(e) => itemModel.text = e.target.value}
           />
         </Form.Group>
       </Form>
-    );
-  }
-
-  return (
-    <Container className='mt-3'>
-      <h1 className='mb-4'>Item</h1>
-      {renderContent()}
       <div>
         <Button
           className='m-1'
           onClick={() => {
-            if (!item) return;
             const hideLoader = loader.show();
-            api.updateItem(item)
-              .then(fetch)
+            api.updateItem(itemModel.toJs())
+              .then(refetch)
               .finally(hideLoader);
           }}
         >Save</Button>
         <Button
           className='m-1'
           variant='danger'
-          onClick={() => setRemoveConfirmationOpened(true)}
+          onClick={() => itemModel.isRemoving = true}
         >Remove</Button>
         <Button className='m-1' href='/' variant='secondary'>Back</Button>
       </div>
@@ -100,17 +69,16 @@ export const ItemPage: FC = () => {
         <li>Come back here and check that data will update</li>
       </ul>
       <ConfirmModal
-        show={removeConfirmationOpened}
+        show={itemModel.isRemoving}
         title='Remove item'
         onApply={() => {
-          if (!item) return;
           const hideLoader = loader.show();
-          api.removeItem(item.id)
+          api.removeItem(itemModel.id)
             .then(() => navigate('/'))
             .finally(hideLoader);
         }}
-        onCancel={() => setRemoveConfirmationOpened(false)}
+        onCancel={() => itemModel.isRemoving = false}
       />
     </Container>
   )
-};
+});

src/components/pages/ItemPage/hooks/useItemModel.ts

@@ -0,0 +1,56 @@
+import {useParams} from "react-router-dom";
+import {useLoaderModel} from "../../../../hooks/useLoaderModel";
+import {useQuery} from "@tanstack/react-query";
+import {api} from "../../../../api";
+import {useEffect, useState} from "react";
+import {ItemModel} from "../../../../models/ItemModel";
+import {Item} from "../../../../types/Item";
+
+type Result = {
+  model: ItemModel | null,
+  error: string | null,
+  refetch(): void,
+}
+
+type ItemResponseError = {error: string};
+
+function isErrorItem(data: Item | ItemResponseError | undefined): data is ItemResponseError  {
+  return Boolean(data && 'error' in data);
+}
+
+export const useItemModel = (): Result => {
+  const { id } = useParams<{ id: string }>();
+  const loader = useLoaderModel();
+
+  const {data, refetch, isFetching, isError: isItemError} = useQuery({
+    queryKey: ['item', id],
+    queryFn: () => api.getItem(Number(id)),
+  });
+
+  useEffect(() => {
+    if (isFetching) {
+      return loader.show();
+    }
+  }, [isFetching, loader]);
+
+  const [model, setModel] = useState<ItemModel | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if(isItemError || isErrorItem(data)) {
+      setError((data as ItemResponseError)?.error || 'Item data loading error');
+      return
+    }
+
+    if (data) {
+      if (model) {
+        model.update(data);
+        return;
+      }
+
+      setModel(new ItemModel({ item: data }))
+    }
+  },[data, isItemError, model, isFetching]);
+
+  return { model, error, refetch };
+}