add hubspot forms

frontend/package.json

@@ -24,6 +24,7 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.9.2",
+    "react-hubspot-form": "^1.3.7",
     "react-icons": "^4.2.0",
     "react-pro-sidebar": "^0.6.0",
     "react-query": "^3.18.1",

frontend/pages/analytics.js

@@ -0,0 +1,35 @@
+import React from "react";
+import HubspotForm from "react-hubspot-form";
+import { getLayout } from "../src/layouts/AppLayout";
+import { Spinner, Flex, Heading } from "@chakra-ui/react";
+import Scrollable from "../src/components/Scrollable";
+
+const Analytics = () => {
+  return (
+    <Scrollable>
+      <Flex
+        h="100%"
+        w="100%"
+        m={0}
+        px="7%"
+        direction="column"
+        alignItems="center"
+      >
+        <Heading as="h1" py={4}>
+          This section is under construction
+        </Heading>
+        <Heading as="h2" size="sm" py={2}>
+          Message us to tell your needs for this page
+        </Heading>
+        <HubspotForm
+          portalId="8018701"
+          formId="39bc0fbe-41c4-430a-b885-46eba66c59c2"
+          loading={<Spinner colorScheme="primary" speed="1s" />}
+        />
+      </Flex>
+    </Scrollable>
+  );
+};
+
+Analytics.getLayout = getLayout;
+export default Analytics;

frontend/src/components/EntriesNavigation.js

@@ -1,15 +1,26 @@
-import React, { useRef, useEffect, useContext, useState } from "react";
-import { Box, Flex, Spinner, Button, Center, Text } from "@chakra-ui/react";
+import React, { useRef, useEffect, useContext } from "react";
+import {
+  Flex,
+  Spinner,
+  Button,
+  Center,
+  Text,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Heading,
+} from "@chakra-ui/react";
 import { useJournalEntries, useJournalPermissions } from "../core/hooks";
 import EntryList from "./EntryList";
 import UIContext from "../core/providers/UIProvider/context";
-
+import HubspotForm from "react-hubspot-form";
 const pageSize = 25;
 const isContent = false;
 
 const EntriesNavigation = () => {
   const ui = useContext(UIContext);
-  const [mode, setMode] = useState("live");
 
   const { currentUserPermissions: permissions } = useJournalPermissions(
     `9b0d7567-4634-4bf7-946d-60ef4414aa93`,
@@ -69,7 +80,7 @@ const EntriesNavigation = () => {
     appScope !== "public" && permissions?.includes("journals.entries.delete");
 
   return (
-    <Box
+    <Flex
       id="JournalNavigation"
       height="100%"
       maxH="100%"
@@ -77,7 +88,168 @@ const EntriesNavigation = () => {
       direction="column"
       flexGrow={1}
     >
-      {entries && !isLoading ? (
+      <Tabs colorScheme="red" variant="solid" isLazy isFitted h="100%">
+        <TabList>
+          <Tab
+            fontWeight="600"
+            h="3rem"
+            transition="0.5s"
+            _hover={{ bg: "secondary.100" }}
+            bgColor="white.200"
+            _selected={{
+              color: "white",
+              bg: "secondary.900",
+              boxShadow: "lg",
+            }}
+          >
+            Live view
+          </Tab>
+          <Tab
+            fontWeight="600"
+            h="3rem"
+            transition="0.5s"
+            _hover={{ bg: "secondary.100" }}
+            bgColor="white.200"
+            _selected={{
+              color: "white",
+              bg: "secondary.900",
+              boxShadow: "lg",
+            }}
+          >
+            Analysis
+          </Tab>
+        </TabList>
+
+        <TabPanels px={0} h="calc(100% - 3rem)">
+          <TabPanel p={0} h="100%">
+            {entries && !isLoading ? (
+              <>
+                <Flex h="3rem" w="100%" bgColor="white.200">
+                  <Flex
+                    flexBasis="50px"
+                    flexGrow={1}
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <Text fontWeight="600">Status</Text>
+                  </Flex>
+                  <Flex
+                    flexBasis="50px"
+                    flexGrow={1}
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <Text fontWeight="600">Source</Text>
+                  </Flex>
+                  <Flex
+                    flexBasis="50px"
+                    flexGrow={1}
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <Text fontWeight="600">Alias</Text>
+                  </Flex>
+                  <Flex
+                    flexBasis="50px"
+                    flexGrow={1}
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <Text fontWeight="600">Ammount</Text>
+                  </Flex>
+                  <Flex
+                    flexBasis="50px"
+                    flexGrow={1}
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <Text fontWeight="600">Date</Text>
+                  </Flex>
+                </Flex>
+
+                <Flex
+                  className="ScrollableWrapper"
+                  w="100%"
+                  overflowY="hidden"
+                  // maxH="100%"
+                  h="calc(100% - 3rem)"
+                >
+                  <Flex
+                    className="Scrollable"
+                    id="entryList"
+                    // flexGrow={1}
+                    overflowY="scroll"
+                    direction="column"
+                    height="100%"
+                    w="100%"
+                    onScroll={(e) => handleScroll(e)}
+                  >
+                    {entries.map((entry) => (
+                      <EntryList
+                        key={`entry-list-${entry.id}`}
+                        entry={entry}
+                        disableDelete={!canDelete}
+                        disableCopy={!canCreate}
+                      />
+                    ))}
+                    {canFetchMore && !isFetchingMore && (
+                      <Center>
+                        <Button
+                          onClick={() => fetchMore()}
+                          variant="outline"
+                          colorScheme="suggested"
+                        >
+                          Load more entries
+                        </Button>
+                      </Center>
+                    )}
+                    {canFetchMore && isFetchingMore && (
+                      <Center>
+                        <Spinner
+                          hidden={!isFetchingMore}
+                          ref={loadMoreButtonRef}
+                          my={8}
+                          size="lg"
+                          color="primary.500"
+                          thickness="4px"
+                          speed="1.5s"
+                        />
+                      </Center>
+                    )}
+                  </Flex>
+                </Flex>
+              </>
+            ) : (
+              <Center>
+                <Spinner
+                  mt="50%"
+                  size="lg"
+                  color="primary.500"
+                  thickness="4px"
+                  speed="1.5s"
+                />
+              </Center>
+            )}
+          </TabPanel>
+          <TabPanel>
+            <Heading as="h1">This section is under construction</Heading>
+            <Heading as="h2" size="sm">Message us to tell your needs for this page</Heading>
+            <HubspotForm
+              portalId="8018701"
+              formId="b9b3da3d-f47d-41da-863c-eb8229c3bfc0"
+              loading={<Spinner colorScheme="primary" speed="1s" />}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Flex>
+  );
+};
+
+export default EntriesNavigation;
+
+{
+  /* {entries && !isLoading ? (
         <Flex
           className="ScrollableWrapper"
           height="100%"
@@ -130,90 +302,94 @@ const EntriesNavigation = () => {
               Analysis view
             </Button>
           </Flex>
-          <Flex h="3rem" w="100%" bgColor="white.200">
-            <Flex
-              flexBasis="50px"
-              flexGrow={1}
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Text fontWeight="600">Status</Text>
+            <Flex h="3rem" w="100%" bgColor="white.200">
+              <Flex
+                flexBasis="50px"
+                flexGrow={1}
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text fontWeight="600">Status</Text>
+              </Flex>
+              <Flex
+                flexBasis="50px"
+                flexGrow={1}
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text fontWeight="600">Source</Text>
+              </Flex>
+              <Flex
+                flexBasis="50px"
+                flexGrow={1}
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text fontWeight="600">Alias</Text>
+              </Flex>
+              <Flex
+                flexBasis="50px"
+                flexGrow={1}
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text fontWeight="600">Ammount</Text>
+              </Flex>
+              <Flex
+                flexBasis="50px"
+                flexGrow={1}
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text fontWeight="600">Date</Text>
+              </Flex>
             </Flex>
+
             <Flex
-              flexBasis="50px"
-              flexGrow={1}
-              justifyContent="center"
-              alignItems="center"
+              className="Scrollable"
+              id="entryList"
+              // flexGrow={1}
+              overflowY="scroll"
+              direction="column"
+              height="100%"
+              onScroll={(e) => handleScroll(e)}
             >
-              <Text fontWeight="600">Source</Text>
-            </Flex>
-            <Flex
-              flexBasis="50px"
-              flexGrow={1}
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Text fontWeight="600">Alias</Text>
-            </Flex>
-            <Flex
-              flexBasis="50px"
-              flexGrow={1}
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Text fontWeight="600">Ammount</Text>
-            </Flex>
-            <Flex
-              flexBasis="50px"
-              flexGrow={1}
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Text fontWeight="600">Date</Text>
-            </Flex>
-          </Flex>
-          <Flex
-            className="Scrollable"
-            id="entryList"
-            // flexGrow={1}
-            overflowY="scroll"
-            direction="column"
-            height="100%"
-            onScroll={(e) => handleScroll(e)}
-          >
-            {entries.map((entry) => (
-              <EntryList
-                key={`entry-list-${entry.id}`}
-                entry={entry}
-                disableDelete={!canDelete}
-                disableCopy={!canCreate}
-              />
-            ))}
-            {canFetchMore && !isFetchingMore && (
-              <Center>
-                <Button
-                  onClick={() => fetchMore()}
-                  variant="outline"
-                  colorScheme="suggested"
-                >
-                  Load more entries
-                </Button>
-              </Center>
-            )}
-            {canFetchMore && isFetchingMore && (
-              <Center>
-                <Spinner
-                  hidden={!isFetchingMore}
-                  ref={loadMoreButtonRef}
-                  my={8}
-                  size="lg"
-                  color="primary.500"
-                  thickness="4px"
-                  speed="1.5s"
+              {entries.map((entry) => (
+                <EntryList
+                  key={`entry-list-${entry.id}`}
+                  entry={entry}
+                  disableDelete={!canDelete}
+                  disableCopy={!canCreate}
                 />
-              </Center>
-            )}
-          </Flex>
+              ))}
+              {canFetchMore && !isFetchingMore && (
+                <Center>
+                  <Button
+                    onClick={() => fetchMore()}
+                    variant="outline"
+                    colorScheme="suggested"
+                  >
+                    Load more entries
+                  </Button>
+                </Center>
+              )}
+              {canFetchMore && isFetchingMore && (
+                <Center>
+                  <Spinner
+                    hidden={!isFetchingMore}
+                    ref={loadMoreButtonRef}
+                    my={8}
+                    size="lg"
+                    color="primary.500"
+                    thickness="4px"
+                    speed="1.5s"
+                  />
+                </Center>
+              )}
+            </Flex>
+
+          {/* {mode === "analysis" && <Flex>tell us morex</Flex>}
+          <Fade in={mode === "analysis"}> tell me moar</Fade>
         </Flex>
       ) : (
         <Center>
@@ -225,9 +401,5 @@ const EntriesNavigation = () => {
             speed="1.5s"
           />
         </Center>
-      )}
-    </Box>
-  );
-};
-
-export default EntriesNavigation;
+      )} */
+}

frontend/src/components/Scrollable.js

@@ -16,8 +16,19 @@ const Scrollable = (props) => {
   });
 
   return (
-    <Flex className="ScrollableWrapper" direction="column" w="100%" overflowY="hidden" maxH="100%">
-      <Box className="Scrollable" direction="column" ref={scrollerRef} overflowY="scroll">
+    <Flex
+      className="ScrollableWrapper"
+      direction="column"
+      w="100%"
+      overflowY="hidden"
+      maxH="100%"
+    >
+      <Box
+        className="Scrollable"
+        direction="column"
+        ref={scrollerRef}
+        overflowY="scroll"
+      >
         {props.children}
       </Box>
     </Flex>

frontend/src/core/hooks/useStorage.js

@@ -8,6 +8,9 @@ const useStorage = (provider, key, initialValue) => {
       // Get from local storage by key
       const item = provider.getItem(key);
       // Parse stored json or if none return initialValue
+      if (!item) {
+        provider.setItem(key, JSON.stringify(initialValue));
+      }
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
       // If error also return initialValue

frontend/src/core/providers/UIProvider/index.js

@@ -4,6 +4,7 @@ import { useStorage, useQuery, useRouter } from "../../hooks";
 import UIContext from "./context";
 import UserContext from "../UserProvider/context";
 import ModalContext from "../ModalProvider/context";
+import { v4 as uuid4 } from "uuid";
 
 const UIProvider = ({ children }) => {
   const router = useRouter();
@@ -24,6 +25,10 @@ const UIProvider = ({ children }) => {
 
   const [searchBarActive, setSearchBarActive] = useState(false);
 
+  // ****** Session state *****
+  // Whether sidebar should be toggled in mobile view
+  const [sessionId] = useStorage(window.sessionStorage, "sessionID", uuid4());
+
   // ******* APP state ********
   const [isLoggedIn, setLoggedIn] = useState(user && user.username);
   const [isLoggingOut, setLoggingOut] = useState(false);
@@ -31,7 +36,8 @@ const UIProvider = ({ children }) => {
   const [isAppView, setAppView] = useState(
     router.nextRouter.asPath.includes("/stream") ||
       router.nextRouter.asPath.includes("/account") ||
-      router.nextRouter.asPath.includes("/subscriptions")
+      router.nextRouter.asPath.includes("/subscriptions") ||
+      router.nextRouter.asPath.includes("/analytics")
   );
 
   useEffect(() => {
@@ -67,7 +73,8 @@ const UIProvider = ({ children }) => {
     setAppView(
       router.nextRouter.asPath.includes("/stream") ||
         router.nextRouter.asPath.includes("/account") ||
-        router.nextRouter.asPath.includes("/subscriptions")
+        router.nextRouter.asPath.includes("/subscriptions") ||
+        router.nextRouter.asPath.includes("/analytics")
     );
   }, [router.nextRouter.asPath, user]);
 
@@ -143,6 +150,7 @@ const UIProvider = ({ children }) => {
         toggleModal,
         entryId,
         setEntryId,
+        sessionId,
       }}
     >
       {children}

frontend/src/layouts/AppLayout.js

@@ -1,8 +1,7 @@
 
-import { jsx } from "@emotion/react";
 import { Flex } from "@chakra-ui/react";
 import { getLayout as getSiteLayout } from "./RootLayout";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 
 const AppLayout = ({ children }) => {