Update the navigation between pages

src/components/InTheaters/InTheaters.jsx

@@ -9,6 +9,8 @@ import {
 import Thumbnail from '../Thumbnail/Thumbnail';
 import s from './InTheaters.module.css';
 import ImgPlaceholder from '../ImgPlaceholder/ImgPlaceholder';
+import { clearDetailsData } from '../Redux/details/details';
+import { clearTrailerData } from '../Redux/trailer/trailer';
 
 export default function InTheaters() {
   const playIcon = './assets/play.png';
@@ -29,8 +31,9 @@ export default function InTheaters() {
     if (i === 7) event.target.parentNode.style.overflowY = 'scroll';
   };
 
-  const redirect = (url) => {
-    window.location.replace(window.location.origin + url);
+  const clearData = () => {
+    dispatch(clearDetailsData());
+    dispatch(clearTrailerData());
   };
 
   return (
@@ -46,7 +49,7 @@ export default function InTheaters() {
                   <ImgPlaceholder key={Data[0].id} src={Data[0].image} alt="poster" orientation="v" />
                 </div>
                 <div className={s.textContainer}>
-                  <Link onClick={() => redirect(`/item-details/${Data[0].id}`)}>
+                  <Link to={`/item-details/${Data[0].id}`} onClick={clearData}>
                     <h2 className={s.mainTitle}>{Data[0].fullTitle}</h2>
                   </Link>
                   <p className={s.plot}>{`${Data[0].plot.substring(0, 150)}...`}</p>
@@ -66,7 +69,7 @@ export default function InTheaters() {
                   <ImgPlaceholder key={index} src={item.image} alt="poster" orientation="v" />
                 </div>
                 <div className={s.text}>
-                  <Link onClick={() => redirect(`/item-details/${item.id}`)}>
+                  <Link to={`/item-details/${item.id}`} onClick={clearData}>
                     <h3 className={s.title}>{item.title}</h3>
                   </Link>
                   <p>

src/components/Rack/Rack.jsx

@@ -1,13 +1,16 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import * as Scroll from 'react-scroll';
 import PropTypes from 'prop-types';
 import s from './Rack.module.css';
 import ImgPlaceholder from '../ImgPlaceholder/ImgPlaceholder';
+import { clearDetailsData } from '../Redux/details/details';
+import { clearTrailerData } from '../Redux/trailer/trailer';
 
 const ScrollLink = Scroll.Link;
 
 export default function Rack({ type }) {
+  const dispatch = useDispatch();
   const saveIcon = '../assets/add.png';
   const starIcon = '../assets/star.png';
   const Data1 = useSelector((state) => state.details);
@@ -20,8 +23,9 @@ export default function Rack({ type }) {
   };
   const selection = options[type];
 
-  const refresh = (url) => {
-    window.location.replace(window.location.origin + url);
+  const clearData = () => {
+    dispatch(clearDetailsData());
+    dispatch(clearTrailerData());
   };
 
   const activateDot = (e) => {
@@ -44,7 +48,7 @@ export default function Rack({ type }) {
                   <ImgPlaceholder key={id} alt="poster" src={item.image} orientation="v" />
                 </div>
                 <div className={s.info}>
-                  <Link onClick={() => refresh(`/item-details/${item.id}`)} to={`/item-details/${item.id}`}>
+                  <Link onClick={clearData} to={`/item-details/${item.id}`}>
                     <h3 className={s.title}>{item.title}</h3>
                   </Link>
                   <div className={s.ratingContainer}>
@@ -68,7 +72,7 @@ export default function Rack({ type }) {
                   <ImgPlaceholder key={id} alt="poster" src={item.image} orientation="v" />
                 </div>
                 <div className={s.info}>
-                  <Link onClick={() => refresh(`/item-details/${item.id}`)} to={`/item-details/${item.id}`}>
+                  <Link onClick={clearData} to={`/item-details/${item.id}`}>
                     <h3 className={s.title}>{item.title}</h3>
                   </Link>
                   <div className={s.ratingContainer}>
@@ -92,7 +96,7 @@ export default function Rack({ type }) {
                   <ImgPlaceholder key={id} alt="poster" src={item.image} orientation="v" />
                 </div>
                 <div className={s.info}>
-                  <Link onClick={() => refresh(`/item-details/${item.id}`)} to={`/item-details/${item.id}`}>
+                  <Link onClick={clearData} to={`/item-details/${item.id}`}>
                     <h3 className={s.title}>{item.title}</h3>
                   </Link>
                   <div className={s.ratingContainer}>

src/components/Redux/details/details.js

@@ -4,6 +4,7 @@ import { itemsData } from '../../../apiData/itemsData';
 
 const GET = './redux/details/GET';
 const GET_STORED = './redux/details/GET_STORED';
+const CLEAR_DATA = './redux/details/CLEAR_DATA';
 
 export default function detailsReducer(state = [], action) {
   switch (action.type) {
@@ -12,6 +13,8 @@ export default function detailsReducer(state = [], action) {
       return action.payload;
     case GET_STORED:
       return JSON.parse(sessionStorage.getItem(`D_${action.id}`));
+    case CLEAR_DATA:
+      return [];
     default:
       return state;
   }
@@ -30,4 +33,8 @@ const getStoredDetails = (id) => ({
   id,
 });
 
-export { getDetails, getStoredDetails };
+const clearDetailsData = () => ({
+  type: CLEAR_DATA,
+});
+
+export { getDetails, getStoredDetails, clearDetailsData };

src/components/Redux/trailer/trailer.js

@@ -4,6 +4,7 @@ import { trailerData } from '../../../apiData/trailerData';
 
 const GET = './redux/trailer/GET';
 const GET_STORED = './redux/trailer/GET_STORED';
+const CLEAR_DATA = './redux/trailer/CLEAR_DATA';
 
 export default function trailerReducer(state = [], action) {
   switch (action.type) {
@@ -12,6 +13,8 @@ export default function trailerReducer(state = [], action) {
       return action.payload;
     case GET_STORED:
       return JSON.parse(sessionStorage.getItem(`T_${action.id}`));
+    case CLEAR_DATA:
+      return [];
     default:
       return state;
   }
@@ -33,4 +36,8 @@ const getStoredTrailer = (id) => ({
   id,
 });
 
-export { getTrailer, getStoredTrailer };
+const clearTrailerData = () => ({
+  type: CLEAR_DATA,
+});
+
+export { getTrailer, getStoredTrailer, clearTrailerData };

src/pages/RankedList.jsx

@@ -29,6 +29,8 @@ import {
 import s from './List.module.css';
 import ImgPlaceholder from '../components/ImgPlaceholder/ImgPlaceholder';
 import PagePlaceholder from '../components/PagePlaceholder/PagePlaceholder';
+import { clearDetailsData } from '../components/Redux/details/details';
+import { clearTrailerData } from '../components/Redux/trailer/trailer';
 
 export default function RankedList({ type }) {
   const saveIcon = '/assets/add.png';
@@ -86,8 +88,9 @@ export default function RankedList({ type }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [type]);
 
-  const redirect = (url) => {
-    window.location.replace(window.location.origin + url);
+  const clearData = () => {
+    dispatch(clearDetailsData());
+    dispatch(clearTrailerData());
   };
 
   return (
@@ -112,7 +115,7 @@ export default function RankedList({ type }) {
                     <Link
                       className={s.title}
                       to={`/item-details/${item.id}`}
-                      onClick={() => redirect(`/item-details/${item.id}`)}
+                      onClick={clearData}
                     >
                       <p>{item.fullTitle}</p>
                     </Link>