Skip to content

Commit

Permalink
[fix(component)][navigation]: fixed navbar resize issue
Browse files Browse the repository at this point in the history 
DESCRIPTION: This commit fixes an issue with the navbar resizing incorrectly.

BREAKING_CHANGE: n/a
  • Loading branch information
@reedoooo
reedoooo committed May 6, 2024
1 parent 6e7742a commit ccea1ef
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 167 deletions.
4 changes: 2 additions & 2 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"plugins": [
"react",
// "react-hooks",
"react-hooks",
"@typescript-eslint",
"prettier"
],
Expand All @@ -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"],
Expand Down
7 changes: 4 additions & 3 deletions src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,22 @@ 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,
},
'&:after': {
content: '""',
position: 'absolute',
borderRadius: '50%',
width: 210,
height: 210,
top: -30,
right: -180,
},
Expand Down
32 changes: 16 additions & 16 deletions src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Swiper
className="swiper-container"
Expand Down Expand Up @@ -85,7 +85,7 @@ const TopCardsSwiper = () => {
justifyContent: 'center',
border: 'none',
}}
ref={swiperRef}
// ref={swiperRef}
>
<CardWrapper border={false} content={false} theme={theme}>
<FlexBetween
Expand Down
150 changes: 17 additions & 133 deletions src/layout/collection/PortfolioViewLayout/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';

import { styled } from 'styled-components';

import { ResponsiveContainer } from 'recharts';
import { formatDateBasedOnRange, roundToNearestTenth } from 'context/Helpers';

import { useMode, useManager, useBreakpoint } from 'context';

import TopCardsSwiper from './TopCardsSwiper';
import MyPortfolioLineChart from './MyPortfolioLineChart';

import {
BoxHeader,
DashboardBox,
Expand All @@ -25,7 +25,7 @@ import {

import { formFields, prepareTableData } from 'data';
import { ChartArea } from 'layout/REUSABLE_STYLED_COMPONENTS';
import { debounce } from 'lodash';

const renderCardContainer = (content, isChart, isForm) => {
return (
<MDBox
Expand All @@ -41,7 +41,6 @@ const renderCardContainer = (content, isChart, isForm) => {
variant={isChart ? 'chart' : 'default'}
hasTitle={false}
noBottomMargin={false}
// isChart={isChart ? true : false}
sx={{ height: '100%' }}
>
{content}
Expand All @@ -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;
Expand Down Expand Up @@ -99,69 +94,8 @@ const PortfolioViewLayout = () => {
lg={7}
sx={{ display: 'flex', flexDirection: 'column' }}
>
{/* <RCCard hasTitle={false} variant="table" noBottomMargin={false}>
<BoxHeader
title="Collection Card Chart"
subtitle="Chart of the collection price performance"
titleVariant="body1"
icon={
<MDBox border="none">
<RCWrappedIcon
size="large"
bgColor="success"
// color="white"
// sx={{
// background: theme.palette.success.main,
// }}
>
<Icon fontSize="1.5 rem">show_chart</Icon>
</RCWrappedIcon>
</MDBox>
}
sideText={`Change: ${percentageChange}%`}
/>
</RCCard> */}
{/* CHART ROW SECTION */}
{/* {selectedCollection?.cards?.length < 5 ? (
<Grid
container
spacing={2}
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Grid item xs={12} sm={6} md={6} lg={6}>
<StyledInfoPanel theme={theme}>
<CircularProgress color="success" />
</StyledInfoPanel>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={6}>
<StyledInfoPanel theme={theme}>
<Typography
variant="h6"
color="textPrimary"
gutterBottom
theme={theme}
>
Chart stuck loading?
</Typography>
<Typography
variant="body1"
color={theme.palette.text.secondary}
theme={theme}
>
No worries, the chart requires that users add a minimum of 5
cards before chart functionality is activated to ensure the
best possible chart.
</Typography>
</StyledInfoPanel>
</Grid>
</Grid>
) : ( */}
<ChartAreaComponent />
{/* )} */}
{/* FORM SELECTOR ROW SECTION */}
<FormSelectorRow isXs={isMobile} />
{/* TOP CARDS ROW SECTION */}
Expand Down Expand Up @@ -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 <LoadingOverlay />;
}
Expand Down Expand Up @@ -359,56 +272,27 @@ const ChartAreaComponent = React.memo(() => {
</Grid>
) : (
<Suspense fallback={<LoadingOverlay />}>
<ResponsiveContainer
width="100%"
height="100%"
background={'#e0e0e0'}
>
<ChartArea theme={theme} sx={{ minHeight: '500px' }}>
<NivoContainer height={500}>
<MyPortfolioLineChart
key={timeRange}
data={[memoChartData]}
tickValues={tickValues}
validMarkers={[memoMarker]}
xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'}
error={error}
success={success}
grey={grey}
text={theme.palette.text.primary}
/>
</NivoContainer>
</ChartArea>
</ResponsiveContainer>
<ChartArea theme={theme} sx={{ minHeight: '500px' }}>
<NivoContainer height={500}>
<MyPortfolioLineChart
key={timeRange}
data={[memoChartData]}
tickValues={tickValues}
validMarkers={[memoMarker]}
xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'}
error={error}
success={success}
grey={grey}
text={theme.palette.text.primary}
/>
</NivoContainer>
</ChartArea>
</Suspense>
)}
</RCCard>
</MDBox>
);
});
// return renderCardContainer(
// <Suspense fallback={<LoadingOverlay />}>
// <ResponsiveContainer width="100%" height="100%" background={'#e0e0e0'}>
// <ChartArea theme={theme} sx={{ minHeight: '500px' }}>
// <NivoContainer height={500}>
// <MyPortfolioLineChart
// key={timeRange}
// data={[memoChartData]}
// tickValues={tickValues}
// validMarkers={[memoMarker]}
// xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'}
// error={error}
// success={success}
// grey={grey}
// text={theme.palette.text.primary}
// />
// </NivoContainer>
// </ChartArea>
// </ResponsiveContainer>
// </Suspense>,
// true
// );
// });
ChartAreaComponent.displayName = 'ChartAreaComponent';
//!--------------------- CARD DISPLAY COMPONENT ---------------------
const TopCardsDisplayRowComponent = React.memo(({ isXs }) => {
Expand Down
58 changes: 45 additions & 13 deletions src/layout/navigation/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,42 @@ const NavProfileItem = ({ username, type }) => {
</Card>
);
};
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) => (
// <animated.div
// style={{
// ...springs[index],
// width: '100%',
// }}
// key={item.name}
// >
// <ListItem
// key={index}
// sx={{
// maxHeight: 64,
// maxWidth: '100%',
// }}
// >
// <NavItemLink
// type={type}
// icon={item.icon}
// actionFunction={() => navigate(item.routerPath)}
// // to={item.routerPath}
// name={item.name}
// action="navigate"
// // toggle={toggleSidebar}
// />
// </ListItem>
// </animated.div>
// ));
// };
const BaseNavItems = React.memo(({ type, items }) => {
const navigate = useNavigate();
const [springs] = useSprings(items?.length, (index) => ({
from: { opacity: 0, transform: 'translateY(-20px)' },
Expand All @@ -176,16 +211,17 @@ const renderBaseNavItems = ({ type, toggleSidebar, items }) => {
<NavItemLink
type={type}
icon={item.icon}
action="navigate"
actionFunction={() => navigate(item.routerPath)}
// to={item.routerPath}
name={item.name}
action="navigate"
// toggle={toggleSidebar}
/>
</ListItem>
</animated.div>
));
};
});

BaseNavItems.displayName = 'BaseNavItems';

const TopNav = (props) => {
const { type, username, toggleSidebar } = props;
const { theme } = useMode();
Expand All @@ -211,12 +247,7 @@ const TopNav = (props) => {
<NavMenuItem type={type} toggleSidebar={toggleSidebar} />
<RCLogoSection />
</Box>
{!isMd &&
renderBaseNavItems({
items: baseNavItems,
type: type,
toggleSidebar,
})}
{!isMd && <BaseNavItems type={type} items={baseNavItems} />}
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<NavProfileItem username={username} type={type} />
</Box>
Expand Down Expand Up @@ -293,11 +324,12 @@ const SideNav = (props) => {
<ModalClose />
<Divider sx={{ mt: '1rem' }} />
<List>
{renderBaseNavItems({
<BaseNavItems type={'side'} items={baseNavItems} />
{/* {renderBaseNavItems({
items: baseNavItems, // Pass the base nav items
type: props.type,
toggleSidebar,
})}
})} */}
</List>
</Sheet>
</Drawer>
Expand Down

0 comments on commit ccea1ef

Please sign in to comment.