useSWR, refreshToken axios intercept, update readme, fixing typo
parent
cecfe95901
commit
78fb71ee9b
@ -0,0 +1,31 @@
|
|||||||
|
import axios from "axios"
|
||||||
|
import useSWR from 'swr'
|
||||||
|
import "../axiosSetup"
|
||||||
|
import { useAuth } from "../context/AppContext"
|
||||||
|
import { formatDate } from "../utils"
|
||||||
|
|
||||||
|
const fetcher = (url, token) => axios({
|
||||||
|
method: "GET",
|
||||||
|
url: url,
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
return res.data.data
|
||||||
|
})
|
||||||
|
|
||||||
|
export function useProducts({startDate, endDate}) {
|
||||||
|
const { user } = useAuth()
|
||||||
|
const { data, error } = useSWR([
|
||||||
|
`/products?startDate=${formatDate(startDate)}&endDate=${formatDate(endDate)}`, user.accessToken
|
||||||
|
], fetcher)
|
||||||
|
|
||||||
|
return [
|
||||||
|
data,
|
||||||
|
error,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useProduct(id) {
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,5 +1,10 @@
|
|||||||
|
import { Flex } from '@chakra-ui/react'
|
||||||
import { CircularProgress } from "@chakra-ui/progress"
|
import { CircularProgress } from "@chakra-ui/progress"
|
||||||
|
|
||||||
export default function Loading() {
|
export default function Loading() {
|
||||||
return <CircularProgress isIndeterminate color="red.300" />
|
return (
|
||||||
|
<Flex justifyContent="center" alignItems="center" mt="24" mb="24">
|
||||||
|
<CircularProgress isIndeterminate color="red.500" />
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import AppCrash from '../views/errors/500';
|
||||||
|
|
||||||
|
class ErrorBoundary extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { hasError: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error) {
|
||||||
|
// Update state so the next render will show the fallback UI.
|
||||||
|
return { hasError: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error, errorInfo) {
|
||||||
|
// You can also log the error to an error reporting service
|
||||||
|
// logErrorToMyService(error, errorInfo);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
// You can render any custom fallback UI
|
||||||
|
return <AppCrash/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorBoundary
|
||||||
@ -1,3 +1,7 @@
|
|||||||
export const formatDate = (date) => {
|
export const formatDate = (date) => {
|
||||||
return date.toLocaleDateString()
|
return date.toLocaleDateString()
|
||||||
}
|
}
|
||||||
|
export function formatIDR(amount) {
|
||||||
|
const idFormatter = new Intl.NumberFormat('id-ID')
|
||||||
|
return idFormatter.format(amount)
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { Container, Center } from '@chakra-ui/react'
|
||||||
|
|
||||||
|
export default function AppCrash(){
|
||||||
|
return (
|
||||||
|
<Container minW="full" minH="full">
|
||||||
|
<Center bg="red.600" minH="40rem" m="10" color="white" fontSize="2.5rem">
|
||||||
|
be patient, app crash / down / in maintace
|
||||||
|
</Center>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,44 +1,72 @@
|
|||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Alert,
|
||||||
|
AlertIcon,
|
||||||
|
Box,
|
||||||
Table,
|
Table,
|
||||||
Thead,
|
Thead,
|
||||||
Tr,
|
Tr,
|
||||||
Td,
|
Td,
|
||||||
Th,
|
Th,
|
||||||
Tbody
|
Tbody,
|
||||||
|
Heading
|
||||||
} from "@chakra-ui/react"
|
} from "@chakra-ui/react"
|
||||||
|
import { useProducts } from "../../api"
|
||||||
import Card from "../../components/Common/Card"
|
import Card from "../../components/Common/Card"
|
||||||
import DatePickerFilter from "../../components/Common/DatePickerFilter"
|
import Loading from "../../components/Common/Loading"
|
||||||
|
import { DatePickerFilter, useDatePickerFilter } from "../../components/Common/DatePickerFilter"
|
||||||
|
import { formatIDR } from "../../utils"
|
||||||
|
|
||||||
|
export default function List({ history }) {
|
||||||
|
const [ startDate, endDate, setter ] = useDatePickerFilter()
|
||||||
|
const [ data, error ] = useProducts({startDate, endDate})
|
||||||
|
|
||||||
|
const handleItemClick = (id) => {
|
||||||
|
history.push(`/products/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(error) {
|
||||||
|
return (
|
||||||
|
<Alert status="error">
|
||||||
|
<AlertIcon />
|
||||||
|
{error.message}
|
||||||
|
</Alert>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default function List() {
|
|
||||||
const arr = [1,2,3,4,5,6,7,8,9,10,11,12]
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Box p="3" m="2" bg="white" rounded="lg">
|
||||||
|
<Heading size="md">dashboard / produk</Heading>
|
||||||
|
</Box>
|
||||||
<Card>
|
<Card>
|
||||||
{/* Tombol Create */}
|
<Button size="md">tambah</Button>
|
||||||
<Button size="md">Tambah</Button>
|
<DatePickerFilter startDate={startDate} endDate={endDate} setter={setter} />
|
||||||
{/* Filter Tanggal */}
|
{data ? (
|
||||||
<DatePickerFilter/>
|
<Table variant="simple" mt="2">
|
||||||
{/* daftar products */}
|
|
||||||
<Table variant="simple" mt="2" colorScheme="whatsapp">
|
|
||||||
<Thead>
|
<Thead>
|
||||||
<Tr>
|
<Tr>
|
||||||
<Th>To convert</Th>
|
<Th>nama</Th>
|
||||||
<Th>into</Th>
|
<Th isNumeric>harga beli</Th>
|
||||||
<Th isNumeric>multiply by</Th>
|
<Th isNumeric>harga jual</Th>
|
||||||
|
<Th>deskripsi</Th>
|
||||||
</Tr>
|
</Tr>
|
||||||
</Thead>
|
</Thead>
|
||||||
<Tbody>
|
<Tbody>
|
||||||
{
|
{data.products.map((product) => (
|
||||||
arr.map(() => (
|
<Tr onClick={() => handleItemClick(product.id)} key={product.id}>
|
||||||
<Tr onClick={() => {alert('Hello')}}>
|
<Td>{ product.name }</Td>
|
||||||
<Td>inches</Td>
|
<Td isNumeric>{ formatIDR(product.cost) }</Td>
|
||||||
<Td>millimetres (mm)</Td>
|
<Td isNumeric>{ formatIDR(product.price) }</Td>
|
||||||
<Td isNumeric>25.4</Td>
|
<Td>{ product.description }</Td>
|
||||||
</Tr>
|
</Tr>
|
||||||
))
|
))}
|
||||||
}
|
|
||||||
</Tbody>
|
</Tbody>
|
||||||
</Table>
|
</Table>
|
||||||
|
) : (
|
||||||
|
<Loading/>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue