refact api merge with Api

src/api/index.js

@@ -1,35 +0,0 @@
-import useSWR from "swr"
-import qs from "query-string"
-
-export function useUsers(user, params) {
-  const { data, error } = useSWR([
-    `/users?${qs.stringify(params)}`, user.accessToken
-  ])
-
-  return [
-    data,
-    error,
-  ]
-}
-
-export function useProducts(user, params) {
-  const { data, error } = useSWR([
-    `/products?${qs.stringify(params)}`, user.accessToken
-  ])
-
-  return [
-    data,
-    error,
-  ]
-}
-
-export function useCategories(user, params) {
-  const { data, error } = useSWR([
-    `/categories?${qs.stringify(params)}`, user.accessToken
-  ])
-
-  return [
-    data,
-    error
-  ]
-}

src/views/categories/Api.js

@@ -1,4 +1,17 @@
 import axios from "axios";
+import useSWR from "swr"
+import qs from "query-string"
+
+export function useCategories(user, params) {
+  const { data, error } = useSWR([
+    `/categories?${qs.stringify(params)}`, user.accessToken
+  ])
+
+  return [
+    data,
+    error
+  ]
+}
 
 export function createCategory(payload, token) {
   return axios({

src/views/categories/List.js

@@ -29,8 +29,7 @@ import {
   SearchInput,
   useModalState,
 } from "../../components/Common"
-import { useCategories } from "../../api"
-import { deleteCategory } from "./Api"
+import { useCategories, deleteCategory } from "./Api"
 import { useAuth } from "../../context/AppContext"
 
 export default function List() {

src/views/categories/Modal.js

@@ -15,7 +15,7 @@ import {
 } from "@chakra-ui/react"
 import { Loading, Pagination, SearchInput, useDebounce } from "../../components/Common"
 import { useAuth } from "../../context/AppContext"
-import { useCategories } from "../../api"
+import { useCategories } from "./Api"
 
 export default function ModalCom(props) {
   const { isOpen, toggle, onClose } = props

src/views/products/Api.js

@@ -1,4 +1,17 @@
 import axios from "axios";
+import useSWR from "swr"
+import qs from "query-string"
+
+export function useProducts(user, params) {
+  const { data, error } = useSWR([
+    `/products?${qs.stringify(params)}`, user.accessToken
+  ])
+
+  return [
+    data,
+    error,
+  ]
+}
 
 export function createProduct(payload, token) {
   return axios({

src/views/products/List.js

@@ -16,7 +16,6 @@ import {
   useToast,
   Grid,
 } from "@chakra-ui/react"
-import { useProducts } from "../../api"
 import { mutate } from "swr"
 import qs from "query-string"
 import { 
@@ -30,7 +29,7 @@ import {
   useModalState,
   FormInputSelection
 } from "../../components/Common"
-import { deleteProduct } from "./Api"
+import { useProducts, deleteProduct } from "./Api"
 import { formatIDR } from  "../../utils"
 import { Link } from "react-router-dom"
 import { useAuth } from "../../context/AppContext"

src/views/sales/Api.js

@@ -0,0 +1,13 @@
+import useSWR from "swr"
+import qs from "query-string"
+
+export function useSales(user, params) {
+  const { data, error } = useSWR([
+    `/sales?${qs.stringify(params)}`, user.accessToken
+  ])
+
+  return [
+    data,
+    error
+  ]
+}

src/views/sales/List.js

@@ -1,5 +1,140 @@
+import { useState } from "react"
+import {
+  Button,
+  Alert,
+  AlertIcon,
+  Table,
+  Thead,
+  Tr,
+  Td,
+  Th,
+  Tbody,
+  Menu,
+  MenuItem,
+  MenuButton,
+  MenuList,
+  useToast,
+} from "@chakra-ui/react"
+import { Link } from "react-router-dom"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { mutate } from 'swr'
+import qs from "query-string"
+import { 
+  Breadcrumb, 
+  Card, 
+  Loading,
+  Pagination,
+  useDebounce,
+  AlertDialog,
+  SearchInput,
+  useModalState,
+} from "../../components/Common"
+import { useUsers, deleteUser } from "./Api"
+import { useAuth } from "../../context/AppContext"
+
 export default function List() {
+  const { user } = useAuth()
+  const toast = useToast()
+
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const q = useDebounce(search, 600)
+  const params = { page, q }
+  const [data, error] = useUsers(user, params)
+
+  const [isOpen, toggle, selected] = useModalState(false)
+
+  const handleDelete = async () => {
+    await deleteUser(selected.id, user.accessToken)
+    .then((res) => {
+      toast({
+        title: res.status,
+        description: "item dihapus",
+        status: "success",
+        position: "top-right",
+        duration: 4000, 
+        isClosable: true
+      })
+      mutate([`/users?${qs.stringify(params)}`, user.accessToken])
+    })
+    .catch((err) => {
+      toast({
+        title: err.status,
+        description: err.message,
+        status: "error",
+        position: "top-right",
+        duration: 4000, 
+        isClosable: true
+      })
+    })
+  }
+
+  if(error) {
+    return (
+      <Alert status="error">
+        <AlertIcon />
+        {error.message}
+      </Alert>
+    )
+  }
+
   return (
-    <div>Penjualan</div>
+    <>
+      <Breadcrumb main={["/users", "pengguna"]}/>
+      <Card>
+        <Button as={Link} to="/users/create" size="md" mb="3">
+          tambah
+        </Button>
+        <SearchInput setter={[search, setSearch]}/>
+        {data ? (
+          <>
+          <Table variant="simple" mt="2" mb="4">
+            <Thead>
+              <Tr>
+                <Th>nama</Th>
+                <Th>email</Th>
+                <Th>role</Th>
+                <Th></Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {data.users.map((auser) => auser.id !== user.id && (
+                <Tr key={auser.id}>
+                  <Td>{auser.name}</Td>
+                  <Td>{auser.email}</Td>
+                  <Td>{auser.role}</Td>
+                  <Td isNumeric>
+                    <Menu>
+                      <MenuButton as={Button}>
+                        <FontAwesomeIcon icon="ellipsis-v"/>
+                      </MenuButton>
+                      <MenuList>
+                        <MenuItem as={Link} to={`/users/${auser.id}/edit`}>ubah</MenuItem>
+                        <MenuItem 
+                          onClick={() => {
+                            toggle(auser)
+                          }}
+                        >
+                          hapus
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          <Pagination page={page} setPage={setPage} totalPages={data.meta.totalPages}/>
+          </>
+        ) : (
+          <Loading/>
+        )}
+      </Card>
+      <AlertDialog 
+        isOpen={isOpen} 
+        onClose={handleDelete} 
+        toggle={() => toggle()}
+      />
+    </>
   )
 }

src/views/users/Api.js

@@ -1,4 +1,17 @@
 import axios from "axios";
+import useSWR from "swr"
+import qs from "query-string"
+
+export function useUsers(user, params) {
+  const { data, error } = useSWR([
+    `/users?${qs.stringify(params)}`, user.accessToken
+  ])
+
+  return [
+    data,
+    error,
+  ]
+}
 
 export function createUser(payload, token) {
   return axios({

src/views/users/List.js

@@ -29,8 +29,7 @@ import {
   SearchInput,
   useModalState,
 } from "../../components/Common"
-import { useUsers } from "../../api"
-import { deleteUser } from "./Api"
+import { useUsers, deleteUser } from "./Api"
 import { useAuth } from "../../context/AppContext"
 
 export default function List() {