From f60e9b26291f6dba3191f2d023279f1e85f02656 Mon Sep 17 00:00:00 2001 From: soulsam480 Date: Sun, 5 Sep 2021 18:14:10 +0530 Subject: [PATCH] fix: perf imprvements --- app/index.html | 1 + app/src/App.tsx | 23 ++++++++++++++++++- app/src/Lib/JDialog.tsx | 30 ++++++++++++++++++------- app/src/Lib/context/dialog.ts | 12 ++++++++++ app/src/Lib/store/alerts.tsx | 2 +- app/src/Lib/styles/lib.scss | 4 ++-- app/src/Shared/components/AppNavbar.tsx | 14 +++++++----- app/src/Shared/layouts/Home.tsx | 1 + app/src/User/components/DemoDialog.tsx | 24 ++++++++++++++++++++ app/src/utils/helpers.ts | 10 +++++++++ app/src/utils/hooks.ts | 12 +++++----- 11 files changed, 111 insertions(+), 22 deletions(-) create mode 100644 app/src/Lib/context/dialog.ts create mode 100644 app/src/User/components/DemoDialog.tsx diff --git a/app/index.html b/app/index.html index ca4ee4e..1bc1ff9 100644 --- a/app/index.html +++ b/app/index.html @@ -30,6 +30,7 @@
+
\ No newline at end of file diff --git a/app/src/App.tsx b/app/src/App.tsx index 84eab25..257fb4c 100644 --- a/app/src/App.tsx +++ b/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 = () => { const { Routes } = useJuneRouter(); const { isLoading, auth } = useAuth(); - const { isLoading: isCatchLoading } = useAuthRedirect(); + // const Dialogs = useRef([]); + + // 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 = () => { <> {!isLoading && !isCatchLoading && (
+ {/* */} }>
{Routes}
{' '} + {/* */}
)} diff --git a/app/src/Lib/JDialog.tsx b/app/src/Lib/JDialog.tsx index 34f6749..1ad54c3 100644 --- a/app/src/Lib/JDialog.tsx +++ b/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 = ({ isModal, setModal, children }) => { const [ref] = useClickoutside(() => 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 = ({ 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( -
+ , - document.body, + document.getElementById('dialog-root') as HTMLDivElement, ); }; diff --git a/app/src/Lib/context/dialog.ts b/app/src/Lib/context/dialog.ts new file mode 100644 index 0000000..afca471 --- /dev/null +++ b/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 }); diff --git a/app/src/Lib/store/alerts.tsx b/app/src/Lib/store/alerts.tsx index 2f4672f..7c9bf74 100644 --- a/app/src/Lib/store/alerts.tsx +++ b/app/src/Lib/store/alerts.tsx @@ -21,6 +21,6 @@ export const useAlert = create((set, get) => ({ lastIdx = null; clearTimeout(timeout); - }, 5000); + }, 2000); }, })); diff --git a/app/src/Lib/styles/lib.scss b/app/src/Lib/styles/lib.scss index 7ff7521..07c1a99 100644 --- a/app/src/Lib/styles/lib.scss +++ b/app/src/Lib/styles/lib.scss @@ -180,7 +180,7 @@ } &-enter-active { - @apply transform opacity-100 scale-100 duration-300; + @apply transform opacity-100 scale-100 duration-200; } &-exit { @@ -188,7 +188,7 @@ } &-exit-active { - @apply transform opacity-0 scale-95 duration-300; + @apply transform opacity-0 scale-95 duration-200; } &__backdrop { diff --git a/app/src/Shared/components/AppNavbar.tsx b/app/src/Shared/components/AppNavbar.tsx index 7c7d503..58363a7 100644 --- a/app/src/Shared/components/AppNavbar.tsx +++ b/app/src/Shared/components/AppNavbar.tsx @@ -14,7 +14,7 @@ import JAvatar from 'src/Lib/JAvatar'; interface Props {} const AppNavbar: React.FC = () => { - 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 = () => {
-
- -
- + {isLoggedIn && ( + <> +
+ +
+ + + )}
{isLoggedIn && ( = ({ bottomNavSlot, rightNavSlot, leftNavSlot, +
{!!topNavSlot &&
{topNavSlot}
} diff --git a/app/src/User/components/DemoDialog.tsx b/app/src/User/components/DemoDialog.tsx new file mode 100644 index 0000000..c33e3f7 --- /dev/null +++ b/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 = () => { + const [isModal, setModal] = useState(false); + + return ( + <> + {' '} + + + Hii + + + setModal(true)} /> + + ); +}; + +export default DemoDialog; diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts index 0620279..e421176 100644 --- a/app/src/utils/helpers.ts +++ b/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(''); +} diff --git a/app/src/utils/hooks.ts b/app/src/utils/hooks.ts index e3af8e7..ed838cf 100644 --- a/app/src/utils/hooks.ts +++ b/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(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];