import React , { useState } from 'react' ; import Error from '../_error' ; import { useRouter , Router } from 'next/router' ; import Slider from 'react-slick' ; import { Keycapset , Vendor } from '../../types/types' ; import withGA from 'next-ga' ; import { GET_SINGLE_SET_QUERY } from '../../queries' ; import 'slick-carousel/slick/slick.css' ; import '../../assets/styles/main.scss' ; import Heading from '../../components/Heading' ; import ButtonLink from '../../components/ButtonLink' ; import Meta from '../../components/Meta' ; import LikeSet from '../../components/LikeSet' ; import StatusLabel from '../../components/StatusLabel' ; import { initializeApollo } from '../../hooks/withData' ; import Arrow from '../../components/Arrow' ; import InfoSectionBoard from '../../components/set/InfoSectionBoard' ; import InfoSectionSet from '../../components/set/InfoSectionSet' ; import Kits from '../../components/set/Kits' ; import Button from '../../components/Button' ; import ImgTextSection from '../../components/set/sections/ImgTextSection' ; import TextSection from '../../components/set/sections/TextSection' ; interface SetPageProps { keycapset : Keycapset ; isLargeContainer : boolean ; } function SetPage ( props ) { const { keycapset } = props ; const router = useRouter ( ) ; const [ slickPause , setSlickPause ] = useState ( false ) ; if ( keycapset === undefined ) { return < Error statusCode = { 404 } />; } if ( keycapset !== null ) { const isGeekhackUrl = keycapset ?. websiteUrl . includes ( 'geekhack' ) ; const hasRenders = keycapset . imageUrls ?. length > 0 ?? false ; const hasLinks = keycapset . links ?. length > 0 ?? false ; const slickSettings = { infinite : hasRenders , speed : 500 , slidesToShow : 1 , slidesToScroll : 1 , arrows : true , autoplay : ! slickPause , autoPlaySpeed : 2400 , slickPause , } ; console . log ( keycapset . _id ) ; return ( < > < div className = "set" > < Meta title = { `${ keycapset . name } ${ keycapset . designerName ? `designed by ${ keycapset . designerName }` : '' }` } metaImgUrl = { keycapset . metaUrl } / > < div className = "container" > < Heading mainTitle = { keycapset . name } subTitle = { `${ keycapset . designerName ? `By ${ keycapset . designerName }` : '' }` } /> < section className = "set-status" > < div className = "labels" > < StatusLabel groupbuyStartDate = { keycapset . groupbuyStartDate } groupbuyEndDate = { keycapset . groupbuyEndDate } isIc = { keycapset . isInterestCheck } / > < LikeSet keycapset = { keycapset } size = { 24 } / > < /div> { keycapset . interestCheck !== null && keycapset . interestCheck . status === 'online' && ( < Button onClick = { ( ) => router . push ( `/ic/${ keycapset . slug }` ) } size = "lg" variant = "primary" style = { { backgroundColor : keycapset . accentColor1 , border : 'none' , } } > Fill in Interest Check < /Button>)} < /section> { hasRenders ? ( < section className = { `section set-vibe-section three` } > { } < div className = "img main" > < img src = { keycapset . imageUrls [ 0 ] } alt = "Render image" / > < /div> < div className = "img" > < img src = { keycapset . imageUrls [ 1 ] } alt = "Render image" / > < /div> < div className = "img" > < img src = { keycapset . imageUrls [ 2 ] } alt = "Render image" / > < /div> < /section>) : (<section className={`section set-vibe-section cover`}> < div className = "img main base" > < img src = { keycapset . coverImageUrl } alt = "Base set image" / > < /div> < /section>)} { keycapset . type !== 'keyboard' ? < InfoSectionSet { ... { keycapset } } / > : < InfoSectionBoard { ... { keycapset } } / > } < section className = "section set-arrow" > < Arrow color = "#D4E4FA" direction = "bottom" / > < /section> { keycapset . description && ( < section className = "section set-description" > < p className = "light center small" > { keycapset . description } < /p> < /section>)} { keycapset . kits !== null && keycapset . kits . length > 0 && ( < Kits { ... { kits : keycapset . kits } } type = { keycapset . type } / > ) } { keycapset . sections . length > 0 && ( < > { keycapset . sections . map ( ( section , idx ) => { return { 'img-text' : < ImgTextSection section = { section } key = { section . title + idx } / > , text : < TextSection section = { section } key = { section . title + idx } / > , } [ section . type ] ; } ) } < />)} { keycapset . vendors . length > 0 && ( < section className = "section set-vendors" > < h2 className = "title center" > Vendors < /h2> < div className = "set-vendors-container" > { keycapset . vendors . map ( ( vendor , idx ) => ( < div className = "vendor-card-container" > < a href = { vendor . url } target = "_blank" key = { idx } className = "vendor-card" > < img src = { vendor . logoUrl } alt = { `Logo ${ vendor . name }` } / > < /a> < p > { vendor . name } < /p> < /div>))} < /div> < /section>)} { isGeekhackUrl && ( < section className = "section set-geekhack" > < ButtonLink isLarge href = { keycapset . websiteUrl + '?utm_source=keycapsets&utm_medium=affiliate' } > Visit on Geekhack < /ButtonLink> < /section>)} { hasRenders && ( < section className = "section set-renders" onMouseEnter = { ( e ) => { setSlickPause ( true ) ; console . log ( 'stop' ) ; } } onMouseLeave = { ( e ) => { setSlickPause ( false ) ; console . log ( 'play' ) ; } } > < h2 className = "title center" > Renders < /h2> < div className = "slick-container" > < Slider { ... slickSettings } > { keycapset . imageUrls . map ( ( url , idx ) => ( < img className = "slick-container-img" src = { url } key = { idx + url } / > ) ) } < /Slider> < /div> < /section>)} { hasLinks && ( < section className = "section set-links" > { } < div className = "links" > { keycapset . links . map ( ( link ) => { if ( link . includes ( 'youtu' ) ) { return ( < div className = "video-container yt" key = { link } > < iframe src = { link } frameBorder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" > < /iframe> < /div>); } } ) } < /div> < /section>)} < /div> < /div> { } < />); } return null ; } export async function getServerSideProps ( context ) { try { const client = initializeApollo ( ) ; const { data } = await client . query ( { query : GET_SINGLE_SET_QUERY , variables : { slug : context . query . set , } , } ) ; return { props : { isLargeContainer : false , keycapset : data . keycapsetBySlug , } , } ; } catch ( err ) { console . log ( 'SSR props err' , err ) ; } return { props : { isLargeContainer : false } , } ; } export default withGA ( 'UA-115865530-2' , Router ) ( SetPage ) ;