diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 472ebca0..8d8e077b 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,4 +1,10 @@ -import React, { useEffect, Suspense, useContext, useState } from "react"; +import React, { + useLayoutEffect, + useEffect, + Suspense, + useContext, + useState, +} from "react"; import { Flex, Heading, @@ -83,23 +89,12 @@ const Homepage = () => { assets["background3840"] = `${AWS_PATH}/background3840.png`; }, []); - useEffect(() => { - console.log( - "isLargerChanged, ", - isLargerThan720px, - isLargerThan1920px, - isLargerThan2880px, - isLargerThan3840px, - backgroundLoaded720, - backgroundLoaded1920, - backgroundLoaded2880, - backgroundLoaded3840 - ); - if (isLargerThan3840px && backgroundLoaded3840) { + useLayoutEffect(() => { + if (backgroundLoaded3840) { setBackground("background3840"); - } else if (isLargerThan2880px && backgroundLoaded2880) { + } else if (backgroundLoaded2880) { setBackground("background2880"); - } else if (isLargerThan1920px && backgroundLoaded1920) { + } else if (backgroundLoaded1920) { setBackground("background1920"); } else { setBackground("background720"); @@ -127,26 +122,32 @@ const Homepage = () => { } }, [isInit, router]); - useEffect(() => { + useLayoutEffect(() => { console.log("rerender check"); const imageLoader720 = new Image(); imageLoader720.src = `${AWS_PATH}/background720.png`; imageLoader720.onload = () => { setBackgroundLoaded720(true); }; + }, []); + useLayoutEffect(() => { const imageLoader1920 = new Image(); imageLoader1920.src = `${AWS_PATH}/background1920.png`; imageLoader1920.onload = () => { setBackgroundLoaded1920(true); }; + }, []); + useLayoutEffect(() => { const imageLoader2880 = new Image(); imageLoader2880.src = `${AWS_PATH}/background2880.png`; imageLoader2880.onload = () => { setBackgroundLoaded2880(true); }; + }, []); + useLayoutEffect(() => { const imageLoader3840 = new Image(); imageLoader3840.src = `${AWS_PATH}/background3840.png`; imageLoader3840.onload = () => { @@ -154,7 +155,6 @@ const Homepage = () => { }; }, []); - console.log("backgroundLoaded", background); return ( @@ -191,16 +191,18 @@ const Homepage = () => { minH="100vh" // bgColor="primary.1200" > - + { const ui = useContext(UIContext); const { isOpen, onOpen, onClose } = useDisclosure(); const { subscriptionsCache } = useSubscriptions(); - const [newFilterState, _setNewFilterState] = useState([ + const [newFilterState, setNewFilterState] = useState([ { type: FILTER_TYPES.ADDRESS, direction: DIRECTIONS.SOURCE, @@ -73,17 +73,6 @@ const EntriesNavigation = () => { ]); const [filterState, setFilterState] = useState([]); - const setNewFilterState = useCallback( - (props) => { - console.log( - "setNewFilterState", - props, - subscriptionsCache.data.subscriptions[0].id - ); - _setNewFilterState(props); - }, - [subscriptionsCache?.data?.subscriptions] - ); const loadMoreButtonRef = useRef(null); const { fetchMore, isFetchingMore, canFetchMore, EntriesPages, isLoading } = diff --git a/frontend/src/components/Scrollable.js b/frontend/src/components/Scrollable.js index dc0d0254..65d3f5fe 100644 --- a/frontend/src/components/Scrollable.js +++ b/frontend/src/components/Scrollable.js @@ -7,7 +7,7 @@ const Scrollable = (props) => { const [path, setPath] = useState(); const [scrollDepth, setScrollDepth] = useState(0); - const { mixpanel } = useAnalytics(); + const { mixpanel, isLoaded } = useAnalytics(); const getScrollPrecent = ({ currentTarget }) => { const scroll_level = @@ -21,9 +21,10 @@ const Scrollable = (props) => { if (currentScroll > scrollDepth) { // withTracking( setScrollDepth(currentScroll); - mixpanel.people.increment({ - [`Scroll depth at: ${router.nextRouter.pathname}`]: currentScroll, - }); + isLoaded && + mixpanel.people.increment({ + [`Scroll depth at: ${router.nextRouter.pathname}`]: currentScroll, + }); } }; diff --git a/frontend/src/core/providers/AnalyticsProvider/index.js b/frontend/src/core/providers/AnalyticsProvider/index.js index 51a5b6c4..4539f66b 100644 --- a/frontend/src/core/providers/AnalyticsProvider/index.js +++ b/frontend/src/core/providers/AnalyticsProvider/index.js @@ -35,14 +35,6 @@ const AnalyticsProvider = ({ children }) => { }, [isLoaded]); useEffect(() => { - if (isLoaded) { - console.log( - "track:", - router.nextRouter.pathname, - router.query, - router.params - ); - } isLoaded && mixpanel.track(MIXPANEL_EVENTS.PAGEVIEW, { url: router.nextRouter.pathname,