WIP use joined room optimization (DON'T USE – not functional)

package.json

@@ -61,7 +61,7 @@
     "deep-copy": "^1.4.2",
     "deep-object-diff": "^1.1.0",
     "deox": "^3.2.1",
-    "dstnd-io": "https://github.com/dstnd/dstnd-io.git#756953a",
+    "dstnd-io": "https://github.com/dstnd/dstnd-io.git#354f453",
     "env-cmd": "^10.1.0",
     "eslint-plugin-prettier": "3.1.3",
     "fp-ts": "^2.8.2",

src/components/ContainerWithDimensions/useContainerDimensions.tsx

@@ -11,21 +11,32 @@ export type ContainerDimensions = {
  * Hook that alerts clicks outside of the passed ref
  */
 export function useContainerDimensions(targetRef: React.RefObject<HTMLElement>) {
-  const [dimensions, setDimensions] = useState<ContainerDimensions>({ 
+  const [dimensions, setDimensions] = useState<ContainerDimensions>({
     width: 0,
     height: 0,
     updated: false,
   });
 
   useEffect(() => {
     const onResizeHandler = () => {
-      if (targetRef.current) {
-        setDimensions({
+      setDimensions((prev) => {
+        if (!targetRef.current) {
+          return prev;
+        }
+
+        const next = {
           width: targetRef.current.offsetWidth,
           height: targetRef.current.offsetHeight,
           updated: true,
-        });
-      }
+        };
+
+        // If nothing changed return prev!
+        if (prev.height === next.height && prev.width === next.width && next.updated === true) {
+          return prev;
+        }
+
+        return next;
+      });
     };
 
     onResizeHandler();

src/modules/Landing/LandingPage/LandingPage.tsx

@@ -81,13 +81,13 @@ export const LandingPage: React.FC<Props> = () => {
               {deviceSize.isDesktop ? (
                 <CreateRoomButtonWidget
                   label="Analyze"
-                  type="primary"
+                  type="secondary"
                   withBadge={{
                     text: 'New',
                     color: theme.name === 'lightDefault' ? 'negative' : 'primaryDark',
                     side: 'right',
                   }}
-                  clear
+                  // clear
                   size="small"
                   createRoomSpecs={{
                     type: 'private',

src/modules/Room/JoinRoomBouncer.tsx

@@ -1,5 +1,5 @@
 import { RoomRecord } from 'dstnd-io';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { AwesomeLoaderPage } from 'src/components/AwesomeLoader';
 import { FunWallpaper } from 'src/components/FunWallpaper';
 import { createUseStyles } from 'src/lib/jss';
@@ -12,6 +12,9 @@ import { useJoinedRoom } from './hooks/useJoinedRoom';
 import { JoinRoomWizard } from './wizards/JoinRoomWizard';
 import * as roomResources from './resources';
 import { AsyncOk } from 'ts-async-results';
+import usePrevious from 'use-previous';
+import { console } from 'window-or-global';
+import { diff } from 'deep-object-diff';
 
 type Props = {
   slug: RoomRecord['slug'];
@@ -31,6 +34,18 @@ export const JoinRoomBouncer: React.FC<Props> = (props) => {
   const [roomInfo, setRoomInfo] = useState<RoomRecord>();
   const [session, setSession] = useSession<SessionState>('roomBouncer');
 
+  const prevJoinedRoom = useRef(joinedRoom);
+
+  useEffect(() => {
+    console.group('[JoinRoomBounced] joinedRoomUpdated');
+    console.log('prev', prevJoinedRoom.current);
+    console.log('current', joinedRoom);
+    console.log('diff', diff(prevJoinedRoom.current || {}, joinedRoom || {}));
+    console.groupEnd();
+
+    prevJoinedRoom.current = joinedRoom;
+  }, [joinedRoom])
+
   // Fetch the Room Info
   useEffect(() => {
     if (peerState.status !== 'open') {

src/modules/Room/Layouts/Generic/DesktopRoomLayout/DesktopRoomLayout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import { createUseStyles } from 'src/lib/jss';
 import { useContainerDimensions } from 'src/components/ContainerWithDimensions';
@@ -41,13 +41,9 @@ export const DesktopRoomLayout: React.FC<Props> = ({
   const containerRef = useRef(null);
   const containerDimensions = useContainerDimensions(containerRef);
 
-  const horizontalOffset = (offsets.right || 0) + (offsets?.left || 0);
-  const verticalOffset = (offsets?.top || 0) + (offsets?.bottom || 0);
-  const [isMobile, setIsMobile] = useState(getIsMobile(containerDimensions));
-
   useBodyClass([cls.disableBodyScroll]);
 
-  const getLayout = () => {
+  const getLayout = useCallback(() => {
     if (!containerDimensions.updated) {
       return {
         leftSide: 0,
@@ -57,6 +53,8 @@ export const DesktopRoomLayout: React.FC<Props> = ({
       };
     }
 
+    const horizontalOffset = (offsets.right || 0) + (offsets?.left || 0);
+    const verticalOffset = (offsets?.top || 0) + (offsets?.bottom || 0);
     const width = containerDimensions.width - horizontalOffset - minSpaceBetween * 2;
     const height = containerDimensions.height - verticalOffset;
 
@@ -72,71 +70,103 @@ export const DesktopRoomLayout: React.FC<Props> = ({
         ...props.ratios,
       }
     );
-  };
+  }, [getLayoutSizes, containerDimensions, minSpaceBetween]);
 
-  const [layout, setLayout] = useState(() => getLayout());
+  const { layout, extendedDimensions } = useMemo(() => {
+    const isMobile = getIsMobile(containerDimensions);
+    const layout = getLayout();
+    const verticalPadding = containerDimensions.height - layout.mainArea;
+    const occupiedWidth = Math.floor(
+      layout.leftSide + layout.mainArea + layout.rightSide + minSpaceBetween * 2
+    );
 
-  useEffect(() => {
-    setLayout(getLayout());
-    setIsMobile(getIsMobile(containerDimensions));
-  }, [containerDimensions]);
+    const extendedDimensions: Omit<GenericLayoutExtendedDimensions, 'container'> = {
+      left: {
+        width: layout.leftSide,
+        height: layout.mainArea,
+        horizontalPadding: 0,
+        verticalPadding,
+      },
+      right: {
+        width: layout.rightSide,
+        height: layout.mainArea,
+        horizontalPadding: 0,
+        verticalPadding,
+      },
+      center: {
+        width: layout.mainArea,
+        height: layout.mainArea,
+        horizontalPadding: 0,
+        verticalPadding,
+      },
+      // The activity
+      main: {
+        // width: occupiedWidth,
+        width: layout.leftSide + layout.mainArea,
+        height: containerDimensions.height,
+        horizontalPadding: containerDimensions.width - occupiedWidth,
+        verticalPadding,
+      },
+      top: {
+        width: containerDimensions.width,
+        height: props.topHeight,
+        horizontalPadding: 0,
+        verticalPadding,
+      },
+      bottom: {
+        width: containerDimensions.width,
+        height: props.bottomHeight,
+        horizontalPadding: 0,
+        verticalPadding,
+      },
+      isMobile,
+    };
 
-  const verticalPadding = containerDimensions.height - layout.mainArea;
+    return {
+      extendedDimensions,
+      layout,
+    };
+  }, [containerDimensions, minSpaceBetween]);
 
-  const occupiedWidth = Math.floor(
-    layout.leftSide + layout.mainArea + layout.rightSide + minSpaceBetween * 2
+  const topComponent = useMemo(
+    () =>
+      props.renderTopComponent({
+        ...extendedDimensions,
+        container: extendedDimensions.top,
+      }),
+    [props.renderTopComponent, extendedDimensions]
   );
 
-  const extendedDimensions: Omit<GenericLayoutExtendedDimensions, 'container'> = {
-    left: {
-      width: layout.leftSide,
-      height: layout.mainArea,
-      horizontalPadding: 0,
-      verticalPadding,
-    },
-    right: {
-      width: layout.rightSide,
-      height: layout.mainArea,
-      horizontalPadding: 0,
-      verticalPadding,
-    },
-    center: {
-      width: layout.mainArea,
-      height: layout.mainArea,
-      horizontalPadding: 0,
-      verticalPadding,
-    },
-    // The activity
-    main: {
-      // width: occupiedWidth,
-      width: layout.leftSide + layout.mainArea,
-      height: containerDimensions.height,
-      horizontalPadding: containerDimensions.width - occupiedWidth,
-      verticalPadding,
-    },
-    top: {
-      width: containerDimensions.width,
-      height: props.topHeight,
-      horizontalPadding: 0,
-      verticalPadding,
-    },
-    bottom: {
-      width: containerDimensions.width,
-      height: props.bottomHeight,
-      horizontalPadding: 0,
-      verticalPadding,
-    },
-    isMobile,
-  };
+  const activityComponent = useMemo(
+    () =>
+      props.renderActivityComponent({
+        ...extendedDimensions,
+        container: extendedDimensions.main,
+      }),
+    [props.renderActivityComponent, extendedDimensions]
+  );
+
+  const rightSideComponent = useMemo(
+    () =>
+      props.renderRightSideComponent({
+        ...extendedDimensions,
+        container: extendedDimensions.right,
+      }),
+    [props.renderRightSideComponent, extendedDimensions]
+  );
+
+  const renderBottomComponent = useMemo(
+    () =>
+      props.renderBottomComponent({
+        ...extendedDimensions,
+        container: extendedDimensions.bottom,
+      }),
+    [props.renderBottomComponent, extendedDimensions]
+  );
 
   return (
     <div className={cx(cls.container, className)}>
-      <div style={{ height: props.topHeight }}>
-        {props.renderTopComponent({
-          ...extendedDimensions,
-          container: extendedDimensions.top,
-        })}
-      </div>
+      <div style={{ height: props.topHeight }}>{topComponent}</div>
       <div
         className={cls.contentContainer}
         ref={containerRef}
@@ -149,18 +179,17 @@ export const DesktopRoomLayout: React.FC<Props> = ({
           <main
             className={cls.mainArea}
             style={{
-              width: `${extendedDimensions.main.width + extendedDimensions.main.horizontalPadding}px`,
+              width: `${
+                extendedDimensions.main.width + extendedDimensions.main.horizontalPadding
+              }px`,
               // This is a hack to go above the bottom components
               //  But ideally it could be done better!
               // This one was introduced on Oct 14th when I added the Board Settings Bar
               //  But it could also be given as a config from outside if needed!
               height: `calc(100% + ${props.bottomHeight}px)`,
             }}
           >
-            {props.renderActivityComponent({
-              ...extendedDimensions,
-              container: extendedDimensions.main,
-            })}
+            {activityComponent}
           </main>
           <aside
             style={{
@@ -174,24 +203,16 @@ export const DesktopRoomLayout: React.FC<Props> = ({
               position: 'relative',
             }}
           >
-            {props.renderRightSideComponent({
-              ...extendedDimensions,
-              container: extendedDimensions.right,
-            })}
+            {rightSideComponent}
           </aside>
         </div>
       </div>
-      <div style={{ height: props.bottomHeight }}>
-        {props.renderBottomComponent({
-          ...extendedDimensions,
-          container: extendedDimensions.bottom,
-        })}
-      </div>
+      <div style={{ height: props.bottomHeight }}>{renderBottomComponent}</div>
     </div>
   );
 };
 
-const useStyles = createUseStyles<CustomTheme>(theme => ({
+const useStyles = createUseStyles<CustomTheme>((theme) => ({
   container: {
     width: '100%',
     height: '100%',