FEAT: Optimize List View Components with Table Design and Sorting Across Project Pages #819
+1,109
−944
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import PropTypes from "prop-types"; | ||
| import { useCallback } from "react"; | ||
| import { AddCustomToolFormModal } from "../add-custom-tool-form-modal/AddCustomToolFormModal"; | ||
|
|
||
| function ListOfToolsModal({ open, setOpen, editItem, isEdit, handleAddItem }) { | ||
| const handleAddNewTool = useCallback( | ||
| (itemData) => handleAddItem(itemData, editItem?.tool_id, isEdit), | ||
| [handleAddItem, isEdit, editItem?.tool_id] | ||
| ); | ||
|
|
||
| return ( | ||
| <AddCustomToolFormModal | ||
| open={open} | ||
| setOpen={setOpen} | ||
| editItem={editItem} | ||
| isEdit={isEdit} | ||
| handleAddNewTool={handleAddNewTool} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| ListOfToolsModal.propTypes = { | ||
| open: PropTypes.bool.isRequired, | ||
| setOpen: PropTypes.func.isRequired, | ||
| editItem: PropTypes.shape({ | ||
| tool_id: PropTypes.number, | ||
| tool_name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| icon: PropTypes.string, | ||
| }), | ||
| isEdit: PropTypes.bool.isRequired, | ||
| handleAddItem: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default ListOfToolsModal; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| /* Styles for ListOfItems */ | ||
|
|
||
| .list-of-items-empty { | ||
| height: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .cover-img .fit-cover { | ||
| object-fit: cover; | ||
| width: 100%; | ||
| height: auto; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import PropTypes from "prop-types"; | ||
| import { useCallback } from "react"; | ||
| import { AddSourceModal } from "../../input-output/add-source-modal/AddSourceModal"; | ||
|
|
||
| function ToolSettingsModal({ | ||
| open, | ||
| setOpen, | ||
| editItem, | ||
| isEdit, | ||
| type, | ||
| updateList, | ||
| }) { | ||
| const handleAddNewItem = useCallback( | ||
| (itemData) => { | ||
| updateList(itemData, editItem?.id, isEdit); | ||
| setOpen(false); | ||
| }, | ||
| [isEdit, editItem?.id] | ||
| ); | ||
|
|
||
| return ( | ||
| <AddSourceModal | ||
| open={open} | ||
| setOpen={setOpen} | ||
| type={type} | ||
| addNewItem={handleAddNewItem} | ||
| editItemId={editItem?.id} | ||
| setEditItemId={() => {}} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| ToolSettingsModal.propTypes = { | ||
| open: PropTypes.bool.isRequired, | ||
| setOpen: PropTypes.func.isRequired, | ||
| editItem: PropTypes.object, | ||
| isEdit: PropTypes.bool.isRequired, | ||
| type: PropTypes.string.isRequired, | ||
| updateList: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default ToolSettingsModal; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import { useEffect, useState, useCallback } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { CustomButton } from "../widgets/custom-button/CustomButton"; | ||
| import { ToolNavBar } from "../navigations/tool-nav-bar/ToolNavBar"; | ||
| import { ViewTools } from "../custom-tools/view-tools/ViewTools"; | ||
| import "./ViewProjects.css"; | ||
|
|
||
| function ListView({ | ||
| title, | ||
| useListManagerHook, | ||
| CustomModalComponent, | ||
| customButtonText, | ||
| customButtonIcon, | ||
| onCustomButtonClick, | ||
| handleEditItem, | ||
| handleDeleteItem, | ||
| itemProps, | ||
| setPostHogCustomEvent, | ||
| newButtonEventName, | ||
| type, | ||
| }) { | ||
| const { | ||
| list, | ||
| filteredList, | ||
| loading, | ||
| fetchList, | ||
| handleSearch, | ||
| handleAddItem, | ||
| handleDeleteItem: deleteItem, | ||
| updateList, | ||
| } = useListManagerHook; | ||
|
|
||
| const [openModal, setOpenModal] = useState(false); | ||
| const [editingItem, setEditingItem] = useState(null); | ||
| const [isEdit, setIsEdit] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| fetchList(); | ||
| }, [title]); | ||
|
|
||
| const handleCustomButtonClick = useCallback(() => { | ||
| setEditingItem(null); | ||
| setIsEdit(false); | ||
| setOpenModal(true); | ||
| if (onCustomButtonClick) onCustomButtonClick(); | ||
| try { | ||
| setPostHogCustomEvent?.(newButtonEventName, { | ||
| info: `Clicked on '${customButtonText}' button`, | ||
| }); | ||
| } catch (err) { | ||
| // Ignore error | ||
| } | ||
| }, [onCustomButtonClick, newButtonEventName, customButtonText]); | ||
|
|
||
| const CustomButtons = useCallback( | ||
| () => ( | ||
| <CustomButton | ||
| type="primary" | ||
| icon={customButtonIcon} | ||
| onClick={handleCustomButtonClick} | ||
| > | ||
| {customButtonText} | ||
| </CustomButton> | ||
| ), | ||
| [customButtonIcon, handleCustomButtonClick, customButtonText] | ||
| ); | ||
|
|
||
| const handleEdit = useCallback( | ||
| (_event, item) => { | ||
| setEditingItem(item); | ||
| setIsEdit(true); | ||
| setOpenModal(true); | ||
| if (handleEditItem) handleEditItem(item); | ||
| }, | ||
| [handleEditItem] | ||
| ); | ||
|
|
||
| const handleDelete = useCallback( | ||
| (_event, item) => { | ||
| deleteItem(item?.[itemProps?.idProp]); | ||
| if (handleDeleteItem) handleDeleteItem(item); | ||
| }, | ||
| [deleteItem, handleDeleteItem, itemProps?.idProp] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <ToolNavBar | ||
| title={title} | ||
| enableSearch | ||
| onSearch={handleSearch} | ||
| searchList={list} | ||
| setSearchList={filteredList} | ||
| CustomButtons={CustomButtons} | ||
| /> | ||
| <div className="list-of-tools-layout"> | ||
| <div className="list-of-tools-island"> | ||
| <div className="list-of-tools-body"> | ||
| <ViewTools | ||
| isLoading={loading} | ||
| isEmpty={!filteredList?.length} | ||
| listOfTools={filteredList} | ||
| setOpenAddTool={setOpenModal} | ||
| handleEdit={handleEdit} | ||
| handleDelete={handleDelete} | ||
| {...itemProps} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {openModal && CustomModalComponent && ( | ||
| <CustomModalComponent | ||
| open={openModal} | ||
| setOpen={setOpenModal} | ||
| editItem={editingItem} | ||
| isEdit={isEdit} | ||
| handleAddItem={handleAddItem} | ||
| updateList={updateList} | ||
| type={type} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| ListView.propTypes = { | ||
| title: PropTypes.string.isRequired, | ||
| useListManagerHook: PropTypes.shape({ | ||
| list: PropTypes.array.isRequired, | ||
| filteredList: PropTypes.array.isRequired, | ||
| loading: PropTypes.bool.isRequired, | ||
| fetchList: PropTypes.func.isRequired, | ||
| handleSearch: PropTypes.func.isRequired, | ||
| handleAddItem: PropTypes.func.isRequired, | ||
| handleDeleteItem: PropTypes.func.isRequired, | ||
| updateList: PropTypes.func.isRequired, | ||
| }).isRequired, | ||
| CustomModalComponent: PropTypes.oneOfType([ | ||
| PropTypes.func, | ||
| PropTypes.elementType, | ||
| ]), | ||
| customButtonText: PropTypes.string.isRequired, | ||
| customButtonIcon: PropTypes.element, | ||
| onCustomButtonClick: PropTypes.func, | ||
| handleEditItem: PropTypes.func, | ||
| handleDeleteItem: PropTypes.func, | ||
| itemProps: PropTypes.shape({ | ||
| titleProp: PropTypes.string.isRequired, | ||
| descriptionProp: PropTypes.string, | ||
| iconProp: PropTypes.string, | ||
| idProp: PropTypes.string.isRequired, | ||
| type: PropTypes.string.isRequired, | ||
| }).isRequired, | ||
| setPostHogCustomEvent: PropTypes.func, | ||
| newButtonEventName: PropTypes.string, | ||
| type: PropTypes.string, | ||
| }; | ||
|
|
||
| export { ListView }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* Styles for ListOfTools */ | ||
|
|
||
| .list-of-tools-layout { | ||
| height: 100%; | ||
| background-color: var(--page-bg-2); | ||
| padding: 12px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| overflow-y: hidden; | ||
| } | ||
|
|
||
| .list-of-tools-island { | ||
| background-color: var(--page-bg-1); | ||
| flex: 1; | ||
| padding: 20px; | ||
| overflow-y: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .list-of-tools-wrap { | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .list-of-tools-header { | ||
| display: grid; | ||
| grid-template-columns: auto 1fr; | ||
| } | ||
|
|
||
| .list-of-tools-title { | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .list-of-tools-header2 { | ||
| display: grid; | ||
| grid-auto-flow: column; | ||
| column-gap: 10px; | ||
| justify-self: end; | ||
| } | ||
|
|
||
| .list-of-tools-divider { | ||
| margin-top: 12px; | ||
| } | ||
|
|
||
| .list-of-tools-body { | ||
| flex: 1; | ||
| display: flex; | ||
| justify-content: center; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import PropTypes from "prop-types"; | ||
| import { useState } from "react"; | ||
| import { LazyLoader } from "../../widgets/lazy-loader/LazyLoader.jsx"; | ||
| import { useAlertStore } from "../../../store/alert-store"; | ||
| import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx"; | ||
| import { useWorkflowStore } from "../../../store/workflow-store"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { useSessionStore } from "../../../store/session-store"; | ||
|
|
||
| function WorkflowModal({ | ||
| open, | ||
| setOpen, | ||
| editItem, | ||
| isEdit, | ||
| handleAddItem, | ||
| loading, | ||
| backendErrors, | ||
| }) { | ||
| const { setAlertDetails } = useAlertStore(); | ||
| const handleException = useExceptionHandler(); | ||
| const [localBackendErrors, setLocalBackendErrors] = useState(backendErrors); | ||
| const navigate = useNavigate(); | ||
| const { updateWorkflow } = useWorkflowStore(); | ||
| const sessionDetails = useSessionStore((state) => state?.sessionDetails); | ||
| const orgName = sessionDetails?.orgName ?? ""; | ||
|
|
||
| const handleOnDone = (name, description) => { | ||
| handleAddItem({ name, description }, editItem?.id, isEdit) | ||
| .then((project) => { | ||
| if (!isEdit) { | ||
| updateWorkflow({ projectName: project?.workflow_name ?? "" }); | ||
| navigate(`/${orgName}/workflows/${project?.id ?? ""}`); | ||
| } | ||
| setAlertDetails({ | ||
| type: "success", | ||
| content: "Workflow updated successfully", | ||
| }); | ||
| setOpen(false); | ||
| }) | ||
| .catch((err) => { | ||
| handleException(err, "", setLocalBackendErrors); | ||
| }); | ||
| }; | ||
|
|
||
| const handleOnClose = () => { | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <LazyLoader | ||
| component={() => import("../new-workflow/NewWorkflow.jsx")} | ||
| componentName="NewWorkflow" | ||
| name={editItem?.workflow_name ?? ""} | ||
| description={editItem?.description ?? ""} | ||
| onDone={handleOnDone} | ||
| onClose={handleOnClose} | ||
| loading={loading} | ||
| openModal={open} | ||
| backendErrors={localBackendErrors} | ||
| setBackendErrors={setLocalBackendErrors} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| WorkflowModal.propTypes = { | ||
| open: PropTypes.bool.isRequired, | ||
| setOpen: PropTypes.func.isRequired, | ||
| editItem: PropTypes.shape({ | ||
| id: PropTypes.number, | ||
| workflow_name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| }), | ||
| isEdit: PropTypes.bool.isRequired, | ||
| handleAddItem: PropTypes.func.isRequired, | ||
| loading: PropTypes.bool.isRequired, | ||
| backendErrors: PropTypes.any, | ||
| }; | ||
|
|
||
| export default WorkflowModal; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,273 +1,63 @@ | ||
| import { PlusOutlined } from "@ant-design/icons"; | ||
| import usePostHogEvents from "../../../hooks/usePostHogEvents"; | ||
| import { useListManager } from "../../../hooks/useListManager"; | ||
| import WorkflowModal from "./WorkflowModal"; | ||
| import { ListView } from "../../view-projects/ListView"; | ||
| import { workflowService } from "./workflow-service"; | ||
|
|
||
| function Workflows() { | ||
| const { setPostHogCustomEvent } = usePostHogEvents(); | ||
| const projectApiService = workflowService(); | ||
|
|
||
| const getListApiCall = ({ initialFilter }) => | ||
| projectApiService.getProjectList(initialFilter); | ||
|
|
||
| const addItemApiCall = ({ itemData }) => | ||
| projectApiService.editProject( | ||
| itemData?.name ?? "", | ||
| itemData?.description ?? "" | ||
| ); | ||
|
|
||
| const editItemApiCall = ({ itemData, itemId }) => | ||
| projectApiService.editProject( | ||
| itemData?.name ?? "", | ||
| itemData?.description ?? "", | ||
| itemId | ||
| ); | ||
|
|
||
| const deleteItemApiCall = ({ itemId }) => | ||
| projectApiService.deleteProject(itemId); | ||
|
|
||
| const useListManagerHook = useListManager({ | ||
| getListApiCall, | ||
| addItemApiCall, | ||
| editItemApiCall, | ||
| deleteItemApiCall, | ||
| searchProperty: "workflow_name", | ||
| itemIdProp: "id", | ||
| itemNameProp: "workflow_name", | ||
| itemDescriptionProp: "description", | ||
| itemType: "Workflow", | ||
| initialFilter: "mine", | ||
| }); | ||
|
|
||
| return ( | ||
| <ListView | ||
| title="Workflows" | ||
| useListManagerHook={useListManagerHook} | ||
| CustomModalComponent={WorkflowModal} | ||
| customButtonText="New Workflow" | ||
| customButtonIcon={<PlusOutlined />} | ||
| itemProps={{ | ||
| titleProp: "workflow_name", | ||
| descriptionProp: "description", | ||
| idProp: "id", | ||
| type: "Workflow", | ||
| }} | ||
| setPostHogCustomEvent={setPostHogCustomEvent} | ||
| newButtonEventName="intent_new_wf_project" | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export { Workflows }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { useExceptionHandler } from "./useExceptionHandler"; | ||
| import { useAlertStore } from "../store/alert-store"; | ||
| import { useSessionStore } from "../store/session-store"; | ||
| import { useAxiosPrivate } from "./useAxiosPrivate"; | ||
|
|
||
| export function useListManager({ | ||
| getListApiCall, | ||
| addItemApiCall, | ||
| editItemApiCall, | ||
| deleteItemApiCall, | ||
| searchProperty = "", | ||
| itemIdProp = "id", | ||
| itemType = "item", | ||
| initialFilter, | ||
| onAddSuccess, | ||
| onEditSuccess, | ||
| onDeleteSuccess, | ||
| onError, | ||
| }) { | ||
| const [list, setList] = useState([]); | ||
| const [filteredList, setFilteredList] = useState([]); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const handleException = useExceptionHandler(); | ||
| const { setAlertDetails } = useAlertStore(); | ||
| const sessionDetails = useSessionStore((state) => state?.sessionDetails); | ||
| const axiosPrivate = useAxiosPrivate(); | ||
|
|
||
| useEffect(() => { | ||
| fetchList(); | ||
| }, [initialFilter]); | ||
|
|
||
| const fetchList = () => { | ||
| if (!getListApiCall) return; | ||
|
|
||
| setLoading(true); | ||
| getListApiCall({ axiosPrivate, sessionDetails, initialFilter }) | ||
| .then((res) => { | ||
| const data = res?.data || []; | ||
| setList(data); | ||
| setFilteredList(data); | ||
| }) | ||
| .catch((err) => { | ||
| const errorMsg = handleException( | ||
| err, | ||
| `Failed to get the list of ${itemType}s` | ||
| ); | ||
| setAlertDetails(errorMsg); | ||
| onError?.(err); | ||
| }) | ||
| .finally(() => { | ||
| setLoading(false); | ||
| }); | ||
| }; | ||
|
|
||
| const updateList = (itemData, itemId, isEdit = false) => { | ||
| let updatedList = []; | ||
|
|
||
| if (isEdit) { | ||
| updatedList = list.map((item) => | ||
| item?.[itemIdProp] === itemId ? itemData : item | ||
| ); | ||
| onEditSuccess?.(itemData); | ||
| } else { | ||
| updatedList = [itemData, ...list]; | ||
| onAddSuccess?.(itemData); | ||
| } | ||
|
|
||
| setList(updatedList); | ||
| setFilteredList(updatedList); | ||
| }; | ||
|
|
||
| const handleSearch = (searchText = "") => { | ||
| if (!searchText.trim()) { | ||
| setFilteredList(list); | ||
| return; | ||
| } | ||
| const filtered = list.filter((item) => | ||
| item?.[searchProperty]?.toLowerCase()?.includes(searchText.toLowerCase()) | ||
| ); | ||
| setFilteredList(filtered); | ||
| }; | ||
|
|
||
| const handleAddItem = (itemData, itemId, isEdit = false) => { | ||
| const apiCall = isEdit ? editItemApiCall : addItemApiCall; | ||
| if (!apiCall) return Promise.reject(new Error("API call is not defined")); | ||
|
|
||
| return apiCall({ axiosPrivate, sessionDetails, itemData, itemId }) | ||
| .then((res) => { | ||
| const updatedItem = res?.data; | ||
| let updatedList = []; | ||
|
|
||
| if (isEdit) { | ||
| updatedList = list.map((item) => | ||
| item?.[itemIdProp] === itemId ? updatedItem : item | ||
| ); | ||
| onEditSuccess?.(updatedItem); | ||
| } else { | ||
| updatedList = [...list, updatedItem]; | ||
| onAddSuccess?.(updatedItem); | ||
| } | ||
|
|
||
| setList(updatedList); | ||
| setFilteredList(updatedList); | ||
| return updatedItem; | ||
| }) | ||
| .catch((err) => { | ||
| const errorMsg = handleException( | ||
| err, | ||
| `Failed to ${isEdit ? "edit" : "add"} ${itemType}` | ||
| ); | ||
| setAlertDetails(errorMsg); | ||
| onError?.(err); | ||
| throw err; | ||
| }); | ||
| }; | ||
|
|
||
| const handleDeleteItem = (itemId) => { | ||
| if (!deleteItemApiCall) | ||
| return Promise.reject(new Error("API call is not defined")); | ||
|
|
||
| return deleteItemApiCall({ axiosPrivate, sessionDetails, itemId }) | ||
| .then(() => { | ||
| const updatedList = list.filter( | ||
| (item) => item?.[itemIdProp] !== itemId | ||
| ); | ||
| setList(updatedList); | ||
| setFilteredList(updatedList); | ||
| onDeleteSuccess?.(itemId); | ||
| }) | ||
| .catch((err) => { | ||
| const errorMsg = handleException(err, `Failed to delete ${itemType}`); | ||
| setAlertDetails(errorMsg); | ||
| onError?.(err); | ||
| throw err; | ||
| }); | ||
| }; | ||
|
|
||
| return { | ||
| list, | ||
| filteredList, | ||
| updateList, | ||
| loading, | ||
| fetchList, | ||
| handleSearch, | ||
| handleAddItem, | ||
| handleDeleteItem, | ||
| }; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NIT: Move props with default values to bottom for better code readability.