diff --git a/client/src/components/DashboardPage/DecisionSupportFilePanel.tsx b/client/src/components/DashboardPage/DecisionSupportFilePanel.tsx index 1fa31e8..ba8929d 100644 --- a/client/src/components/DashboardPage/DecisionSupportFilePanel.tsx +++ b/client/src/components/DashboardPage/DecisionSupportFilePanel.tsx @@ -26,8 +26,7 @@ export function DecisionSupportFilePanel() { itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Closed }, ]; - - + return ( boolean } - - export interface ItemPanelProps { className?: string itemIconClassName?: string @@ -30,9 +28,12 @@ export const ItemPanel: FunctionComponent = (props) => { const { title, className, newItemUrl, itemKey, itemLabel, - itemIconClassName, itemUrl + itemIconClassName, itemUrl, } = props; + const items = props.items || []; + const tabs = props.tabs || []; + const [ state, setState ] = useState({ selectedTab: 0, filteredItems: [] }); const filterItemsForTab = (tab: TabDefinition, items: Item[]) => { @@ -42,7 +43,6 @@ export const ItemPanel: FunctionComponent = (props) => { const selectTab = (tabIndex: number) => { setState(state => { - const { tabs, items } = props; const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[tabIndex] : null; return { ...state, @@ -61,7 +61,7 @@ export const ItemPanel: FunctionComponent = (props) => { filteredItems: filterItemsForTab(newTab, items), } }); - }, [props.items, props.tabs]); + }, [items, tabs]); const itemElements = state.filteredItems.map((item: Item, i: number) => { return ( @@ -74,8 +74,6 @@ export const ItemPanel: FunctionComponent = (props) => { ); }); - const tabs = props.tabs || []; - return (