🐛 Fixed issue with logger component scroll and page reload

kloudlite · Mar 11, 2024 · 06b8746 · 06b8746
1 parent 9a43afd
commit 06b8746
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 76 deletions.
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
@@ -21,7 +21,6 @@ import Container from '~/components/atoms/container';
 import ProgressContainer, {
   useProgress,
 } from '~/components/atoms/progress-bar';
-// import { SelectPortalContainer } from '~/components/atoms/select';
 import Tooltip from '~/components/atoms/tooltip';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { ToastContainer } from '~/components/molecule/toast';
@@ -30,7 +29,8 @@ import styleZenerSelect from '@oshq/react-select/index.css';
 import stylesUrl from '~/design-system/index.css';
 import rcss from 'react-highlightjs-logs/dist/index.css';
 import tailwindBase from '~/design-system/tailwind-base.js';
-import { isDev } from '../client/helpers/log';
+import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
+import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 
 export const links: LinksFunction = () => [
@@ -202,6 +202,7 @@ const Root = ({
         <LiveReload port={443} />
         <Tooltip.Provider>
           <ProgressContainer>
+            <ReloadIndicator />
             <NonIdleProgressBar />
             <ToastContainer position="bottom-left" />
             <Wrapper>

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
@@ -15,7 +15,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ViewportList } from 'react-viewport-list';
+import { ViewportList, ViewportListRef } from 'react-viewport-list';
 import { dayjs } from '~/components/molecule/dayjs';
 import {
   ISearchInfProps,
@@ -28,6 +28,7 @@ import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import ReactPulsable from 'react-pulsable';
 import { ChildrenProps } from '~/components/types';
 import { logsMockData } from './dummy';
+import { LoadingIndicator } from '../reload-indicator';
 
 const pulsableContext = createContext(false);
 
@@ -499,22 +500,14 @@ const LogBlock = ({
 
   const [showAll, setShowAll] = useState(true);
 
-  const ref = useRef(null);
+  const ref = useRef<ViewportListRef>(null);
 
   useEffect(() => {
-    (async () => {
-      if (
-        follow &&
-        ref.current &&
-        // @ts-ignore
-        typeof ref.current.scrollToIndex === 'function'
-      ) {
-        // @ts-ignore
-        ref.current.scrollToIndex({
-          index: data.length - 1,
-        });
-      }
-    })();
+    if (follow && ref.current) {
+      ref.current.scrollToIndex({
+        index: data.length - 1,
+      });
+    }
   }, [data, maxLines]);
 
   return (
@@ -575,13 +568,8 @@ const LogBlock = ({
           <div
             className="flex-1 flex flex-col pb-8 scroll-container"
             style={{ lineHeight: `${fontSize * 1.5}px` }}
-            ref={ref}
           >
-            <ViewportList
-              items={showAll ? data : searchResult}
-              ref={ref}
-              // viewportRef={listRef}
-            >
+            <ViewportList items={showAll ? data : searchResult} ref={ref}>
               {(log, index) => {
                 return (
                   <LogLine
@@ -750,6 +738,8 @@ const LogComp = ({
                 </div>
               </div>
             </div>
+
+            <LoadingIndicator className="absolute z-20 bottom-lg right-lg" />
           </div>
         </Pulsable>
       )}

diff --git a/lib/client/components/reload-indicator.tsx b/lib/client/components/reload-indicator.tsx
@@ -0,0 +1,37 @@
+import { CircleFill, CircleNotch } from '@jengaicons/react';
+import { useRevalidator } from '@remix-run/react';
+import { cn } from '~/components/utils';
+
+export const LoadingIndicator = ({
+  className,
+  size = 1,
+}: {
+  className?: string;
+  size?: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        'text-text-warning animate-spin flex items-center justify-center aspect-square',
+        className
+      )}
+    >
+      <CircleNotch size={16 * size} className="relative" />
+      <CircleFill size={8 * size} className="absolute" />
+    </div>
+  );
+};
+
+export const ReloadIndicator = () => {
+  const { state } = useRevalidator();
+
+  if (state === 'loading') {
+    return (
+      <div className="fixed z-20 bottom-lg right-lg">
+        <LoadingIndicator className="" size={1} />
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/lib/client/helpers/reloader.ts b/lib/client/helpers/reloader.ts
@@ -1,9 +1,9 @@
-import { useLocation, useNavigate } from '@remix-run/react';
+import { useRevalidator } from '@remix-run/react';
 
 export const useReload = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
+  const revalidator = useRevalidator();
+
   return () => {
-    navigate(location.pathname + location.search, { replace: true });
+    revalidator.revalidate();
   };
 };
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
@@ -86,8 +86,8 @@ const baseUrls = () => {
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
-    socketUrl: `wss://websocket.${bUrl}`,
-    // socketUrl: `wss://websocket.kloudlite.io`,
+    // socketUrl: `wss://websocket.${bUrl}`,
+    socketUrl: `wss://websocket.kloudlite.io`,
     observeUrl: `https://observe.${bUrl}`,
   };
 };

diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
@@ -1,6 +1,7 @@
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import { KeyboardEvent, ReactNode, useRef } from 'react';
 import { cn } from '~/components/utils';
+import logger from '~/root/lib/client/helpers/log';
 import { LoadingPlaceHolder } from './loading';
 
 const focusableElement = 'a[href], button, input, select, textarea';
@@ -77,7 +78,7 @@ const handleKeyNavigation = (
       }
     }
   } catch {
-    console.log('Error focusing');
+    logger.error('Error focusing');
   }
 };
 
@@ -224,7 +225,7 @@ const Root = ({
 }: IRoot) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  console.log(data);
+  // logger.log(data);
   return (
     <>
       {!loading && (
@@ -250,7 +251,7 @@ const Root = ({
                 }
               }
             } catch {
-              console.log('Error Focusing');
+              logger.error('Error Focusing');
             }
           }}
           onKeyDown={(e) => {
@@ -265,7 +266,7 @@ const Root = ({
               )}
             >
               {data?.headers.map((h, index) => (
-                <div key={index} className={cn(h.className)}>
+                <div key={`${index + h.name}`} className={cn(h.className)}>
                   {h.render()}
                 </div>
               ))}
@@ -274,7 +275,7 @@ const Root = ({
               {data?.rows.map((r, index) => (
                 <RowBase
                   linkComponent={linkComponent}
-                  key={index}
+                  key={`${index + (r.to || '')}`}
                   columns={r.columns}
                   to={r.to}
                   headers={data.headers}

diff --git a/src/apps/console/components/loading.tsx b/src/apps/console/components/loading.tsx
@@ -1,5 +1,6 @@
-import { Spinner } from '@jengaicons/react';
+import { CircleFill, CircleNotch, Spinner } from '@jengaicons/react';
 import { ReactNode } from 'react';
+import { cn } from '~/components/utils';
 
 export const LoadingPlaceHolder = ({
   height = 100,
@@ -20,3 +21,23 @@ export const LoadingPlaceHolder = ({
     </div>
   );
 };
+
+export const LoadingIndicator = ({
+  className,
+  size = 1,
+}: {
+  className?: string;
+  size?: 1 | 2 | 3;
+}) => {
+  return (
+    <div
+      className={cn(
+        'text-text-warning animate-spin flex items-center justify-center aspect-square',
+        className
+      )}
+    >
+      <CircleNotch size={16 * size} />
+      <CircleFill size={8 * size} className="absolute" />
+    </div>
+  );
+};
diff --git a/src/apps/console/routes/_main+/$account+/projects/route.tsx b/src/apps/console/routes/_main+/$account+/projects/route.tsx
@@ -10,6 +10,7 @@ import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
+import { useReload } from '~/root/lib/client/helpers/reloader';
 import Tools from './tools';
 import ProjectResourcesV2 from './project-resources-v2';
 
@@ -153,47 +154,58 @@ const Projects = () => {
     };
   };
 
-  return (
-    <LoadingComp
-      data={promise}
-      skeletonData={{
-        projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
-        clustersCount: 1,
-        cloudProviderSecretsCount: 1,
-      }}
-    >
-      {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
-        const projects = projectsData.edges?.map(({ node }) => node);
-        if (!projects) {
-          return null;
-        }
+  const reloadPage = useReload();
 
-        return (
-          <Wrapper
-            header={{
-              title: 'Projects',
-              action: projects.length > 0 && (
-                <Button
-                  variant="primary"
-                  content="Create Project"
-                  prefix={<PlusFill />}
-                  to={`/${account}/new-project`}
-                  LinkComponent={Link}
-                />
-              ),
-            }}
-            empty={getEmptyState({
-              projectLength: projects.length,
-              clustersLength: clustersCount,
-              secretsLength: cloudProviderSecretsCount,
-            })}
-            tools={<Tools />}
-          >
-            <ProjectResourcesV2 items={projects} />
-          </Wrapper>
-        );
-      }}
-    </LoadingComp>
+  return (
+    <div>
+      <div
+        onClick={() => {
+          reloadPage();
+        }}
+      >
+        reloadPage
+      </div>
+      <LoadingComp
+        data={promise}
+        skeletonData={{
+          projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
+          clustersCount: 1,
+          cloudProviderSecretsCount: 1,
+        }}
+      >
+        {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
+          const projects = projectsData.edges?.map(({ node }) => node);
+          if (!projects) {
+            return null;
+          }
+
+          return (
+            <Wrapper
+              header={{
+                title: 'Projects',
+                action: projects.length > 0 && (
+                  <Button
+                    variant="primary"
+                    content="Create Project"
+                    prefix={<PlusFill />}
+                    to={`/${account}/new-project`}
+                    LinkComponent={Link}
+                  />
+                ),
+              }}
+              empty={getEmptyState({
+                projectLength: projects.length,
+                clustersLength: clustersCount,
+                secretsLength: cloudProviderSecretsCount,
+              })}
+              tools={<Tools />}
+            >
+              <ProjectResourcesV2 items={projects} />
+            </Wrapper>
+          );
+        }}
+      </LoadingComp>
+    </div>
   );
 };
 

diff --git a/src/design-system/components/atoms/animate-hide.tsx b/src/design-system/components/atoms/animate-hide.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { ReactNode } from 'react';
+import { cn } from '../utils';
 
 interface IAnimateHide {
   children: ReactNode;
@@ -35,7 +36,7 @@ const AnimateHide = ({
             height: 0,
             y: -5,
           }}
-          className={className}
+          className={cn(className, 'overflow-hidden')}
         >
           {children}
         </motion.div>