· 6 years ago · Aug 28, 2019, 11:14 AM
1const formContainer = document.querySelector('.react-form-container');
2
3// Create component for button
4class ApiSim extends React.Component {
5 constructor(props) {
6 super(props);
7 this.state = {
8 values: {
9 customers: 1000,
10 pages: 20,
11 apiCallsPerPage: 2,
12 apiDropOneIn: 500,
13 apiDropAfterAnErrorOneIn: 4,
14 apiRetry: 4
15 },
16 sales: 0
17 };
18
19 this.handleChange = this.handleChange.bind(this);
20 this.handleSubmit = this.handleSubmit.bind(this);
21 this.dropCustomer = this.dropCustomer.bind(this);
22 }
23 componentDidMount() {
24 this.simulate();
25 }
26
27 parse(x, base = 10) {
28 var parsed = parseInt(x, base);
29 if (isNaN(parsed)) {
30 return 0;
31 }
32 return parsed;
33 }
34
35 handleChange(name, event) {
36 const x = this.state.values;
37 x[name] = this.parse(event.target.value);
38 console.log(this.setState);
39 this.setState({ values: x });
40 console.log(this.setState.values);
41 // this.simulate()
42 }
43
44 dropCustomer(customers, c, chance) {
45 if (1 === Math.floor(Math.random() * chance + 1)) {
46 customers[c] = false;
47 return true;
48 }
49 customers[c] = true;
50 return false;
51 }
52 simulate() {
53 let customers = new Array(this.state.values.customers);
54
55 for (let c = 0; c < this.state.values.customers; c++) {
56 customers[c] = true;
57 for (let p = 0; p < this.state.values.pages; p++) {
58 for (let a = 0; a < this.state.values.apiCallsPerPage; a++) {
59 for (let r = 0; r < this.state.values.apiRetry; r++) {
60 let apiDropOneIn = this.state.values.apiDropOneIn;
61 if (r > 0) {
62 apiDropOneIn = this.state.values.apiDropAfterAnErrorOneIn;
63 } // more likely to have an error after the first error
64 if (!this.dropCustomer(customers, c, apiDropOneIn)) {
65 break;
66 //if success no point of continue calling api
67 }
68 }
69 // if api fail then no more api calls
70 if (customers[c] === false) break;
71 }
72 // if api fail then no more pages
73 if (customers[c] === false) break;
74 }
75
76 }
77
78 let sales = 0;
79 for (let c = 0; c < this.state.values.customers; c++) {
80 console.log(customers[c]);
81 if (customers[c] === true) sales++;
82 }
83 console.log("sales", sales);
84
85 this.setState({ sales: sales });
86
87 return sales;
88 }
89 handleSubmit(event) {
90 this.simulate();
91 event.preventDefault();
92 }
93
94 render() {
95 const questions = Object.keys(this.state.values).map((item, key) => (
96 <div>
97 <label
98 style={{
99 width: "200px",
100 display: "inline-block",
101 borderBottom: "1px solid grey",
102 margin: "10px"
103
104 }}
105 >
106 {Object.keys(this.state.values)[key]}:{" "}
107 </label>
108 <input type="text" value={this.state.values[Object.keys(this.state.values)[key]]} onChange={e => this.handleChange(Object.keys(this.state.values)[key], e)} />
109
110 <br />
111 </div>
112 ));
113 return (
114 <form onSubmit={this.handleSubmit}>
115 <p>
116 The assumption here is that there are {this.state.values.customers} that would have bought a policy in a perfect world
117 <br />
118 (ignoring users that where not going to buy for any other reason)
119 </p>
120 <p>
121 Given there are {this.state.values.pages} pages and on average {this.state.values.apiCallsPerPage} Api calls per page we will simulate a probability of one in every{" "}
122 {this.state.values.apiDropOneIn} will fail and one in {this.state.values.apiDropAfterAnErrorOneIn} will fail gain on retry and will retry the {this.state.values.apiRetry} times
123 </p>
124 <p>
125 <b>then we would lose {this.state.values.customers - this.state.sales} customers</b>
126 </p>
127 <label>
128 {questions}
129 </label>
130 <br />
131 SALES: {this.state.sales}
132 <br />
133 <input type="submit" value="Submit" />
134 </form>
135 );
136 }
137};
138
139// Create component for form
140class Form extends React.Component {
141 render() {
142 return (
143 <ApiSim />
144 )
145 }
146}
147
148// Render Form component
149ReactDOM.render(<Form />, formContainer);