first attempts to remember scroll position

src/elements/Preview/Preview.tsx

@@ -8,6 +8,7 @@ import {APINode, callAPIPlain} from '../../utils/Api';
 interface PreviewProps {
     name: string;
     movie_id: number;
+    onClick?: () => void;
 }
 
 interface PreviewState {
@@ -38,7 +39,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <Link to={'/player/' + this.props.movie_id}>
+            <Link to={'/player/' + this.props.movie_id} onClick={this.props.onClick}>
                 <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
                     <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
                     <div className={style.previewpic}>

src/elements/VideoContainer/VideoContainer.tsx

@@ -4,7 +4,9 @@ import style from './VideoContainer.module.css';
 import {VideoTypes} from '../../types/ApiTypes';
 
 interface props {
-    data: VideoTypes.VideoUnloadedType[]
+    data: VideoTypes.VideoUnloadedType[];
+    onScrollPositionChange?: (scrollPos: number, loadedTiles: number) => void;
+    initialScrollPosition?: {scrollPos: number, loadedTiles: number};
 }
 
 interface state {
@@ -32,9 +34,18 @@ class VideoContainer extends React.Component<props, state> {
     componentDidMount(): void {
         document.addEventListener('scroll', this.trackScrolling);
 
+        console.log(this.props.initialScrollPosition)
+        if(this.props.initialScrollPosition !== undefined){
+            this.loadPreviewBlock(this.props.initialScrollPosition.loadedTiles, () => {
+                if(this.props.initialScrollPosition !== undefined)
+                window.scrollTo(0, this.props.initialScrollPosition.scrollPos);
+            });
+        }else{
             this.loadPreviewBlock(16);
         }
 
+    }
+
     render(): JSX.Element {
         return (
             <div className={style.maincontent}>
@@ -42,7 +53,11 @@ class VideoContainer extends React.Component<props, state> {
                     <Preview
                         key={elem.MovieId}
                         name={elem.MovieName}
-                        movie_id={elem.MovieId}/>
+                        movie_id={elem.MovieId}
+                    onClick={(): void => {
+                        if (this.props.onScrollPositionChange !== undefined)
+                            this.props.onScrollPositionChange(window.pageYOffset - document.documentElement.clientHeight, this.loadindex)
+                    }}/>
                 ))}
                 {/*todo css for no items to show*/}
                 {this.state.loadeditems.length === 0 ?
@@ -62,7 +77,7 @@ class VideoContainer extends React.Component<props, state> {
      * load previews to the container
      * @param nr number of previews to load
      */
-    loadPreviewBlock(nr: number): void {
+    loadPreviewBlock(nr: number, callback? : () => void): void {
         console.log('loadpreviewblock called ...');
         let ret = [];
         for (let i = 0; i < nr; i++) {
@@ -77,7 +92,7 @@ class VideoContainer extends React.Component<props, state> {
                 ...this.state.loadeditems,
                 ...ret
             ]
-        });
+        }, callback);
 
 
         this.loadindex += nr;
@@ -88,8 +103,10 @@ class VideoContainer extends React.Component<props, state> {
      */
     trackScrolling = (): void => {
         // comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
-        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
+        if (document.documentElement.clientHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
             this.loadPreviewBlock(8);
+            if (this.props.onScrollPositionChange !== undefined)
+                this.props.onScrollPositionChange(document.documentElement.clientHeight + window.pageYOffset, this.loadindex)
         }
     };
 }

src/pages/HomePage/HomePage.tsx

@@ -12,7 +12,8 @@ import SearchHandling from './SearchHandling';
 import {VideoTypes} from '../../types/ApiTypes';
 import {DefaultTags} from "../../types/GeneralTypes";
 
-interface props extends RouteComponentProps {}
+interface props extends RouteComponentProps {
+}
 
 interface state {
     sideinfo: VideoTypes.startDataType
@@ -50,6 +51,8 @@ export class HomePage extends React.Component<props, state> {
         // initial get of all videos
         this.fetchVideoData(DefaultTags.all.TagId);
         this.fetchStartData();
+
+        console.log(this.props)
     }
 
     /**
@@ -100,7 +103,8 @@ export class HomePage extends React.Component<props, state> {
                                        onChange={(e): void => {
                                            this.keyword = e.target.value;
                                        }}/>
-                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
+                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search
+                                </button>
                             </form>
                         </PageTitle>
                         <SideBar>
@@ -133,7 +137,19 @@ export class HomePage extends React.Component<props, state> {
                         </SideBar>
                         {this.state.data.length !== 0 ?
                             <VideoContainer
-                                data={this.state.data}/> :
+                                data={this.state.data}
+                                onScrollPositionChange={(pos, loadedTiles): void => {
+                                    this.props.location.state = {pos: pos, loaded: loadedTiles};
+
+                                    console.log("history state update called...")
+                                    const {state} = this.props.location;
+                                    const stateCopy: { pos: number, loaded: number } = {...state as { pos: number, loaded: number }};
+                                    stateCopy.loaded = loadedTiles;
+                                    stateCopy.pos = pos;
+                                    this.props.history.replace({state: stateCopy});
+                                    console.log(this.props)
+                                }}
+                            initialScrollPosition={this.props.location.state !== null ? {scrollPos: (this.props.location.state as { pos: number, loaded: number }).pos, loadedTiles: (this.props.location.state as { pos: number, loaded: number }).loaded} : undefined}/> :
                             <div>No Data found!</div>}
                         <div className={style.rightinfo}>