From c3b481b042a2cef690a486300c5de616f3252ae5 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Mon, 2 Aug 2021 22:46:40 +0800
Subject: [PATCH] cleanup

---
 frontend/pages/index.js                       | 40 ++++++++++---------
 frontend/src/components/EntriesNavigation.js  | 13 +-----
 frontend/src/components/Scrollable.js         |  9 +++--
 .../core/providers/AnalyticsProvider/index.js |  8 ----
 4 files changed, 27 insertions(+), 43 deletions(-)

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 (
     <Fade in>
@@ -191,16 +191,18 @@ const Homepage = () => {
               minH="100vh"
               // bgColor="primary.1200"
             >
-              <chakra.header boxSize="full">
+              <chakra.header boxSize="full" minH="100vh">
                 <Box
                   // h="100%"
                   // w="full"
                   // transition=""
                   // bgPos={["initial", "initial", "center", null, "center"]}
                   bgPos="bottom"
+                  bgColor="transparent"
                   backgroundImage={`url(${assets[`${background}`]})`}
                   bgSize="cover"
                   boxSize="full"
+                  minH="100vh"
                   // bgP
                   // h="container.sm"
                   // h={backgroundH}
diff --git a/frontend/src/components/EntriesNavigation.js b/frontend/src/components/EntriesNavigation.js
index b7f3bc79..b8a62686 100644
--- a/frontend/src/components/EntriesNavigation.js
+++ b/frontend/src/components/EntriesNavigation.js
@@ -63,7 +63,7 @@ const EntriesNavigation = () => {
   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,