clean code master plant sub section and master device
This commit is contained in:
@@ -1,170 +1,171 @@
|
||||
import axios from "axios";
|
||||
import Swal from "sweetalert2";
|
||||
import axios from 'axios';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
const baseURL = import.meta.env.VITE_API_SERVER;
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL,
|
||||
withCredentials: true,
|
||||
baseURL,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
// axios khusus refresh
|
||||
const refreshApi = axios.create({
|
||||
baseURL,
|
||||
withCredentials: true,
|
||||
baseURL,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
|
||||
instance.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
|
||||
console.error("🚨 Response Error Interceptor:", {
|
||||
status: error.response?.status,
|
||||
url: originalRequest.url,
|
||||
message: error.response?.data?.message,
|
||||
hasRetried: originalRequest._retry
|
||||
});
|
||||
console.error('🚨 Response Error Interceptor:', {
|
||||
status: error.response?.status,
|
||||
url: originalRequest.url,
|
||||
message: error.response?.data?.message,
|
||||
hasRetried: originalRequest._retry,
|
||||
});
|
||||
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
originalRequest._retry = true;
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
console.log("🔄 Refresh token dipanggil...");
|
||||
const refreshRes = await refreshApi.post("/auth/refresh-token");
|
||||
try {
|
||||
console.log('🔄 Refresh token dipanggil...');
|
||||
const refreshRes = await refreshApi.post('/auth/refresh-token');
|
||||
|
||||
const newAccessToken = refreshRes.data.data.accessToken;
|
||||
localStorage.setItem("token", newAccessToken);
|
||||
console.log("✅ Token refreshed successfully");
|
||||
const newAccessToken = refreshRes.data.data.accessToken;
|
||||
localStorage.setItem('token', newAccessToken);
|
||||
console.log('✅ Token refreshed successfully');
|
||||
|
||||
// update token di header
|
||||
instance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
|
||||
originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
|
||||
// update token di header
|
||||
instance.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
|
||||
console.log("🔁 Retrying original request...");
|
||||
return instance(originalRequest);
|
||||
} catch (refreshError) {
|
||||
console.error("❌ Refresh token gagal:", refreshError.response?.data || refreshError.message);
|
||||
localStorage.clear();
|
||||
window.location.href = "/signin";
|
||||
}
|
||||
console.log('🔁 Retrying original request...');
|
||||
return instance(originalRequest);
|
||||
} catch (refreshError) {
|
||||
console.error(
|
||||
'❌ Refresh token gagal:',
|
||||
refreshError.response?.data || refreshError.message
|
||||
);
|
||||
localStorage.clear();
|
||||
window.location.href = '/signin';
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
async function ApiRequest({
|
||||
method = "GET",
|
||||
params = {},
|
||||
prefix = "/",
|
||||
token = true,
|
||||
} = {}) {
|
||||
const isFormData = params instanceof FormData;
|
||||
async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = true } = {}) {
|
||||
const isFormData = params instanceof FormData;
|
||||
|
||||
const request = {
|
||||
method,
|
||||
url: prefix,
|
||||
data: params,
|
||||
headers: {
|
||||
"Accept-Language": "en_US",
|
||||
...(isFormData ? {} : { "Content-Type": "application/json" }),
|
||||
},
|
||||
};
|
||||
const request = {
|
||||
method,
|
||||
url: prefix,
|
||||
data: params,
|
||||
headers: {
|
||||
'Accept-Language': 'en_US',
|
||||
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
|
||||
},
|
||||
};
|
||||
|
||||
const rawToken = localStorage.getItem("token");
|
||||
if (token && rawToken) {
|
||||
const cleanToken = rawToken.replace(/"/g, "");
|
||||
request.headers["Authorization"] = `Bearer ${cleanToken}`;
|
||||
console.log("🔐 Sending request with token:", cleanToken.substring(0, 20) + "...");
|
||||
} else {
|
||||
console.warn("⚠️ No token found in localStorage");
|
||||
}
|
||||
|
||||
console.log("📤 API Request:", { method, url: prefix, hasToken: !!rawToken });
|
||||
|
||||
try {
|
||||
const response = await instance(request);
|
||||
console.log("✅ API Response:", { url: prefix, status: response.status, statusCode: response.data?.statusCode });
|
||||
return { ...response, error: false };
|
||||
} catch (error) {
|
||||
const status = error?.response?.status || 500;
|
||||
const message = error?.response?.data?.message || error.message || "Something Wrong";
|
||||
console.error("❌ API Error:", {
|
||||
url: prefix,
|
||||
status,
|
||||
message,
|
||||
fullError: error?.response?.data
|
||||
});
|
||||
|
||||
if (status !== 401) {
|
||||
await cekError(status, message);
|
||||
const rawToken = localStorage.getItem('token');
|
||||
if (token && rawToken) {
|
||||
const cleanToken = rawToken.replace(/"/g, '');
|
||||
request.headers['Authorization'] = `Bearer ${cleanToken}`;
|
||||
console.log('🔐 Sending request with token:', cleanToken.substring(0, 20) + '...');
|
||||
} else {
|
||||
console.warn('⚠️ No token found in localStorage');
|
||||
}
|
||||
|
||||
return { ...error.response, error: true };
|
||||
}
|
||||
console.log('📤 API Request:', { method, url: prefix, hasToken: !!rawToken });
|
||||
|
||||
try {
|
||||
const response = await instance(request);
|
||||
console.log('✅ API Response:', {
|
||||
url: prefix,
|
||||
status: response.status,
|
||||
statusCode: response.data?.statusCode,
|
||||
});
|
||||
return { ...response, error: false };
|
||||
} catch (error) {
|
||||
const status = error?.response?.status || 500;
|
||||
const message = error?.response?.data?.message || error.message || 'Something Wrong';
|
||||
console.error('❌ API Error:', {
|
||||
url: prefix,
|
||||
status,
|
||||
message,
|
||||
fullError: error?.response?.data,
|
||||
});
|
||||
|
||||
if (status !== 401) {
|
||||
await cekError(status, message);
|
||||
}
|
||||
|
||||
return { ...error.response, error: true };
|
||||
}
|
||||
}
|
||||
|
||||
async function cekError(status, message = "") {
|
||||
if (status === 403) {
|
||||
await Swal.fire({
|
||||
icon: "warning",
|
||||
title: "Forbidden",
|
||||
text: message,
|
||||
});
|
||||
} else if (status >= 500) {
|
||||
await Swal.fire({
|
||||
icon: "error",
|
||||
title: "Server Error",
|
||||
text: message,
|
||||
});
|
||||
} else {
|
||||
await Swal.fire({
|
||||
icon: "warning",
|
||||
title: "Peringatan",
|
||||
text: message,
|
||||
});
|
||||
}
|
||||
async function cekError(status, message = '') {
|
||||
if (status === 403) {
|
||||
await Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Forbidden',
|
||||
text: message,
|
||||
});
|
||||
} else if (status >= 500) {
|
||||
await Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Server Error',
|
||||
text: message,
|
||||
});
|
||||
} else {
|
||||
await Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
text: message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const SendRequest = async (queryParams) => {
|
||||
try {
|
||||
const response = await ApiRequest(queryParams);
|
||||
console.log("📦 SendRequest response:", {
|
||||
hasError: response.error,
|
||||
status: response.status,
|
||||
statusCode: response.data?.statusCode,
|
||||
data: response.data
|
||||
});
|
||||
try {
|
||||
const response = await ApiRequest(queryParams);
|
||||
console.log('📦 SendRequest response:', {
|
||||
hasError: response.error,
|
||||
status: response.status,
|
||||
statusCode: response.data?.statusCode,
|
||||
data: response.data,
|
||||
});
|
||||
|
||||
// If ApiRequest returned error flag, return error structure
|
||||
if (response.error) {
|
||||
const errorMsg = response.data?.message || response.statusText || "Request failed";
|
||||
console.error("❌ SendRequest error response:", errorMsg);
|
||||
// If ApiRequest returned error flag, return error structure
|
||||
if (response.error) {
|
||||
const errorMsg = response.data?.message || response.statusText || 'Request failed';
|
||||
console.error('❌ SendRequest error response:', errorMsg);
|
||||
|
||||
// Return consistent error structure instead of empty array
|
||||
return {
|
||||
statusCode: response.status || 500,
|
||||
message: errorMsg,
|
||||
data: null,
|
||||
error: true
|
||||
};
|
||||
// Return consistent error structure instead of empty array
|
||||
return {
|
||||
statusCode: response.status || 500,
|
||||
message: errorMsg,
|
||||
data: null,
|
||||
error: true,
|
||||
};
|
||||
}
|
||||
|
||||
return response || { statusCode: 200, data: [], message: 'Success' };
|
||||
} catch (error) {
|
||||
console.error('❌ SendRequest catch error:', error);
|
||||
|
||||
// Don't show Swal here, let the calling code handle it
|
||||
// This allows better error handling in each API call
|
||||
return {
|
||||
statusCode: 500,
|
||||
message: error.message || 'Something went wrong',
|
||||
data: null,
|
||||
error: true,
|
||||
};
|
||||
}
|
||||
|
||||
return response?.data || { statusCode: 200, data: [], message: "Success" };
|
||||
} catch (error) {
|
||||
console.error("❌ SendRequest catch error:", error);
|
||||
|
||||
// Don't show Swal here, let the calling code handle it
|
||||
// This allows better error handling in each API call
|
||||
return {
|
||||
statusCode: 500,
|
||||
message: error.message || "Something went wrong",
|
||||
data: null,
|
||||
error: true
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export { ApiRequest, SendRequest };
|
||||
|
||||
@@ -37,7 +37,7 @@ const CardList = ({
|
||||
return (
|
||||
<Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'left' }}>
|
||||
{data.map((item) => (
|
||||
<Col xs={24} sm={24} md={12} lg={8} key={item.device_id}>
|
||||
<Col xs={24} sm={24} md={12} lg={6} key={item.device_id}>
|
||||
<Card
|
||||
title={
|
||||
<div
|
||||
|
||||
@@ -1,18 +1,6 @@
|
||||
import React, { memo, useState, useEffect, useRef } from 'react';
|
||||
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
FilterOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
SearchOutlined,
|
||||
FilePdfOutlined,
|
||||
AppstoreOutlined,
|
||||
TableOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { setFilterData } from './DataFilter';
|
||||
import CardDevice from '../../pages/master/device/component/CardDevice';
|
||||
import { AppstoreOutlined, TableOutlined } from '@ant-design/icons';
|
||||
import CardList from './CardList';
|
||||
|
||||
const { Text } = Typography;
|
||||
@@ -33,16 +21,12 @@ const TableList = memo(function TableList({
|
||||
const [gridLoading, setGridLoading] = useState(false);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [pagingResponse, setPagingResponse] = useState({
|
||||
totalData: 0,
|
||||
perPage: 0,
|
||||
totalPage: 0,
|
||||
});
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
current_page: 1,
|
||||
current_limit: 10,
|
||||
total_limit: 0,
|
||||
total_page: 1,
|
||||
});
|
||||
|
||||
const [viewMode, setViewMode] = useState('card');
|
||||
@@ -50,20 +34,34 @@ const TableList = memo(function TableList({
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
useEffect(() => {
|
||||
filter(1, 10);
|
||||
filter(1, pagination.current_limit);
|
||||
}, [triger]);
|
||||
|
||||
const filter = async (currentPage, pageSize) => {
|
||||
setGridLoading(true);
|
||||
|
||||
const paging = {
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
page: Number(currentPage),
|
||||
limit: Number(pageSize),
|
||||
};
|
||||
|
||||
const param = new URLSearchParams({ ...paging, ...queryParams });
|
||||
const resData = await getData(param);
|
||||
|
||||
setData(resData?.data ?? []);
|
||||
|
||||
const pagingData = resData?.paging;
|
||||
|
||||
if (pagingData) {
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current_page: pagingData.current_page || 1,
|
||||
current_limit: pagingData.current_limit || 10,
|
||||
total_limit: pagingData.total_limit || 0,
|
||||
total_page: pagingData.total_page || 1,
|
||||
}));
|
||||
}
|
||||
|
||||
if (resData) {
|
||||
setTimeout(() => {
|
||||
setGridLoading(false);
|
||||
@@ -72,29 +70,6 @@ const TableList = memo(function TableList({
|
||||
setGridLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const dataToSet = resData.data?.data ?? resData.data ?? [];
|
||||
setData(dataToSet);
|
||||
setFilterData(dataToSet);
|
||||
|
||||
if (resData.status == 200) {
|
||||
const pagingData = resData.data?.paging;
|
||||
|
||||
if (pagingData) {
|
||||
setPagingResponse({
|
||||
totalData: pagingData.total || 0,
|
||||
perPage: pagingData.limit || 0,
|
||||
totalPage: pagingData.page_total || 0,
|
||||
});
|
||||
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current: pagingData.page || 1,
|
||||
limit: pagingData.limit || 10,
|
||||
total: pagingData.total || 0,
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaginationChange = (page, pageSize) => {
|
||||
@@ -146,8 +121,8 @@ const TableList = memo(function TableList({
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<div>
|
||||
Menampilkan {pagingResponse.totalData} Data dari {pagingResponse.totalPage}{' '}
|
||||
Halaman
|
||||
Menampilkan {pagination.current_limit} data halaman{' '}
|
||||
{pagination.current_page} dari total {pagination.total_limit} data
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
@@ -155,9 +130,9 @@ const TableList = memo(function TableList({
|
||||
showSizeChanger
|
||||
onChange={handlePaginationChange}
|
||||
onShowSizeChange={handlePaginationChange}
|
||||
current={pagination.current}
|
||||
pageSize={pagination.limit}
|
||||
total={pagination.total}
|
||||
current={pagination.current_page}
|
||||
pageSize={pagination.current_limit}
|
||||
total={pagination.total_limit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -16,6 +16,7 @@ const NotifOk = ({ icon, title, message }) => {
|
||||
icon: icon,
|
||||
title: title,
|
||||
text: message,
|
||||
html: message.replace(/\n/g, '<br/>'),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user