import React, { Component } from 'react';
import axios from 'axios';
import { Formik } from 'formik';
import { Loading, RaffleForm, Results } from '.';

export class RaffleContainer extends Component {
  // eslint-disable-next-line react/sort-comp
  initialState = {
    error: '',
    winners: [],
  };

  state = this.initialState;

  componentDidMount() {
    this.setState({
      meetup: this.restore('meetup') || '',
      meetupApiKey: this.restore('meetupApiKey') || '',
    });
  }

  resetState = () => {
    this.setState({
      // reset some
      ...this.initialState,
      // keep the rest
      meetup: this.state.meetup,
      meetupApiKey: this.state.meetupApiKey,
    });
  };

  restore = key => {
    if (global.window.localStorage) {
      return global.window.localStorage.getItem(key);
    }
    return undefined;
  };

  preserve = (key, value) => {
    if (global.window.localStorage) {
      global.window.localStorage.setItem(key, value);
    }
  };

  render() {
    return (
      <section className="ph3 pv3 pv4-ns mw6-m mw7-l center-ns">
        <Formik
          enableReinitialize
          initialValues={{
            meetup: this.state.meetup,
            count: 2,
            specificEventId: '',
            meetupApiKey: this.state.meetupApiKey,
          }}
          onSubmit={async (
            { meetup, count, specificEventId, meetupApiKey },
            { setSubmitting },
          ) => {
            setSubmitting(true);
            this.preserve('meetup', meetup);
            this.preserve('meetupApiKey', meetupApiKey);
            try {
              const response = await axios.get(
                'https://wkovacs64.lib.id/meetup-raffle/',
                {
                  params: {
                    meetup,
                    count,
                    specificEventId,
                    meetupApiKey,
                  },
                },
              );
              if (response.data && response.data.winners) {
                this.setState({ winners: response.data.winners });
              } else {
                throw new Error('Malformed response received.');
              }
            } catch (err) {
              this.setState({ error: err.message });
            }
            setSubmitting(false);
          }}
          render={({ handleSubmit, isSubmitting }) => {
            if (isSubmitting) {
              return (
                <div className="tc">
                  <Loading className="h5 w5 dark-blue" />
                </div>
              );
            }
            if (this.state.error || this.state.winners.length) {
              return (
                <Results
                  onReset={this.resetState}
                  onSubmit={handleSubmit}
                  {...this.state}
                />
              );
            }
            return <RaffleForm />;
          }}
        />
      </section>
    );
  }
}

export default RaffleContainer;

@@ -530,164 +530,25 @@
 ate(
-%7B%0A      // reset some%0A      ...this.initialState,%0A      // keep the rest%0A      meetup: this.state.meetup,%0A      meetupApiKey: this.state.meetupApiKey,%0A    %7D
+this.initialState
 );%0A 
@@ -1030,24 +1030,30 @@
 state.meetup
+ %7C%7C ''
 ,%0A          
@@ -1138,32 +1138,38 @@
 ate.meetupApiKey
+ %7C%7C ''
 ,%0A          %7D%7D%0A 

Refactor resetState and explicitly set default form field values