From 22e3b93913cccf2e63b7b99ad4d2dc9a90492054 Mon Sep 17 00:00:00 2001 From: Sangwon Lee Date: Tue, 17 Mar 2020 19:28:59 +0900 Subject: [PATCH] Update with-react-multi-carousel example to use GSSP (#11069) --- .../with-react-multi-carousel/package.json | 6 +- .../with-react-multi-carousel/pages/index.js | 131 +++++++++--------- 2 files changed, 67 insertions(+), 70 deletions(-) diff --git a/examples/with-react-multi-carousel/package.json b/examples/with-react-multi-carousel/package.json index 5d0990190e02ff0..92720c92c02ff5d 100644 --- a/examples/with-react-multi-carousel/package.json +++ b/examples/with-react-multi-carousel/package.json @@ -15,9 +15,9 @@ "@material-ui/icons": "^3.0.2", "jss": "^9.8.7", "mobile-detect": "^1.4.3", - "next": "^9.1.8-canary.11", - "react": "^16.8.3", - "react-dom": "^16.8.3", + "next": "^9.3.0", + "react": "^16.13.0", + "react-dom": "^16.13.0", "react-jss": "^8.6.1", "react-multi-carousel": "^1.2.5" } diff --git a/examples/with-react-multi-carousel/pages/index.js b/examples/with-react-multi-carousel/pages/index.js index 9d177a4811815e4..d42029c442a26a3 100644 --- a/examples/with-react-multi-carousel/pages/index.js +++ b/examples/with-react-multi-carousel/pages/index.js @@ -5,7 +5,7 @@ import Carousel from 'react-multi-carousel' import Image from '../components/image' -const styles = theme => ({ +const styles = () => ({ root: { textAlign: 'center', }, @@ -16,73 +16,70 @@ const styles = theme => ({ }, }) -class Index extends React.Component { - static getInitialProps({ req, isServer }) { - let userAgent - let deviceType - if (req) { - userAgent = req.headers['user-agent'] - } else { - userAgent = navigator.userAgent - } - const md = new MobileDetect(userAgent) - if (md.tablet()) { - deviceType = 'tablet' - } else if (md.mobile()) { - deviceType = 'mobile' - } else { - deviceType = 'desktop' - } - return { deviceType } +const images = [ + 'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550223640-23097fc71cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550353175-a3611868086b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550330039-a54e15ed9d33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1549833284-6a7df91c1f65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', + 'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', +] + +const responsive = { + desktop: { + breakpoint: { max: 3000, min: 1024 }, + items: 3, + }, + tablet: { + breakpoint: { max: 1024, min: 464 }, + items: 2, + }, + mobile: { + breakpoint: { max: 464, min: 0 }, + items: 1, + }, +} + +function Index({ classes, deviceType }) { + return ( +
+ + {images.map((image, index) => { + return {image} + })} + +
+ ) +} + +export async function getServerSideProps({ req }) { + let deviceType = null + const userAgent = req.headers['user-agent'] + const md = new MobileDetect(userAgent) + if (md.tablet()) { + deviceType = 'tablet' + } else if (md.mobile()) { + deviceType = 'mobile' + } else { + deviceType = 'desktop' } - render() { - const { classes } = this.props - const images = [ - 'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550223640-23097fc71cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550353175-a3611868086b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550330039-a54e15ed9d33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1549833284-6a7df91c1f65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - 'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', - ] - const responsive = { - desktop: { - breakpoint: { max: 3000, min: 1024 }, - items: 3, - }, - tablet: { - breakpoint: { max: 1024, min: 464 }, - items: 2, - }, - mobile: { - breakpoint: { max: 464, min: 0 }, - items: 1, - }, - } - return ( -
- - {images.map(image => { - return {image} - })} - -
- ) + return { + props: { deviceType }, } }