Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useEffect } from 'react'
- import { useHistory } from "react-router-dom";
- import { useQuery, useMutation } from '@apollo/client'
- import dayjs from 'dayjs'
- import queryString from 'query-string'
- import Shake from 'shake.js'
- import lib from 'ui/app/lib'
- import config from 'ui/app/config'
- import Spinner from 'ui/app/component/Spinner'
- import ModalX from './ModalX'
- let shakeTimeout
- const ShakeView = ({
- lng,
- loaded,
- loadedUser,
- delta,
- event:{
- card = [],
- cardOpen = null
- } ={},
- user: {
- id = null,
- userId = null,
- profile: {
- gotCardReward = false
- } = {}
- } = {}
- }) => {
- let history = useHistory()
- const [modalStatus, setModalStatus] = useState(false)
- const closeModal = () => setModalStatus(false)
- const [shakeStatus, setShakeStatus] = useState(0) //0 none, 1 shaking, 2 shaked
- let parsed = queryString.parse(location.search);
- const shake = () => {
- if(shakeStatus) {
- return false
- }
- setShakeStatus(1)
- shakeTimeout = setTimeout(() => {
- setShakeStatus(2)
- }, 2000)
- setTimeout(() => {
- setShakeStatus(0)
- setModalStatus(true)
- }, 4000)
- }
- const handleShake = (e) => {
- e.preventDefault()
- shake()
- }
- const cupClass = {
- 0: '',
- 1: ' cup--shaking',
- 2: ' cup--shaked'
- }
- useEffect(() => {
- if(userId && loaded) {
- let shared = parsed?.["shared"]
- let img = parsed?.["reward-img"]
- let name = parsed?.["reward-name"]
- if (shared == "true") {
- if(img) {
- lib.showMessage(`Bạn đã chia sẻ thành công và nhận được<br><img src="${img}" alt="" class="img-result" /><br>${name}`).then(res => {
- history.push('/lac-que')
- })
- } else {
- lib.showMessage(`Bạn đã chia sẻ thành công`)
- }
- }
- }
- }, [userId, loaded])
- useEffect(() => {
- const shakeEvent = new Shake({
- threshold: 15,
- timeout: 1000
- });
- if(loaded && loadedUser) {
- shakeEvent.start();
- window.addEventListener('shake', shake, false);
- }
- return () => {
- shakeEvent.stop();
- }
- }, [loaded, loadedUser])
- useEffect(() => {
- if(cardOpen) {
- if(dayjs().add(delta, 'ms') < dayjs(cardOpen)) {
- lib.showMessage(`Sự kiện chưa bắt đầu<br>Vui lòng chờ tới ${dayjs(cardOpen).format('DD.MM')}`).then(res => {
- history.push('/trang-chu')
- })
- }
- }
- }, [loaded, cardOpen])
- return (
- <>
- <div className={`main-content main-shake`}>
- {cardOpen && dayjs().add(delta, 'ms') >= dayjs(cardOpen) && (
- <>
- <div className="tet tet--left"><img src="/images/tet.png" alt="" /></div>
- <div className="tet tet--right"><img src="/images/tet.png" alt="" /></div>
- <h2 className="title-shake"><img src="/images/title-shake.png" alt="" /></h2>
- <div className={`cup${cupClass?.[shakeStatus]}`}>
- <span className="cup-shadow"><img src="/images/cup-shadow.png" alt="" /></span>
- <div className={`sticks`}>
- {lib.range(1, 7).map(index => (
- <span className={`stick stick--${index}`} key={index}>
- <img src="/images/stick.png" alt="" />
- </span>
- ))}
- </div>
- <span className={`stick stick--single`}>
- <img src="/images/stick.png" alt="" />
- </span>
- </div>
- <div className="shake-guide"><img src="/images/shake-guide.png" alt="" /></div>
- <div className="text-center">
- <a href="#" className={`btn btn--small btn--shake${shakeStatus ? ' btn--shake--shaking' : ''}`} onClick={e => handleShake(e)}>Lắc</a>
- </div>
- </>
- )}
- </div>
- {modalStatus && (
- <ModalX
- card={card}
- userId={userId}
- gotCardReward={gotCardReward}
- modalStatus={modalStatus}
- closeModal={closeModal}
- />
- )}
- </>
- )
- }
- export default ShakeView
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement