refactor: streamline brand device management components and add error master view

src/pages/master/brandDevice/IndexBrandDevice.jsx

@@ -1,96 +1,45 @@
 
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { Form, Modal, Typography } from 'antd';
 import ListBrandDevice from './component/ListBrandDevice';
 import DetailBrandDevice from './component/DetailBrandDevice';
-
-import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
 
 const { Text } = Typography;
 
-// Mock Data
-const initialData = [
-    {
-        key: '1',
-        brandCode: 'HTC-01',
-        brandName: 'Brand A',
-        brandType: 'Type X',
-        deviceName: 'Device 1',
-        description: 'Description for Brand A',
-    },
-    {
-        key: '2',
-        brandCode: 'HTC-02',
-        brandName: 'Brand B',
-        brandType: 'Type Y',
-        deviceName: 'Device 2',
-        description: 'Description for Brand B',
-    },
-    {
-        key: '3',
-        brandCode: 'HTC-03',
-        brandName: 'Brand C',
-        brandType: 'Type Z',
-        deviceName: 'Device 3',
-        description: 'Description for Brand C',
-    },
-    // Add more data for pagination testing
-    ...Array.from({ length: 20 }, (_, i) => ({
-        key: `${i + 4}`,
-        brandCode: `HTC-${String(i + 4).padStart(2, '0')}`,
-        brandName: `Brand ${String.fromCharCode(68 + i)}`,
-        brandType: `Type ${String.fromCharCode(88 + i)}`,
-        deviceName: `Device ${i + 4}`,
-        description: `Description for Brand ${String.fromCharCode(68 + i)}`,
-    })),
-];
-
 const IndexBrandDevice = memo(function IndexBrandDevice() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
 
-    const [data, setData] = useState(initialData);
+    const [activeTab, setActiveTab] = useState('brandDevice');
     const [actionMode, setActionMode] = useState('list');
-    const [editingKey, setEditingKey] = useState('');
-    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [selectedData, setSelectedData] = useState(null);
     const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowmodal] = useState(false);
 
-    // Mock API function
-    const getAllBrandDevice = async (params) => {
-        const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
-        
-        let filteredData = data;
-        if (search) {
-            filteredData = data.filter(item => 
-                item.brandName.toLowerCase().includes(search.toLowerCase()) ||
-                item.brandType.toLowerCase().includes(search.toLowerCase()) ||
-                item.deviceName.toLowerCase().includes(search.toLowerCase())
-            );
+    const setMode = (param) => {
+        setActionMode(param);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                setShowmodal(true);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                setShowmodal(true);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                setShowmodal(true);
+                break;
+
+            default:
+                setShowmodal(false);
+                break;
         }
-
-        const start = (page - 1) * limit;
-        const end = start + limit;
-        const paginatedData = filteredData.slice(start, end);
-
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve({
-                    status: 200,
-                    data: {
-                        data: paginatedData,
-                        total: filteredData.length,
-                        paging: {
-                            page: parseInt(page),
-                            limit: parseInt(limit),
-                            total: filteredData.length,
-                        },
-                    },
-                });
-            }, 500);
-        });
     };
 
     useEffect(() => {
@@ -103,96 +52,26 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
         } else {
             navigate('/signin');
         }
-    }, [navigate, setBreadcrumbItems]);
-
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
-
-    const handleCancel = () => {
-        setActionMode('list');
-        setEditingKey('');
-        form.resetFields();
-    };
-
-    const handleOk = () => {
-        if (readOnly) {
-            handleCancel();
-            return;
-        }
-        form.validateFields()
-            .then((values) => {
-                let newData = [...data];
-                if (editingKey) {
-                    // Editing existing data
-                    const index = newData.findIndex((item) => editingKey === item.key);
-                    if (index > -1) {
-                        const item = newData[index];
-                        newData.splice(index, 1, { ...item, ...values });
-                    }
-                } else {
-                    // Adding new data
-                    const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
-                    newData = [{ key: newKey, ...values }, ...newData];
-                }
-                setData(newData);
-                handleCancel();
-            })
-            .catch((info) => {
-                console.log('Validate Failed:', info);
-            });
-    };
-
-    const handleEdit = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.key);
-        setActionMode('edit');
-    };
-
-    const handlePreview = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.key);
-        setActionMode('preview');
-    };
-
-    const handleDelete = (record) => {
-        NotifConfirmDialog({
-            icon: 'question',
-            title: 'Konfirmasi',
-            message: `Apakah anda yakin ingin menghapus brand "${record.brandName}"?`,
-            onConfirm: () => {
-                const newData = data.filter((item) => item.key !== record.key);
-                setData(newData);
-                NotifAlert({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `Brand "${record.brandName}" berhasil dihapus.`,
-                });
-            },
-        });
-    };
+    }, []);
 
     return (
         <React.Fragment>
             <ListBrandDevice
-                setActionMode={setActionMode}
-                handleEdit={handleEdit}
-                handleDelete={handleDelete}
-                handlePreview={handlePreview}
-                getAllBrandDevice={getAllBrandDevice}
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
             />
             <DetailBrandDevice
-                visible={isModalVisible}
-                onCancel={handleCancel}
-                onOk={handleOk}
-                form={form}
-                editingKey={editingKey}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
                 readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
             />
         </React.Fragment>
     );