feat: tab deletion

kimlimjustin · Apr 14, 2024 · c36fc85 · c36fc85
1 parent 2463f7f
commit c36fc85
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import SubHeader from "./SubHeader";
 import { getStandardPath } from "../../Helpers/paths";
 import { fetchFilesRequest, updateHistoryIdxRequest } from "../../Store/ActionCreators/DirectoryActionCreators";
-import { createTab, setActiveTab } from "../../Store/ActionCreators/TabActionCreators";
+import { createTab, deleteTab, setActiveTab } from "../../Store/ActionCreators/TabActionCreators";
 import { IAppState } from "../../Store/Reducers";
 import { ThemedButton, ThemedDiv, ThemedSpan } from "../Theme";
 import { closeWindowRequest, maximizeWindowRequest, minimizeWindowRequest } from "../../Store/ActionCreators/WindowActionCreators";
@@ -47,6 +47,17 @@ const Header = () => {
                             <span id="tab-position">
                                 {activeTab.id === tab.id ? "active" : ""} {tab.name}
                             </span>
+                            <ThemedSpan
+                                componentName="tabCloseButton"
+                                className="tab-close-button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    dispatch(deleteTab(tab.id));
+                                    dispatch(fetchFilesRequest(activeTab.path));
+                                }}
+                            >
+                                &times;
+                            </ThemedSpan>
                         </ThemedButton>
                     ))}
 

diff --git a/src/Components/Layout/layout.scss b/src/Components/Layout/layout.scss
@@ -229,7 +229,7 @@
                     text-align: center;
                     display: inline-grid;
                 }
-                .close-tab-btn {
+                .tab-close-button {
                     position: absolute;
                     right: 1rem;
                     font-size: 1rem;

diff --git a/src/Store/ActionCreators/TabActionCreators.ts b/src/Store/ActionCreators/TabActionCreators.ts
@@ -13,10 +13,10 @@ export const updateTab = (name: string, tab: Partial<ITab>): UpdateTabSuccess =>
     tab,
 });
 
-export const deleteTab = (name: string): DeleteTabSuccess => ({
+export const deleteTab = (id: number): DeleteTabSuccess => ({
     type: "DELETE_TAB",
     status: "SUCCESS",
-    name,
+    id,
 });
 
 export const setActiveTab = (tab: ITab, pushToHistory = true): SetActiveTabSuccess => ({

diff --git a/src/Store/Reducers/TabReducer.ts b/src/Store/Reducers/TabReducer.ts
@@ -48,9 +48,11 @@ const reducer = (state = initialState, action: Actions): ITabReducerState => {
                 tabs: newTabs,
             };
         case "DELETE_TAB":
+            const newTabsList = omit(state.tabs, action.id);
             return {
                 ...state,
-                tabs: omit(state.tabs, action.name),
+                tabs: newTabsList,
+                activeTab: state.activeTab.id === action.id ? newTabsList[Object.keys(newTabsList)[0]] : state.activeTab,
             };
         case "SET_ACTIVE_TAB":
             return {

diff --git a/src/Typings/Store/tab.ts b/src/Typings/Store/tab.ts
@@ -18,7 +18,7 @@ export const SET_ACTIVE_TAB = "SET_ACTIVE_TAB"; // * Internal
 
 export type CreateTabSuccess = AppActionBase<typeof CREATE_TAB, "SUCCESS"> & { tab: ITab };
 export type UpdateTabSuccess = AppActionBase<typeof UPDATE_TAB, "SUCCESS"> & { name: string; tab: Partial<ITab> };
-export type DeleteTabSuccess = AppActionBase<typeof DELETE_TAB, "SUCCESS"> & { name: string };
+export type DeleteTabSuccess = AppActionBase<typeof DELETE_TAB, "SUCCESS"> & { id: number };
 export type SetActiveTabSuccess = AppActionBase<typeof SET_ACTIVE_TAB, "SUCCESS"> & { tab: ITab; pushToHistory?: boolean };
 
 export type TabActions = CreateTabSuccess | UpdateTabSuccess | DeleteTabSuccess | SetActiveTabSuccess;