{"version":3,"file":"js/1476-ef787df9a5db67ecc252.js","mappings":"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","sources":["webpack://app/./app/javascript/packs/carousel.js","webpack://app/./app/javascript/packs/home.jsx","webpack://app/./app/javascript/packs/pages/login.jsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useSwipeable } from \"react-swipeable\";\nimport styled from \"styled-components\";\nimport scrollArrow from \"../../assets/images/scroll-arrow.png\";\n\nconst CarouselMain = styled.div`\n  //overflow: hidden;\n  //margin: 30px auto 10px auto;\n  max-width: 1700px;\n\n  @media only screen and (max-width: 357px) {\n    margin: 0px auto 10px auto;\n  }\n\n  @media only screen and (min-width: 481px) {\n    display: none;\n  }\n`;\n\nconst CarouselMainInner = styled.div`\n  white-space: nowrap;\n  transition: transform 0.3s;\n  grid-area: 1/1/-1/-1;\n`;\n\nconst CarouselMainItem = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* height: 200px; */\n  //background-color: green;\n  color: #fff;\n`;\n\nconst Indicators = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button {\n    margin: 5px;\n  }\n\n  &:button.active {\n    background-color: green;\n    color: #fff;\n  }\n`;\n\nconst LeftArrowButton = styled.button`\n  opacity: 0.8;\n\n  grid-area: 1/1/-1/-1;\n\n  align-self: center;\n  justify-self: start;\n  //background: rgba(255, 255, 255, 0);\n  border: 0;\n  display: grid;\n\n  cursor: pointer;\n  width: 6%;\n  height: 33.33%;\n  background: rgba(247, 247, 247, 0.6);\n\n  z-index: 1;\n\n  cursor: pointer;\n\n  &:hover {\n    //background: orange;\n    //background: rgba(54, 54, 54, 0.075);\n  }\n`;\n\nconst LeftArrow = styled.img`\n  width: 100%;\n\n  position: relative;\n  justify-self: center;\n  align-self: center;\n  -webkit-transform: scaleX(-1);\n  transform: scaleX(-1);\n`;\n\nconst RightArrowButton = styled.button`\n  opacity: 0.8;\n\n  grid-area: 1/1/-1/-1;\n\n  align-self: center;\n  justify-self: end;\n  //background: rgba(255, 255, 255, 0);\n  border: 0;\n  display: grid;\n  cursor: pointer;\n\n  width: 6%;\n  height: 33.33%;\n  background: rgba(247, 247, 247, 0.6);\n\n  /* &:hover {\n    background: rgba(54, 54, 54, 0.075);\n  } */\n`;\n\nconst RightArrow = styled.img`\n  width: 100%;\n\n  position: relative;\n  justify-self: center;\n  align-self: center;\n`;\n\nconst CarouselArrowsWrapper = styled.div`\n  display: grid;\n  //grid-template-columns: 25px 1fr 25px;\n  width: 100%;\n  height: 100%;\n`;\nexport const CarouselItem = ({ children, width }) => {\n  //console.log(\"children----\", children);\n  return (\n    <CarouselMainItem className=\"carousel-item\" style={{ width: width }}>\n      {children}\n    </CarouselMainItem>\n  );\n};\n\nconst Carousel = ({ children, handleReversePage, handleForwardPage }) => {\n  //const [activeIndex, setActiveIndex] = useState(0);\n  const [paused, setPaused] = useState(false);\n\n  // const updateIndex = (newIndex) => {\n  // if (newIndex < 0) {\n  // newIndex = React.Children.count(children) - 1;\n  // } else if (newIndex >= React.Children.count(children)) {\n  // newIndex = 0;\n  // }\n\n  // setActiveIndex(newIndex);\n  // };\n\n  useEffect(() => {\n    // const interval = setInterval(() => {\n    //   if (!paused) {\n    //     updateIndex(activeIndex + 1);\n    //   }\n    // }, 3000);\n    // return () => {\n    //   if (interval) {\n    //     clearInterval(interval);\n    //   }\n    // };\n  });\n\n  const handlers = useSwipeable({\n    onSwipedLeft: () => handleForwardPage(\"cellphone\"),\n    onSwipedRight: () => handleReversePage(\"cellphone\"),\n  });\n\n  return (\n    <CarouselMain\n      {...handlers}\n      className=\"carousel\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n    >\n      <CarouselArrowsWrapper>\n        <LeftArrowButton onClick={() => handleForwardPage(\"cellphone\")}>\n          <LeftArrow src={scrollArrow} alt=\"\"></LeftArrow>\n        </LeftArrowButton>\n        <CarouselMainInner\n          className=\"inner\"\n          //style={{ transform: `translateX(-${activeIndex * 100}%)` }}\n        >\n          {React.Children.map(children, (child, index) => {\n            return React.cloneElement(child, { width: \"100%\" });\n          })}\n        </CarouselMainInner>\n        <RightArrowButton\n          onClick={() => {\n            //updateIndex(activeIndex + 1);\n\n            handleReversePage(\"cellphone\");\n          }}\n        >\n          <RightArrow src={scrollArrow} alt=\"\"></RightArrow>\n        </RightArrowButton>\n      </CarouselArrowsWrapper>\n      {/* <Indicators className=\"indicators\">\n\t\t\t\t{React.Children.map(children, (child, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t// className={`${index === activeIndex ? \"active\" : \"\"}`}\n\t\t\t\t\t\t// onClick={() => {\n\t\t\t\t\t\t// \tupdateIndex(index);\n\t\t\t\t\t\t// }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{index + 1}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Indicators> */}\n    </CarouselMain>\n  );\n};\n\nexport default Carousel;\n","import React, { useEffect, useState, useRef, useCallback } from \"react\";\nimport styled, { ThemeProvider } from \"styled-components\";\n//import { Parallax, Background } from 'react-parallax';\n//import \"../../assets/stylesheets/dotStyles.scss\";\nimport Login from \"./pages/login\";\nimport defaultImage from \"../../assets/images/defaultImage.jpg\";\n//import slugify from \"react-slugify\";\nimport { Link } from \"react-router-dom\";\nimport scrollArrow from \"../../assets/images/scroll-arrow.png\";\nimport axios from \"axios\";\nimport { gsap } from \"gsap\";\n//import { Draggable } from \"gsap/all\";\nimport { _parseRelative } from \"gsap/gsap-core\";\nimport \"../../assets/stylesheets/home_story_spinner.scss\";\nimport \"../../assets/stylesheets/dotS.css\";\nimport Carousel, { CarouselItem } from \"./carousel\";\nimport debounce from \"debounce\";\n\n//import Dots from \"react-carousel-dots\";\n\n//\n//\n//\n//\n//\n//\n\nconst HomeWrapper = styled.div`\n  //background: pink;\n\n  line-height: 1.3;\n  //height: calc(100vh - 85px);\n  //max-height: 500px;\n  overflow: hidden;\n  //min-width: 500px;\n  //display: ${(props) => (props.show_offer == \"true\" ? \"none\" : \"initial\")};\n  display: ${(props) => (props.show_offer == \"true\" ? \"none\" : \"block\")};\n`;\n\nconst News = styled.div`\n  /* @media only screen and (max-width: 1111px) {\n\t\t\t//@media only screen and (max-width: 866px) {\n\t\t\t//margin-top: 0px;\n\t\t\tmargin: 20px 10px 43px 10px;\n\t\t\tgrid-template-columns: 1fr;\n\t\t\t//padding: 0px 20px;\n\t\t\tgrid-gap: 10px;\n\n\t\t\tgrid-template-rows: max-content max-content max-content max-content 1fr;\n\t\t\tgrid-template-areas:\n\t\t\t\t\"one\"\n\t\t\t\t\"two\"\n\t\t\t\t\"three\"\n\t\t\t\t\"four\"\n\t\t\t\t\".\";\n\t\t} */\n\n  //@media only screen and (min-width: 867px) and (max-width: 1111px) {\n\n  /* grid-template-columns:\n\t\t\tminmax(20px, 1fr)\n\t\t\tminmax(200px, 600px)\n\t\t\t10px\n\t\t\tminmax(200px, 600px)\n\t\t\tminmax(20px, 1fr);\n\n\t\tgrid-template-rows: auto 10px auto auto auto auto;\n\t\tgrid-template-areas:\n\t\t\t\"leftArrow      one   .   two   rightArrow\"\n\t\t\t\"leftArrow       .    .    .    rightArrow  \"\n\t\t\t\"leftArrow     three  .   four  rightArrow\"\n\t\t\t\"leftArrow     three  .   four  rightArrow\"\n\t\t\t\"leftArrow     three  .   four  rightArrow\"\n\t\t\t\"    .           .    .    .        .     \"; */\n  //}\n\n  min-height: 100%;\n  position: relative;\n  display: grid;\n  justify-content: center;\n\n  /* grid-template-columns:\n\t\t\tminmax(30px, 1fr) minmax(200px, 600px) minmax(10px, 1fr) minmax(\n\t\t\t\t200px,\n\t\t\t\t600px\n\t\t\t)\n\t\t\tminmax(10px, 1fr) minmax(200px, 600px) minmax(30px, 1fr);\n\n\t\tgrid-template-areas:\n\t\t\t\"leftArrow   one . two . three   rightArrow\"\n\t\t\t\"leftArrow   one . two . three   rightArrow\"\n\t\t\t\"leftArrow   one . two . three   rightArrow\"\n\t\t\t\"    .        .  .  .  .   .     .\"; */\n\n  grid-template-columns: 1fr 2% 1fr;\n  /* minmax(10px, 1fr) minmax(200px, 600px) minmax(30px, 1fr); */\n\n  grid-template-areas: \"one . two\";\n  //grid-gap: 20px;\n\n  margin: 30px 1% 0 1%;\n\n  /* display: grid;\n\t\tjustify-content: center;\n\t\tgrid-template-columns: 1fr 1fr 1fr;\n\t\tgrid-template-areas:\n\t\t\t\"featured one two  .\" */\n\n  @media only screen and (max-width: 520px) {\n    margin-top: 0px;\n  }\n\n  /* @media only screen and (min-width: 1850px) {\n\t\t\tgrid-template-columns:\n\t\t\t\tminmax(20px, 1fr) minmax(600px, 700px) minmax(600px, 700px)\n\t\t\t\tminmax(600px, 700px) minmax(20px, 1fr);\n\t\t} */\n  @media only screen and (max-width: 480px) {\n    display: none;\n  }\n`;\n\nconst LinkWrapper1 = styled(Link)`\n  //grid-area: 1/1/3/2;\n  //grid-area: one;\n  grid-area: 1/1/-1/-1;\n  //max-width: 600px;\n  width: 100%;\n  justify-self: center;\n  display: grid;\n  //padding-bottom: calc(9 / 16 * 100%);\n  @media only screen and (min-width: 481px) {\n    grid-area: one;\n    width: 100%;\n    justify-self: center;\n    display: grid;\n  }\n`;\n\nconst LinkWrapper2 = styled(Link)`\n  //grid-area: 1/1/3/2;\n  //grid-area: two;\n  grid-area: 1/1/-1/-1;\n  //max-width: 600px;\n  width: 100%;\n  justify-self: center;\n  display: grid;\n  @media only screen and (min-width: 480px) {\n    grid-area: two;\n    width: 100%;\n    justify-self: center;\n    display: grid;\n  }\n`;\n\nconst Img1 = styled.img`\n  box-shadow: 0 2px 5px 0 rgba(227, 181, 90, 0.2);\n  position: relative;\n  border-radius: 10px;\n  width: 100%;\n`;\n\nconst Img2 = styled.img`\n  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);\n  position: relative;\n  border-radius: 10px;\n\n  width: 100%;\n`;\n\nconst Div1OverlayWrapper = styled.div`\n  pointer-events: none;\n  word-break: break-all;\n  //grid-area: one;\n  grid-area: 1/1/-1/-1;\n  border-radius: 10px;\n  overflow: hidden;\n  //max-width: 600px;\n  width: 100%;\n  //height: 116%;\n  justify-self: center;\n  line-height: 1.2;\n  //padding-bottom: calc(9 / 16 * 100%);\n  display: grid;\n  z-index: 1;\n  white-space: nowrap;\n  background: rgb(0, 0, 0);\n  background: -moz-linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 1) 10%,\n    rgba(255, 145, 145, 0) 60%\n  );\n  background: -webkit-linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 1) 10%,\n    rgba(255, 145, 145, 0) 60%\n  );\n  background: linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 1) 10%,\n    rgba(255, 145, 145, 0) 60%\n  );\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#000000\",endColorstr=\"#ff9191\",GradientType=1);\n\n  @media only screen and (min-width: 481px) {\n    grid-area: one;\n  }\n`;\n\nconst Div2OverlayWrapper = styled(Div1OverlayWrapper)`\n  //grid-area: two;\n  grid-area: 1/1/-1/-1;\n\n  @media only screen and (min-width: 480px) {\n    grid-area: two;\n  }\n`;\n\nconst StoryOneTitle = styled.h2`\n  //grid-area: 1 /1 /2/2;\n  //white-space: normal;\n\n  //word-break: break-all;\n  // font-size: 5vw;\n  white-space: pre-wrap;\n  word-break: break-word;\n  //align-self: end;\n  //justify-self: start;\n  //text-align: left;\n  color: white;\n  //line-height: 1em;\n  //letter-spacing: 2px;\n  //z-index: 1;\n  padding: 0px 13px 8px 13px;\n  width: 100%;\n  //min-height: 100%;\n  align-self: end;\n  justify-self: center;\n  text-align: center;\n  font-size: 2rem;\n\n  @media only screen and (max-width: 1000px) {\n    font-size: 1.5rem;\n  }\n  @media only screen and (max-width: 700px) {\n    font-size: 1rem;\n  }\n  @media only screen and (max-width: 480px) {\n    font-size: 2rem;\n  }\n\n  @media only screen and (max-width: 420px) {\n    font-size: 1.4rem;\n  }\n\n  @media only screen and (max-width: 333px) {\n    font-size: 1.1rem;\n  }\n\n  @media only screen and (max-width: 200px) {\n    font-size: 0.7rem;\n  }\n\n  h2 {\n    word-break: break-all;\n  }\n`;\n\nconst LeftFiller = styled.div`\n  grid-area: leftArrow;\n  align-self: center;\n  justify-self: end;\n\n  //z-index: 1;\n`;\n\nconst LeftArrowButton = styled.div`\n  cursor: pointer;\n  width: 6%;\n  height: 33.33%;\n  background: ${(props) =>\n    props.is_hovering == \"true\"\n      ? \"rgba(247, 247, 247, 0.6)\"\n      : \"rgba(247, 247, 247, 0.27)\"};\n  border: 0;\n  display: grid;\n  z-index: 1;\n  grid-area: one;\n  justify-self: start;\n  align-self: center;\n\n  /* &:hover {\n    background: rgba(247, 247, 247, 0.6);\n  } */\n`;\n\nconst LeftArrow = styled.img`\n  width: 100%;\n\n  position: relative;\n  justify-self: center;\n  align-self: center;\n  -webkit-transform: scaleX(-1);\n  transform: scaleX(-1);\n`;\n\nconst RightArrowButton = styled.button`\n  /* width: 100%;\n  height: 100%;\n  grid-area: rightArrow;\n  align-self: center;\n  justify-self: start;\n  background: rgba(255, 255, 255, 0);\n  border: 0;\n  display: grid;\n  cursor: pointer;\n\n  &:hover {\n    background: rgba(54, 54, 54, 0.075);\n  } */\n  cursor: pointer;\n  width: 6%;\n  height: 33.33%;\n  background: ${(props) =>\n    props.is_hovering == \"true\"\n      ? \"rgba(247, 247, 247, 0.6)\"\n      : \"rgba(247, 247, 247, 0.27)\"};\n  border: 0;\n  display: grid;\n  z-index: 1;\n  grid-area: two;\n  justify-self: end;\n  align-self: center;\n`;\n\nconst RightArrow = styled.img`\n  width: 100%;\n\n  position: relative;\n  justify-self: start;\n  align-self: center;\n`;\n\nconst BackgroundGray = styled.div`\n  @media only screen and (max-width: 866px) {\n    display: none;\n  }\n  //background: #c4c4c4;\n  grid-area: 3/1/-1/-1;\n  z-index: -1;\n  //padding: 25px 0px;\n\n  /* @media only screen and (max-width: 1111px) {\n\t\tgrid-area: 5/1/-1/-1;\n\t} */\n`;\n\nconst ItemWrapper = styled.div`\n  display: grid;\n  width: 100%;\n  margin: 0 auto;\n`;\n\n//\n//\n//\n//\n//\n//\n\nconst gsapSwipeAnimation = () => {\n  console.log(\"gsapSwipeAnimationgsapSwipeAnimationgsapSwipeAnimation\");\n  gsap.to(\n    \".s1\",\n\n    {\n      x: \"-500%\",\n      duration: 0.2,\n    }\n  );\n\n  gsap.fromTo(\n    \".s1\",\n    { x: \"300%\" },\n    {\n      x: \"initial\",\n\n      duration: 0.2,\n      delay: 0.1,\n    }\n  );\n\n  gsap.to(\n    \".s2\",\n\n    {\n      x: \"-500%\",\n      duration: 0.2,\n    }\n  );\n\n  gsap.fromTo(\n    \".s2\",\n    { x: \"300%\" },\n    {\n      x: \"initial\",\n\n      duration: 0.2,\n      delay: 0.1,\n    }\n  );\n};\n\nconst gsapSwipeAnimationReverse = () => {\n  //console.log(\"gsapSwipeAnimationReversegsapSwipeAnimationReversegsapSwipeAnimationReverse\")\n  gsap.to(\".s1\", {\n    x: \"500%\",\n    duration: 0.2,\n  });\n  gsap.fromTo(\n    \".s1\",\n    { x: \"-300%\" },\n    {\n      x: \"initial\",\n      duration: 0.2,\n      delay: 0.1,\n    }\n  );\n  gsap.to(\".s2\", {\n    x: \"500%\",\n    duration: 0.2,\n  });\n  gsap.fromTo(\n    \".s2\",\n    { x: \"-300%\" },\n    {\n      x: \"initial\",\n      duration: 0.2,\n      delay: 0.1,\n    }\n  );\n};\n\nconst gsapDeadEndAnimation = () => {\n  gsap.to(\n    \".s1\",\n\n    {\n      x: \"-10%\",\n      duration: 0.2,\n    }\n  );\n  gsap.to(\n    \".s1\",\n\n    {\n      x: \"0\",\n      duration: 0.9,\n    }\n  );\n};\n\n///////////////////////////////////////////////////////////\n///////////////////////////////////////////////////////////\n///////////////                    ////////////////////////\n///////////////   HOME             ////////////////////////\n///////////////                    ////////////////////////\n///////////////////////////////////////////////////////////\n\nfunction Home(props) {\n  console.log(\"==============Home===============\");\n  console.log(\"==============Home Props===============\", props);\n\n  //\n  //\n  //\n  //\n\n  const gsapContainer1 = useRef();\n  const gsapContainer2 = useRef();\n  const isMountedForVisibleDotsUseEffect = useRef(false);\n  const isMountedForactiveDotUseEffect = useRef(false);\n  const whatMode = useRef(\"\");\n  const whatDirection = useRef(\"\");\n  const rightArrowRef = useRef(null);\n  const leftArrowRef = useRef(null);\n\n  const [whatModeAuto, setWhatModeAuto] = useState(\"\");\n\n  const [loadingStories, setLoadingStories] = React.useState(false);\n  const [activeStories, setActiveStories] = useState([0, 1]);\n  const [activeDot, setActiveDot] = useState(0);\n  const [visibleDots, setVisibleDots] = useState([\n    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,\n  ]);\n  const [transitionX, setTransitionX] = useState(60);\n  const [isHovering, setIsHovering] = useState(\"false\");\n  const [isPageLoded, setIsPageLoded] = useState(false);\n\n  //\n  //\n  //\n  //sets initial sories to local state for caching\n  useEffect(() => {\n    if (\n      window.localStorage !== null &&\n      window.localStorage.getItem(\"allStories\") !== null &&\n      JSON.parse(window.localStorage.getItem(\"allStories\")).length > 0 &&\n      props.allStoriesFromController.length > 0\n    ) {\n      //   console.log(\n      //     \"compare it LOCAL=======\",\n      //     JSON.parse(window.localStorage.getItem(\"allStories\"))[0].id\n      //   );\n\n      if (\n        props.allStoriesFromController[0].id ==\n        JSON.parse(window.localStorage.getItem(\"allStories\"))[0].id\n      ) {\n        props.setAllStories(\n          JSON.parse(window.localStorage.getItem(\"allStories\"))\n        );\n      }\n\n      // console.log(\n      // \t\"check to see whats up with localstorage\",\n      // \ttypeof window.localStorage.getItem(\"allStories\")\n      // )\n    }\n    setIsPageLoded(true);\n    // }\n  }, []);\n\n  useEffect(() => {\n    function setModeAutoUseState() {\n      if (window.innerWidth <= 480) {\n        setWhatModeAuto(\"cellphone\");\n      } else {\n        setWhatModeAuto(\"desktop\");\n      }\n    }\n\n    if (window.innerWidth <= 480) {\n      setWhatModeAuto(\"cellphone\");\n    } else {\n      setWhatModeAuto(\"desktop\");\n    }\n\n    window.addEventListener(\"resize\", setModeAutoUseState);\n\n    //return () => window.removeEventListener(\"resize\", setModeAutoUseState)\n  }, []);\n\n  //\n  //\n  //sets props.allStories to local state for caching every time new stories are scrolled\n  useEffect(() => {\n    if (window.localStorage !== null) {\n      window.localStorage.setItem(\n        \"allStories\",\n        JSON.stringify(props.allStories)\n      );\n    }\n  }, [props.allStories]);\n\n  //\n  //\n  //shifts the indicator dots to the left everytime visibleDots changes\n  useEffect(() => {\n    // console.log(\n    //   \"inUSeEffEct for visibledots, whatDirection.current is \" +\n    //     whatDirection.current\n    // );\n    if (isMountedForVisibleDotsUseEffect.current) {\n      if (whatMode.current == \"cellphone\") {\n        if (whatDirection.current == \"reverse\") {\n          if (visibleDots[7] - 3 == props.allStories.length) {\n            console.log(\"AT the ned of the line\");\n          } else {\n            console.log(\n              \"settttttttttttttttttttttttttttttttttting TTTTTTTTTTTT\"\n            );\n            setTransitionX((pre) => pre - 20);\n          }\n        } else if (whatDirection.current == \"forward\") {\n          //doesnt happen here unless clickhandler logis says so\n          setTransitionX((pre) => pre + 20);\n        }\n      } else if (whatMode.current == \"desktop\") {\n        if (whatDirection.current == \"reverse\") {\n          //   if (visibleDots[7] - 3 == props.allStories.length) {\n          //     console.log(\"AT the ned of the line\");\n          //   } else {\n          setTransitionX((pre) => pre - 40);\n          //}\n        } else if (whatDirection.current == \"forward\") {\n          //   if (visibleDots[0] == 0) {\n          //     console.log(\"AT the eNd of the line\");\n          //     setTransitionX((pre) => pre + 40);\n          //   } else {\n          setTransitionX((pre) => pre + 40);\n          //}\n        }\n      }\n    } else {\n      isMountedForVisibleDotsUseEffect.current = true;\n    }\n  }, [visibleDots]);\n\n  //\n  //\n  //changes Stories and activeDot position everytime activeDot changes\n  useEffect(() => {\n    if (isMountedForactiveDotUseEffect.current) {\n      const mode = whatMode.current;\n      const direction = whatDirection.current;\n\n      //REVERSE DOT LOGIC & STORY LOGIC\n      if (direction == \"reverse\") {\n        if (mode == \"cellphone\") {\n          reverseCellphoneDotLogic();\n        } else if (mode == \"desktop\") {\n          reverseDesktopDotLogic();\n        }\n\n        reverseStoryLogic(mode, direction);\n\n        //FORWARD DOT LOGIC & STORY LOGIC\n      } else if (direction == \"forward\") {\n        if (mode == \"cellphone\") {\n          forwardCellphoneDotLogic();\n        } else if (mode == \"desktop\") {\n          forwardDesktopDotLogic();\n        }\n\n        forwardStoryLogic(mode, direction);\n      }\n    } else {\n      isMountedForactiveDotUseEffect.current = true;\n    }\n  }, [activeDot]);\n\n  useEffect(() => {\n    if (props.goToActNow == \"true\") {\n      //   console.log(\"goToActnow was true\");\n      props.executeScrollForLookupSection();\n    } else {\n      //   console.log(\"goToActnow was false\");\n    }\n  }, []);\n\n  //\n  //\n  //\n  //\n\n  function reverseCellphoneDotLogic() {\n    if (activeDot + 3 == visibleDots[8]) {\n      console.log(\"Setting visisble dots by 1\");\n      setVisibleDots((pre) => {\n        let newArray = [];\n\n        pre.map((n, i) => {\n          newArray[i] = n + 1;\n        });\n\n        return newArray;\n      });\n    } else {\n      console.log(\n        \"Dont change visisble dots Logic etc..........................\"\n      );\n    }\n  }\n\n  function reverseDesktopDotLogic() {\n    if (activeDot + 3 == visibleDots[7]) {\n      let StoriesLeftInArray = props.allStories.length - (activeStories[1] + 1);\n      // console.log(\"props.allStories.length - activeStories[1] \" + StoriesLeftInArray)\n      if (StoriesLeftInArray < 2) {\n        setVisibleDots((pre) => {\n          let newArray = [];\n\n          pre.map((n, i) => {\n            newArray[i] = n + 1;\n          });\n\n          return newArray;\n        });\n      } else {\n        setVisibleDots((pre) => {\n          let newArray = [];\n\n          pre.map((n, i) => {\n            newArray[i] = n + 2;\n          });\n\n          return newArray;\n        });\n      }\n    } else if (activeDot + 4 == visibleDots[9]) {\n      setVisibleDots((pre) => {\n        let newArray = [];\n\n        pre.map((n, i) => {\n          newArray[i] = n + 2;\n        });\n\n        return newArray;\n      });\n    }\n  }\n\n  function forwardCellphoneDotLogic() {\n    if (activeDot + 4 == visibleDots[3]) {\n      setVisibleDots((pre) => {\n        let newArray = [];\n        pre.map((n, i) => {\n          newArray[i] = n - 1;\n        });\n        return newArray;\n      });\n    }\n  }\n\n  function forwardDesktopDotLogic() {\n    console.log(\"=> forwardDesktopDotLogic\");\n    if (activeDot + 3 == visibleDots[2] || activeDot + 3 == visibleDots[1]) {\n      setVisibleDots((pre) => {\n        let newArray = [];\n        pre.map((n, i) => {\n          newArray[i] = n - 2;\n        });\n        return newArray;\n      });\n    } else {\n    }\n  }\n\n  function reverseStoryLogic(mode, direction) {\n    console.log(\"inside reverse story logic\");\n    let storiesLeft = props.allStories.length - (activeStories[1] + 1);\n    console.log(\"stories left = \" + storiesLeft);\n    console.log(\"mode = \" + mode);\n    let atLastStory = false;\n\n    if (activeStories[0] + 1 == props.allStories.length) {\n      atLastStory = true;\n    }\n\n    if (atLastStory) {\n      console.log(\"==========At====The=====End======== LASTSTORY was TRUE\");\n    } else {\n      if (storiesLeft >= 2) {\n        console.log(\n          \"there are \" + storiesLeft + \" stories left in allStories array\"\n        );\n\n        // shift active stories up by two and animate change\n        if (mode == \"desktop\") {\n          if (activeStories[0] > activeStories[1]) {\n            let nv1 = activeStories[1] + 2;\n            let nv0 = nv1 - 1;\n\n            setActiveStories([nv0, nv1]);\n\n            gsapSwipeAnimationReverse();\n          } else {\n            let nv0 = activeStories[0] + 2;\n            let nv1 = activeStories[1] + 2;\n\n            setActiveStories([nv0, nv1]);\n\n            gsapSwipeAnimationReverse();\n          }\n        } else if (mode == \"cellphone\") {\n          console.log(\"storiesLeft >= 2 and mode cellphone\");\n          if (activeStories[0] > activeStories[1]) {\n            console.log(\"activeStories[0] was > activeStories[1]\");\n            let nv1 = activeStories[1] + 1;\n            let nv0 = nv1 - 1;\n\n            setActiveStories([nv0, nv1]);\n\n            gsapSwipeAnimationReverse();\n          } else {\n            let nv0 = activeStories[0] + 1;\n            let nv1 = activeStories[1] + 1;\n\n            setActiveStories([nv0, nv1]);\n\n            gsapSwipeAnimationReverse();\n          }\n        }\n      } else if (storiesLeft == 1) {\n        console.log(\n          \"there is \" +\n            storiesLeft +\n            \" story left in allStories array, fetching 1 more\"\n        );\n        if (mode == \"desktop\") {\n          setLoadingStories(true);\n          axios\n            .post(\n              \"/reverse/\",\n              {\n                data: {\n                  secondToLastStory_ID: (props.allStories[activeStories[1]] + 1)\n                    .id,\n                  getNumOfStories: 1,\n                },\n              },\n              { withCredentials: true }\n            )\n            .then((response) => {\n              console.log(\n                \"============ fetch response, asked for 1 and got \" +\n                  response.data.stories.length +\n                  \" back.\"\n              );\n\n              if (response.data.stories.length == 1) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                let nv0 = activeStories[0] + 2;\n                let nv1 = activeStories[1] + 2;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 0) {\n                ////////to loop n shit\n                // let nv0 = activeStories[0] + 2\n                // let nv1 = 0\n\n                // setActiveStories([nv0, nv1])\n                // gsapSwipeAnimationReverse()\n\n                // setLoadingStories(false)\n\n                let nv0 = activeStories[0] + 1;\n                let nv1 = nv0 + 1;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              }\n            })\n            .catch((error) => {\n              console.log(\"handleReversePageErrors\", error);\n            });\n        } else if (mode == \"cellphone\") {\n          console.log(\"storiesLeft == 1 and mode cellphone\");\n\n          let nv0 = activeStories[0] + 1;\n          let nv1 = activeStories[1] + 1;\n\n          setActiveStories([nv0, nv1]);\n          gsapSwipeAnimationReverse();\n        }\n      } else if (storiesLeft == 0) {\n        console.log(\n          \"there are \" +\n            storiesLeft +\n            \" stories left in allStories array, fetching 2 more\"\n        );\n        if (mode == \"desktop\") {\n          setLoadingStories(true);\n          axios\n            .post(\n              \"/reverse/\",\n              {\n                data: {\n                  secondToLastStory_ID: props.allStories[activeStories[1]].id,\n                  getNumOfStories: 2,\n                },\n              },\n              { withCredentials: true }\n            )\n            .then((response) => {\n              console.log(\n                \"============ fetch response, asked for 2 and got \" +\n                  response.data.stories.length +\n                  \" back.\"\n              );\n\n              if (response.data.stories.length == 1) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                let nv0 = activeStories[0] + 2;\n                let nv1 = 0;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 0) {\n                // let nv0 = 0\n                // let nv1 = 1\n                // setActiveStories([nv0, nv1])\n                // gsapSwipeAnimationReverse()\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 2) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n                let nv0 = activeStories[0] + 2;\n                let nv1 = activeStories[1] + 2;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              }\n            })\n            .catch((error) => {\n              console.log(\"handleReversePageErrors\", error);\n            });\n        } else if (mode == \"cellphone\") {\n          console.log(\"333333333333333333333333333333\");\n\n          setLoadingStories(true);\n          axios\n            .post(\n              \"/reverse/\",\n              {\n                data: {\n                  secondToLastStory_ID: props.allStories[activeStories[1]].id,\n                  getNumOfStories: 2,\n                },\n              },\n              { withCredentials: true }\n            )\n            .then((response) => {\n              console.log(\n                \"============ fetch response, asked for 2 and got \" +\n                  response.data.stories.length +\n                  \" back.\"\n              );\n\n              if (response.data.stories.length == 1) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                let nv0 = activeStories[0] + 1;\n                let nv1 = activeStories[1] + 1;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 0) {\n                console.log(\n                  \"---------------     everything was zero     -----------\"\n                );\n\n                let nv0 = activeStories[0] + 1;\n                let nv1 = 0;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 2) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n                let nv0 = activeStories[0] + 1;\n                let nv1 = activeStories[1] + 1;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n              }\n            })\n            .catch((error) => {\n              console.log(\"handleReversePageErrors\", error);\n            });\n        }\n      }\n    }\n  }\n\n  function forwardStoryLogic(mode, direction) {\n    console.log(\"forwardStoryLogic <==\");\n    if (mode == \"desktop\") {\n      if (activeStories[0] == 1) {\n        let nv0 = activeStories[0] - 1;\n        let nv1 = activeStories[1] - 1;\n        setActiveStories([nv0, nv1]);\n      } else {\n        let nv0 = activeStories[0] - 2;\n        let nv1 = activeStories[1] - 2;\n        setActiveStories([nv0, nv1]);\n      }\n\n      gsapSwipeAnimation();\n    } else if (mode == \"cellphone\") {\n      console.log(\"storiesLeft >= 2 and mode cellphone\");\n      if (activeStories[0] > 0) {\n        console.log(\"activeStories[0] was > zero>\");\n        let nv0 = activeStories[0] - 1;\n        let nv1 = nv0 + 1;\n\n        setActiveStories([nv0, nv1]);\n\n        gsapSwipeAnimation();\n      } else {\n        console.log(\"no more stories going forward\");\n      }\n    }\n  }\n\n  function handleForwardPage(mode) {\n    if (leftArrowRef.current && !leftArrowRef.current.disabled) {\n      leftArrowRef.current.disabled = true;\n      // Perform the action\n      // After the action is complete, reset buttonRef.current.disabled to false\n\n      // mode is either \"cellphone\" or \"desktop\"\n      // sets the useRef with mode \"desktop\" or \"cellphone\"\n      // so it can be accessed in the useEffect thats run after setActiveDot\n      whatDirection.current = \"forward\";\n      whatMode.current = mode;\n\n      console.log(\n        \"Entering HandleForward, MODE is \" +\n          mode +\n          \" and direction is \" +\n          whatDirection.current\n      );\n\n      if (mode == \"desktop\") {\n        if (activeDot > 1) {\n          setActiveDot((pre) => {\n            return pre - 2;\n          });\n        } else if (activeDot == 1) {\n          setActiveDot((pre) => {\n            return pre - 1;\n          });\n        } else if (activeDot == 0) {\n          console.log(\"ActiveDot was zero do nada\");\n        }\n      } else if (mode == \"cellphone\") {\n        if (activeDot > 0) {\n          console.log(\"Decreasing activeDot by 1\");\n          setActiveDot((pre) => {\n            return pre - 1;\n          });\n        } else {\n          console.log(\n            \"did nothing because activeDot was already at zero \" + activeDot\n          );\n        }\n      }\n\n      leftArrowRef.current.disabled = false;\n    }\n  }\n\n  function handleReversePage(mode) {\n    if (rightArrowRef.current && !rightArrowRef.current.disabled) {\n      rightArrowRef.current.disabled = true;\n      // Perform the action\n      // After the action is complete, reset buttonRef.current.disabled to false\n\n      // mode is either \"cellphone\" or \"desktop\"\n      // sets the useRef with mode \"desktop\" or \"cellphone\"\n      // so it can be accessed in the useEffect thats run after setActiveDot\n      // mode is either \"cellphone\" or \"desktop\"\n      // sets the useRef with mode \"desktop\" or \"cellphone\"\n      // so it can be accessed in the useEffect thats run after setActiveDot\n      whatDirection.current = \"reverse\";\n      whatMode.current = mode;\n\n      console.log(\n        \"Entering HandleReverse, MODE is \" +\n          mode +\n          \" and direction is \" +\n          whatDirection.current\n      );\n      if (mode == \"desktop\") {\n        //get stories left, if 1, then shift one only\n        let dotsLeft = props.allStories.length - (activeStories[1] + 1);\n        console.log(\"DOts left = \" + dotsLeft);\n        if (dotsLeft >= 2) {\n          if (activeDot + 1 == props.allStories.length) {\n            console.log(\n              \"did nothing because activeDot was same as allstories.length\" +\n                activeDot +\n                \" == \" +\n                props.allStories.length\n            );\n          } else {\n            console.log(\"Increasing activeDot by 2\");\n            setActiveDot((pre) => {\n              return pre + 2;\n            });\n          }\n        } else if (dotsLeft == 1) {\n          console.log(\"Increasing activeDot by 1\");\n          setActiveDot((pre) => {\n            return pre + 1;\n          });\n        } else if (dotsLeft == 0) {\n          console.log(\n            \"desktop reverse mode get more stories testing==================\"\n          );\n\n          setLoadingStories(true);\n          axios\n            .post(\n              \"/reverse/\",\n              {\n                data: {\n                  secondToLastStory_ID: props.allStories[activeStories[1]].id,\n                  getNumOfStories: 2,\n                },\n              },\n              { withCredentials: true }\n            )\n            .then((response) => {\n              console.log(\n                \"+============ fetch response, asked for 2 and got \" +\n                  response.data.stories.length +\n                  \" back.\"\n              );\n\n              if (response.data.stories.length == 1) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                let nv0 = activeStories[0] + 1;\n                let nv1 = activeStories[1] + 1;\n\n                setActiveStories([nv0, nv1]);\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n\n                // setVisibleDots((pre) => {\n                //   let newArray = [];\n\n                //   pre.map((n, i) => {\n                //     newArray[i] = n + 1;\n                //   });\n\n                //   return newArray;\n                // });\n\n                setActiveDot((pre) => {\n                  return pre + 1;\n                });\n              } else if (response.data.stories.length == 0) {\n                // let nv0 = 0\n                // let nv1 = 1\n                // setActiveStories([nv0, nv1])\n                // gsapSwipeAnimationReverse()\n                setLoadingStories(false);\n              } else if (response.data.stories.length == 2) {\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                //   setActiveStories((pre) => {\n                //     let newArray = [];\n                //     pre.map((n, i) => {\n                //       newArray[i] = n + 2;\n                //     });\n\n                //     return newArray;\n                //   });\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n\n                setVisibleDots((pre) => {\n                  let newArray = [];\n\n                  pre.map((n, i) => {\n                    newArray[i] = n + 2;\n                  });\n\n                  return newArray;\n                });\n\n                setActiveDot((pre) => {\n                  return pre + 2;\n                });\n              } else if (response.data.stories.length == 3) {\n                console.log(\"RESPNSE was 3===========================\");\n                props.setAllStories((prevStories) => [\n                  ...prevStories,\n                  ...response.data.stories,\n                ]);\n\n                gsapSwipeAnimationReverse();\n\n                setLoadingStories(false);\n\n                setVisibleDots((pre) => {\n                  let newArray = [];\n\n                  pre.map((n, i) => {\n                    newArray[i] = n + 2;\n                  });\n\n                  return newArray;\n                });\n\n                setActiveDot((pre) => {\n                  return pre + 2;\n                });\n              }\n            })\n            .catch((error) => {\n              console.log(\"handleReversePageErrors\", error);\n            });\n        }\n      } else if (mode == \"cellphone\") {\n        if (activeDot + 1 == props.allStories.length) {\n          console.log(\n            \"did nothing because activeDot was same as allstories.length\" +\n              activeDot +\n              \" == \" +\n              props.allStories.length\n          );\n        } else {\n          console.log(\"Increasing activeDot by 1\");\n          setActiveDot((pre) => {\n            return pre + 1;\n          });\n        }\n      }\n      rightArrowRef.current.disabled = false;\n    }\n  }\n\n  const getDotClassName = useCallback(\n    (index) => {\n      //console.log(\"======Running getDotClassName usecallback inside home function=======\")\n\n      if (whatDirection.current == \"reverse\" || whatDirection.current == \"\") {\n        if (index + 3 == visibleDots[2] || index + 3 == visibleDots[8]) {\n          return \"medium\";\n        } else if (index + 3 == visibleDots[1] || index + 3 == visibleDots[9]) {\n          return \"small\";\n        } else if (\n          index + 3 == visibleDots[0] ||\n          index + 3 == visibleDots[10]\n        ) {\n          return \"invisible\";\n        } else if (index + 3 >= visibleDots[3] && index + 3 <= visibleDots[7]) {\n          return \"\";\n        } else {\n          return \"invisible\";\n        }\n      } else if (whatDirection.current == \"forward\") {\n        if (index + 3 == visibleDots[2] || index + 3 == visibleDots[8]) {\n          return \"medium\";\n        } else if (index + 3 == visibleDots[1] || index + 3 == visibleDots[9]) {\n          return \"small\";\n        } else if (\n          index + 3 == visibleDots[0] ||\n          index + 3 == visibleDots[10]\n        ) {\n          return \"invisible\";\n        } else if (index + 3 >= visibleDots[3] && index + 3 <= visibleDots[7]) {\n          return \"\";\n        } else {\n          return \"invisible\";\n        }\n      }\n    },\n    [visibleDots]\n  );\n\n  const getDotStyle = () => {\n    // console.log(\"======Running getDotsStyle usecallback inside home function======= \" + transitionX)\n\n    let style = {\n      height: \"10px\",\n      width: \"10px\",\n      transform: `translateX(${transitionX}px)`,\n    };\n\n    return style;\n  };\n\n  const getAllDotsWrapperStyle = () => {\n    let style = {\n      //gridTemplateColumns: `repeat(${props.totalNumOfStoriesOnServer}, 20px)`,\n      gridTemplateColumns: `repeat(7, 20px)`,\n    };\n\n    return style;\n  };\n\n  const getBackgroundBarStyles = () => {\n    let style = {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr 1fr 1fr\",\n      // backgroundColor: whatModeAuto == \"desktop\" ? \"#c4c4c4\" : \"white\",\n      //padding: \"25px 0\",\n      marginTop: \"40px\",\n    };\n\n    return style;\n  };\n\n  const desktopIndicatorDots = Array.from({ length: 7 }, (_, i) => {\n    //console.log(\"props.allStories.length\", props.allStories.length);\n    return (\n      <div style={getDotStyle()} className=\"dot-holder\" key={i}>\n        <div\n          key={`${i}-inner`}\n          className={`eachDot\n    \t\t\t\t  ${getDotClassName(i)}\n    \t\t\t\t  ${activeDot === i || activeDot + 1 === i ? \"active\" : \"\"}`}\n        />\n      </div>\n    );\n  });\n\n  const cellphoneIndicatorDots = Array.from(\n    { length: props.allStories.length },\n    (_, i) => {\n      return (\n        <div style={getDotStyle()} className={\"dot-holder\"} key={i}>\n          <div\n            key={`${i}-inner`}\n            className={`eachDot\n\t\t\t\t\t\t  ${getDotClassName(i)}\n\t\t\t\t\t\t  ${activeDot === i ? \"active\" : \"\"}`}\n          />\n        </div>\n      );\n    }\n  );\n\n  const onMouseEnter = (e) => {\n    setIsHovering(\"true\");\n  };\n\n  const onMouseLeave = (e) => {\n    setIsHovering(\"false\");\n  };\n\n  return (\n    <HomeWrapper show_offer={props.show_offer}>\n      <News\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        className={\"box\"}\n      >\n        <LeftArrowButton\n          ref={leftArrowRef}\n          is_hovering={isHovering}\n          onClick={\n            isPageLoded\n              ? debounce(() => handleForwardPage(\"desktop\"), 300)\n              : undefined\n          }\n        >\n          <LeftArrow\n            src={scrollArrow}\n            alt=\"Scroll page back to view more articles\"\n          ></LeftArrow>\n        </LeftArrowButton>\n        <LinkWrapper1\n          to={`/blog/${\n            props.allStories[activeStories[0]]\n              ? props.allStories[activeStories[0]].slug\n              : \"nada\"\n          }`}\n          state={{ art: props.allStories[activeStories[0]] }}\n        >\n          <Img1\n            className=\"s1\"\n            //\n            src={\n              props.allStories[activeStories[0]]\n                ? props.allStories[activeStories[0]].urls[0]\n                : defaultImage\n            }\n            alt={\n              props.allStories[activeStories[0]]\n                ? props.allStories[activeStories[0]].alt\n                : \"\"\n            }\n          ></Img1>\n        </LinkWrapper1>\n        <Div1OverlayWrapper className=\"s2\">\n          <StoryOneTitle>\n            {props.allStories[activeStories[0]]\n              ? props.allStories[activeStories[0]].title\n              : \"Ooops! this article is not available at this time.\"}\n          </StoryOneTitle>\n        </Div1OverlayWrapper>\n\n        {loadingStories ? (\n          <div\n            className=\"loader\"\n            style={{\n              gridArea: \"one\",\n              justifySelf: \"center\",\n              alignSelf: \"center\",\n            }}\n          >\n            Loading...\n          </div>\n        ) : null}\n        <RightArrowButton\n          is_hovering={isHovering}\n          onClick={\n            isPageLoded\n              ? debounce(() => handleReversePage(\"desktop\"), 300)\n              : undefined\n          }\n        >\n          <RightArrow\n            ref={rightArrowRef}\n            src={scrollArrow}\n            alt=\"Scroll page forward to view more articles\"\n          ></RightArrow>\n        </RightArrowButton>\n        <LinkWrapper2\n          to={`/blog/${\n            props.allStories[activeStories[1]]\n              ? props.allStories[activeStories[1]].slug\n              : \"nada\"\n          }`}\n          state={{ art: props.allStories[activeStories[1]] }}\n        >\n          <Img2\n            className=\"s1\"\n            // image_url={\n            //   props.allStories[activeStories[1]]\n            //     ? props.allStories[activeStories[1]].urls[0]\n            //     : defaultImage\n            // }\n            src={\n              props.allStories[activeStories[1]]\n                ? props.allStories[activeStories[1]].urls[0]\n                : defaultImage\n            }\n            alt={\n              props.allStories[activeStories[1]]\n                ? props.allStories[activeStories[1]].alt\n                : \"\"\n            }\n          ></Img2>\n        </LinkWrapper2>\n        <Div2OverlayWrapper className=\"s2\">\n          <StoryOneTitle>\n            {props.allStories[activeStories[1]]\n              ? props.allStories[activeStories[1]].title\n              : \"Ooops! this article is not available at this time.\"}\n          </StoryOneTitle>\n        </Div2OverlayWrapper>\n\n        {/* <BackgroundGray></BackgroundGray> */}\n      </News>\n\n      <Carousel\n        show_offer={props.show_offer}\n        handleReversePage={handleReversePage}\n        handleForwardPage={handleForwardPage}\n      >\n        <CarouselItem>\n          <ItemWrapper>\n            <LinkWrapper1\n              to={`/blog/${\n                props.allStories[activeStories[0]]\n                  ? props.allStories[activeStories[0]].slug\n                  : \"nada\"\n              }`}\n              state={{ art: props.allStories[activeStories[0]] }}\n              ref={gsapContainer1}\n            >\n              <Img1\n                className=\"s1\"\n                // image_url={\n                //   props.allStories[activeStories[0]]\n                //     ? props.allStories[activeStories[0]].urls[0]\n                //     : defaultImage\n                // }\n                src={\n                  props.allStories[activeStories[0]]\n                    ? props.allStories[activeStories[0]].urls[0]\n                    : defaultImage\n                }\n                alt={\n                  props.allStories[activeStories[0]]\n                    ? props.allStories[activeStories[0]].alt\n                    : \"\"\n                }\n              ></Img1>\n            </LinkWrapper1>\n\n            <Div1OverlayWrapper ref={gsapContainer2} className=\"s2\">\n              <StoryOneTitle>\n                {props.allStories[activeStories[0]]\n                  ? props.allStories[activeStories[0]].title\n                  : \"Ooops! this article is not available at this time.\"}\n              </StoryOneTitle>\n            </Div1OverlayWrapper>\n          </ItemWrapper>\n        </CarouselItem>\n        <CarouselItem>\n          <ItemWrapper>\n            <LinkWrapper2\n              to={`/blog/${\n                props.allStories[activeStories[1]]\n                  ? props.allStories[activeStories[1]].slug\n                  : \"nada\"\n              }`}\n              state={{ art: props.allStories[activeStories[1]] }}\n            >\n              <Img2\n                className=\"s1\"\n                // image_url={\n                //   props.allStories[activeStories[1]]\n                //     ? props.allStories[activeStories[1]].urls[0]\n                //     : defaultImage\n                // }\n                src={\n                  props.allStories[activeStories[1]]\n                    ? props.allStories[activeStories[1]].urls[0]\n                    : defaultImage\n                }\n                alt={\n                  props.allStories[activeStories[1]]\n                    ? props.allStories[activeStories[1]].alt\n                    : \"\"\n                }\n              ></Img2>\n            </LinkWrapper2>\n\n            <Div2OverlayWrapper className=\"s2\">\n              <StoryOneTitle>\n                {props.allStories[activeStories[1]]\n                  ? props.allStories[activeStories[1]].title\n                  : \"Ooops! this article is not available at this time.\"}\n              </StoryOneTitle>\n            </Div2OverlayWrapper>\n          </ItemWrapper>\n        </CarouselItem>\n      </Carousel>\n\n      <div className=\"allDotsWrapperWrapper\" style={getBackgroundBarStyles()}>\n        <div className=\"allDotsWrapper\" style={getAllDotsWrapperStyle()}>\n          {whatModeAuto == \"desktop\"\n            ? desktopIndicatorDots\n            : cellphoneIndicatorDots}\n        </div>\n      </div>\n    </HomeWrapper>\n  );\n}\n\nexport default Home;\n","import React, { useState } from \"react\";\n//import { Link, Redirect, withRouter } from \"react-router-dom\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport axios from \"axios\";\n//import logoImg from \"../../../assets/images/logoPlaceholder.jpg\";\nimport redX from \"../../../assets/images/redXmark.jpg\";\nimport greenCheck from \"../../../assets/images/greenCheck.png\";\nimport tinyMan from \"../../../assets/images/tinyManLogo.png\";\nimport lock from \"../../../assets/images/lockIcon.png\";\nimport styled from \"styled-components\";\nimport userIcon from \"../../../assets/images/signup2.svg\";\nimport {\n  Card,\n  Logo,\n  Form,\n  Button,\n  ErrorMsg,\n  XorCheckIcon,\n  LoginWrapper,\n  InputIcon,\n  LogoWrapper,\n  H2,\n  Label,\n  ErrorWrapper,\n} from \"./AuthForm\";\n\nconst LoginWrapperNew = styled.div`\n  z-index: 11;\n  width: 35vw;\n  position: fixed;\n  top: ${(props) => (props.login_clicked == \"true\" ? \"0px\" : \"-555px\")};\n  right: 0;\n  background-color: white;\n  padding: 140px 20px 20px 20px;\n  transition: all 0.3s ease 0s;\n\n  @media only screen and (max-width: 480px) {\n    width: 100vw;\n  }\n`;\n\nconst CardNew = styled.div`\n  margin-bottom: 15px;\n`;\n\nconst FormItem = styled.div`\n  position: relative;\n  margin: 0 0 38px 0;\n  padding: 0;\n\n  &:nth-child(2) {\n    margin: 0 0 10px 0;\n  }\n\n  &:nth-child(3) {\n    margin: 0 0 20px 0;\n  }\n\n  &:nth-child(4) {\n    margin: 0 0 0 0;\n  }\n`;\n\nconst Input = styled.input`\n  padding: 1rem;\n  box-sizing: border-box;\n  margin: 0px;\n  width: 100%;\n  height: 44px;\n  padding-left: 50px;\n  box-shadow: inset 0 1px 2px rgba(203, 203, 210, 0.4);\n\n  padding-right: 8px;\n\n  // font-size: 14px;\n  line-height: 1.42857;\n  color: #3f3f44;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #cbcbd2;\n  border-radius: 4px;\n\n  filter: none;\n`;\n\nconst CloseWindow = styled.a`\n  position: absolute;\n  line-height: 1.3em;\n  top: 0px;\n  right: 0px;\n  border: 1px solid red;\n  border-radius: 45px;\n  // font-size: 0.5rem;\n  cursor: pointer;\n  padding: 2px;\n`;\n\nconst LogoWrapperNew = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 40px;\n  position: relative;\n`;\n\n///////////////////////////////////  LOG_IN_PAGE //////////////////////////////\nfunction Login(props) {\n  console.log(\"==============Login===============\");\n  console.log(\"==============Login Props===============\", props);\n\n  const [state, setState] = React.useState({\n    email: \"\",\n    emailFieldActive: true,\n    password: \"\",\n    passwordFieldActive: true,\n    rememberMe: false,\n    status: \"\",\n    errors: {},\n  });\n\n  const [onHover, setOnHover] = React.useState(false);\n\n  var linkStyle;\n\n  const navigate = useNavigate();\n\n  function toggleHoverEnter() {\n    setOnHover(true);\n  }\n  function toggleHoverLeave() {\n    setOnHover(false);\n  }\n\n  // to activate the input field while typing\n  function activateField(e) {\n    setState({\n      ...state,\n      [e.target.name + \"FieldActive\"]: true,\n    });\n  }\n\n  // to activate the input field while typing\n  function activateField(e) {\n    setState({\n      ...state,\n      [e.target.name + \"FieldActive\"]: true,\n    });\n  }\n\n  // to deactivate input only if it's empty\n  function disableField(e) {\n    if (e.target.value === \"\") {\n      setState({\n        ...state,\n        [e.target.name + \"FieldActive\"]: false,\n      });\n    }\n  }\n\n  function closeLoginWindow() {\n    props.set_login_clicked(\"false\");\n    setState({\n      ...state,\n      status: \"\",\n      errors: {},\n    });\n  }\n\n  ///////////////////////////////////  HANDLE_SUBMIT ///////////////////////////\n  function handleSubmit(event) {\n    ////send info into backend to Log IN/////\n    event.preventDefault();\n    //const mode = process.env.NODE_ENV ==\"development\" ? \"http://127.0.0.1:3000\" : \"https://floridablaze.io\"\n    axios\n      .post(\n        \"/sessions\",\n        {\n          user: {\n            email: state.email,\n            password: state.password,\n            rememberMe: state.rememberMe,\n          },\n        },\n        { withCredentials: true }\n      )\n      .then((response) => {\n        console.log(\"Log in submit Response\", response);\n\n        if (response.data.status == \"green\") {\n          setState({\n            ...state,\n            status: response.data.status,\n            errors: response.data.error,\n          });\n\n          setTimeout(function () {\n            props.set_login_clicked(\"false\");\n          }, 3000);\n\n          props.handleSuccessfulAuth(response.data);\n\n          //props.history.push(\"/\")\n        } else {\n          setState({\n            ...state,\n            status: response.data.status,\n            errors: response.data.error,\n          });\n        }\n      })\n      .catch((error) => {\n        console.log(\"LoginErrors\", error);\n\n        setState({\n          ...state,\n          status: \"pink\",\n          errors: { auth: [error] },\n        });\n      });\n  }\n\n  function goToResend() {\n    navigate(\"/resend\");\n  }\n\n  ///////////////////////////////////  HANDLE_CHANGE /////////////////////////////\n  function handleChange(event) {\n    const value = event.target.value;\n    console.log(\"#################\");\n    console.log(\"name\", event.target.name);\n\n    console.log(\"value\", value);\n    console.log(\"#################\");\n\n    if (event.target.name == \"remember\") {\n      setState((prevState) => ({\n        ...prevState,\n        rememberMe: !prevState.rememberMe,\n      }));\n    } else {\n      setState({\n        ...state,\n        [event.target.name]: value,\n      });\n    }\n    //activateField(event);\n  }\n\n  ///////////////////////////////////  SETUP ERRORMESSAGES //////////////////////\n  let errorMessages = [];\n\n  if (state.errors) {\n    if (state.errors.success) {\n      errorMessages.push(<ErrorMsg> {state.errors.success[0]} </ErrorMsg>);\n    }\n\n    if (state.errors.auth) {\n      // errorMessages.push(<ErrorMsg> {state.errors.auth[0]} </ErrorMsg>);\n\n      if (state.status == \"orange\") {\n        errorMessages.push(\n          <>\n            <ErrorMsg> {state.errors.auth[0]} </ErrorMsg>\n            <span\n              style={{\n                color: \"blue\",\n                cursor: \"pointer\",\n                textDecoration: \"underline\",\n                fontSize: \"12px\",\n                padding: \"5px 0px 9px 3px\",\n              }}\n              onClick={goToResend}\n            >\n              resend link\n            </span>\n          </>\n        );\n      } else {\n        errorMessages.push(<ErrorMsg> {state.errors.auth[0]} </ErrorMsg>);\n      }\n    }\n\n    if (state.errors.password) {\n      errorMessages.push(\n        <ErrorMsg> {\"Password \" + state.errors.password[0]} </ErrorMsg>\n      );\n    }\n\n    if (state.errors.password_confirmation) {\n      errorMessages.push(\n        <ErrorMsg>\n          {\" \"}\n          {\"Confirmation \" + state.errors.password_confirmation[0]}{\" \"}\n        </ErrorMsg>\n      );\n    }\n\n    if (state.errors.green) {\n      errorMessages.push(<ErrorMsg> {state.errors.green} </ErrorMsg>);\n    }\n  }\n\n  if (onHover) {\n    linkStyle = {\n      border: \"1px solid #fcacac\",\n      //borderRadius: \"20px\",\n      transition: \"all .4s ease-out\",\n      fontSize: \".9em\",\n      cursor: \"pointer\",\n      position: \"absolute\",\n      top: \"0\",\n      right: \"0\",\n      textDecoration: \"none\",\n      padding: \"6px\",\n    };\n  } else {\n    linkStyle = {\n      border: \"1px solid white\",\n      transition: \"all .4s ease-out\",\n      fontSize: \".9em\",\n      cursor: \"pointer\",\n      position: \"absolute\",\n      top: \"0\",\n      right: \"0\",\n      textDecoration: \"none\",\n      padding: \"6px\",\n    };\n  }\n\n  /////////////////////////////////// JSX /////////////////////////////////////////\n\n  return (\n    <LoginWrapperNew login_clicked={props.login_clicked}>\n      <CardNew>\n        <LogoWrapperNew>\n          <div\n            onClick={closeLoginWindow}\n            style={linkStyle}\n            onMouseEnter={toggleHoverEnter}\n            onMouseLeave={toggleHoverLeave}\n            to=\"#\"\n          >\n            &#10060;\n          </div>\n        </LogoWrapperNew>\n\n        <Form onSubmit={handleSubmit}>\n          <FormItem>\n            <Label className={state.emailFieldActive ? \"field-active\" : \"\"}>\n              email\n            </Label>\n            <InputIcon\n              style={{ backgroundImage: `url(${tinyMan})` }}\n            ></InputIcon>\n\n            <Input\n              name=\"email\"\n              type=\"email\"\n              value={state.email}\n              onChange={handleChange}\n              onFocus={activateField}\n              onBlur={disableField}\n              required\n            />\n          </FormItem>\n\n          <FormItem>\n            <Label className={state.passwordFieldActive ? \"field-active\" : \"\"}>\n              password\n            </Label>\n            <InputIcon style={{ backgroundImage: `url(${lock})` }}></InputIcon>\n\n            <Input\n              name=\"password\"\n              type=\"password\"\n              value={state.password}\n              onChange={handleChange}\n              onFocus={activateField}\n              onBlur={disableField}\n              required\n            />\n          </FormItem>\n\n          <FormItem>\n            <input\n              name=\"remember\"\n              value={state.rememberMe}\n              type=\"checkbox\"\n              onChange={handleChange}\n            />\n\n            <label\n              style={{\n                marginLeft: \"10px\",\n                fontSize: \".8em\",\n              }}\n            >\n              remember me:\n            </label>\n          </FormItem>\n\n          {/* <%= check_box_tag :remember_me, 1, params[:remember_me] %>\n          <%= label_tag :remember_me %> */}\n\n          <Button type=\"submit\">Log In</Button>\n        </Form>\n\n        <ErrorWrapper>\n          <XorCheckIcon\n            status={state.status}\n            style={{ display: state.status == \"\" ? \"none\" : \"initial\" }}\n            src={state.status == \"green\" ? greenCheck : redX}\n            alt=\"\"\n          />\n          <h1 style={{ display: \"none\" }}>ss={state.status}</h1>\n          {errorMessages}\n        </ErrorWrapper>\n      </CardNew>\n\n      {/* <a style={{fontSize: \".5em\", textDecoration: \"underline\"}} href=\"/signup\">Dont have an account? </a><br/>\n      <a style={{fontSize: \".5em\", textDecoration: \"underline\"}} href=\"/forgot\">Forgot password?? </a><br/>*/}\n      {/* <a style={{fontSize: \".5em\", textDecoration: \"underline\"}} href=\"/resend\">Resend Confirmation Email </a><br/>  */}\n      <Link style={{ textDecoration: \"none\", fontSize: \"12px\" }} to=\"/forgot\">\n        Forgot Password\n      </Link>\n    </LoginWrapperNew>\n  );\n}\n\nexport default Login;\n"],"names":["CarouselMain","styled","div","withConfig","displayName","componentId","CarouselMainInner","CarouselMainItem","LeftArrowButton","button","LeftArrow","img","RightArrowButton","RightArrow","CarouselArrowsWrapper","CarouselItem","children","width","React","className","style","Carousel","handleReversePage","handleForwardPage","paused","setPaused","useState","useEffect","handlers","useSwipeable","onSwipedLeft","onSwipedRight","Object","assign","onMouseEnter","onMouseLeave","onClick","src","scrollArrow","alt","map","child","index","HomeWrapper","props","show_offer","News","LinkWrapper1","Link","LinkWrapper2","Img1","Img2","Div1OverlayWrapper","Div2OverlayWrapper","StoryOneTitle","h2","is_hovering","ItemWrapper","gsapSwipeAnimation","console","log","gsap","to","x","duration","fromTo","delay","gsapSwipeAnimationReverse","gsapContainer1","useRef","gsapContainer2","isMountedForVisibleDotsUseEffect","isMountedForactiveDotUseEffect","whatMode","whatDirection","rightArrowRef","leftArrowRef","whatModeAuto","setWhatModeAuto","loadingStories","setLoadingStories","activeStories","setActiveStories","activeDot","setActiveDot","visibleDots","setVisibleDots","transitionX","setTransitionX","isHovering","setIsHovering","isPageLoded","setIsPageLoded","mode","current","disabled","pre","dotsLeft","allStories","length","axios","post","data","secondToLastStory_ID","id","getNumOfStories","withCredentials","then","response","stories","setAllStories","prevStories","nv0","nv1","newArray","n","i","catch","error","window","localStorage","getItem","JSON","parse","allStoriesFromController","innerWidth","addEventListener","setItem","stringify","direction","StoriesLeftInArray","reverseDesktopDotLogic","storiesLeft","atLastStory","reverseStoryLogic","forwardStoryLogic","goToActNow","executeScrollForLookupSection","getDotClassName","useCallback","getDotStyle","height","transform","desktopIndicatorDots","Array","from","_","key","cellphoneIndicatorDots","e","ref","debounce","undefined","slug","state","art","urls","defaultImage","title","gridArea","justifySelf","alignSelf","display","gridTemplateColumns","marginTop","LoginWrapperNew","login_clicked","CardNew","FormItem","Input","input","LogoWrapperNew","a","setState","email","emailFieldActive","password","passwordFieldActive","rememberMe","status","errors","onHover","setOnHover","linkStyle","navigate","useNavigate","activateField","target","name","disableField","value","handleChange","event","prevState","errorMessages","success","push","ErrorMsg","auth","color","cursor","textDecoration","fontSize","padding","password_confirmation","green","border","transition","position","top","right","set_login_clicked","Form","onSubmit","preventDefault","user","setTimeout","handleSuccessfulAuth","Label","InputIcon","backgroundImage","tinyMan","type","onChange","onFocus","onBlur","required","lock","marginLeft","Button","ErrorWrapper","XorCheckIcon","greenCheck","redX"],"sourceRoot":""}