Utilizing React - Query & Add Env

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
 # dependencies
 /node_modules
 /.pnp

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
@@ -13,9 +12,9 @@
     "antd": "^4.7.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-query": "^2.26.3",
-    "react-scripts": "3.4.3",
-    "typescript": "~3.7.2"
+    "react-query": "^3.8.2",
+    "react-scripts": "4.0.2",
+    "typescript": "^4.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -41,6 +40,7 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/react": "^11.2.5",
     "msw": "^0.26.1",
     "prettier": "^2.1.2"
   }

src/App.test.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React from "react"
+import { QueryClient,QueryClientProvider } from "react-query"
+import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import App from "./App"
+import userEvent from "@testing-library/user-event"
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
-import App from './App';
-import {
-  requestGetCategory,
-  requestCreateCategory,
-  requestDeleteCategory,
-  requestEditCategory,
-} from './useFetchCategory';
-import userEvent from '@testing-library/user-event';
 
 global.matchMedia =
   global.matchMedia ||
@@ -20,127 +15,103 @@ global.matchMedia =
     };
   };
 
-const server = setupServer(
-  rest.get(
-    'https://product-service-indent.herokuapp.com/category',
-    (req, res, ctx) => {
-      return res(
-        ctx.status(200),
-        ctx.json([
-          {
-            isDeleted: true,
-            _id: '5fb75b51a517ff355c71f46f',
+  const server = setupServer(
+    rest.get(
+      'https://product-service-indent.herokuapp.com/category',
+      (req, res, ctx) => {
+        return res(
+          ctx.status(200),
+          ctx.json([
+            {
+              isDeleted: false,
+              _id: '5fb75b51a517ff355c71f46f',
+              name: 'ATK ',
+              createdAt: '2020-11-20T05:59:45.536Z',
+              updatedAt: '2020-12-10T08:38:26.570Z',
+              __v: 0,
+            },
+            {
+              isDeleted: false,
+              _id: '5fba34e11cba4e40c88a2dfd',
+              name: 'Peralatan Dapur',
+              createdAt: '2020-11-22T09:52:33.682Z',
+              updatedAt: '2020-12-10T08:14:49.102Z',
+              __v: 0,
+            },
+          ])
+        );
+      }
+    ),
+
+    rest.post(
+      'https://product-service-indent.herokuapp.com/category',
+      (req, res, ctx) => {
+        return res(ctx.json('Yollo'));
+      }
+    ),
+
+    rest.delete(
+      'https://product-service-indent.herokuapp.com/category/:id',
+      (req, res, ctx) => {
+        return res(
+          ctx.json({
             name: 'ATK ',
-            createdAt: '2020-11-20T05:59:45.536Z',
-            updatedAt: '2020-12-10T08:38:26.570Z',
-            __v: 0,
-          },
-          {
-            isDeleted: true,
-            _id: '5fba34e11cba4e40c88a2dfd',
-            name: 'Peralatan Dapur',
-            createdAt: '2020-11-22T09:52:33.682Z',
-            updatedAt: '2020-12-10T08:14:49.102Z',
-            __v: 0,
-          },
-        ])
-      );
-    }
-  ),
-
-  rest.post(
-    'https://product-service-indent.herokuapp.com/category',
-    (req, res, ctx) => {
-      return res(ctx.json('Yollo'));
-    }
-  ),
-
-  rest.delete(
-    'https://product-service-indent.herokuapp.com/category/:id',
-    (req, res, ctx) => {
-      return res(
-        ctx.json({
-          name: 'ATK ',
-          id: '5fb75b51a517ff355c71f46f',
-        })
-      );
-    }
-  ),
-
-  rest.put(
-    'https://product-service-indent.herokuapp.com/category/:id',
-    (req, res, ctx) => {
-      return res(
-        ctx.json({
-          name: 'Perlengkapan Sekolah',
-          id: '5fba34e11cba4e40c88a2dfd',
-        })
-      );
-    }
-  )
-);
+            id: '5fb75b51a517ff355c71f46f',
+          })
+        );
+      }
+    ),
+
+    rest.put(
+      'https://product-service-indent.herokuapp.com/category/:id',
+      (req, res, ctx) => {
+        return res(
+          ctx.json({
+            name: 'Perlengkapan Sekolah',
+            id: '5fba34e11cba4e40c88a2dfd',
+          })
+        );
+      }
+    )
+  );
 
 beforeAll(() => server.listen());
 afterAll(() => server.close());
 afterEach(() => server.resetHandlers());
 
-it('CRUD admin-web table', () => {});
 
-it('Mock request get category', async () => {
-  const getCategory = await requestGetCategory();
-  expect(getCategory).toEqual([
-    {
-      isDeleted: true,
-      _id: '5fb75b51a517ff355c71f46f',
-      name: 'ATK ',
-      createdAt: '2020-11-20T05:59:45.536Z',
-      updatedAt: '2020-12-10T08:38:26.570Z',
-      __v: 0,
-    },
-    {
-      isDeleted: true,
-      _id: '5fba34e11cba4e40c88a2dfd',
-      name: 'Peralatan Dapur',
-      createdAt: '2020-11-22T09:52:33.682Z',
-      updatedAt: '2020-12-10T08:14:49.102Z',
-      __v: 0,
-    },
-  ]);
 
-  server.use(
-    rest.get(
-      'https://product-service-indent.herokuapp.com/category',
-      (req, res, ctx) => {
-        return res(ctx.status(404));
-      }
+
+it("Should Just Render The App", async () => {
+  const queryClient = new QueryClient()
+    render (
+    <QueryClientProvider client={queryClient}>
+      <App />      
+    </QueryClientProvider>
     )
-  );
-  await expect(requestGetCategory()).rejects.toThrow(Error);
-});
 
-it('Mock request create category', async () => {
-  const postCategory = await requestCreateCategory('Yolloo');
-  expect(postCategory).toEqual('Yollo');
-});
+    await waitForElementToBeRemoved(()=> screen.getByText("Wait a second"))
+    expect(screen.getByText("ATK")).toBeInTheDocument()
+    expect(screen.getByText("Peralatan Dapur")).toBeInTheDocument()
+
+    const input = screen.getByPlaceholderText("Create New Category")
+    const value = "Perlengkapan Sekolah"
+    userEvent.type(input,value)
+    userEvent.click(screen.getByRole("button", { name:"Add Category" }))
+
+    // userEvent.type(screen.getByRole("textbox", { name: "Create New Category" }),"")
+    // await waitForElementToBeRemoved(() => screen.getByText("Perlengkapan Sekolah"))
+    // expect(await screen.findByText("Perlengkapan Sekolah")).toBeInTheDocument() 
+
+    userEvent.click(screen.getAllByRole("button", { name:"Edit" })[0])
+    userEvent.type(screen.getByRole("textbox", { name: "Edit Category" }),"Yuhuuuu")
+    userEvent.click(screen.getByRole("button", { name: "Cancel" }))
+
+    userEvent.click(screen.getAllByRole("button", { name:"Edit" })[0])
+    userEvent.click(screen.getByRole("button", { name: "OK" }))
 
-it('Mock request delete category', async () => {
-  const deleteCategory = await requestDeleteCategory({
-    name: 'ATK ',
-    id: '5fb75b51a517ff355c71f46f',
-  });
-  expect(deleteCategory).toEqual({
-    name: 'ATK ',
-    id: '5fb75b51a517ff355c71f46f',
-  });
-});
+    userEvent.click(screen.getAllByRole("button", { name:"Delete" })[0])
+    // expect(screen.getByText("ATK")).not.toBeInTheDocument()
 
-it('Mock request edit category', async () => {
-  const editCategory = await requestEditCategory({
-    name: 'Perlengkapan Sekolah',
-    id: '5fba34e11cba4e40c88a2dfd',
-  });
-  expect(editCategory).toEqual({
-    name: 'Perlengkapan Sekolah',
-    id: '5fba34e11cba4e40c88a2dfd',
-  });
-});
+    screen.debug()
+  })

src/App.tsx

@@ -13,14 +13,19 @@ import { ColumnsType } from 'antd/lib/table';
 import useFetchCategory from './useFetchCategory';
 import { Category } from './useFetchCategory';
 
+type Loading = boolean  
+
 function App() {
   const {
     categories,
     status,
     error,
     createCategory,
+    createCategoryStatus,
     editCategory,
+    editCategoryStatus,
     deleteCategory,
+    deleteCategoryStatus
   } = useFetchCategory();
 
   const [categoryName, setCategoryName] = useState<string>('');
@@ -33,6 +38,17 @@ function App() {
 
   const [categoryDelete, setCategoryDelete] = useState<string>('');
 
+  const [loadings,setLoading] = useState<Loading[]>([])
+  const enterLoading = (index:number) => {
+    const newLoadings = [...loadings]
+    newLoadings[index] = true
+
+    return {
+      loadings: newLoadings
+    }
+  }
+
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCategoryName(event.target.value);
   };
@@ -47,8 +63,9 @@ function App() {
     setIsModalVisible(true);
   };
   const handleOk = () => {
-    editCategory({ name: categoryNameEdit, id: categoryIdEdit });
-    setIsModalVisible(false);
+    editCategory({ name: categoryNameEdit, id: categoryIdEdit }).then(() => {
+      setIsModalVisible(false);
+    })
   };
   const handleCancel = () => {
     setIsModalVisible(false);
@@ -95,6 +112,7 @@ function App() {
       render: (record) => {
         return (
           <Button
+            loading={deleteCategoryStatus === "loading"}
             type="primary"
             onClick={() => handleDeleteCategory(record._id)}
           >
@@ -124,7 +142,7 @@ function App() {
                 value={categoryName}
                 onChange={handleInputChange}
               />
-              <Button type="primary" onClick={handleAddButtonClick}>
+              <Button loading={createCategoryStatus === "loading"} type="primary" onClick={handleAddButtonClick}>
                 Add Category
               </Button>
             </div>
@@ -139,15 +157,17 @@ function App() {
             <Table
               columns={colums}
               dataSource={categories}
-              loading={status === 'loading'}
+              loading={{ tip:"Wait a second", spinning: status === "loading"}}
             />
             <Modal
+              okButtonProps={{ loading: editCategoryStatus === "loading" }}
               title="Edit Category"
               visible={isModalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
             >
               <AntdInput
+                aria-label="Edit Category"
                 type="text"
                 value={categoryNameEdit}
                 onChange={handleEditCategory}

src/index.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
+import { QueryClient,QueryClientProvider } from "react-query"
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 import 'antd/dist/antd.css';
 
+const queryClient = new QueryClient()
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );