Merge pull request #25 from Semeikin-Kirill/moving_history

[#7] moving through history

Author: dzencot

src/components/Header.jsx

@@ -6,42 +6,57 @@ import { ArrowLeft, ArrowRight, ArrowClockwise } from 'react-bootstrap-icons';
 import { useDispatch, useSelector } from 'react-redux';
 import Tabs from './Tabs.jsx';
 import Search from './Search.jsx';
-import { actions as tabDataActions } from '../slices/tabsData';
+import { updateTabData } from '../slices/tabsData';
 
 import TabsContent from './TabsContent.jsx';
 import * as selectors from '../selectors';
 
 const Header = () => {
   const activeTabId = useSelector(selectors.activeTabIdSelector);
   const currentLinks = useSelector(selectors.currentLinksSelector);
+  const historyTabs = useSelector(selectors.historyTabsSelector);
+  const currentHistoryTab = historyTabs[activeTabId] ?? [];
+  const url = currentLinks[activeTabId];
+  const currentIndexURL = currentHistoryTab.indexOf(url);
+  const lastIndexHistory = currentHistoryTab.length - 1;
   const dispatch = useDispatch();
 
   const refresh = async () => {
     if (activeTabId in currentLinks) {
-      const url = currentLinks[activeTabId];
-      try {
-        const response = await fetch(url);
-        const htmlDoc = await response.text();
-        const data = { [activeTabId]: htmlDoc };
-        dispatch(tabDataActions.updateTabData(data));
-      } catch (e) {
-        console.error('something wrong: ', e);
-      }
+      dispatch(updateTabData({ activeTabId, url }));
     }
   };
 
+  const backwardHistory = () => {
+    const previosIndex = currentIndexURL - 1;
+    dispatch(updateTabData({ activeTabId, url: currentHistoryTab[previosIndex] }));
+  };
+
+  const forwardsHistory = () => {
+    const nextIndex = currentIndexURL + 1;
+    dispatch(updateTabData({ activeTabId, url: currentHistoryTab[nextIndex] }));
+  };
+
+  const isFirstHistory = () => currentIndexURL === 0 || currentIndexURL === -1;
+
+  const isLastHistory = () => currentIndexURL === lastIndexHistory || currentIndexURL === -1;
+
   return (
     <Tab.Container id="left-tabs-example" defaultActiveKey="first">
       <Tabs />
       <Row>
-        <Col sm={1} className="d-flex justify-content-between align-items-center">
-          <ArrowLeft size={26} />
-          <ArrowRight size={26} />
+        <Col sm={2} className="d-flex justify-content-around align-items-center">
+          <Button disabled={isFirstHistory()} variant="outline-secondary" size="sm" onClick={backwardHistory}>
+            <ArrowLeft size={26} />
+          </Button>
+          <Button disabled={isLastHistory()} variant="outline-secondary" size="sm" onClick={forwardsHistory}>
+            <ArrowRight size={26} />
+          </Button>
           <Button variant="outline-secondary" size="sm" onClick={refresh}>
             <ArrowClockwise size={26} />
           </Button>
         </Col>
-        <Col sm={11}>
+        <Col sm={10}>
           <Search />
         </Col>
       </Row>

src/selectors/index.js

@@ -7,3 +7,5 @@ export const tabsListSelector = (state) => state.tabs.tabsList;
 export const tabsDataSelector = (state) => state.tabsData.data;
 
 export const currentLinksSelector = (state) => state.tabsData.currentLinks;
+
+export const historyTabsSelector = (state) => state.tabsData.history;

src/slices/tabsData.js

@@ -1,5 +1,12 @@
 /* eslint-disable no-param-reassign */
-import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+export const updateTabData = createAsyncThunk('tabsData/updateTabData', async ({ activeTabId, url }) => {
+  const response = await fetch(url);
+  const htmlDoc = await response.text();
+  const data = { [activeTabId]: htmlDoc };
+  return { data, url: { [activeTabId]: url } };
+});
 
 const initialState = {
   data: {},
@@ -17,9 +24,13 @@ const tabsData = createSlice({
       state.history[tabId] = tabId in state.history ? [...state.history[tabId], url] : [url];
       state.currentLinks = { ...state.currentLinks, [tabId]: url };
     },
-    updateTabData: (state, { payload }) => {
-      state.data = { ...state.data, ...payload };
-    },
+  },
+  extraReducers(builder) {
+    builder.addCase(updateTabData.fulfilled, (state, { payload }) => {
+      const { data, url } = payload;
+      state.data = { ...state.data, ...data };
+      state.currentLinks = { ...state.currentLinks, ...url };
+    });
   },
 });