move state logic up to book component

src/components/BookComponent.tsx

@@ -1,6 +1,8 @@
 import React, {createContext} from 'react'
 import OnePageView from './OnePageView'
 import TwoPagesView from './TwoPagesView'
+import BookComponentsController from './BookComponentsController'
+import './index.css'
 
 export const BookContext = createContext({})
 
@@ -10,16 +12,22 @@ export interface IBookPage {
     thumbnail?: string
 }
 
-export const bookViewModes = [
+export const getBookViewModes = (currIndex = 0, srcLength = 0)=>[
     {
         text: 'One Page',
         value: 'one page',
-        icon: ''
+        icon: '',
+        pagesToTurn: 1,
+        nextDisable: currIndex >= srcLength - 1,
+        prevDisable: currIndex === 0,
     },
     {
         text: 'Two Pages',
         value: 'two pages',
-        icon: ''
+        icon: '',
+        pagesToTurn: 2,
+        nextDisable: currIndex >= srcLength - 2,
+        prevDisable: currIndex <= 1,
     }
 ]
 
@@ -37,6 +45,11 @@ export interface IBookContext {
 }
 
 
+const getPagesCountToTurn = (mode: string)=>{
+    let pagesToTurn = getBookViewModes().find(item=> item.value === mode)?.pagesToTurn
+    return pagesToTurn || 0
+}
+
 class BookComponent extends React.Component<any, any>{
     constructor(props: any){
         super(props)
@@ -51,17 +64,22 @@ class BookComponent extends React.Component<any, any>{
                     ...newState
                 }))
             },
-            changePage: (indexToGo: number, goToPrevious: boolean)=>{
+            changePage: this.changePage,
-                const newCurrIndex = this.state.currIndex + indexToGo
+            pagesToTurn: 1,
-                
-                this.setState({
-                    currIndex: newCurrIndex,
-                    flagToReverse: goToPrevious
-                })
-            }
         } 
     }
     
+    changePage = (goToPrevious: boolean, indexToGo?: number)=>{
+        const {mode, currIndex} = this.state
+        const pagesCountToTurn = indexToGo || getPagesCountToTurn(mode)
+        const prefixPageCount = goToPrevious? -1 : 1
+        
+        this.setState({
+            currIndex: (pagesCountToTurn * prefixPageCount) + currIndex,
+            flagToReverse: goToPrevious
+        })
+    }
+
     componentDidMount(){
         fetch('https://picsum.photos/v2/list')
             .then(response=>{
@@ -80,6 +98,19 @@ class BookComponent extends React.Component<any, any>{
             })
     }
 
+    getControlsDisable = ()=>{
+        const {mode, currIndex, src} = this.state
+        const {nextDisable, prevDisable} = getBookViewModes(currIndex, src.length).find(item=> item.value === mode) || {
+            nextDisable: true,
+            prevDisable: true
+        }
+
+        return {
+            nextDisable,
+            prevDisable
+        }
+    }
+    
     render(){
         const {mode} = this.state
 
@@ -89,6 +120,16 @@ class BookComponent extends React.Component<any, any>{
                     <>
                         {mode === "one page" && <OnePageView {...state}/>}
                         {mode === "two pages" && <TwoPagesView {...state}/>}
+                        <BookComponentsController
+                            onPrevClick={()=>{
+                                this.changePage(true)
+                            }}
+                            onNextClick={()=>{
+                                this.changePage(false)
+                            }}
+                            {...this.getControlsDisable()}
+                            {...this.state}
+                        />
                     </>
                 )}
             </BookContext.Consumer>

src/components/JumpControls.tsx

@@ -2,19 +2,22 @@ import React, {useState, useCallback, useEffect} from 'react'
 import {Slider, InputNumber} from 'antd'
 import styled from 'styled-components'
 
+
 const Container = styled.div`
     width: 100%;
     display: inline-flex;
 `
 
 const JumpControls = (props: any)=>{
-    const {src, currIndex, setBookContextState} = props
+    const {src, currIndex, setBookContextState, pagesToTurn} = props
     const [inputValue, setInputValue] = useState(currIndex)
     const [sliderValue, setSliderValue] = useState(currIndex)
     const onChange = useCallback(
         (value) => {
+            
             if(value){
                 const newCurrIndex = value -1
+                
                 if(newCurrIndex < src.length && newCurrIndex >=0){
                     setBookContextState({
                         currIndex: value - 1,
@@ -46,11 +49,13 @@ const JumpControls = (props: any)=>{
             min={1}
             max={src.length}
             onAfterChange={onChange}
+            step={pagesToTurn}
             defaultValue={typeof inputValue === 'number' ? inputValue : 1}
             {...sliderRestProps()}
         />
         
         <InputNumber
+            className={"jump-control"}
             min={1}
             max={src.length}
             style={{ margin: '0 8px' }}

src/components/OnePageView.tsx

@@ -1,7 +1,6 @@
-import React, {useState, useEffect} from 'react'
+import React from 'react'
 import {Transition, animated} from 'react-spring/renderprops'
 import styled, { } from 'styled-components'
-import BookComponentsController from './BookComponentsController'
 
 const ComponentContainer = styled.div`
     display: flex;
@@ -41,16 +40,7 @@ const PageComponent = (props: any)=>{
 
 
 function BookComponent(props: any) {
-    const {src, currIndex, flagToReverse, changePage} = props
+    const {src, currIndex, flagToReverse} = props    
-    const [prevDisable, setPrevDisable] = useState(true)
-    const [nextDisable, setNextDisable] = useState(false)
-    
-
-    useEffect(() => {
-        setNextDisable(currIndex >= src.length - 1)
-        setPrevDisable(currIndex <= 0)
-    }, [currIndex, src])
-
     return (
         <ComponentContainer>
             <PageContainer>
@@ -76,15 +66,6 @@ function BookComponent(props: any) {
                     }
                 </Transition>
             </PageContainer>
-
-            <BookComponentsController 
-                prevDisable={prevDisable} 
-                onPrevClick={()=> changePage(-1, true)}
-                nextDisable={nextDisable}
-                onNextClick={()=>changePage(1, false)}
-                {...props}
-            />
-
         </ComponentContainer>
     )
 }

src/components/TwoPagesView.tsx

@@ -1,15 +1,11 @@
-import React, {useState, useEffect, useCallback} from 'react'
+import React, {useState, useEffect} from 'react'
 import {Transition, animated} from 'react-spring/renderprops'
-import BookComponentsController from './BookComponentsController'
 import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
 import { IBookContext } from './BookComponent'
 
 export default function TwoPagesView(props: any) {
-    let {src, currIndex, changePage, flagToReverse} = props
+    let {src, currIndex, flagToReverse} = props
     const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
-    const [prevDisable, setPrevDisable] = useState(true)
-    const [nextDisable, setNextDisable] = useState(false)
-
     
     useEffect(()=>{
         const shouldShowPage = (pageIndex: number)=>{
@@ -30,19 +26,8 @@ export default function TwoPagesView(props: any) {
                     }
             ])
         }
-
-        setPrevDisable(newCurrIndex <= 1)
-        setNextDisable(newCurrIndex >= src.length - 2)
     }, [currIndex, src])
 
-    const pageChangeClick = useCallback((indexToGo, flagToReverse)=>{
-        const newIndex = currIndex + indexToGo
-        const shouldChangePage = newIndex >= 0 && newIndex < src.length
-        if(shouldChangePage){
-            changePage(indexToGo, flagToReverse)
-        }
-    }, [src.length, currIndex, changePage])
-
     return (
         <ComponentContainer>
             <PageContainer>
@@ -96,18 +81,6 @@ export default function TwoPagesView(props: any) {
                     }
                 </Transition>
             </PageContainer>
-            <BookComponentsController 
-                prevDisable={prevDisable} 
-                onPrevClick={()=> {
-                    pageChangeClick(-2, true)
-                    
-                }}
-                nextDisable={nextDisable}
-                onNextClick={()=>{
-                    pageChangeClick(2, false)
-                }}
-                {...props}
-            />
         </ComponentContainer>
     )
 }

src/components/ViewSwitcher.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react'
 import {Select} from 'antd'
-import {IBookContext, bookViewModes} from './BookComponent'
+import {IBookContext, getBookViewModes} from './BookComponent'
 
 
 const {Option} = Select
@@ -10,14 +10,15 @@ export default function ViewSwitcher(props: IBookContext) {
 
     const viewModeChange = useCallback((mode) => {
         setBookContextState({
-            mode
+            mode,
+            pagesToTurn: getBookViewModes().find(item=> item.value === mode)?.pagesToTurn || 0
         })
     },[setBookContextState])
 
     return (
         <Select value={mode} onSelect={viewModeChange}>
             {
-                bookViewModes.map((item: any)=>{
+                getBookViewModes().map((item: any)=>{
                     return <Option value={item.value} key={item.value}>{item.text}</Option>
                 })
             }

src/components/index.css

@@ -0,0 +1,3 @@
+.jump-control .ant-input-number-handler-wrap{
+    display: none;
+}