From 7d639b0683a7190f45be53c471a07214366358d3 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimirreza98@gmail.com>
Date: Thu, 21 Oct 2021 13:16:03 +0330
Subject: [PATCH] reza added scroll

---
 src/redux/reducers/public.tsx                |  4 +--
 src/util/scroll.js                           |  3 ++
 src/views/Subscription/index.tsx             |  2 +-
 src/views/VideoTube/LessonPlayList/index.tsx | 34 +++++++++++++++++---
 src/views/VideoTube/index.tsx                | 34 +++++++++++---------
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx
index a1f1e7e..3208850 100644
--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@@ -75,9 +75,7 @@ export default function publicApi(state = initialState, action: PublicAction) {
         loading: false,
         bookSection: data,
         error: null,
-        selectedVideo: videoId
-          ? data?.vods?.filter((item: any) => item.name === videoId)[0]
-          : data?.vods[0],
+        selectedVideo: data?.vods?.filter((item: any) => item.name === videoId)[0]
       };
 
     case "public/vod/bookCourse":
diff --git a/src/util/scroll.js b/src/util/scroll.js
index d8776b4..362bf8d 100644
--- a/src/util/scroll.js
+++ b/src/util/scroll.js
@@ -4,6 +4,9 @@ class scroll {
   goToTop = () => {
     window.scrollTo(0,0);
   }
+  listScroll = () => {
+    
+  }
 }
 
 const _scroll = new scroll();
diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx
index 38a0ab5..8a13a11 100644
--- a/src/views/Subscription/index.tsx
+++ b/src/views/Subscription/index.tsx
@@ -29,7 +29,7 @@ function Subscription({ listVOD, getList, loading, selectedVOD, payment, verify
         ))}
         <DiscountCode />
         <div className="d-flex justify-content-end py-4">
-          <button className="submit submit-large" onClick={() => payment({productId : selectedVOD.id }, {}) }>تایید و پرداخت</button>
+          <button className="submit submit-large" onClick={() => payment({productId : selectedVOD.id }) }>تایید و پرداخت</button>
         </div>
       </main>
       <Footer />
diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx
index 1a98982..a4dd900 100644
--- a/src/views/VideoTube/LessonPlayList/index.tsx
+++ b/src/views/VideoTube/LessonPlayList/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./index.scss";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
@@ -9,8 +9,30 @@ function LessonPlayList({
   setVideoActive,
   catergories,
   realCategories,
+  vods,
 }: any) {
   const bookId = localStorage.getItem("bookId");
+  useEffect(() => {
+    if (localStorage.getItem("scroll-list") && vods) {
+      const list: HTMLElement = document.getElementById("list") as HTMLElement;
+      const listItem: HTMLElement = document.getElementById(
+        "listItem" + selectedVideo.id
+      ) as HTMLElement;
+      const elementHeight: any = (listItem as any)?.offsetHeight;
+      const listHeight: any = (list as any).offsetHeight;
+      const index = vods.findIndex((
+        (item: any) => item.name === selectedVideo.name
+      ));
+      console.log(index);
+      console.log(listHeight,elementHeight * (Number(index) + 1));
+
+      if( elementHeight * (Number(index) + 1) > listHeight){
+        list.scrollTo(0, (elementHeight * (Number(index) + 1)) + elementHeight);
+      }
+      localStorage.removeItem("scroll-list");
+    }
+  }, [vods]);
+
   return (
     <>
       {
@@ -18,9 +40,10 @@ function LessonPlayList({
           {bookId && (
             <header>
               <h3>
-                { realCategories.filter(
-                      (item: any) => item.id === category[0].categoryId
-                    )[0].name
+                {
+                  realCategories.filter(
+                    (item: any) => item.id === category[0].categoryId
+                  )[0].name
                 }
               </h3>
               <span></span>
@@ -37,6 +60,7 @@ function LessonPlayList({
                     "lesson-playlist__item--active")
                 }
                 key={i}
+                id={"listItem" + video.id}
                 onClick={() => setVideoActive(video)}
               >
                 <span className="lesson-playlist__item--count">
@@ -69,6 +93,7 @@ function LessonPlayList({
                   "lesson-playlist__item--active")
               }
               onClick={() => setVideoActive(category)}
+              id={"listItem" + category.id}
             >
               <span className="lesson-playlist__item--count"></span>
               <div className="lesson-playlist__item--video">
@@ -99,6 +124,7 @@ export default connect(
   (state: any) => ({
     selectedVideo: state.publicApi.selectedVideo,
     realCategories: state.publicApi.bookInfo?.categories,
+    vods: state.publicApi.bookSection?.vods,
   }),
   {
     setVideoActive: publicApi.setVideoActive,
diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx
index 9df7ef4..b5e51e7 100644
--- a/src/views/VideoTube/index.tsx
+++ b/src/views/VideoTube/index.tsx
@@ -23,29 +23,26 @@ function VodTube({
   getInfo,
   categories,
   setVideoActive,
+  allBooks,
 }: any) {
   const videoListTag = useRef(null);
   useEffect(() => {
+    localStorage.setItem("scroll-list", "on");
     scroll.goToTop();
-    // getInfo({
-    //   bookId: 1,
-    //   // window.location.pathname.slice(
-    //   //   window.location.pathname.lastIndexOf("/") + 1,
-    //   //   window.location.pathname.length
-    //   // ),
-    // });
-    getInfo({ bookId: localStorage.getItem("bookId") });
+    getInfo({
+      bookId: localStorage.getItem("bookId")
+        ? localStorage.getItem("bookId")
+        : localStorage.getItem("category")?.split(",")[0],
+    });
   }, []);
 
   useEffect(() => {
-    if (!info && localStorage.getItem("category")) {
+    if (allBooks && localStorage.getItem("category")) {
       const cat: any = localStorage.getItem("category")?.split(",");
       bookSection({ bookId: cat[0], categoryId: cat[1] });
     }
-    if(info && localStorage.getItem("category")){
-      // document.getElementsByClassName('video-tube__sidebar--playlist___list').scrollTo(0,)
-    }
-  }, [info]);
+  }, [allBooks]);
+
   return (
     <>
       <div
@@ -94,12 +91,16 @@ function VodTube({
                 </div>
                 <img src={listIcon} alt="" />
               </header>
-              <div ref={videoListTag} className="video-tube__sidebar--playlist___list d-flex flex-column">
+              <div
+                ref={videoListTag}
+                className="video-tube__sidebar--playlist___list d-flex flex-column"
+                id="list"
+              >
                 {localStorage.getItem("bookId")
                   ? categories?.map((video: any, i: any) => (
                       <LessonPlayList category={video} key={i} />
                     ))
-                  : info?.vods?.map((video: any, i: any) => (
+                  : info?.vods.map((video: any, i: any) => (
                       <LessonPlayList category={video} key={i} />
                     ))}
               </div>
@@ -125,7 +126,7 @@ function VodTube({
                 <span>تا 50% تخفیف </span>
               </header>
               <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
-                {info?.related?.map((item: any, i: any) => (
+                {info?.related.slice(0,3).map((item: any, i: any) => (
                   <Book data={item} key={i} />
                 ))}
               </div>
@@ -163,6 +164,7 @@ export default connect(
     info: state.publicApi.bookSection,
     loading: state.publicApi.loading,
     categories: state.publicApi.categories,
+    allBooks: state.publicApi.bookInfo?.vods,
   }),
   {
     getInfo: publicApi.bookInfo,