From 701f4f09003a894e72b1048a8bad300586677715 Mon Sep 17 00:00:00 2001 From: Hersh Lalwani Date: Mon, 7 Oct 2024 21:13:58 -0500 Subject: [PATCH 01/10] resizable RHS&LHS --- package-lock.json | 11 ++++++ package.json | 1 + src/pages/dashboard/index.tsx | 72 ++++++++++++++++++++++++++++++++--- 3 files changed, 78 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26120ee6..30f2326d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "react-apexcharts": "^1.3.9", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", + "react-resizable-panels": "^2.1.4", "style-loader": "^3.3.1", "tailwindcss": "^3.0.23", "ts-node": "^10.9.1", @@ -10771,6 +10772,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-resizable-panels": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.4.tgz", + "integrity": "sha512-kzue8lsoSBdyyd2IfXLQMMhNujOxRoGVus+63K95fQqleGxTfvgYLTzbwYMOODeAHqnkjb3WV/Ks7f5+gDYZuQ==", + "license": "MIT", + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-simple-code-editor": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.13.1.tgz", diff --git a/package.json b/package.json index 61709f26..4f5f24fe 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-apexcharts": "^1.3.9", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", + "react-resizable-panels": "^2.1.4", "style-loader": "^3.3.1", "tailwindcss": "^3.0.23", "ts-node": "^10.9.1", diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index dbf27506..7931ce6d 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,8 +1,10 @@ -import { Card, Grid } from '@mui/material'; +import { Card, Grid, useMediaQuery } from '@mui/material'; import type { NextPage } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; +import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; +import { Direction } from 'react-resizable-panels/dist/declarations/src/types'; import Carousel from '../../components/common/Carousel/carousel'; import Compare from '../../components/common/Compare/compare'; @@ -673,6 +675,38 @@ export const Dashboard: NextPage = () => { } } + const panelLRef = useRef(null); + const panelRRef = useRef(null); + const panelTVert = useRef(null); + const isSmallScreen = useMediaQuery('(max-width: 650px)'); + const [panelsDirection, setPanelsDirection] = useState('horizontal'); + // Runs when window is resized to change format + useEffect(function mount() { + window.addEventListener('resize', handleWhenResized); + return () => {window.removeEventListener("resize", handleWhenResized)}; + }) + // Runs once to decide mobile or desktop layout for initial load + useEffect(() => { + let ignore = false; + if (!ignore) handleWhenResized() + return () => { ignore = true; } + }); + // Changing using useMediaQuery when window size is >650px or <650px + const handleWhenResized = () => { + if(isSmallScreen) { + panelTVert.current?.expand() + setPanelsDirection('vertical') + } else { + panelTVert.current?.collapse() + setPanelsDirection('horizontal') + panelLRef.current?.resize(50) + } + }; + // Resets RHS & LHS to 50/50 when double clicking handle + const handleResizeDoubleClick = () => { + panelLRef.current?.resize(50); + }; + //Main content: loading, error, or normal let contentComponent; @@ -728,8 +762,34 @@ export const Dashboard: NextPage = () => { - - + + + + {tabs} + + + + + + + + + + {tabs} + + + + + {/* + { removeFromCompare={removeFromCompare} /> - + {tabs} - + */} ); } From 8081cd59873d9de57ae3a3ae4fcbc9ab69ece4f3 Mon Sep 17 00:00:00 2001 From: Hersh Lalwani Date: Mon, 7 Oct 2024 21:37:47 -0500 Subject: [PATCH 02/10] prettier formatting --- src/pages/dashboard/index.tsx | 60 ++++++++++++++++++++++++----------- 1 file changed, 42 insertions(+), 18 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 7931ce6d..649cd8dd 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -3,7 +3,12 @@ import type { NextPage } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import React, { useEffect, useRef, useState } from 'react'; -import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; +import { + ImperativePanelHandle, + Panel, + PanelGroup, + PanelResizeHandle, +} from 'react-resizable-panels'; import { Direction } from 'react-resizable-panels/dist/declarations/src/types'; import Carousel from '../../components/common/Carousel/carousel'; @@ -679,27 +684,32 @@ export const Dashboard: NextPage = () => { const panelRRef = useRef(null); const panelTVert = useRef(null); const isSmallScreen = useMediaQuery('(max-width: 650px)'); - const [panelsDirection, setPanelsDirection] = useState('horizontal'); + const [panelsDirection, setPanelsDirection] = + useState('horizontal'); // Runs when window is resized to change format useEffect(function mount() { window.addEventListener('resize', handleWhenResized); - return () => {window.removeEventListener("resize", handleWhenResized)}; - }) + return () => { + window.removeEventListener('resize', handleWhenResized); + }; + }); // Runs once to decide mobile or desktop layout for initial load useEffect(() => { let ignore = false; - if (!ignore) handleWhenResized() - return () => { ignore = true; } + if (!ignore) handleWhenResized(); + return () => { + ignore = true; + }; }); // Changing using useMediaQuery when window size is >650px or <650px const handleWhenResized = () => { - if(isSmallScreen) { - panelTVert.current?.expand() - setPanelsDirection('vertical') + if (isSmallScreen) { + panelTVert.current?.expand(); + setPanelsDirection('vertical'); } else { - panelTVert.current?.collapse() - setPanelsDirection('horizontal') - panelLRef.current?.resize(50) + panelTVert.current?.collapse(); + setPanelsDirection('horizontal'); + panelLRef.current?.resize(50); } }; // Resets RHS & LHS to 50/50 when double clicking handle @@ -762,14 +772,25 @@ export const Dashboard: NextPage = () => { - - + + {tabs} - + { removeFromCompare={removeFromCompare} /> - - + + {tabs} - + {/* Date: Tue, 15 Oct 2024 19:11:43 -0500 Subject: [PATCH 03/10] fixed resize on add to compare + prettier formatting --- src/pages/dashboard/index.tsx | 9 +++++++-- styleguide/index.html | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 649cd8dd..14883c2e 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -709,7 +709,6 @@ export const Dashboard: NextPage = () => { } else { panelTVert.current?.collapse(); setPanelsDirection('horizontal'); - panelLRef.current?.resize(50); } }; // Resets RHS & LHS to 50/50 when double clicking handle @@ -805,7 +804,13 @@ export const Dashboard: NextPage = () => { className="p-1 w-[2px] rounded-md opacity-75 transition ease-in-out bg-transparent hover:bg-blue-950 duration-75" onDoubleClick={handleResizeDoubleClick} /> - + {tabs} diff --git a/styleguide/index.html b/styleguide/index.html index 1952f62d..2471da71 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -1,4 +1,4 @@ - + From 6c37f6fea006c9757ee02a3d9be2604cafca52a9 Mon Sep 17 00:00:00 2001 From: Hersh Lalwani Date: Tue, 15 Oct 2024 19:26:31 -0500 Subject: [PATCH 04/10] prettier formatting --- package-lock.json | 13 +++++++------ package.json | 2 +- styleguide/index.html | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30f2326d..ca68ded1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-resizable-panels": "^2.1.4", - "style-loader": "^3.3.1", + "style-loader": "^4.0.0", "tailwindcss": "^3.0.23", "ts-node": "^10.9.1", "webpack": "^5.72.0" @@ -12057,18 +12057,19 @@ } }, "node_modules/style-loader": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz", - "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", + "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==", + "license": "MIT", "engines": { - "node": ">= 12.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "^5.0.0" + "webpack": "^5.27.0" } }, "node_modules/styled-components": { diff --git a/package.json b/package.json index 4f5f24fe..44d6a0cb 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-resizable-panels": "^2.1.4", - "style-loader": "^3.3.1", + "style-loader": "^4.0.0", "tailwindcss": "^3.0.23", "ts-node": "^10.9.1", "webpack": "^5.72.0" diff --git a/styleguide/index.html b/styleguide/index.html index 2471da71..1952f62d 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -1,4 +1,4 @@ - + From 66e87dfdef811e6d7b6308823069d8b98107f107 Mon Sep 17 00:00:00 2001 From: Hersh Lalwani Date: Mon, 4 Nov 2024 15:55:59 -0600 Subject: [PATCH 05/10] Fixed Firefox/Chrome misformatting --- src/pages/dashboard/index.tsx | 124 +++++++++++++++------------------- 1 file changed, 54 insertions(+), 70 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 1c6f5d50..51cb6e3a 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -9,7 +9,6 @@ import { PanelGroup, PanelResizeHandle, } from 'react-resizable-panels'; -import { Direction } from 'react-resizable-panels/dist/declarations/src/types'; import Carousel from '../../components/common/Carousel/carousel'; import Compare from '../../components/common/Compare/compare'; @@ -688,35 +687,10 @@ export const Dashboard: NextPage = () => { const panelLRef = useRef(null); const panelRRef = useRef(null); - const panelTVert = useRef(null); const isSmallScreen = useMediaQuery('(max-width: 650px)'); - const [panelsDirection, setPanelsDirection] = - useState('horizontal'); // Runs when window is resized to change format - useEffect(function mount() { - window.addEventListener('resize', handleWhenResized); - return () => { - window.removeEventListener('resize', handleWhenResized); - }; - }); // Runs once to decide mobile or desktop layout for initial load - useEffect(() => { - let ignore = false; - if (!ignore) handleWhenResized(); - return () => { - ignore = true; - }; - }); // Changing using useMediaQuery when window size is >650px or <650px - const handleWhenResized = () => { - if (isSmallScreen) { - panelTVert.current?.expand(); - setPanelsDirection('vertical'); - } else { - panelTVert.current?.collapse(); - setPanelsDirection('horizontal'); - } - }; // Resets RHS & LHS to 50/50 when double clicking handle const handleResizeDoubleClick = () => { panelLRef.current?.resize(50); @@ -777,51 +751,61 @@ export const Dashboard: NextPage = () => { - - - - {tabs} - - - - - + + + + + + {tabs} + + + + ) : ( + + + + + - - - - - {tabs} - - - + + + {tabs} + + + + )} ); } From 91de22777255ad570b20e729dd87bd186a463ceb Mon Sep 17 00:00:00 2001 From: Tyler Hill Date: Mon, 4 Nov 2024 16:40:11 -0600 Subject: [PATCH 06/10] Match grid max-width --- src/pages/dashboard/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 51cb6e3a..9dee4ea7 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -687,10 +687,7 @@ export const Dashboard: NextPage = () => { const panelLRef = useRef(null); const panelRRef = useRef(null); - const isSmallScreen = useMediaQuery('(max-width: 650px)'); - // Runs when window is resized to change format - // Runs once to decide mobile or desktop layout for initial load - // Changing using useMediaQuery when window size is >650px or <650px + const isSmallScreen = useMediaQuery('(max-width: 600px)'); // Resets RHS & LHS to 50/50 when double clicking handle const handleResizeDoubleClick = () => { panelLRef.current?.resize(50); From e2ebe19d0b6b815566826f8ff5d82f184b8099cb Mon Sep 17 00:00:00 2001 From: Tyler Hill Date: Mon, 4 Nov 2024 16:42:50 -0600 Subject: [PATCH 07/10] Styling --- src/pages/dashboard/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 9dee4ea7..8fba74c7 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -787,12 +787,11 @@ export const Dashboard: NextPage = () => { /> Date: Mon, 4 Nov 2024 16:43:27 -0600 Subject: [PATCH 08/10] Render components before Make small screen vertical always --- src/pages/dashboard/index.tsx | 62 ++++++++++++++--------------------- 1 file changed, 24 insertions(+), 38 deletions(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 8fba74c7..c5d31cf4 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -735,6 +735,22 @@ export const Dashboard: NextPage = () => { removeFromCompare={removeFromCompare} />, ); + const searchResultsTable = ( + + ); + const carousel = ( + + {tabs} + + ); contentComponent = ( <> @@ -749,42 +765,14 @@ export const Dashboard: NextPage = () => { {isSmallScreen ? ( - - - - - - - {tabs} - - - +
+ {carousel} + {searchResultsTable} +
) : ( - - - + + + {searchResultsTable} { minSize={30} defaultSize={50} > - - {tabs} - + {carousel} )} From b7c3eaef5bde094d41a4ab061b5561c4022a77f2 Mon Sep 17 00:00:00 2001 From: Tyler Hill Date: Tue, 5 Nov 2024 23:39:13 -0600 Subject: [PATCH 09/10] Fix RHS padding --- src/pages/dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 9a9a36d2..caae7d8a 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -786,7 +786,7 @@ export const Dashboard: NextPage = () => { minSize={30} defaultSize={50} > -
+
{carousel}
From 267e971081ddc2984c42ab5d24a288b6e559cffc Mon Sep 17 00:00:00 2001 From: Tyler Hill Date: Mon, 11 Nov 2024 19:55:49 -0600 Subject: [PATCH 10/10] Fix for horizontal expansion --- src/pages/dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index e586ebb8..58c5c681 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -819,7 +819,7 @@ export const Dashboard: NextPage = () => { onDoubleClick={handleResizeDoubleClick} />