{"version":3,"sources":["webpack:///./src/templates/illustrations-template.js"],"names":["instaImages","axios","get","then","response","console","log","data","catch","error","ImageLoadingAni","xmlns","width","height","display","preserveAspectRatio","viewBox","style","margin","background","transform","attributeName","calcMode","dur","keySplines","keyTimes","repeatCount","type","values","fill","d","Heart","ClientFetchingExample","props","useSiteMetadata","siteTitle","title","siteSubtitle","subtitle","useState","loading","books","loadingImages","imageResponse","images","setImages","useEffect","description","isIndex","className","href","target","illustrations","map","el","index","key","date","src","url","alt","prettyDate","location","name","likes"],"mappings":"uNA8FMA,EAAc,WAClB,OAAOC,IACNC,IADM,oDAENC,MAAK,SAAAC,GAEJ,OADAC,QAAQC,IAAIF,EAASG,MACdH,EAASG,QAEjBC,MAAMH,QAAQI,QAKjB,SAASC,IACP,OACE,yBACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,QACRC,oBAAoB,WACpBC,QAAQ,cACRC,MAAO,CAAEC,OAAQ,OAAQC,WAAY,SAErC,uBAAGC,UAAU,uEACX,sCACEC,cAAc,YACdC,SAAS,SACTC,IAAI,KACJC,WAAW,sCACXC,SAAS,kBACTC,YAAY,aACZC,KAAK,SACLC,OAAO,0CAET,0BACEC,KAAK,UACLC,EAAE,8DAEJ,0BACED,KAAK,UACLC,EAAE,8DAEJ,0BACED,KAAK,UACLC,EAAE,0DAEJ,0BACED,KAAK,UACLC,EAAE,gEAEJ,0BACED,KAAK,UACLC,EAAE,gEAEJ,0BACED,KAAK,UACLC,EAAE,iEAEJ,0BACED,KAAK,UACLC,EAAE,2DAEJ,0BACED,KAAK,UACLC,EAAE,kEAOZ,SAASC,IACP,OACE,yBACEpB,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,QACRC,oBAAoB,WACpBC,QAAQ,cACRC,MAAO,CAAEC,OAAQ,OAAQC,WAAY,yBAA0BL,QAAS,WAExE,uBAAGM,UAAU,6BACb,0BACES,KAAK,UACLC,EAAE,iOAEF,sCACET,cAAc,YACdC,SAAS,SACTC,IAAI,KACJC,WAAW,iGACXC,SAAS,yBACTC,YAAY,aACZC,KAAK,QACLC,OAAO,8EAQFI,UA5Le,SAAAC,GAAU,IAAD,EAEgBC,cAAtCC,EAFsB,EAE7BC,MAA4BC,EAFC,EAEXC,SAFW,EAMXC,mBAAS,CACjCC,SAAS,EACTpC,SAAU,OAFLqC,EAN8B,aAWTF,mBAAS,CACnCG,eAAe,EACfC,cAAe,QAFVC,EAX8B,KAWtBC,EAXsB,KAgBrCC,qBAAU,WAER9C,IAAcG,MAAK,SAAAI,GACjBsC,EAAU,CACRH,eAAe,EACfC,cAAepC,SAKlB,IAE2BkC,EAAtBD,QAAsBC,EAAbrC,SA5BoB,IA8B7BsC,EAAiCE,EAAjCF,cAAeC,EAAkBC,EAAlBD,cAEvB,OACE,kBAAC,IAAD,CAAQP,MAAOD,EAAWY,YAAaV,GACrC,kBAAC,IAAD,CAASW,SAAO,IAChB,kBAAC,IAAD,KAIA,wBAAIC,UAAU,cAAd,qBAEE,wEACA,sCAAW,uBAAGC,KAAK,uCAAuCC,OAAO,UAAtD,cAEZT,EACO,6BACE,mEACA,kBAAChC,EAAD,OAEAiC,EAAcS,cAEhB,yBAAKH,UAAU,SACb,wBAAIhC,MAAO,CAAC,kBAAmB,OAAQ,QAAW,IAEhD0B,EAAcS,cAAcC,KAAI,SAACC,EAAIC,GACnC,OACE,wBAAIC,IAAKb,EAAcS,cAAcG,GAAOE,MAE5C,yBAAKR,UAAU,QACb,yBAAKA,UAAU,YAAYS,IAAKf,EAAcS,cAAcG,GAAOI,IAAKC,IAAG,GAAM3C,MAAO,CAAEL,MAAO,UAC/F,yBAAKqC,UAAU,kBAEoC,MAAlDN,EAAcS,cAAcG,GAAOR,YAAsB,4BAAI,2BAAIJ,EAAcS,cAAcG,GAAOR,cAAwB,qCAE3H,2BAAIJ,EAAcS,cAAcG,GAAOM,WAAvC,MAAqG,MAA/ClB,EAAcS,cAAcG,GAAOO,SAAmB,oCAAGnB,EAAcS,cAAcG,GAAOO,SAASC,KAA/C,OAA6D,qCAAzK,IAAiLpB,EAAcS,cAAcG,GAAOS,MAApN,IAA2N,kBAACjC,EAAD,eAWzO","file":"component---src-templates-illustrations-template-js-be05b23039b331aadad6.js","sourcesContent":["import React, { Component, useState, useEffect } from \"react\"\nimport { Link } from \"gatsby\"\nimport axios from \"axios\"\nimport Layout from '../components/Layout';\nimport Sidebar from '../components/Sidebar';\nimport Page from '../components/Page';\nimport { useSiteMetadata } from '../hooks';\n\n\nconst ClientFetchingExample = props => {\n\n  const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();\n\n\n\n  const [books, setBooks] = useState({\n    loading: true,\n    response: null,\n  });\n\n  const [images, setImages] = useState({\n    loadingImages: true,\n    imageResponse: null,\n  });\n\n  useEffect(() => {\n    // TODO\n    instaImages().then(data => {\n      setImages({\n        loadingImages: false,\n        imageResponse: data,\n      })\n    });\n    \n\n  }, [])\n\n  const { loading, response } = books;\n\n  const { loadingImages, imageResponse } = images;\n\n  return (\n    <Layout title={siteTitle} description={siteSubtitle}>\n      <Sidebar isIndex />\n      <Page>\n      {/* {loading && 'Loading...'}\n      {JSON.stringify(response.review, null, 4)} */}\n\n      <h2 className=\"pageHeader\">Instagram Doodles</h2>\n\n        <p>Some recent Instagram illustration posts.</p>\n        <span>From <a href=\"https://www.instagram.com/raudaschl/\" target=\"_blank\">Instagram</a></span>\n\n      {loadingImages ? (\n              <div >\n                <p>Please hold, scraping Instagram API!</p>\n                <ImageLoadingAni></ImageLoadingAni>\n              </div>\n            ) : imageResponse.illustrations ? (\n              \n              <div className=\"cards\">\n                <ul style={{\"list-style-type\": \"none\", \"padding\": 0}}>\n                {\n                  imageResponse.illustrations.map((el, index) => {\n                    return (\n                      <li key={imageResponse.illustrations[index].date}>\n\n                      <div className=\"card\">\n                        <img className=\"fullImage\" src={imageResponse.illustrations[index].url} alt={``} style={{ width: \"100%\" }} />\n                          <div className=\"card-container\">\n                            \n                          {imageResponse.illustrations[index].description != null ? <h4><b>{imageResponse.illustrations[index].description}</b></h4> : <></>}\n                            \n                            <p>{imageResponse.illustrations[index].prettyDate} | {imageResponse.illustrations[index].location != null ? <>{imageResponse.illustrations[index].location.name} | </> : <></>} {imageResponse.illustrations[index].likes} <Heart></Heart></p>\n                          </div>\n                        </div>\n                      </li>\n                    )\n                  })\n                }\n                </ul>  \n              </div>\n              \n            ) : (\n              <p>Oh noes, error fetching instagram images :(</p>\n            )}\n      \n      </Page>\n    </Layout>\n  )\n}\n\n\n\nconst instaImages = () => {\n  return axios\n  .get(`https://www.mocky.io/v2/5e120844310000cc4d593fd1`)\n  .then(response => {\n    console.log(response.data)\n    return response.data;\n  })\n  .catch(console.error)\n};\n\n\n\nfunction ImageLoadingAni() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"50\"\n      height=\"50\"\n      display=\"block\"\n      preserveAspectRatio=\"xMidYMid\"\n      viewBox=\"0 0 100 100\"\n      style={{ margin: \"auto\", background: \"#fff\" }}\n    >\n      <g transform=\"translate(50 50) scale(.8) translate(-50 -50) rotate(186.979 50 50)\">\n        <animateTransform\n          attributeName=\"transform\"\n          calcMode=\"spline\"\n          dur=\"1s\"\n          keySplines=\"0.7 0 0.3 1;0.7 0 0.3 1;0.7 0 0.3 1\"\n          keyTimes=\"0;0.333;0.667;1\"\n          repeatCount=\"indefinite\"\n          type=\"rotate\"\n          values=\"360 50 50;240 50 50;120 50 50;0 50 50\"\n        ></animateTransform>\n        <path\n          fill=\"#93dbe9\"\n          d=\"M54.3 28.1h34.2C84 18.8 76.1 11.4 66.6 7.3L45.7 28.1h8.6z\"\n        ></path>\n        <path\n          fill=\"#689cc5\"\n          d=\"M61.7 7.3c-9.8-3.3-20.6-3.1-30.2.8v29.5l6.1-6.1L61.7 7.3z\"\n        ></path>\n        <path\n          fill=\"#5e6fa3\"\n          d=\"M28.1 11.6C18.8 16.1 11.4 24 7.3 33.5l20.8 20.8V11.6z\"\n        ></path>\n        <path\n          fill=\"#3b4368\"\n          d=\"M31.5 62.4L7.3 38.3c-3.3 9.8-3.1 20.6.8 30.2h29.5l-6.1-6.1z\"\n        ></path>\n        <path\n          fill=\"#93dbe9\"\n          d=\"M45.7 71.9H11.5c4.5 9.3 12.4 16.7 21.9 20.8l20.8-20.8h-8.5z\"\n        ></path>\n        <path\n          fill=\"#689cc5\"\n          d=\"M62.4 68.5L38.3 92.6c9.8 3.4 20.6 3.1 30.2-.8V62.4l-6.1 6.1z\"\n        ></path>\n        <path\n          fill=\"#5e6fa3\"\n          d=\"M71.9 45.7V88.5c9.3-4.5 16.7-12.4 20.8-21.9L71.9 45.7z\"\n        ></path>\n        <path\n          fill=\"#3b4368\"\n          d=\"M91.9 31.5H62.4l6.1 6.1 24.1 24.1c3.4-9.8 3.2-20.6-.7-30.2z\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n\nfunction Heart() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"15\"\n      height=\"15\"\n      display=\"block\"\n      preserveAspectRatio=\"xMidYMid\"\n      viewBox=\"0 0 100 100\"\n      style={{ margin: \"auto\", background: \"rgba(255, 255, 255, 0)\", display: \"inline\" }}\n    >\n      <g transform=\"translate(50 62) scale(2)\">\n      <path\n        fill=\"#e90c59\"\n        d=\"M27.745-23.382a17.034 17.034 0 00-24.132 0L0-19.77l-3.613-3.613a17.034 17.034 0 00-24.132 0 17.034 17.034 0 000 24.132l3.613 3.613 8.453 8.385L0 28.427l15.68-15.68 8.452-8.452L27.745.682c6.613-6.681 6.613-17.452 0-24.064z\"\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          calcMode=\"spline\"\n          dur=\"1s\"\n          keySplines=\"0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1\"\n          keyTimes=\"0;0.05;0.39;0.45;0.6;1\"\n          repeatCount=\"indefinite\"\n          type=\"scale\"\n          values=\"0.68;0.8;0.6000000000000001;0.7200000000000001;0.68;0.6400000000000001\"\n        ></animateTransform>\n      </path>\n      </g>\n    </svg>\n  );\n}\n\nexport default ClientFetchingExample"],"sourceRoot":""}