feat(branche): add crud branches.

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -4,8 +4,11 @@ import styled from 'styled-components';
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import { useBranchesTableColumns, ActionsMenu } from './components';
+import { useBranchesContext } from './BranchesProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
 import { compose } from 'utils';
 
 /**
@@ -14,23 +17,42 @@ import { compose } from 'utils';
 function BranchesDataTable({
   // #withDialogAction
   openDialog,
+
+  // #withAlertActions
+  openAlert,
 }) {
   // Table columns.
   const columns = useBranchesTableColumns();
 
+  const { branches, isBranchesLoading, isBranchesFetching } =
+    useBranchesContext();
+
+  const handleEditBranch = ({ id }) => {
+    openDialog('branch-form', { branchId: id, action: 'edit' });
+  };
+
+  const handleDeleteBranch = ({ id }) => {
+    openAlert('branch-delete', { branchId: id });
+  };
+
   return (
     <BranchesTable
       columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
+      data={branches}
+      loading={isBranchesLoading}
+      headerLoading={isBranchesLoading}
+      progressBarLoading={isBranchesFetching}
       TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
       ContextMenu={ActionsMenu}
-      payload={{}}
+      payload={{
+        onEdit: handleEditBranch,
+        onDelete: handleDeleteBranch,
+      }}
     />
   );
 }
 
-export default compose(withDialogActions)(BranchesDataTable);
+export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
 
 const BranchesTable = styled(DataTable)``;