{"version":3,"sources":["components/walk.js","components/controls.js","App.js","serviceWorker.js","reducers/counter.js","reducers/cycle.js","reducers/images.js","reducers/interval.js","reducers/index.js","index.js"],"names":["Walk","this","props","images","counter","className","alt","src","process","Component","connect","state","Controls","interval","increment","decrement","pause","cycle","reset","setIntervalId","clearIntervalId","role","class","type","onClick","event","setInterval","length","xmlns","viewBox","width","height","d","clearInterval","isCycling","dispatch","num","len","payload","cycleId","App","useSelector","href","target","Boolean","window","location","hostname","match","counterReducer","action","console","log","cycleReducer","imageReducer","allReducers","combineReducers","store","createStore","__REDUX_DEVTOOLS_EXTENSION__","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","message"],"mappings":"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","file":"static/js/main.3a48b323.chunk.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nclass Walk extends Component {\r\n  render() {\r\n    const { images, counter } = this.props;\r\n\r\n    return (\r\n      <>\r\n        <img\r\n          className=\"img-fluid\"\r\n          alt=\"walk sequence\"\r\n          src={process.env.PUBLIC_URL + images[counter]}\r\n        />\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n  return {\r\n    images: state.images,\r\n    counter: state.counter\r\n  };\r\n};\r\n\r\nexport default connect(mapStateToProps)(Walk);\r\n","import React, { Component } from \"react\";\r\nimport \"../App.scss\";\r\nimport { connect } from \"react-redux\";\r\n\r\nclass Controls extends Component {\r\n  render() {\r\n    const {\r\n      images,\r\n      interval,\r\n      increment,\r\n      decrement,\r\n      pause,\r\n      cycle,\r\n      reset,\r\n      setIntervalId,\r\n      clearIntervalId\r\n    } = this.props;\r\n\r\n    const handleClickPlay = () => {\r\n      cycle();\r\n      if (!interval) {\r\n        setIntervalId(\r\n          setInterval(() => {\r\n            increment(1, images.length - 1);\r\n          }, 250)\r\n        );\r\n      }\r\n    };\r\n\r\n    const handleClickPause = () => {\r\n      pause();\r\n      if (interval) {\r\n        clearInterval(interval);\r\n        clearIntervalId(interval);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <>\r\n        <div className=\"btn-group\" role=\"group\">\r\n          <button\r\n            class=\"btn\"\r\n            type=\"link\"\r\n            onClick={event => {\r\n              handleClickPlay();\r\n            }}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 2048 2048\"\r\n              width=\"32\"\r\n              height=\"32\"\r\n            >\r\n              <path d=\"M1792 1024L512 1920V128l1280 896zM640 1674l929-650-929-650v1300z\" />\r\n            </svg>\r\n          </button>\r\n          <button class=\"btn\" onClick={() => decrement(1, images.length - 1)}>\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 2048 2048\"\r\n              width=\"32\"\r\n              height=\"32\"\r\n            >\r\n              <path d=\"M896 1674L90 1024l806-645v1295zm-128-267V645l-474 379 474 383zm218-383l806-645v1295l-806-650zm678 383V645l-474 379 474 383z\" />\r\n            </svg>\r\n          </button>\r\n          <button class=\"btn\" onClick={() => increment(1, images.length - 1)}>\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 2048 2048\"\r\n              width=\"32\"\r\n              height=\"32\"\r\n            >\r\n              <path d=\"M1152 379l806 645-806 650V379zm128 266v762l474-383-474-379zM256 1674V379l806 645-806 650zM384 645v762l474-383-474-379z\" />\r\n            </svg>\r\n          </button>\r\n          <button class=\"btn\" onClick={() => handleClickPause()}>\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 2048 2048\"\r\n              width=\"32\"\r\n              height=\"32\"\r\n            >\r\n              <path d=\"M640 256h128v1536H640V256zm768 0v1536h-128V256h128z\" />\r\n            </svg>\r\n          </button>\r\n          <button class=\"btn\" onClick={() => reset()}>\r\n            reset\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n  return {\r\n    images: state.images,\r\n    interval: state.interval,\r\n    isCycling: state.isCycling\r\n  };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n  return {\r\n    increment: (num, len) => {\r\n      dispatch({ type: \"INCREMENT\", payload: { num, len } });\r\n    },\r\n    decrement: (num, len) => {\r\n      dispatch({ type: \"DECREMENT\", payload: { num, len } });\r\n    },\r\n    pause: () => {\r\n      dispatch({ type: \"PAUSE\" });\r\n    },\r\n    cycle: () => {\r\n      dispatch({ type: \"CYCLING\" });\r\n    },\r\n    reset: () => {\r\n      dispatch({ type: \"RESET\" });\r\n    },\r\n    setIntervalId: cycleId => {\r\n      dispatch({ type: \"SET_INTERVAL\", payload: cycleId });\r\n    },\r\n    clearIntervalId: cycleId => {\r\n      dispatch({ type: \"CLEAR_INTERVAL\", payload: cycleId });\r\n    }\r\n  };\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Controls);\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Walk from \"./components/walk\";\r\nimport Controls from \"./components/controls\";\r\n\r\nfunction App() {\r\n  const counter = useSelector(state => state.counter);\r\n  const isCycling = useSelector(state => state.isCycling);\r\n\r\n  return (\r\n    <div className=\"container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-sm\">\r\n          <nav className=\"navbar navbar-light bg-light\">\r\n            <a className=\"navbar-brand\" href=\"#\">\r\n              React | Redux | BootstrapCSS\r\n            </a>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n      <div className=\"row\">\r\n        <div className=\"col-sm\">\r\n          <div className=\"card text-center\">\r\n            <div className=\"card-header\">Walk Sequence</div>\r\n            <div className=\"card-body\">\r\n              <p className=\"card-text\">\r\n                <Walk />\r\n              </p>\r\n            </div>\r\n            <div className=\"card-footer text-muted\">\r\n              <Controls />\r\n            </div>\r\n          </div>\r\n          <p>\r\n            Git:{\" \"}\r\n            <a\r\n              href=\"https://github.com/bravotango/ReactRedux-WalkSequence\"\r\n              target=\"_blank\"\r\n            >\r\n              bravotango / ReactRedux-WalkSequence\r\n            </a>\r\n          </p>\r\n          <p className=\"card-title slide\">\r\n            Slide <span className=\"badge badge-primary\">{counter + 1}</span>\r\n          </p>\r\n          <p className=\"card-title slide\">\r\n            isCycling{\" \"}\r\n            {isCycling ? (\r\n              <a href=\"#\" class=\"badge badge-success\">\r\n                &nbsp;\r\n              </a>\r\n            ) : (\r\n              <a href=\"#\" class=\"badge badge-danger\">\r\n                &nbsp;\r\n              </a>\r\n            )}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n  window.location.hostname === 'localhost' ||\r\n    // [::1] is the IPv6 localhost address.\r\n    window.location.hostname === '[::1]' ||\r\n    // 127.0.0.0/8 are considered localhost for IPv4.\r\n    window.location.hostname.match(\r\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n    )\r\n);\r\n\r\nexport function register(config) {\r\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n    // The URL constructor is available in all browsers that support SW.\r\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n    if (publicUrl.origin !== window.location.origin) {\r\n      // Our service worker won't work if PUBLIC_URL is on a different origin\r\n      // from what our page is served on. This might happen if a CDN is used to\r\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n      return;\r\n    }\r\n\r\n    window.addEventListener('load', () => {\r\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n      if (isLocalhost) {\r\n        // This is running on localhost. Let's check if a service worker still exists or not.\r\n        checkValidServiceWorker(swUrl, config);\r\n\r\n        // Add some additional logging to localhost, pointing developers to the\r\n        // service worker/PWA documentation.\r\n        navigator.serviceWorker.ready.then(() => {\r\n          console.log(\r\n            'This web app is being served cache-first by a service ' +\r\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n          );\r\n        });\r\n      } else {\r\n        // Is not localhost. Just register service worker\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n  navigator.serviceWorker\r\n    .register(swUrl)\r\n    .then(registration => {\r\n      registration.onupdatefound = () => {\r\n        const installingWorker = registration.installing;\r\n        if (installingWorker == null) {\r\n          return;\r\n        }\r\n        installingWorker.onstatechange = () => {\r\n          if (installingWorker.state === 'installed') {\r\n            if (navigator.serviceWorker.controller) {\r\n              // At this point, the updated precached content has been fetched,\r\n              // but the previous service worker will still serve the older\r\n              // content until all client tabs are closed.\r\n              console.log(\r\n                'New content is available and will be used when all ' +\r\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n              );\r\n\r\n              // Execute callback\r\n              if (config && config.onUpdate) {\r\n                config.onUpdate(registration);\r\n              }\r\n            } else {\r\n              // At this point, everything has been precached.\r\n              // It's the perfect time to display a\r\n              // \"Content is cached for offline use.\" message.\r\n              console.log('Content is cached for offline use.');\r\n\r\n              // Execute callback\r\n              if (config && config.onSuccess) {\r\n                config.onSuccess(registration);\r\n              }\r\n            }\r\n          }\r\n        };\r\n      };\r\n    })\r\n    .catch(error => {\r\n      console.error('Error during service worker registration:', error);\r\n    });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n  // Check if the service worker can be found. If it can't reload the page.\r\n  fetch(swUrl, {\r\n    headers: { 'Service-Worker': 'script' },\r\n  })\r\n    .then(response => {\r\n      // Ensure service worker exists, and that we really are getting a JS file.\r\n      const contentType = response.headers.get('content-type');\r\n      if (\r\n        response.status === 404 ||\r\n        (contentType != null && contentType.indexOf('javascript') === -1)\r\n      ) {\r\n        // No service worker found. Probably a different app. Reload the page.\r\n        navigator.serviceWorker.ready.then(registration => {\r\n          registration.unregister().then(() => {\r\n            window.location.reload();\r\n          });\r\n        });\r\n      } else {\r\n        // Service worker found. Proceed as normal.\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    })\r\n    .catch(() => {\r\n      console.log(\r\n        'No internet connection found. App is running in offline mode.'\r\n      );\r\n    });\r\n}\r\n\r\nexport function unregister() {\r\n  if ('serviceWorker' in navigator) {\r\n    navigator.serviceWorker.ready\r\n      .then(registration => {\r\n        registration.unregister();\r\n      })\r\n      .catch(error => {\r\n        console.error(error.message);\r\n      });\r\n  }\r\n}\r\n","const counterReducer = (state = 0, action) => {\r\n  switch (action.type) {\r\n    case \"INCREMENT\":\r\n      console.log(action.payload.len);\r\n      return state >= action.payload.len ? 0 : state + action.payload.num;\r\n    case \"DECREMENT\":\r\n      return state <= 0 ? action.payload.len : state - action.payload.num;\r\n    case \"RESET\":\r\n      return 0;\r\n    default:\r\n      return state;\r\n  }\r\n};\r\nexport default counterReducer;\r\n","const cycleReducer = (state = false, action) => {\r\n  switch (action.type) {\r\n    case \"CYCLING\":\r\n      return true;\r\n    case \"PAUSE\":\r\n      return false;\r\n    default:\r\n      return state;\r\n  }\r\n};\r\n\r\nexport default cycleReducer;\r\n","const imageReducer = (\r\n  state = [\r\n    \"/assets/walk/1.jpg\",\r\n    \"/assets/walk/2.jpg\",\r\n    \"/assets/walk/3.jpg\",\r\n    \"/assets/walk/4.jpg\",\r\n    \"/assets/walk/5.jpg\",\r\n    \"/assets/walk/6.jpg\",\r\n    \"/assets/walk/7.jpg\",\r\n    \"/assets/walk/8.jpg\"\r\n  ],\r\n  action\r\n) => {\r\n  switch (action.type) {\r\n    default:\r\n      return state;\r\n  }\r\n};\r\n\r\nexport default imageReducer;\r\n","const interval = (state = null, action) => {\r\n  switch (action.type) {\r\n    case \"CLEAR_INTERVAL\":\r\n      return null;\r\n    case \"SET_INTERVAL\":\r\n      return action.payload;\r\n    default:\r\n      return state;\r\n  }\r\n};\r\n\r\nexport default interval;\r\n","import counterReducer from \"./counter\";\r\nimport cycleReducer from \"./cycle\";\r\nimport imageReducer from \"./images\";\r\nimport interval from \"./interval\";\r\n\r\nimport { combineReducers } from \"redux\";\r\n\r\nconst allReducers = combineReducers({\r\n  counter: counterReducer,\r\n  isCycling: cycleReducer,\r\n  images: imageReducer,\r\n  interval: interval\r\n});\r\n\r\nexport default allReducers;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\nimport App from \"./App\";\r\nimport * as serviceWorker from \"./serviceWorker\";\r\nimport { createStore } from \"redux\";\r\nimport allReducers from \"./reducers\";\r\nimport { Provider } from \"react-redux\";\r\nimport \"bootstrap/scss/bootstrap.scss\";\r\n\r\nconst store = createStore(\r\n  allReducers,\r\n  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\r\n);\r\n\r\n//https://www.youtube.com/watch?v=CVpUuw9XSjY\r\n\r\n//Store -> globalized state\r\n\r\n//Action increment = a simple function that returns an object\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <Provider store={store}>\r\n      <App />\r\n    </Provider>\r\n  </React.StrictMode>,\r\n  document.getElementById(\"root\")\r\n);\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n"],"sourceRoot":""}