{"version":3,"sources":["components/Header/index.js","components/Header/loader.js","components/Sidebar/index.js","components/Sidebar/loader.js","components/Content/index.js","components/Content/loader.js","services/Api.js","App.js","serviceWorker.js","index.js"],"names":["Header","userDetails","resources","read","className","src","profile_image","alt","name","email","HeaderLoader","Sidebar","authors","map","user","id","key","status","SidebarLoader","Content","postDetails","title","dangerouslySetInnerHTML","text","ContentLoader","wrapPromise","promise","result","suspender","then","r","e","userPromise","Promise","resolve","reject","fetch","response","json","data","catch","error","postDetailsPromise","authorsPromise","fetchAppData","App","revealOrder","fallback","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","registration","unregister","console","message"],"mappings":"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","file":"static/js/main.1a76ca73.chunk.js","sourcesContent":["import React from 'react';\r\n\r\nimport './index.css';\r\n\r\nfunction Header({ resources }) {\r\n  const userDetails = resources.userDetails.read();\r\n  return (\r\n    <header className=\"app__main-header\">\r\n      <div className=\"app__user-profile\">\r\n        <img src={userDetails.profile_image} alt=\"Site Logo\" />\r\n        <div className=\"app__user-meta\">\r\n          <div className=\"app__user-name\">\r\n            {userDetails.name ? userDetails.name : '________'}\r\n          </div>\r\n          <div className=\"app__user-email\">\r\n            {userDetails.email ? userDetails.email : '_______________'}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  );\r\n}\r\n\r\nexport default Header;","import React from \"react\";\r\n\r\nimport './loader.css';\r\n\r\nfunction HeaderLoader() {\r\n  return (\r\n    <div className=\"app__header-loader\">\r\n        <div className=\"app__header-image shine\"></div>\r\n        <div className=\"app__header-meta\">\r\n            <div className=\"shine\"></div>\r\n            <div className=\"shine\"></div>\r\n        </div>\r\n\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default HeaderLoader;\r\n","import React from \"react\";\r\nimport './index.css';\r\n\r\nfunction Sidebar({ resources }) {\r\n  const authors = resources.authors.read();\r\n  return (\r\n    <div className=\"app__main-sidebar\">\r\n      <div className=\"app__section-meta\">Your favorite Authors</div>\r\n      <div className=\"app__section-user\">\r\n        { authors.map( (user, id) => (            \r\n          <div key={id} className=\"app__user-detail\">\r\n            <img src={user.profile_image} alt=\"Site Logo\" />\r\n            <div className=\"app__user-meta\">\r\n              <div className=\"app__user-name\">\r\n                {user.name}\r\n              </div>\r\n              <div className=\"app__user-status\">\r\n                {user.status}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          ))\r\n        }\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Sidebar;","import React from \"react\";\r\n\r\nimport './loader.css';\r\n\r\nfunction SidebarLoader() {\r\n  return (\r\n    <div className=\"app__sidebar-loader\">\r\n        <div className=\"sidebar__profile-image shine\"></div>\r\n        <div className=\"app__sidebar-meta\">\r\n            <div className=\"shine\"></div>\r\n            <div className=\"shine\"></div>\r\n        </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default SidebarLoader;\r\n","import React from 'react';\r\n\r\nimport './index.css';\r\n\r\nfunction Content({resources}) {\r\n  const postDetails = resources.postDetails.read();\r\n  return (\r\n    <div className=\"app__main-article\">\r\n      <div className=\"app__article-content\">\r\n        <h1> {postDetails.title} </h1>\r\n        <div dangerouslySetInnerHTML={{'__html' : postDetails.text}}/>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Content;","import React from \"react\";\r\n\r\nimport './loader.css';\r\n\r\nfunction ContentLoader() {\r\n  return (\r\n    <div className=\"content__loader-container\">\r\n      <div className=\"content__loader-firstfold\">\r\n        <div className=\"content__loader-image shine\"></div>\r\n        <div className=\"content__loader-meta\">\r\n          <div className=\"shine\"></div>\r\n          <div className=\"shine\"></div>\r\n          <div className=\"shine\"></div>\r\n          <div className=\"shine\"></div>\r\n          <div className=\"shine\"></div>\r\n        </div>\r\n      </div>\r\n      <div className=\"content__loader-secondfold\">\r\n        <div className=\"shine\"></div>\r\n        <div className=\"shine\"></div>\r\n        <div className=\"shine\"></div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default ContentLoader;\r\n","function fetchUserDetails() {\r\n    return new Promise((resolve, reject) => {\r\n        fetch(\"https://demo.codershood.info/react-better-loading/api/api.php?type=user_details\")\r\n            .then(response => {\r\n                return response.json();\r\n            })\r\n            .then(data => {\r\n             resolve(data);\r\n            })\r\n            .catch(error => {\r\n                reject(null);\r\n            });\r\n    });\r\n}\r\n\r\nfunction fetchPostDetails() {\r\n    return new Promise((resolve, reject) => {\r\n        fetch(\"https://demo.codershood.info/react-better-loading/api/api.php?type=post_details\")\r\n            .then(response => {\r\n                return response.json();\r\n            })\r\n            .then(data => {\r\n             resolve(data);\r\n            })\r\n            .catch(error => {\r\n                reject(null);\r\n            });\r\n    });\r\n}\r\n\r\nfunction fetchAuthors() {\r\n    return new Promise((resolve, reject) => {\r\n        fetch(\"https://demo.codershood.info/react-better-loading/api/api.php?type=authors\")\r\n            .then(response => {\r\n                return response.json();\r\n            })\r\n            .then(data => {\r\n                resolve(data);\r\n            })\r\n            .catch(error => {\r\n                reject(null);\r\n            });\r\n    });\r\n}\r\n\r\nexport function fetchAppData() {\r\n    const userPromise = fetchUserDetails();\r\n    const postDetailsPromise = fetchPostDetails();\r\n    const authorsPromise = fetchAuthors();\r\n    return {\r\n        userDetails: wrapPromise(userPromise),\r\n        postDetails: wrapPromise(postDetailsPromise),\r\n        authors: wrapPromise(authorsPromise)\r\n    };\r\n}\r\n\r\n// Suspense integrations like Relay implement\r\n// a contract like this to integrate with React.\r\n// Real implementations can be significantly more complex.\r\n// Don't copy-paste this into your project!\r\nfunction wrapPromise(promise) {\r\n    let status = 'pending';\r\n    let result;\r\n    let suspender = promise.then(\r\n        r => {\r\n            status = 'success';\r\n            result = r;\r\n        },\r\n        e => {\r\n            status = 'error';\r\n            result = e;\r\n        }\r\n    );\r\n    return {\r\n        read() {\r\n            if (status === 'pending') {\r\n                throw suspender;\r\n            } else if (status === 'error') {\r\n                throw result;\r\n            } else if (status === 'success') {\r\n                return result;\r\n            }\r\n        }\r\n    };\r\n}\r\n","import React, { Suspense, SuspenseList } from \"react\";\n\nimport Header from './components/Header';\nimport HeaderLoader from './components/Header/loader';\nimport Sidebar from './components/Sidebar';\nimport SidebarLoader from './components/Sidebar/loader';\nimport Content from './components/Content';\nimport ContentLoader from './components/Content/loader';\n\nimport { fetchAppData } from './services/Api';\n\nimport './App.css';\n\nconst resources = fetchAppData();\n\nfunction App() {\n  return (\n    <div className=\"app__main-container\">\n      <SuspenseList revealOrder=\"together\">\n        <Suspense fallback={ <HeaderLoader />} >\n          <Header resources={resources} />\n        </Suspense>\n        <div className=\"app__main-content\">\n          <Suspense fallback={ <SidebarLoader />} >\n            <Sidebar resources={resources} />\n          </Suspense>\n          <Suspense fallback={ <ContentLoader />} >\n            <Content resources={resources} />\n          </Suspense>\n        </div>\n      </SuspenseList>\n    </div>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}