Add tab

package.json

@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0",
     "bootstrap": "^4.6.0",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
     "react-bootstrap-icons": "^1.5.0",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
@@ -42,6 +45,7 @@
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "redux-mock-store": "^1.5.4"
   }
 }

src/App.test.jsx

@@ -1,9 +1,29 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
 import App from './App.jsx';
 
-test('renders tab 1', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Tab 1/i);
-  expect(linkElement).toBeInTheDocument();
+describe('With React Testing Library', () => {
+  const defaultCurrentTab = '1';
+  const initialState = {
+    tabs: {
+      tabsList: [
+        {
+          id: defaultCurrentTab,
+          name: 'New Tab',
+        },
+      ],
+      currentTabId: defaultCurrentTab,
+    },
+  };
+
+  const mockStore = configureStore();
+  let store; // eslint-disable-line
+
+  it('Shows "New Tab"', () => {
+    store = mockStore(initialState);
+    const { getByText } = render(<Provider store={store}><App /></Provider>);
+    expect(getByText('New Tab')).not.toBeNull();
+  });
 });

src/components/Header.jsx

@@ -1,23 +1,14 @@
 import React from 'react';
 import {
-  Tab, Row, Col, Nav, Button,
+  Tab, Row, Col,
 } from 'react-bootstrap';
 import { ArrowLeft, ArrowRight, ArrowClockwise } from 'react-bootstrap-icons';
+import Tabs from './Tabs.jsx';
 import Search from './Search.jsx';
 
 const Header = () => (
   <Tab.Container id="left-tabs-example" defaultActiveKey="first">
-
-    <Nav variant="tabs">
-      <Nav.Item>
-        <Nav.Link className="text-dark" eventKey="first">Tab 1</Nav.Link>
-      </Nav.Item>
-      <Nav.Item>
-        <Nav.Link className="text-dark" eventKey="second">Tab 2</Nav.Link>
-      </Nav.Item>
-      <Button variant="light">+</Button>
-    </Nav>
-
+    <Tabs />
     <Row>
       <Col sm={1} className="d-flex justify-content-between align-items-center">
         <ArrowLeft size={26} />
@@ -30,12 +21,7 @@ const Header = () => (
     </Row>
 
     <Tab.Content className="min-vh-100">
-      <Tab.Pane eventKey="first">
-        1
-      </Tab.Pane>
-      <Tab.Pane eventKey="second">
-        2
-      </Tab.Pane>
+      <Tab.Pane />
     </Tab.Content>
   </Tab.Container>
 );

src/components/TabItem.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Nav } from 'react-bootstrap';
+import { switchTab } from '../slices/tabs';
+
+const TabItem = ({ id, name }) => {
+  const currentTabId = useSelector((state) => state.tabs.currentTabId);
+  const dispatch = useDispatch();
+  const isActive = id === currentTabId;
+
+  const changeTab = () => {
+    dispatch(switchTab(id));
+  };
+
+  return (
+    <Nav.Item>
+      <Nav.Link onClick={changeTab} className="text-dark" active={isActive}>{name}</Nav.Link>
+    </Nav.Item>
+  );
+};
+
+export default TabItem;

src/components/Tabs.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  Nav, Button, OverlayTrigger, Tooltip,
+} from 'react-bootstrap';
+import uniqueId from 'lodash/uniqueId';
+import { addTab, switchTab } from '../slices/tabs';
+
+import TabItem from './TabItem.jsx';
+
+const Tabs = () => {
+  const tabsList = useSelector((state) => Object.values(state.tabs.tabsList));
+  const dispatch = useDispatch();
+
+  const addNewTab = () => {
+    const newId = uniqueId();
+    dispatch(addTab({ id: newId, name: 'New Tab' }));
+    dispatch(switchTab(newId));
+  };
+
+  return (
+    <Nav variant="tabs">
+      {tabsList.map(({ id, name }) => (
+        <TabItem key={id} id={id} name={name} />
+      ))}
+      <OverlayTrigger key="right" placement="right" overlay={<Tooltip>New Tab</Tooltip>}>
+        <Button variant="light" onClick={addNewTab}>+</Button>
+      </OverlayTrigger>
+    </Nav>
+  );
+};
+
+export default Tabs;

src/index.jsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import { Provider } from 'react-redux';
 import App from './App.jsx';
+import store from './store';
 import reportWebVitals from './reportWebVitals.js';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/slices/index.js

@@ -0,0 +1,5 @@
+import tabsSlice from './tabs';
+
+export default {
+  tabs: tabsSlice,
+};

src/slices/tabs.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import uniqueId from 'lodash/uniqueId';
+
+const defaultCurrentTab = uniqueId();
+
+const initialState = {
+  tabsList: [
+    {
+      id: defaultCurrentTab,
+      name: 'New Tab',
+    },
+  ],
+  currentTabId: defaultCurrentTab,
+};
+
+const tabs = createSlice({
+  name: 'tabs',
+  initialState,
+  reducers: {
+    addTab: (state, action) => {
+      const newTab = action.payload;
+      state.tabsList.push(newTab);
+    },
+    switchTab: (state, action) => {
+      const newId = action.payload;
+      state.currentTabId = newId;
+    },
+  },
+});
+
+export const { addTab, switchTab } = tabs.actions;
+export default tabs.reducer;

src/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import reducer from './slices';
+
+const store = configureStore({
+  reducer,
+});
+
+export default store;