// config-overrides.js
/* config-overrides.js */

const {
  rewireWorkboxInject,
  defaultInjectConfig
} = require('react-app-rewire-workbox');
const path = require('path');

module.exports = function override(config, env) {
  if (env === 'production') {
    console.log('Production build - Adding Workbox for PWAs');
    // Extend the default injection config with required swSrc
    const workboxConfig = {
      ...defaultInjectConfig,
      swSrc: path.join(__dirname, 'src', 'customServiceWorker.js'),
      importWorkboxFrom: 'local'
    };
    config = rewireWorkboxInject(workboxConfig)(config, env);
  }

  return config;
};

// configureStore.js
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'easy-peasy';
import { model } from './models';

/**
 * model, is used for passing through the base model
 * the second argument takes an object for additional configuration
 */

const store = createStore(model, {
  compose: composeWithDevTools({ realtime: true, trace: true })
  // initialState: {}
});

export default store;

// models/index.js
import { settingsModel } from './settings-model';
import { musicModel } from './music-model';

export const model = {
  ...settingsModel,
  ...musicModel
};

// models/settings-model.js
import {
  checkLocalStorage,
  setInLocalStorage
} from '../util/localstorage-util';

// reyhdrate state from localstorage if it exist
const initialState = {
  currentThemeSelection: checkLocalStorage('currentThemeSelection', 'lite')
};

export const settingsModel = {
  settings: {
    ...initialState,
    updateSelectedTheme: (state, payload) => {
      // update the state
      state.currentThemeSelection = payload;

      // store the current theme selection in localstorage
      setInLocalStorage('currentThemeSelection', payload);
    }
  }
};

// models/music-model.js
..code

export const musicModel = {
  music: {
    ...initialState,
    getLyrics: effect(async (dispatch, payload, getState) => {
      const { artist, song } = payload;
      dispatch.music.updateIsLyricsNotFound(false);
      dispatch.music.updateIsLyricsLoading(true);
      dispatch.music.updateCurrentArtist(artist);
      dispatch.music.updateCurrentSong(song);
      requestStream = fetchLyrics$(payload).subscribe({
        next: ({ lyrics }) => dispatch.music.updateCurrentLyrics(lyrics),
        error: data => dispatch.music.updateIsLyricsNotFound(true),
        complete: data => dispatch.music.updateIsLyricsLoading(false)
      });
    })
  }
}

// components/input-field-component.js
import React from 'react';
import TextField from '@material-ui/core/TextField';

export const InputField = ({
  input: { name, value, onChange, ...restInput },
  extraInputProps = {},
  meta,
  ...rest
}) => (
  <TextField
    {...rest}
    helperText={meta.touched ? meta.error : undefined}
    error={meta.error && meta.touched}
    onChange={onChange}
    value={value}
    name={name}
    InputProps={{
      ...restInput,
      ...extraInputProps
    }}
  />
);

// routes/index.js
import React from 'react';
import { Route, Router, Switch } from 'react-router';

import { Layout } from '../components/layout-component';
import { Favorites } from '../pages/favorites-page';
import history from '../util/history-util';
import Home from '../pages/home-page';

/**
 * 👉 if authenticated routes are needed 👈
 *
 * import PrivateRoute from './PrivateRoute';
 *
 * const RestrictedArea = () => {
 * return (
 *  <Switch>
 *    <PrivateRoute path="/something-private" component={SomethingPrivate} />
 *  </Switch>
 * );
 *};
 **/

export const Routes = () => (
  <Router history={history}>
    <Layout>
      <Switch>
        <Route path="/favorites" component={Favorites} />
        <Route exact path="/" component={Home} />
        {/* <PrivateRoute path="/" component={() => RestrictedArea()} /> */}
      </Switch>
    </Layout>
  </Router>
);

// routes/PrivateRoute.js
import React from 'react';
import { Redirect, Route, withRouter } from 'react-router-dom';
import get from 'lodash/get';
import { useAuth } from '../hooks/auth-hook';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { auth, cachedAuth } = useAuth();
  const authPresent = !!get(auth, 'token', false);
  const cachedAuthExist = !!get(cachedAuth, 'token', false);
  return (
    <Route
      {...rest}
      render={props =>
        authPresent || cachedAuthExist ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default withRouter(PrivateRoute);

// services/music-service.js
..code
export const fetchLyrics$ = payload =>
 Observable.create(observer => {
   const artist = get(payload, 'artist');
   const song = get(payload, 'song');
   // trim possible white space and replace space between with + signs
   const cleanArtist = cleanQueryParam(artist);
   const cleanSong = cleanQueryParam(song);

   axios
     .get(`https://api.lyrics.ovh/v1/${cleanArtist}/${cleanSong}`)
     .then(response => {
       observer.next(response.data);
       observer.complete();
     })
     .catch(error => {
       observer.error(error);
     });
 });

// models/music-model -----------------------------------------------/
..code

let requestStream;

requestStream = fetchLyrics$(payload).subscribe({
 next: ({ lyrics }) => dispatch.music.updateCurrentLyrics(lyrics),
 error: data => dispatch.music.updateIsLyricsNotFound(true),
 complete: data => dispatch.music.updateIsLyricsLoading(false)
});

..more code

cancelLyricSearch: effect(async (dispatch, payload, getState) => {
 requestStream.unsubscribe();
 dispatch.music.updateIsLyricsLoading(false);
}),

// pages/home-page -------------------------------------------------/
..code

onClick={() => {
 form.reset();
 if (isLyricsNotFound) updateIsLyricsNotFound(false);
 if (isLyricsLoading) cancelLyricSearch();
}}