fix: perf imprvements

app/index.html

@@ -30,6 +30,7 @@
 
   <div id="drawer-root"></div>
   <div id="alert-root"></div>
+  <div id="dialog-root"></div>
 </body>
 
 </html>

app/src/App.tsx

@@ -4,15 +4,34 @@ import { useAuth, useAuthRedirect } from 'src/utils/auth';
 import { useJuneRouter } from 'src/Shared/router';
 import * as JAlert from 'src/Lib/JAlerts';
 import FloatingLoader from 'src/Shared/components/FloatingLoader';
+// import { Dialog, DialogAPI } from './Lib/context/dialog';
 
 interface Props {}
 
 const App: React.FC<Props> = () => {
   const { Routes } = useJuneRouter();
   const { isLoading, auth } = useAuth();
-
   const { isLoading: isCatchLoading } = useAuthRedirect();
 
+  // const Dialogs = useRef<Dialog[]>([]);
+
+  // function addToDialog(dialog: Dialog) {
+  //   const isDialog = Dialogs.current.findIndex((el) => el.id === dialog.id);
+
+  //   if (isDialog === -1) {
+  //     //TODO: improve this
+  //     if (!!Dialogs.current.length) Dialogs.current = [];
+  //     Dialogs.current.push({ ...dialog });
+  //   }
+  // }
+
+  // function removeFromDialog(id: string) {
+  //   const isDialog = Dialogs.current.findIndex((el) => el.id === id);
+  //   if (isDialog !== -1) {
+  //     Dialogs.current.splice(isDialog, 1);
+  //   }
+  // }
+
   useEffect(() => {
     (async () => await auth())();
   }, []);
@@ -21,12 +40,14 @@ const App: React.FC<Props> = () => {
     <>
       {!isLoading && !isCatchLoading && (
         <div>
+          {/* <DialogAPI.Provider value={{ dialogs: Dialogs.current, addToDialog, removeFromDialog }}> */}
           <FloatingLoader />
           <JAlert.JAlertGroup />
           <AppNavbar />
           <Suspense fallback={<span />}>
             <div className="px-2 py-1 sm:max-w-7xl mx-auto">{Routes}</div>
           </Suspense>{' '}
+          {/* </DialogAPI.Provider> */}
         </div>
       )}
     </>

app/src/Lib/JDialog.tsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import { randomId } from 'src/utils/helpers';
 import { useClickoutside } from 'src/utils/hooks';
+// import { DialogAPI } from 'src/Lib/context/dialog';
 
 interface Props {
   isModal: boolean;
@@ -10,6 +12,9 @@ interface Props {
 
 const JDialog: React.FC<Props> = ({ isModal, setModal, children }) => {
   const [ref] = useClickoutside<HTMLDivElement>(() => setModal(false));
+  const myID = useRef(randomId(10));
+
+  // const { addToDialog, removeFromDialog } = useContext(DialogAPI);
 
   const keyListenersMap = new Map([
     ['Escape', handleEscape],
@@ -59,25 +64,34 @@ const JDialog: React.FC<Props> = ({ isModal, setModal, children }) => {
     !isModal && document.body.classList.remove('body-noscroll');
   }, [isModal]);
 
+  // useEffect(() => {
+  //   isModal && addToDialog({ id: myID.current, close: () => setModal(false) });
+  //   !isModal && removeFromDialog(myID.current);
+  // }, [isModal]);
+
   return createPortal(
     <CSSTransition
       in={isModal}
       timeout={{
-        enter: 300,
-        exit: 300,
+        enter: 200,
+        exit: 200,
       }}
       classNames="j-dialog"
       unmountOnExit
     >
-      <div className="j-dialog__backdrop" role="dialog" aria-modal={isModal}>
+      <div
+        className="j-dialog__backdrop"
+        role="dialog"
+        aria-modal={isModal}
+        id={myID.current}
+        ref={ref}
+      >
         <div className="j-dialog__parent">
-          <div className="j-dialog__content" ref={ref}>
-            {children}
-          </div>
+          <div className="j-dialog__content">{children}</div>
         </div>
       </div>
     </CSSTransition>,
-    document.body,
+    document.getElementById('dialog-root') as HTMLDivElement,
   );
 };
 

app/src/Lib/context/dialog.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+export interface Dialog {
+  id: string;
+  close: () => void;
+}
+
+export const DialogAPI = createContext<{
+  dialogs: Dialog[];
+  addToDialog: (dialog: Dialog) => void;
+  removeFromDialog(id: string): void;
+}>({ dialogs: [], addToDialog: null as any, removeFromDialog: null as any });

app/src/Lib/store/alerts.tsx

@@ -21,6 +21,6 @@ export const useAlert = create<AlertState>((set, get) => ({
       lastIdx = null;
 
       clearTimeout(timeout);
-    }, 5000);
+    }, 2000);
   },
 }));

app/src/Lib/styles/lib.scss

@@ -180,15 +180,15 @@
   }
 
   &-enter-active {
-    @apply transform opacity-100 scale-100 duration-300;
+    @apply transform opacity-100 scale-100 duration-200;
   }
 
   &-exit {
     @apply opacity-100 scale-100;
   }
 
   &-exit-active {
-    @apply transform opacity-0 scale-95 duration-300;
+    @apply transform opacity-0 scale-95 duration-200;
   }
 
   &__backdrop {

app/src/Shared/components/AppNavbar.tsx

@@ -14,7 +14,7 @@ import JAvatar from 'src/Lib/JAvatar';
 interface Props {}
 
 const AppNavbar: React.FC<Props> = () => {
-  const { setAlert } = useAlert();
+  const setAlert = useAlert((s) => s.setAlert);
   const isLoggedIn = useUserStore((state) => state.isLoggedIn);
   const {
     user: { username, image },
@@ -41,10 +41,14 @@ const AppNavbar: React.FC<Props> = () => {
             </Link>
           </div>
           <div className="flex space-x-1 items-center">
-            <div className="hidden sm:block">
-              <JButton noBg icon="ion:heart-outline" size="25px" sm dense />
-            </div>
-            <JButton noBg icon="ion:chatbubble-ellipses-outline" size="25px" dense sm />
+            {isLoggedIn && (
+              <>
+                <div className="hidden sm:block">
+                  <JButton noBg icon="ion:heart-outline" size="25px" sm dense />
+                </div>
+                <JButton noBg icon="ion:chatbubble-ellipses-outline" size="25px" dense sm />
+              </>
+            )}
             <div className="hidden sm:block">
               {isLoggedIn && (
                 <JMenu

app/src/Shared/layouts/Home.tsx

@@ -20,6 +20,7 @@ const Authorized: React.FC<Props> = ({ bottomNavSlot, rightNavSlot, leftNavSlot,
       <UserBottomDrawer />
 
       <aside className="j-layout__leftbar">{leftNavSlot}</aside>
+
       <main className="j-layout__content">
         {!!topNavSlot && <div className="j-layout__topbar"> {topNavSlot} </div>}
         <Outlet />

app/src/User/components/DemoDialog.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import JButton from 'src/Lib/JButton';
+import JCard from 'src/Lib/JCard';
+import JDialog from 'src/Lib/JDialog';
+
+interface Props {}
+
+const DemoDialog: React.FC<Props> = () => {
+  const [isModal, setModal] = useState(false);
+
+  return (
+    <>
+      {' '}
+      <JDialog isModal={isModal} setModal={setModal}>
+        <JCard style={{ width: '500px' }} className="p-3">
+          Hii
+        </JCard>
+      </JDialog>
+      <JButton label="toggle" onClick={() => setModal(true)} />
+    </>
+  );
+};
+
+export default DemoDialog;

app/src/utils/helpers.ts

@@ -120,3 +120,13 @@ export function timeAgo(time: Date | string) {
 
   return getTimeago(new Date(time), new Date());
 }
+
+function dec2hex(dec: any) {
+  return dec.toString(16).padStart(2, '0');
+}
+
+export function randomId(len?: number) {
+  var arr = new Uint8Array((len || 30) / 2);
+  window.crypto.getRandomValues(arr);
+  return Array.from(arr, dec2hex).join('');
+}

app/src/utils/hooks.ts

@@ -1,5 +1,5 @@
 import { AxiosResponse } from 'axios';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useUserStore } from 'src/User/store/useUserStore';
 import { PaginationParams, ResponseSchema } from 'src/utils/types';
 
@@ -9,14 +9,16 @@ export function useClickoutside<T extends HTMLElement>(cb: () => any) {
 
   useEffect(() => {
     function handleClickOutside(event: any) {
+      console.log();
+
       if (ref.current && !ref.current.contains(event.target)) {
-        memoCb();
+        return memoCb();
       }
     }
+
     document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [ref]);
 
   return [ref];