fix: auth issue

zesty-io · Nov 4, 2023 · 3a34550 · 3a34550
1 parent 2c5fb21
commit 3a34550
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 48 deletions.
diff --git a/src/blocks/Image/ZestyImage.js b/src/blocks/Image/ZestyImage.js
@@ -21,7 +21,7 @@ const ZestyImage = ({
   options = {},
   src,
   alt,
-  loading = 'lazy',
+  loading = 'eager',
   style = {},
   attributes = {},
 }) => {
@@ -43,8 +43,7 @@ const ZestyImage = ({
   );
 
   return (
-    <LazyLoadImage
-      effect='blur'
+    <img
       width={width}
       height={height}
       {...attributes}

diff --git a/src/layouts/Main/components/Footer/Footer.js b/src/layouts/Main/components/Footer/Footer.js
@@ -62,6 +62,7 @@ const Footer = ({ customRouting, colorInvert = false }) => {
                 width={150}
                 height={150}
                 alt="zesty.io logo"
+                loading="lazy"
                 src={
                   mode === 'light' && !colorInvert
                     ? 'https://brand.zesty.io/zesty-io-logo-vertical.svg'

diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -11,11 +11,12 @@ import 'react-image-lightbox/style.css';
 import 'aos/dist/aos.css';
 import '../../public/styles/custom.css';
 import { SnackbarProvider } from 'notistack';
-import Head from 'next/head';
 import AuthProvider from 'components/context/AuthProvider';
 
 import '/public/styles/app.css';
 import '/public/styles/docs.css';
+import Script from 'next/script';
+import Head from 'next/head';
 
 if (process.env.NODE_ENV === 'production') {
   console.log = () => {};
@@ -66,8 +67,8 @@ export default function App({ Component, pageProps }) {
       <Head>
         {GTM_ID && (
           <script
-            id="gtm-script"
             defer
+            id="gtm-script"
             dangerouslySetInnerHTML={{
               __html: `
               (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -79,16 +80,6 @@ export default function App({ Component, pageProps }) {
             }}
           />
         )}
-
-        <script
-          id="zi-script"
-          defer
-          dangerouslySetInnerHTML={{
-            __html: `
-     window[(function(_so2,_N9){var _VZ="";for(var _on=0;_on<_so2.length;_on++){var _Uw=_so2[_on].charCodeAt();_VZ==_VZ;_Uw-=_N9;_Uw+=61;_Uw%=94;_Uw!=_on;_Uw+=33;_N9>3;_VZ+=String.fromCharCode(_Uw)}return _VZ})(atob('IW51OTYxLCo7cCxA'), 37)] = '917f81d8eb1681840376'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_4Dk,_RM){var _8B="";for(var _bW=0;_bW<_4Dk.length;_bW++){var _hi=_4Dk[_bW].charCodeAt();_hi-=_RM;_hi+=61;_RM>1;_8B==_8B;_hi%=94;_hi+=33;_hi!=_bW;_8B+=String.fromCharCode(_hi)}return _8B})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });
-          `,
-          }}
-        />
       </Head>
       <SnackbarProvider autoHideDuration={2500} preventDuplicate maxSnack={3}>
         <Page>
@@ -113,6 +104,17 @@ export default function App({ Component, pageProps }) {
               />
             </noscript>
           )}
+
+          <Script
+            id="zi-script"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+     window[(function(_so2,_N9){var _VZ="";for(var _on=0;_on<_so2.length;_on++){var _Uw=_so2[_on].charCodeAt();_VZ==_VZ;_Uw-=_N9;_Uw+=61;_Uw%=94;_Uw!=_on;_Uw+=33;_N9>3;_VZ+=String.fromCharCode(_Uw)}return _VZ})(atob('IW51OTYxLCo7cCxA'), 37)] = '917f81d8eb1681840376'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_4Dk,_RM){var _8B="";for(var _bW=0;_bW<_4Dk.length;_bW++){var _hi=_4Dk[_bW].charCodeAt();_hi-=_RM;_hi+=61;_RM>1;_8B==_8B;_hi%=94;_hi+=33;_hi!=_bW;_8B+=String.fromCharCode(_hi)}return _8B})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });
+          `,
+            }}
+          />
+
           <Component {...pageProps} />
         </Page>
       </SnackbarProvider>

diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
@@ -1,9 +1,9 @@
 // import { AccountPageloading } from 'components/accounts/ui/loading';
 import { ZestyAccountsHead } from 'components/globals/ZestyAccountsHead';
-import { getIsAuthenticated } from 'utils';
 import { fetchPage } from 'lib/api';
 
 import dynamic from 'next/dynamic';
+import { isUserAuthenticated } from 'middleware';
 
 const Dashboard = dynamic(() => import('components/accounts/dashboard'));
 const InstanceContainer = dynamic(() =>
@@ -23,10 +23,11 @@ export default DashboardPage;
 
 const cache = {};
 export async function getServerSideProps({ res, resolvedUrl, req }) {
+  const isProd = process.env.PRODUCTION === 'true' ? true : false;
   // this getssrprops should run if login in accounts and docs
   res.setHeader('Cache-Control', 'private');
 
-  const isAuthenticated = getIsAuthenticated(res);
+  const isAuthenticated = await isUserAuthenticated(req, true, isProd);
   // issue:  multiple call of getServersideprops
   let data = await fetchPageData(resolvedUrl);
 

diff --git a/src/revamp/ui/HeroV2/Logos.js b/src/revamp/ui/HeroV2/Logos.js
@@ -1,6 +1,5 @@
 import { Stack } from '@mui/material';
 import React from 'react';
-import { generateAlt } from 'utils';
 
 const Logos = ({ logos }) => {
   return (
@@ -19,8 +18,8 @@ const Logos = ({ logos }) => {
       {logos.map((image) => (
         <img
           src={image.src}
-          alt={generateAlt()}
-          loading="lazy"
+          alt={image.alt}
+          loading="eager"
           width={image.width}
           height={image.height}
         />

diff --git a/src/revamp/ui/HeroV2/index.js b/src/revamp/ui/HeroV2/index.js
@@ -4,11 +4,8 @@ import { useTheme } from '@mui/material/styles';
 import { generateAlt } from 'utils';
 import { useEffect, useState } from 'react';
 import { FONT_FAMILY } from 'components/globals/constants';
-import dynamic from 'next/dynamic';
 
-const Logos = dynamic(() => import('./Logos'), {
-  ssr: false,
-});
+import Logos from './Logos';
 
 const media =
     'https://kfg6bckb.media.zestyio.com/Zesty-io-2023-Homepage-hero.webp',
@@ -249,8 +246,11 @@ const Hero = ({
         })}
       >
         <picture>
-          <source srcSet={media} media="(min-width: 1200px)" />
-          <source srcSet={media + '?width=400'} media="(min-width: 400px)" />
+          <source srcSet={media + '?quality=50'} media="(min-width: 1200px)" />
+          <source
+            srcSet={media + '?width=400&&quality=10'}
+            media="(min-width: 400px)"
+          />
           <img
             height={900}
             width={1400}

diff --git a/src/revamp/ui/TabsSection/TabSection.js b/src/revamp/ui/TabsSection/TabSection.js
@@ -47,7 +47,7 @@ const TabSection = ({
             component="img"
             loading="lazy"
             alt="zesty-image"
-            src={image}
+            src={image + '?quality=10'}
             sx={(theme) => ({
               [theme.breakpoints.up('xs')]: {
                 objectFit: 'contain',
@@ -110,13 +110,6 @@ const TabSection = ({
             >
               {primaryBtn}
             </Button>
-            {/* <Button
-              variant="outlined"
-              size={isTablet ? 'extraLarge' : 'medium'}
-              href={secondaryBtnLink}
-            >
-              {secondaryBtn}
-            </Button> */}
           </Stack>
         </Stack>
       </Stack>

diff --git a/src/revamp/ui/TabsSection/index.js b/src/revamp/ui/TabsSection/index.js
@@ -1,4 +1,4 @@
-import { Stack, Tab, Typography } from '@mui/material';
+import { Stack, Tab, Typography, useScrollTrigger } from '@mui/material';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import TranslateRoundedIcon from '@mui/icons-material/TranslateRounded';
@@ -65,7 +65,7 @@ const tabLists = [
           'Preview edits in real time with Duo Mode',
           'Easy organization and search for easy management',
         ]}
-        image="https://kfg6bckb.media.zestyio.com/Content-App-2.webp?width=1280&height=720"
+        image="https://kfg6bckb.media.zestyio.com/Content-App-2.webp?width=1280&height=720&&quality=40"
       />
     ),
   },
@@ -128,11 +128,6 @@ const tabLists = [
       />
     ),
   },
-  // {
-  //   name: 'APIs',
-  //   icon: <ApiRoundedIcon sx={{ fontSize: '20px' }} />,
-  //   component: <TabSection header="APIs" />,
-  // },
 ];
 
 function TabPanel(props) {
@@ -153,7 +148,7 @@ const TabsSection = ({
   header = 'Personalization, A/B Testing, Integrated Analytics, Any Business Configuration',
   tabs,
 }) => {
-  const [value, setValue] = useState('Content');
+  const [value, setValue] = useState('A/B Testing');
   const [list, setList] = useState(tabLists);
 
   useEffect(() => {
@@ -190,17 +185,23 @@ const TabsSection = ({
     setValue(newValue);
   };
 
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 5,
+  });
   useEffect(() => {
     const interval = setInterval(() => {
-      setValue((prevValue) => {
-        const currentIndex = list?.findIndex((tab) => tab.name === prevValue);
-        const nextIndex = (currentIndex + 1) % list?.length;
-        return list[nextIndex]?.name;
-      });
+      if (trigger) {
+        setValue((prevValue) => {
+          const currentIndex = list?.findIndex((tab) => tab.name === prevValue);
+          const nextIndex = (currentIndex + 1) % list?.length;
+          return list[nextIndex]?.name;
+        });
+      }
     }, 2500);
 
     return () => clearInterval(interval);
-  }, [list]);
+  }, [list, trigger]);
 
   return (
     <Stack