From c4082a812dfe103c8bfd446af82a1f14f8ba6546 Mon Sep 17 00:00:00 2001 From: Alperen Dagli Date: Tue, 1 Aug 2023 14:58:43 +0300 Subject: [PATCH 1/4] #64 - closing-functionality implemented --- .../screens/DatabaseScreen/MainView.tsx | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/renderer/screens/DatabaseScreen/MainView.tsx b/src/renderer/screens/DatabaseScreen/MainView.tsx index 14259b7..7db5abf 100644 --- a/src/renderer/screens/DatabaseScreen/MainView.tsx +++ b/src/renderer/screens/DatabaseScreen/MainView.tsx @@ -1,7 +1,7 @@ import Splitter from 'renderer/components/Splitter/Splitter'; import WindowTab, { WindowTabItem } from 'renderer/components/WindowTab'; import SqlDebugger from './SqlDebugger'; -import { useCallback } from 'react'; +import { useCallback, useEffect } from 'react'; import { useAppFeature } from 'renderer/contexts/AppFeatureProvider'; import { useWindowTab } from 'renderer/contexts/WindowTabProvider'; import QueryWindow from './QueryWindow'; @@ -45,26 +45,52 @@ export default function MainView() { { text: 'Close', onClick: () => { - // not be implemented + if (additionalData) { + onTabClosed(additionalData); + } }, }, { text: 'Close Others', onClick: () => { - // not be implemented + if (additionalData) { + setTabs(tabs.filter((tab) => tab.key === additionalData.key)); + } }, }, { text: 'Close to the Right', onClick: () => { - // not be implemented + if (additionalData) { + console.log('Additional Data:', additionalData); // logging additional data + console.log('Tabs:', tabs); // logging tabs array + const index = tabs.findIndex( + (tab) => tab.key === additionalData.key + ); + console.log('Index:', index); // logging index + // if tab is found + if (index !== -1) { + const newTabs = tabs.slice(0, index + 1); + console.log('New tabs before setTabs:', newTabs); // logging newTabs before setting it + setTabs(newTabs); + console.log('New tabs after setTabs:', newTabs); // logging newTabs after setting it + } else { + console.log('Tab not found'); + } + } else { + console.log('Additional Data is null or undefined'); + } }, }, ]; }, - [] + [tabs] ); + useEffect(() => { + console.log('Tabs array updated:', tabs); // logging updated tabs array + }, [tabs]); + const onTabClosed = useCallback( (closedTab: WindowTabItem) => { // Close current tab will select other available tab From 9bbf08ae731e3ebd1b0dc7df32d3536fd8e58796 Mon Sep 17 00:00:00 2001 From: Alperen Dagli Date: Tue, 1 Aug 2023 16:33:59 +0300 Subject: [PATCH 2/4] removed comments and fixed issues --- .../screens/DatabaseScreen/MainView.tsx | 72 +++++++++---------- 1 file changed, 35 insertions(+), 37 deletions(-) diff --git a/src/renderer/screens/DatabaseScreen/MainView.tsx b/src/renderer/screens/DatabaseScreen/MainView.tsx index 7db5abf..92da73b 100644 --- a/src/renderer/screens/DatabaseScreen/MainView.tsx +++ b/src/renderer/screens/DatabaseScreen/MainView.tsx @@ -1,7 +1,7 @@ import Splitter from 'renderer/components/Splitter/Splitter'; import WindowTab, { WindowTabItem } from 'renderer/components/WindowTab'; import SqlDebugger from './SqlDebugger'; -import { useCallback, useEffect } from 'react'; +import { useCallback } from 'react'; import { useAppFeature } from 'renderer/contexts/AppFeatureProvider'; import { useWindowTab } from 'renderer/contexts/WindowTabProvider'; import QueryWindow from './QueryWindow'; @@ -37,6 +37,27 @@ export default function MainView() { } }; + const onTabClosed = useCallback( + (closedTab: WindowTabItem) => { + // Close current tab will select other available tab + if (closedTab.key === selectedTab) { + const closedTabIndex = tabs.findIndex( + (tab) => closedTab.key === tab.key + ); + + const nextTabKey = + closedTabIndex + 1 >= tabs.length + ? tabs[closedTabIndex - 1].key + : tabs[closedTabIndex + 1].key; + + setSelectedTab(nextTabKey); + } + + setTabs((prev) => prev.filter((tab) => tab.key !== closedTab.key)); + }, + [setSelectedTab, setTabs, selectedTab, tabs] + ); + const { handleContextMenu } = useContextMenu( (additionalData?: WindowTabItem) => { console.log('additional data', additionalData); @@ -46,7 +67,9 @@ export default function MainView() { text: 'Close', onClick: () => { if (additionalData) { - onTabClosed(additionalData); + if (tabs.length > 1) { + onTabClosed(additionalData); + } } }, }, @@ -55,6 +78,7 @@ export default function MainView() { onClick: () => { if (additionalData) { setTabs(tabs.filter((tab) => tab.key === additionalData.key)); + setSelectedTab(additionalData.key); } }, }, @@ -62,54 +86,28 @@ export default function MainView() { text: 'Close to the Right', onClick: () => { if (additionalData) { - console.log('Additional Data:', additionalData); // logging additional data - console.log('Tabs:', tabs); // logging tabs array const index = tabs.findIndex( (tab) => tab.key === additionalData.key ); - console.log('Index:', index); // logging index // if tab is found if (index !== -1) { const newTabs = tabs.slice(0, index + 1); - console.log('New tabs before setTabs:', newTabs); // logging newTabs before setting it setTabs(newTabs); - console.log('New tabs after setTabs:', newTabs); // logging newTabs after setting it - } else { - console.log('Tab not found'); + + // If the selected tab is at the right side, we need to set the current tab as the selected tab + const selectedIndex = tabs.findIndex( + (tab) => tab.key === selectedTab + ); + if (selectedIndex > index) { + setSelectedTab(newTabs[newTabs.length - 1].key); + } } - } else { - console.log('Additional Data is null or undefined'); } }, }, ]; }, - [tabs] - ); - - useEffect(() => { - console.log('Tabs array updated:', tabs); // logging updated tabs array - }, [tabs]); - - const onTabClosed = useCallback( - (closedTab: WindowTabItem) => { - // Close current tab will select other available tab - if (closedTab.key === selectedTab) { - const closedTabIndex = tabs.findIndex( - (tab) => closedTab.key === tab.key - ); - - const nextTabKey = - closedTabIndex + 1 >= tabs.length - ? tabs[closedTabIndex - 1].key - : tabs[closedTabIndex + 1].key; - - setSelectedTab(nextTabKey); - } - - setTabs((prev) => prev.filter((tab) => tab.key !== closedTab.key)); - }, - [setSelectedTab, setTabs, selectedTab, tabs] + [tabs, onTabClosed, setTabs, setSelectedTab] ); return ( From dc39c300c040e948d51faf4bc02d7796ead74f1b Mon Sep 17 00:00:00 2001 From: Alperen Dagli Date: Tue, 1 Aug 2023 16:55:32 +0300 Subject: [PATCH 3/4] last changes --- .../screens/DatabaseScreen/MainView.tsx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/renderer/screens/DatabaseScreen/MainView.tsx b/src/renderer/screens/DatabaseScreen/MainView.tsx index 92da73b..daeedc1 100644 --- a/src/renderer/screens/DatabaseScreen/MainView.tsx +++ b/src/renderer/screens/DatabaseScreen/MainView.tsx @@ -60,21 +60,19 @@ export default function MainView() { const { handleContextMenu } = useContextMenu( (additionalData?: WindowTabItem) => { - console.log('additional data', additionalData); - return [ { text: 'Close', + disabled: tabs.length === 1, onClick: () => { if (additionalData) { - if (tabs.length > 1) { - onTabClosed(additionalData); - } + onTabClosed(additionalData); } }, }, { text: 'Close Others', + disabled: tabs.length === 1, onClick: () => { if (additionalData) { setTabs(tabs.filter((tab) => tab.key === additionalData.key)); @@ -84,6 +82,9 @@ export default function MainView() { }, { text: 'Close to the Right', + disabled: + tabs.findIndex((tab) => tab.key === additionalData?.key) >= + tabs.length - 1, onClick: () => { if (additionalData) { const index = tabs.findIndex( @@ -93,21 +94,13 @@ export default function MainView() { if (index !== -1) { const newTabs = tabs.slice(0, index + 1); setTabs(newTabs); - - // If the selected tab is at the right side, we need to set the current tab as the selected tab - const selectedIndex = tabs.findIndex( - (tab) => tab.key === selectedTab - ); - if (selectedIndex > index) { - setSelectedTab(newTabs[newTabs.length - 1].key); - } } } }, }, ]; }, - [tabs, onTabClosed, setTabs, setSelectedTab] + [tabs, onTabClosed, setTabs, setSelectedTab, selectedTab] ); return ( From 556c3e7eaa94a218d624e3205c2eac0e301dffbd Mon Sep 17 00:00:00 2001 From: "Visal .In" Date: Tue, 1 Aug 2023 21:03:38 +0700 Subject: [PATCH 4/4] fix: select current tab when close to the right if selected tab was on the right side --- src/renderer/screens/DatabaseScreen/MainView.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/renderer/screens/DatabaseScreen/MainView.tsx b/src/renderer/screens/DatabaseScreen/MainView.tsx index daeedc1..293e9fb 100644 --- a/src/renderer/screens/DatabaseScreen/MainView.tsx +++ b/src/renderer/screens/DatabaseScreen/MainView.tsx @@ -90,6 +90,15 @@ export default function MainView() { const index = tabs.findIndex( (tab) => tab.key === additionalData.key ); + + const selectedIndex = tabs.findIndex( + (tab) => tab.key === selectedTab + ); + + if (selectedIndex > index) { + setSelectedTab(additionalData.key); + } + // if tab is found if (index !== -1) { const newTabs = tabs.slice(0, index + 1);