From ccea1ef1e5c4e5a10897ad266d6ebec71bc009d3 Mon Sep 17 00:00:00 2001 From: Reed Vogt Date: Mon, 6 May 2024 12:00:08 -0700 Subject: [PATCH] [fix(component)][navigation]: fixed navbar resize issue DESCRIPTION: This commit fixes an issue with the navbar resizing incorrectly. BREAKING_CHANGE: n/a --- .eslintrc.json | 4 +- .../SpecificStyledComponents.jsx | 7 +- .../PortfolioViewLayout/TopCardsSwiper.jsx | 32 ++-- .../collection/PortfolioViewLayout/index.jsx | 150 ++---------------- src/layout/navigation/index.jsx | 58 +++++-- 5 files changed, 84 insertions(+), 167 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 7473a73..0451e9c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -22,7 +22,7 @@ }, "plugins": [ "react", - // "react-hooks", + "react-hooks", "@typescript-eslint", "prettier" ], @@ -38,7 +38,7 @@ ], "react/react-in-jsx-scope": "off", "react/prop-types": "off", - // "react-hooks/rules-of-hooks": "error", + "react-hooks/rules-of-hooks": "error", // "react-hooks/exhaustive-deps": "warn", "eol-last": ["error", "always"], "object-curly-spacing": ["error", "always"], diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx index 1671d36..201cc20 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx @@ -6,14 +6,13 @@ const CardWrapper = styled(RCMainCard)(({ theme }) => ({ color: theme.palette.primary.light, overflow: 'hidden', position: 'relative', - width: 210, - height: 210, - '&:before': { content: '""', position: 'absolute', background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`, borderRadius: '50%', + width: 210, + height: 210, top: -160, right: -130, }, @@ -21,6 +20,8 @@ const CardWrapper = styled(RCMainCard)(({ theme }) => ({ content: '""', position: 'absolute', borderRadius: '50%', + width: 210, + height: 210, top: -30, right: -180, }, diff --git a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx index faa47f7..f452a5c 100644 --- a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx +++ b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx @@ -27,21 +27,21 @@ const TopCardsSwiper = () => { const [activeCardIndex, setActiveCardIndex] = useState(0); const { collectionMetaData } = useManager(); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); - useEffect(() => { - const swiperInstance = swiperRef.current?.swiper; - if (swiperInstance) { - swiperInstance.on('slideChange', () => { - const { activeIndex } = swiperInstance; - handleSlideChange(activeIndex); - if ((activeIndex + 1) % 4 === 0) { - swiperInstance.autoplay.stop(); - setTimeout(() => { - swiperInstance?.autoplay?.start(); - }, 10000); - } - }); - } - }, []); + // useEffect(() => { + // const swiperInstance = swiperRef.current?.swiper; + // if (swiperInstance) { + // swiperInstance.on('slideChange', () => { + // const { activeIndex } = swiperInstance; + // handleSlideChange(activeIndex); + // if ((activeIndex + 1) % 4 === 0) { + // swiperInstance.autoplay.stop(); + // setTimeout(() => { + // swiperInstance?.autoplay?.start(); + // }, 10000); + // } + // }); + // } + // }, []); return ( { justifyContent: 'center', border: 'none', }} - ref={swiperRef} + // ref={swiperRef} > { return ( { variant={isChart ? 'chart' : 'default'} hasTitle={false} noBottomMargin={false} - // isChart={isChart ? true : false} sx={{ height: '100%' }} > {content} @@ -64,10 +63,6 @@ const PortfolioViewLayout = () => { const { isMobile } = useBreakpoint(); const { selectedCollection } = useManager(); const selectedCollectionId = localStorage.getItem('selectedCollectionId'); - // const percentageChange = - // roundToNearestTenth( - // selectedCollection?.collectionStatistics?.percentageChange?.value - // ) || 0; useEffect(() => { if (!selectedCollection?.cards) { return; @@ -99,69 +94,8 @@ const PortfolioViewLayout = () => { lg={7} sx={{ display: 'flex', flexDirection: 'column' }} > - {/* - - - show_chart - - - } - sideText={`Change: ${percentageChange}%`} - /> - */} {/* CHART ROW SECTION */} - {/* {selectedCollection?.cards?.length < 5 ? ( - - - - - - - - - - Chart stuck loading? - - - No worries, the chart requires that users add a minimum of 5 - cards before chart functionality is activated to ensure the - best possible chart. - - - - - ) : ( */} - {/* )} */} {/* FORM SELECTOR ROW SECTION */} {/* TOP CARDS ROW SECTION */} @@ -280,27 +214,6 @@ const ChartAreaComponent = React.memo(() => { return ticks.split(' ').map((tick) => new Date(tick).getTime()); }, [timeRange]); - const debouncedUpdateChartData = debounce(() => { - const { selectedCollection } = useManager(); - if (!selectedCollection) { - return; - } - setCollection(selectedCollection); - // handleSelectCollection(selectedCollection); - }, 300); // Adjust the debounce delay as needed - - useEffect(() => { - const handleResize = () => { - debouncedUpdateChartData(); - }; - - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }, [debouncedUpdateChartData]); - if (!collection) { return ; } @@ -359,56 +272,27 @@ const ChartAreaComponent = React.memo(() => { ) : ( }> - - - - - - - + + + + + )} ); }); -// return renderCardContainer( -// }> -// -// -// -// -// -// -// -// , -// true -// ); -// }); ChartAreaComponent.displayName = 'ChartAreaComponent'; //!--------------------- CARD DISPLAY COMPONENT --------------------- const TopCardsDisplayRowComponent = React.memo(({ isXs }) => { diff --git a/src/layout/navigation/index.jsx b/src/layout/navigation/index.jsx index a607462..bdd5aff 100644 --- a/src/layout/navigation/index.jsx +++ b/src/layout/navigation/index.jsx @@ -151,7 +151,42 @@ const NavProfileItem = ({ username, type }) => { ); }; -const renderBaseNavItems = ({ type, toggleSidebar, items }) => { +// const renderBaseNavItems = ({ type, toggleSidebar, items }) => { +// const navigate = useNavigate(); +// const [springs] = useSprings(items?.length, (index) => ({ +// from: { opacity: 0, transform: 'translateY(-20px)' }, +// to: { opacity: 1, transform: 'translateY(0)' }, +// delay: index * 100, +// })); +// return items.map((item, index) => ( +// +// +// navigate(item.routerPath)} +// // to={item.routerPath} +// name={item.name} +// action="navigate" +// // toggle={toggleSidebar} +// /> +// +// +// )); +// }; +const BaseNavItems = React.memo(({ type, items }) => { const navigate = useNavigate(); const [springs] = useSprings(items?.length, (index) => ({ from: { opacity: 0, transform: 'translateY(-20px)' }, @@ -176,16 +211,17 @@ const renderBaseNavItems = ({ type, toggleSidebar, items }) => { navigate(item.routerPath)} - // to={item.routerPath} name={item.name} - action="navigate" - // toggle={toggleSidebar} /> )); -}; +}); + +BaseNavItems.displayName = 'BaseNavItems'; + const TopNav = (props) => { const { type, username, toggleSidebar } = props; const { theme } = useMode(); @@ -211,12 +247,7 @@ const TopNav = (props) => { - {!isMd && - renderBaseNavItems({ - items: baseNavItems, - type: type, - toggleSidebar, - })} + {!isMd && } @@ -293,11 +324,12 @@ const SideNav = (props) => { - {renderBaseNavItems({ + + {/* {renderBaseNavItems({ items: baseNavItems, // Pass the base nav items type: props.type, toggleSidebar, - })} + })} */}