component---src-pages-photos-index-js-546a767564ae62aeccd9.js.map

{"version":3,"file":"component---src-pages-photos-index-js-546a767564ae62aeccd9.js","mappings":"sPAIe,SAASA,EAAWC,GACjC,OACE,uBAAKC,UCLe,wCDMlB,0BAAQA,UCLM,mCDKoBC,QAASF,EAAMG,MAC/C,gBAAC,MAAD,OAEF,uBAAKC,IAAKJ,EAAMI,IAAKC,IAAKL,EAAMK,IAAKH,QAASF,EAAMG,OAGzD,C,cETc,SAASG,IACtB,OAAoCC,EAAAA,EAAAA,WAAS,GAAtCC,EAAP,KAAmBC,EAAnB,KAYA,OAVAC,EAAAA,EAAAA,YAAU,WACRC,OAAOC,iBAAiB,UAAU,WAC1BD,OAAOE,QAAU,IACjBJ,GAAc,GAEhBA,GAAc,EAEnB,GACF,GAAE,IAGD,0BAAQR,UAAWO,EChBC,wCADA,wCDiBmDN,QACrE,kBAAMS,OAAOG,SAAS,CAACC,IAAK,EAAGC,SAAU,UAAzC,GAEA,gBAAC,MAAD,MAGL,C,cErBUC,EAAQ,8BCeJ,SAASC,EAAOlB,GAC7B,IAAMmB,EAAYnB,EAAMoB,KAAKC,QAAQC,MACrC,GAAkCf,EAAAA,EAAAA,UAASY,GAApCI,EAAP,KAEA,GAFA,MAE0BhB,EAAAA,EAAAA,UAAS,KAA5BiB,EAAP,KAAcC,EAAd,KAEA,GAAsClB,EAAAA,EAAAA,UAAS,IAAxCmB,EAAP,KAAqBC,EAArB,KAEA,SAASC,EAAWC,GAClBF,EAAcE,EAAMC,KAAKC,UAC1B,CAQD,OACE,2BAGIL,EACE,gBAAC3B,EAAD,CACEK,IAAKsB,EACLvB,KACE,WAAOwB,EAAc,GAAK,IAC5B,KAEN,gBAACrB,EAAD,MACA,gBAAC0B,EAAA,EAAD,CAAQC,MAAM,UACZ,0BAAQhC,UDhDI,gCCiDV,2CACA,0BACE,0BAAI,qBAAGiC,KAAK,wCAAwCC,OAAO,SAASC,IAAI,cACtE,gBAAC,EAAAC,EAAD,CACEjC,IAAI,+CACJH,UAAWqC,EAFb,wBAKF,0BAAI,qBAAGJ,KAAK,wCAAwCC,OAAO,SAASC,IAAI,cACtE,gBAAC,EAAAC,EAAD,CACEjC,IAAI,qCACJH,UAAWqC,EAFb,wBAKF,0BAAI,qBAAGJ,KAAK,qDAAqDC,OAAO,SAASC,IAAI,cACnF,gBAAC,EAAAC,EAAD,CACEjC,IAAI,oCACJH,UAAWqC,EAFb,yBAON,4BACE,sBAAIrC,UDpEM,gCCsENsB,EAAUgB,MAAM,EAAGf,GAAOgB,KACxB,SAACX,GACC,OACE,sBAAIY,IAAKZ,EAAMC,KAAKY,IAClB,uBACEtC,IAAKyB,EAAMC,KAAKC,UAChB1B,IAAI,GACJsC,QAAQ,OACRzC,QAAS,kBAAM0B,EAAWC,EAAjB,EACTe,WAAY,kBAAMhB,EAAWC,EAAjB,IAInB,IAGL,0BAEAL,EAAQD,EAAUsB,OAChB,uBAAK5C,UD5FY,2CC6Ff,0BAAQC,QAjEtB,WACEuB,GAAS,SAACD,GAAD,OAAWA,EAAQ,EAAnB,GACV,GA+Da,cAGJ,SAsCX,CAsBM,SAASsB,IACd,OACE,gBAAC,IAAD,CAAKb,MAAM,UAEd,C","sources":["webpack://gatsby-starter-hello-world/./src/components/Image-Focus.js","webpack://gatsby-starter-hello-world/./src/styles/imagefocus.module.css","webpack://gatsby-starter-hello-world/./src/components/Scroll-To-Top.js","webpack://gatsby-starter-hello-world/./src/styles/scrolltotop.module.css","webpack://gatsby-starter-hello-world/./src/styles/photos.module.css","webpack://gatsby-starter-hello-world/./src/pages/photos/index.js"],"sourcesContent":["import React from \"react\";\r\nimport { AiOutlineClose } from \"react-icons/Ai\";\r\nimport * as styles from \"../styles/imagefocus.module.css\";\r\n\r\nexport default function ImageFocus(props) {\r\n  return (\r\n    <div className={styles.Background}>\r\n      <button className={styles.Button} onClick={props.back}>\r\n        <AiOutlineClose />\r\n      </button>\r\n      <img src={props.src} alt={props.alt} onClick={props.back}></img>\r\n    </div>\r\n  )\r\n}","// extracted by mini-css-extract-plugin\nexport var Background = \"imagefocus-module--Background--DXuVU\";\nexport var Button = \"imagefocus-module--Button--liYoY\";","import React, { useState, useEffect } from \"react\";\r\nimport { AiOutlineUp } from \"react-icons/Ai\";\r\nimport * as styles from \"../styles/scrolltotop.module.css\";\r\n\r\nexport default function ScrollToTop() {\r\n  const [showButton, setShowButton] = useState(false);\r\n\r\n  useEffect(() => {\r\n    window.addEventListener('scroll', () => {\r\n        if (window.scrollY > 600) {\r\n            setShowButton(true);\r\n        } else {\r\n          setShowButton(false);\r\n        }\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <button className={showButton ? styles.ButtonShow : styles.ButtonHide} onClick={\r\n      () => window.scrollTo({top: 0, behavior: \"smooth\"})\r\n    }>\r\n      <AiOutlineUp />\r\n    </button>\r\n  )\r\n}","// extracted by mini-css-extract-plugin\nexport var ButtonHide = \"scrolltotop-module--ButtonHide--WXt9G\";\nexport var ButtonShow = \"scrolltotop-module--ButtonShow--s8MvL\";","// extracted by mini-css-extract-plugin\nexport var Header = \"photos-module--Header--mHOYe\";\nexport var LoadMoreContainer = \"photos-module--LoadMoreContainer--Lh0iR\";\nexport var Logos = \"photos-module--Logos--mU9Ty\";\nexport var Photo = \"photos-module--Photo--eEDIN\";\nexport var Photos = \"photos-module--Photos--TUDe1\";","import { graphql } from \"gatsby\";\r\nimport { GatsbyImage, StaticImage } from \"gatsby-plugin-image\";\r\nimport React, { useState } from \"react\";\r\nimport ImageFocus from \"../../components/Image-Focus\";\r\nimport Layout from \"../../components/Layout\";\r\nimport ScrollToTop from \"../../components/Scroll-To-Top\";\r\nimport { SEO } from \"../../components/Seo\";\r\nimport * as styles from \"../../styles/photos.module.css\";\r\n\r\n// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array\r\nfunction shuffleArray(array) {\r\n  for (let i = array.length - 1; i > 0; i--) {\r\n      const j = Math.floor(Math.random() * (i + 1));\r\n      [array[i], array[j]] = [array[j], array[i]];\r\n  }\r\n  return array;\r\n}\r\n\r\nexport default function Photos(props) {\r\n  const photoData = props.data.allFile.edges; // get photo data\r\n  const [allPhotos, setAllPhotos] = useState(photoData); // shuffle photos\r\n  \r\n  const [count, setCount] = useState(20);\r\n\r\n  const [focusedImage, setFocusImage] = useState(\"\"); // set the url of the focused image\r\n\r\n  function focusImage(photo) {\r\n    setFocusImage(photo.node.publicURL);\r\n  }\r\n\r\n  function loadMore() {\r\n    setCount((count) => count + 15);\r\n  }\r\n\r\n  // grid layout based on\r\n  // https://css-tricks.com/adaptive-photo-layout-with-flexbox/\r\n  return (\r\n    <div>\r\n      {\r\n        // overlay image when clicked\r\n        focusedImage ? \r\n          <ImageFocus\r\n            src={focusedImage}\r\n            back={\r\n              () => {setFocusImage(\"\");}} /> \r\n          : null\r\n      }\r\n      <ScrollToTop />\r\n      <Layout title=\"Photos\">\r\n        <header className={styles.Header}>\r\n          <h1>See more here</h1>\r\n          <ul>\r\n            <li><a href=\"https://www.instagram.com/harrydang9/\" target=\"_blank\" rel=\"noreferrer\">\r\n              <StaticImage\r\n                src=\"../../images/Logos/Instagram_Glyph_Black.png\"\r\n                className={styles.Logos}\r\n              />\r\n            </a></li>\r\n            <li><a href=\"https://www.behance.net/hadang9993375\" target=\"_blank\" rel=\"noreferrer\">\r\n              <StaticImage\r\n                src=\"../../images/Logos/BehanceLogo.png\"\r\n                className={styles.Logos}\r\n              />\r\n            </a></li>\r\n            <li><a href=\"https://www.flickr.com/photos/112239122@N04/albums\" target=\"_blank\" rel=\"noreferrer\">\r\n              <StaticImage\r\n                src=\"../../images/Logos/FlickrLogo.png\"\r\n                className={styles.Logos}\r\n              />\r\n            </a></li>\r\n          </ul>\r\n        </header>\r\n        <main>\r\n          <ul className={styles.Photos}>\r\n            {\r\n              allPhotos.slice(0, count).map(\r\n                (photo) => {\r\n                  return (\r\n                    <li key={photo.node.id}>\r\n                      <img\r\n                        src={photo.node.publicURL}\r\n                        alt=\"\"\r\n                        loading=\"lazy\"\r\n                        onClick={() => focusImage(photo)}\r\n                        onKeyPress={() => focusImage(photo)}\r\n                      />\r\n                    </li>\r\n                  )\r\n                }\r\n              )\r\n            }\r\n            <li>\r\n          {\r\n            count < allPhotos.length ? (\r\n              <div className={styles.LoadMoreContainer}>\r\n                <button onClick={loadMore}>Load More</button>\r\n              </div>\r\n            ) :\r\n            null\r\n          }</li>\r\n          </ul>\r\n        </main>\r\n      </Layout>\r\n    </div>\r\n  )\r\n  \r\n  // return (\r\n  //   <Layout title=\"Photos\">\r\n  //     <header className={styles.Header}>\r\n  //       <h1>See more here</h1>\r\n  //       <ul>\r\n  //         <li><Link to=\"/\">Instagram</Link></li>\r\n  //         <li><Link to=\"/\">Behance</Link></li>\r\n  //         <li><Link to=\"/\">Flickr</Link></li>\r\n  //       </ul>\r\n  //     </header>\r\n  //     <main className={styles.Photos}>\r\n  //       {\r\n  //         photos.map((photo) => (\r\n  //           <GatsbyImage \r\n  //             className={styles.Container}\r\n  //             imgClassName={styles.Image}\r\n  //             image={photo.node.childImageSharp.gatsbyImageData}\r\n  //             style={{\r\n  //               height: \"40vh\",\r\n  //               width: `calc(\r\n  //                 40vh * ${photo.node.childImageSharp.gatsbyImageData.width} \r\n  //                 / ${photo.node.childImageSharp.gatsbyImageData.height}\r\n  //                 )`}}\r\n  //             key={photo.node.id}\r\n  //           />\r\n  //         ))\r\n  //       }\r\n  //     </main>\r\n  //   </Layout>\r\n  // )\r\n}\r\n\r\nexport const query = graphql`\r\n  query Photos {\r\n    allFile(\r\n      filter: {relativeDirectory: {eq: \"Photos\"}}\r\n      sort: {fields: relativePath, order: ASC}\r\n    ) {\r\n      edges {\r\n        node {\r\n          childImageSharp {\r\n            gatsbyImageData(layout: FIXED, formats: NO_CHANGE, placeholder: BLURRED)\r\n          }\r\n          id\r\n          publicURL\r\n          relativePath\r\n        }\r\n      }\r\n    }\r\n  }\r\n`\r\n\r\nexport function Head() {\r\n  return (\r\n    <SEO title=\"Photos\" />\r\n  )\r\n}"],"names":["ImageFocus","props","className","onClick","back","src","alt","ScrollToTop","useState","showButton","setShowButton","useEffect","window","addEventListener","scrollY","scrollTo","top","behavior","Logos","Photos","photoData","data","allFile","edges","allPhotos","count","setCount","focusedImage","setFocusImage","focusImage","photo","node","publicURL","Layout","title","href","target","rel","S","styles","slice","map","key","id","loading","onKeyPress","length","Head"],"sourceRoot":""}