two view page jsx

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "image-viewer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/BookComponent.tsx

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react'
 import OnePageView from './OnePageView'
-import TwoPagesView from './TwoPagesView'
+import TwoPagesView from './TwoPagesView.jsx'
 import BookComponentsController from './BookComponentsController'
 import './index.css'
 
@@ -81,7 +81,7 @@ class BookComponent extends React.Component<any, any>{
     }
 
     componentDidMount() {
-        fetch('https://picsum.photos/v2/list')
+        fetch('https://picsum.photos/v2/list?limit=30')
             .then(response => {
                 return response.json()
             }).then(data => {

src/components/TwoPagesView.jsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { useTransition, animated } from 'react-spring';
+import {
+	ComponentContainer,
+	PageComponent,
+	PageContainer,
+} from './OnePageView';
+
+export default function TwoPagesView(props) {
+	let { src, currIndex, flagToReverse } = props;
+	const [pagesToshow, setPagesToShow] = useState([
+		{
+			src: '',
+			alt: '',
+			thumbnail: '',
+		},
+		{
+			src: '',
+			alt: '',
+			thumbnail: '',
+		},
+	]);
+
+	const transitionFirst = useTransition(pagesToshow[0], (item) => item.src, {
+        from: {opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"},
+        enter: { opacity: 1, transform: "translate3d(0%, 0, 0)" },
+        leave: { opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"},
+	});
+
+	const transitionSecond = useTransition(pagesToshow[1], (item) => item.src, {
+        from: {opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"},
+        enter: { opacity: 1, transform: "translate3d(50%, 0, 0)" },
+        leave: { opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"},
+	});
+
+	useEffect(() => {
+		const shouldShowPage = (pageIndex) => {
+			return src.length > 0 && pageIndex <= src.length - 1;
+		};
+
+		const newCurrIndex = currIndex % 2 === 0 ? currIndex : currIndex - 1;
+
+		const shouldShowFirstPage = shouldShowPage(newCurrIndex);
+		if (shouldShowFirstPage) {
+			const shouldShowSecondPage = shouldShowPage(newCurrIndex + 1);
+			setPagesToShow([
+				src[newCurrIndex],
+				shouldShowSecondPage
+					? src[newCurrIndex + 1]
+					: {
+						src: '',
+						alt: '',
+						thumbnail: '',
+					},
+			]);
+		}
+	}, [currIndex, src]);
+
+	return (
+		<ComponentContainer>
+			<PageContainer>
+				{transitionFirst.map(({ item, key, props }) => {
+					return (
+						item && (
+							<animated.div style={{ ...props }} key={key}>
+								<PageComponent width={'50%'} src={item.src} />
+							</animated.div>
+						)
+					);
+				})}
+
+				{transitionSecond.map(({ item, key, props }) => {
+					return (
+						item && (
+							<animated.div
+								style={{
+									...props,
+									transformOrigin: 'left center',
+								}}
+								key={key}
+							>
+								<PageComponent width={'50%'} src={item.src} />
+							</animated.div>
+						)
+					);
+				})}
+			</PageContainer>
+		</ComponentContainer>
+	);
+}
+

src/components/TwoPagesView.tsx

@@ -1,91 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import {Transition, animated} from 'react-spring/renderprops'
-import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
-import { IBookContext } from './BookComponent'
-
-export default function TwoPagesView(props: any) {
-    let {src, currIndex, flagToReverse} = props
-    const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
-    
-    useEffect(()=>{
-        const shouldShowPage = (pageIndex: number)=>{
-            return src.length > 0 && pageIndex <= src.length - 1
-        }
-
-        const newCurrIndex = currIndex % 2 === 0 ? currIndex: currIndex - 1
-
-        const shouldShowFirstPage = shouldShowPage(newCurrIndex)
-        if(shouldShowFirstPage){
-            const shouldShowSecondPage = shouldShowPage(newCurrIndex + 1)
-            setPagesToShow([
-                src[newCurrIndex], 
-                shouldShowSecondPage? src[newCurrIndex + 1]: {
-                        src: '',
-                        alt: '',
-                        thumbnail: '',
-                    }
-            ])
-        }
-    }, [currIndex, src])
-
-    return (
-        <ComponentContainer>
-            <PageContainer>
-                <Transition
-                    reset
-                    unique
-                    items={pagesToshow}
-                    keys={(item: any)=> item.src}
-                    initial={{}}
-                    from={{opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"}}
-                    enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
-                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"}}
-                >
-                    {
-                        currIndex=> style=>{
-                            return(
-                                <animated.div style={{
-                                    ...style,
-                                    }}>
-                                    {React.createElement(()=>{
-                                        return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
-                                    })}
-                                </animated.div>
-                            )
-                        }
-                    }
-                </Transition>
-
-                <Transition
-                    reset
-                    unique
-                    items={pagesToshow}
-                    keys={(item: any)=> item.src}
-                    from={{opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"}}
-                    enter={{ opacity: 1, transform: "translate3d(50%, 0, 0)" }}
-                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"}}
-                    initial={{}}
-                >
-                    {
-                        currIndex=> style=>{
-                            return(
-                                <animated.div style={{
-                                    ...style,
-                                    }}>
-                                    {React.createElement(()=>{
-                                        return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
-                                    })}
-                                </animated.div>
-                            )
-                        }
-                    }
-                </Transition>
-            </PageContainer>
-        </ComponentContainer>
-    )
-}
-
-interface Book {
-    name: string
-}
-