Skip to content

Commit

Permalink
1. Comment out the code for auto quick-pick
Browse files Browse the repository at this point in the history 
2. Add auto scroll to form
  • Loading branch information
@OLucky
OLucky committed Jul 30, 2018
1 parent 6fcb65e commit 040a91c
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 34 deletions.
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
43 changes: 26 additions & 17 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -23,7 +24,7 @@ class App extends Component {
state = {
lotteryOrientation: "megamillions",
pickerLottoData: null,
lottoData: null,
lottoData: null,
urlData: {
bTag: undefined,
referral: undefined,
Expand All @@ -36,6 +37,8 @@ class App extends Component {
numberOfNotFree: null
};

formRef = React.createRef()

async componentDidMount() {
await this.setUrlData();

Expand All @@ -49,7 +52,7 @@ class App extends Component {
.catch(error => {
console.log("feed.json retrieving error");
console.log(error);
});
});
}

selectLottoData = data => {
Expand Down Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -245,15 +252,17 @@ class App extends Component {
<div className={`main_subwrap ${offer !== "freeticket" ? "-vertical" : ""}`}>
{offer !== "freeticket" ? (
<MultipleTicketsPicker
scrollAppToForm={this.scrollToForm}
lotto={lottoName}
numberOfNotFree={this.state.numberOfNotFree}
ref={picker => (this.numberPicker = picker)}
price={this.state.price}
ref={picker => (this.numberPicker = picker)}
price={this.state.price}
/>
) : (
<NumberPicker lotto={lottoName} ref={picker => (this.numberPicker = picker)} />
<NumberPicker scrollAppToForm={this.scrollToForm} lotto={lottoName} ref={picker => (this.numberPicker = picker)} />
)}
<RegisterForm offer={offer} submitHandler={this.passDataToSendingModule} />
<RegisterForm ref={this.formRef} offer={offer} submitHandler={this.passDataToSendingModule}
/>
</div>
</div>
</div>
Expand Down
16 changes: 10 additions & 6 deletions src/components/MultipleTicketsPicker/MultiPickerContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;
}

Expand Down
17 changes: 12 additions & 5 deletions src/components/NumberPicker/PickerContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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];
Expand All @@ -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(<div key={`b-${x}`} className={classString}>{number}</div>)
}
Expand Down Expand Up @@ -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;
Expand All @@ -151,7 +159,6 @@ class PickerContainer extends Component {

quickPick = () => {
const {clearTicket} = this.props.pickerStore;

clearTicket(0, () => {
this.genRandomNumber();
});
Expand Down Expand Up @@ -233,7 +240,7 @@ class PickerContainer extends Component {
const isDone = pickedNums.length === numbersAmount && pickedBonus.length === bonusAmount;

return (
<Media query="(min-width: 768px)">
<Media query="(min-width: 769px)">
{matcher =>
matcher ? (
<NumberPicker
Expand Down
12 changes: 7 additions & 5 deletions src/components/RegisterForm/RegisterForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ class RegisterForm extends Component {
step2: false
};

formFrame = React.createRef();

fetchUserCountryCode = async () => {
let ipAndCountryObject = await axios.get(
"https://api.jinnilotto.com/affiliate/getCountry/response.json"
Expand Down Expand Up @@ -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(
Expand All @@ -228,7 +230,7 @@ class RegisterForm extends Component {
};

moveTo1stStep = () => {
const formFrame = this.formFrame;
const formFrame = this.formFrame.current;
this.setState(
{
step2: false
Expand Down Expand Up @@ -301,7 +303,7 @@ class RegisterForm extends Component {

if (!step2)
return (
<div ref={frame => (this.formFrame = frame)} className="frame form_frame-vert">
<div ref={this.formFrame} className="frame form_frame-vert">
<h4
className="frame_title"
dangerouslySetInnerHTML={{
Expand Down Expand Up @@ -382,7 +384,7 @@ class RegisterForm extends Component {
);
else
return (
<div ref={frame => (this.formFrame = frame)} className="frame form_frame-vert">
<div ref={this.formFrame} className="frame form_frame-vert">
<h4
className="frame_title"
dangerouslySetInnerHTML={{
Expand Down Expand Up @@ -579,4 +581,4 @@ RegisterForm.propTypes = {
t: func.isRequired
};

export default translate("formText")(RegisterForm);
export default translate("formText", {withRef: true})(RegisterForm);
14 changes: 13 additions & 1 deletion src/tools/PickerState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ class PickerState {
for (let x = 1; x <= number; x++) {
ticketsData.push(new Ticket());
}

this.ticketsData = ticketsData;
};

Expand Down Expand Up @@ -112,6 +111,19 @@ class PickerState {

callback && callback();
};

checkIfAllTicketsAreFilled = (numbersAmount, bonusAmount) => {
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})
Expand Down

0 comments on commit 040a91c

Please sign in to comment.