From 040a91ccfbe135f07db008b44ba5c6c5db551642 Mon Sep 17 00:00:00 2001 From: Georgii Ishchenko Date: Mon, 30 Jul 2018 14:47:57 +0300 Subject: [PATCH] 1. Comment out the code for auto quick-pick 2. Add auto scroll to form --- package-lock.json | 5 +++ package.json | 1 + src/App.js | 43 +++++++++++-------- .../MultiPickerContainer.js | 16 ++++--- .../NumberPicker/PickerContainer.js | 17 +++++--- src/components/RegisterForm/RegisterForm.js | 12 +++--- src/tools/PickerState.js | 14 +++++- 7 files changed, 74 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index d9d2b6e..b6d0e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3332,6 +3332,11 @@ } } }, + "easy-scroll": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/easy-scroll/-/easy-scroll-0.5.1.tgz", + "integrity": "sha512-kiB5enZ+5LV+GAA8ZFkzGqZf3M/2flqiQTpcvbnF6aJe+GfiUf0KBuBjnH7mo44fJUYi6ME8sUfuYIKimNO30w==" + }, "eazy-logger": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.0.2.tgz", diff --git a/package.json b/package.json index 92a9c92..b28e04a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "babel-polyfill": "^6.26.0", "current-device": "^0.7.2", "detect-browser": "^2.2.0", + "easy-scroll": "^0.5.1", "formdata-polyfill": "^3.0.9", "i18next": "^11.2.3", "js-cookie": "^2.2.0", diff --git a/src/App.js b/src/App.js index 9553956..031d3dc 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Media from "react-media"; import { object, func } from "prop-types"; import axios from "axios"; import { translate } from "react-i18next"; +import easyScroll from "easy-scroll"; import DynamicHeader from "./components/DynamicHeader/DynamicHeader"; import DynamicMobileHeader from "./components/DynamicHeader/DynamicMobileHeader"; @@ -23,7 +24,7 @@ class App extends Component { state = { lotteryOrientation: "megamillions", pickerLottoData: null, - lottoData: null, + lottoData: null, urlData: { bTag: undefined, referral: undefined, @@ -36,6 +37,8 @@ class App extends Component { numberOfNotFree: null }; + formRef = React.createRef() + async componentDidMount() { await this.setUrlData(); @@ -49,7 +52,7 @@ class App extends Component { .catch(error => { console.log("feed.json retrieving error"); console.log(error); - }); + }); } selectLottoData = data => { @@ -155,7 +158,7 @@ class App extends Component { passDataToSendingModule = (formData, errorNode) => { const { lottoData, urlData, pickerLottoData } = this.state; - const { ticketsData } = this.props.pickerStore; + const { ticketsData, checkIfAllTicketsAreFilled } = this.props.pickerStore; const { numbersAmount, bonusAmount } = pickerLottoData; const { t } = this.props; @@ -173,16 +176,8 @@ class App extends Component { return; } - let ticketIsNotFilled = false; - ticketsData.forEach(ticket => { - if (ticketIsNotFilled) { - return; - } - if (ticket.pickedNums.length < numbersAmount || ticket.pickedBonus.length < bonusAmount) { - ticketIsNotFilled = true; - } - }); - if (ticketIsNotFilled) { + + if (!checkIfAllTicketsAreFilled()) { errorNode.classList.add("-shown"); errorNode.innerHTML = t("notFilledTicketsError"); return; @@ -201,6 +196,18 @@ class App extends Component { sendDataModule.prepareDataToSend(data, errorNode); }; + scrollToForm = () => { + const formFrame = this.formRef.current.getWrappedInstance().formFrame.current; + + easyScroll({ + scrollableDomEle: window, + direction: "bottom", + duration: 500, + easingPreset: "easeInQuad", + scrollAmount: formFrame.offsetTop - window.scrollY + }) + } + render() { const { lottoData, urlData } = this.state; const { t } = this.props; @@ -245,15 +252,17 @@ class App extends Component {
{offer !== "freeticket" ? ( (this.numberPicker = picker)} - price={this.state.price} + ref={picker => (this.numberPicker = picker)} + price={this.state.price} /> ) : ( - (this.numberPicker = picker)} /> + (this.numberPicker = picker)} /> )} - +
diff --git a/src/components/MultipleTicketsPicker/MultiPickerContainer.js b/src/components/MultipleTicketsPicker/MultiPickerContainer.js index fecea18..a6fa8f9 100644 --- a/src/components/MultipleTicketsPicker/MultiPickerContainer.js +++ b/src/components/MultipleTicketsPicker/MultiPickerContainer.js @@ -18,9 +18,10 @@ class MultipleTicketsPickerContainer extends Component { }; componentDidMount () { - this.props.pickerStore.ticketsData.forEach((ticket, index) => { - this.quickPick(index); - }) + /* auto quick pick on mounting */ + // this.props.pickerStore.ticketsData.forEach((ticket, index) => { + // this.quickPick(index); + // }) } onNumberChange = (event, ticketIndex, numberIndex) => { @@ -155,14 +156,17 @@ class MultipleTicketsPickerContainer extends Component { }; quickPickBonus = (singleTicketData, ticketIndex) => { - const { maxBonus, minBonus, bonusAmount } = this.state.pickerLottoData; - const {quickPickDelay} = this.state; - const { addBonus } = this.props.pickerStore; + const { maxBonus, minBonus, bonusAmount, numbersAmount } = this.state.pickerLottoData; + const {quickPickDelay} = this.state; + const { addBonus, checkIfAllTicketsAreFilled } = this.props.pickerStore; if (singleTicketData.pickedBonus.length === bonusAmount) { if (window.innerWidth > 768) { this.checkIfErrorsPresent(); } + if(checkIfAllTicketsAreFilled(numbersAmount, bonusAmount)) { + this.props.scrollAppToForm() + } return; } diff --git a/src/components/NumberPicker/PickerContainer.js b/src/components/NumberPicker/PickerContainer.js index ca7c5f3..3b6dc82 100644 --- a/src/components/NumberPicker/PickerContainer.js +++ b/src/components/NumberPicker/PickerContainer.js @@ -17,6 +17,13 @@ class PickerContainer extends Component { isMobileModalOpen: false }; + componentDidMount() { + /* Scroll to form on Desktop */ + if(window.outerWidth > 768) { + setTimeout(this.props.scrollAppToForm, 2000); + } + } + toggleNum = num => { const {numbersAmount} = this.state.pickerLottoData; const {addNumber, removeNumber} = this.props.pickerStore; @@ -71,7 +78,7 @@ class PickerContainer extends Component { genNumbersMobileHeader = () => { const numCircles = []; const {numbersAmount, bonusAmount} = this.state.pickerLottoData; - const {pickedNums, pickedBonus} = this.props.pickerStore.ticketsData[0]; + const {pickedNums, pickedBonus} = this.props.pickerStore.ticketsData[0]; for(let x = 1; x <= numbersAmount; x++) { const number = pickedNums.length >= x && pickedNums[x-1]; @@ -82,7 +89,7 @@ class PickerContainer extends Component { const bonusCircles = []; for(let x = 1; x <= bonusAmount; x++) { - const number = pickedBonus.length >= x && pickedBonus[x-1]; + const number = pickedBonus.length >= x && pickedBonus[x-1]; const classString = `picker-mob_nums_head_circle -bonus-circle${isFinite(number) ? " -filled" : ""}`; bonusCircles.push(
{number}
) } @@ -135,7 +142,8 @@ class PickerContainer extends Component { let pickedBonuses = pickedBonus.slice(); if (pickedBonuses.length === bonusAmount) { - return; + this.props.scrollAppToForm(); + return; } let ranBonus = Math.floor(Math.random() * maxBonus) + minBonus; @@ -151,7 +159,6 @@ class PickerContainer extends Component { quickPick = () => { const {clearTicket} = this.props.pickerStore; - clearTicket(0, () => { this.genRandomNumber(); }); @@ -233,7 +240,7 @@ class PickerContainer extends Component { const isDone = pickedNums.length === numbersAmount && pickedBonus.length === bonusAmount; return ( - + {matcher => matcher ? ( { let ipAndCountryObject = await axios.get( "https://api.jinnilotto.com/affiliate/getCountry/response.json" @@ -212,7 +214,7 @@ class RegisterForm extends Component { }; moveTo2ndStep = () => { - const formFrame = this.formFrame; + const formFrame = this.formFrame.current; this.resetErrors(() => { this.validateFields(this.state.firstStepInputs, () => { this.setState( @@ -228,7 +230,7 @@ class RegisterForm extends Component { }; moveTo1stStep = () => { - const formFrame = this.formFrame; + const formFrame = this.formFrame.current; this.setState( { step2: false @@ -301,7 +303,7 @@ class RegisterForm extends Component { if (!step2) return ( -
(this.formFrame = frame)} className="frame form_frame-vert"> +

(this.formFrame = frame)} className="frame form_frame-vert"> +

{ + let ticketsAreFilled = true; + this.ticketsData.forEach(ticket => { + if (!ticketsAreFilled) { + return; + } + if (ticket.pickedNums.length < numbersAmount || ticket.pickedBonus.length < bonusAmount) { + ticketsAreFilled = false; + } + }); + return ticketsAreFilled; + } } decorate(PickerState, {ticketsData: observable})