Carousel is Implemented in the Featured Channels Sections in dashboard (

#1702) * Featured Channels Carousel is implemented * fixes done * Fixed the responsive issue --------- Co-authored-by: rohitmalhotra1420 <[email protected]>
push-protocol · Jul 16, 2024 · 0c92a23 · 0c92a23
1 parent 40fd94a
commit 0c92a23
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 226 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "dompurify": "^3.0.2",
     "dotenv": "8.2.0",
     "eccrypto": "^1.1.3",
+    "embla-carousel-react": "^8.1.6",
     "emoji-picker-react": "4.9.3",
     "envfile": "6.18.0",
     "eth-crypto": "1.6.0",

diff --git a/src/common/hooks/index.ts b/src/common/hooks/index.ts
@@ -1,2 +1 @@
-export { useSmoothHorizontalScroll } from './useSmoothHorizontalScroll';
 export { useIsVisible } from './useIsVisible';
diff --git a/src/common/hooks/useSmoothHorizontalScroll.ts b/src/common/hooks/useSmoothHorizontalScroll.ts
diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx
@@ -17,10 +17,10 @@ const Dashboard: FC<DashboardProps> = () => {
     <Box
       flexDirection="column"
       display="flex"
-      margin={{ initial: 's4 s6 s4 s6', ml: 's4' }}
+      margin={{ initial: 's4 s10 s4 s10', ml: 's4', lp: 's4' }}
       gap={{ ml: 's6' }}
       height="100%"
-      width="-webkit-fill-available"
+      width="auto"
     >
       <DashboardHeader
         showSubHeader={showSubHeader}
@@ -41,4 +41,3 @@ const Dashboard: FC<DashboardProps> = () => {
 };
 
 export { Dashboard };
-// colors > brand tokens > semantics (for individual components)
diff --git a/src/modules/dashboard/components/FeaturedChannels.tsx b/src/modules/dashboard/components/FeaturedChannels.tsx
@@ -2,11 +2,10 @@
 import { FC } from 'react';
 
 // Components
-import { useSmoothHorizontalScroll } from 'common';
 import { useDeviceWidthCheck } from 'hooks';
 import { FeaturedChannelsList } from './FeaturedChannelsList';
 import { FeaturedChannelsMobileViewList } from './FeaturedChannelsMobileViewList';
-import { Box, HoverableSVG, Text, Link, deviceSizes, NextIconSlider, PrevIconSlider } from 'blocks';
+import { Box, deviceSizes } from 'blocks';
 
 // Internal Configs
 import { featuredChannelsList, mobileFeaturedChannelsList } from '../configs';
@@ -17,26 +16,9 @@ export type FeaturedChannelsProps = {};
 const FeaturedChannels: FC<FeaturedChannelsProps> = () => {
   const featureChannelsForCurrrentEnv = featuredChannelsList[appConfig.appEnv];
 
-  const isTablet = useDeviceWidthCheck(parseInt(deviceSizes.tablet));
   const isMobile = useDeviceWidthCheck(parseInt(deviceSizes.mobileL));
 
-  const itemsPerPage = isMobile ? 1 : isTablet ? 2 : 3;
-
-  const showMobileAndTabletView = isMobile || isTablet;
-
-  const applicableFeaturedChannels = showMobileAndTabletView
-    ? mobileFeaturedChannelsList
-    : featureChannelsForCurrrentEnv;
-
-  const { currentIndex, handleNext, handlePrevious, listRef } = useSmoothHorizontalScroll({
-    items: applicableFeaturedChannels,
-    itemsPerPage,
-    itemGap: isMobile || isTablet ? 32 : 24, // Gap provided in between the list items
-  });
-
-  const handleClick: VoidFunction = () => {
-    handleNext();
-  };
+  const showMobileAndTabletView = isMobile;
 
   return (
     <Box
@@ -46,67 +28,20 @@ const FeaturedChannels: FC<FeaturedChannelsProps> = () => {
       flexDirection="column"
       backgroundColor={{ light: 'darkWhite', dark: 'gray-900' }}
       gap={{ ml: 's4', initial: 's2' }}
+      alignItems='center'
     >
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        flexDirection={{ tb: 'column' }}
-        gap={{ tb: 's3' }}
-      >
-        <Text
-          variant="h4-bold"
-          color={{ light: 'black', dark: 'white' }}
-        >
-          Featured Notification Channels
-        </Text>
-
-        <Box
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          gap="s4"
-        >
-          <Link
-            to="/channels"
-            textProps={{
-              variant: 'h5-semibold',
-              color: { light: 'black', dark: 'white' },
-            }}
-          >
-            View All
-          </Link>
-
-          <Box
-            display="flex"
-            flexDirection="row"
-          >
-            <HoverableSVG
-              onClick={handlePrevious}
-              defaultColor={{ light: 'gray-900', dark: 'gray-400' }}
-              disabled={currentIndex === 0}
-              icon={<PrevIconSlider size={24} />}
-            ></HoverableSVG>
-            <HoverableSVG
-              onClick={handleClick}
-              defaultColor={{ light: 'gray-900', dark: 'gray-400' }}
-              disabled={currentIndex + itemsPerPage >= applicableFeaturedChannels.length}
-              icon={<NextIconSlider size={24} />}
-            ></HoverableSVG>
-          </Box>
-        </Box>
-      </Box>
 
       {showMobileAndTabletView ? (
         <FeaturedChannelsMobileViewList
-          listRef={listRef}
           featuredChannelsList={mobileFeaturedChannelsList}
         />
+
       ) : (
         <FeaturedChannelsList
-          listRef={listRef}
           featuredChannelsList={featureChannelsForCurrrentEnv}
         />
       )}
+
     </Box>
   );
 };

diff --git a/src/modules/dashboard/components/FeaturedChannelsList.tsx b/src/modules/dashboard/components/FeaturedChannelsList.tsx
@@ -1,36 +1,106 @@
 // React + Web3 Essentials
 import { FC } from 'react';
 
+//Third party libraries
+import { css } from 'styled-components';
+import useEmblaCarousel from 'embla-carousel-react';
+import { EmblaOptionsType } from 'embla-carousel';
+
 // Components
 import { FeaturedChannelsListItem } from './FeaturedChannelsListItem';
-import { Box } from 'blocks';
+import { Box, HoverableSVG, Text, Link, NextIconSlider, PrevIconSlider, deviceSizes } from 'blocks';
 
 // Internal Configs
 import { FeaturedChannelDetailsProps } from '../configs';
-import { css } from 'styled-components';
+import { useFeaturedChannelsCarouselButtons } from '../hooks/useFeaturedChannelsCarouselButtons';
+import { useDeviceWidthCheck } from 'hooks';
 
 export type FeaturedChannelsListProps = {
-  listRef: any;
   featuredChannelsList: FeaturedChannelDetailsProps[];
 };
 
-const FeaturedChannelsList: FC<FeaturedChannelsListProps> = ({ listRef, featuredChannelsList }) => {
+const FeaturedChannelsList: FC<FeaturedChannelsListProps> = ({ featuredChannelsList }) => {
+  const isTablet = useDeviceWidthCheck(parseInt(deviceSizes.tablet));
+  const isXsLaptop = useDeviceWidthCheck(parseInt(deviceSizes.laptop));
+
+  const CarouselOptions: EmblaOptionsType = {
+    slidesToScroll: isTablet || isXsLaptop ? 2 : 3,
+    align: 'start'
+  };
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(CarouselOptions);
+
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = useFeaturedChannelsCarouselButtons(
+    emblaApi
+  );
+
   return (
-    <Box
-      ref={listRef}
-      display="flex"
-      flexDirection={{ initial: 'row', tb: 'column' }}
-      gap="s6"
-      padding="s4 s0"
-      overflow="scroll"
-      css={css`
-        overflow-y: scroll;
-      `}
-    >
-      {featuredChannelsList?.map((channel) => {
-        return <FeaturedChannelsListItem channelAddress={channel.channel} />;
-      })}
-    </Box>
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        flexDirection={{ tb: 'column' }}
+        gap={{ tb: 's3' }}
+        width='100%'
+      >
+
+        <Text variant="h4-bold" color={{ light: 'black', dark: 'white' }}>
+          Featured Notification Channels
+        </Text>
+
+        <Box display="flex" flexDirection="row" alignItems="center" gap="s4">
+          <Link
+            to="/channels"
+            textProps={{
+              variant: 'h5-semibold',
+              color: { light: 'black', dark: 'white' }
+            }}
+          >
+            View All
+          </Link>
+
+          <Box display="flex" flexDirection="row">
+            {/* Previous Button  */}
+            <HoverableSVG
+              onClick={onPrevButtonClick}
+              defaultColor={{ light: 'gray-900', dark: 'gray-400' }}
+              disabled={prevBtnDisabled}
+              icon={<PrevIconSlider size={24} />}
+            ></HoverableSVG>
+
+            {/* Next button */}
+            <HoverableSVG
+              onClick={onNextButtonClick}
+              defaultColor={{ light: 'gray-900', dark: 'gray-400' }}
+              disabled={nextBtnDisabled}
+              icon={<NextIconSlider size={24} />}
+            ></HoverableSVG>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box width={{ initial: '67rem', tb: '42rem', lp: '42rem' }}>
+        <Box
+          css={css`
+            overflow: hidden;
+          `}
+          ref={emblaRef}
+        >
+          <Box
+            gap="s6"
+            display="flex"
+            css={css`
+              backface-visibility: hidden;
+              touch-action: pan-y pinch-zoom;
+            `}
+          >
+            {featuredChannelsList.map((channel) => (
+              <FeaturedChannelsListItem channelAddress={channel.channel} />
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </>
   );
 };
 

diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx
@@ -60,10 +60,10 @@ const FeaturedChannelsListItem: FC<FeaturedChannelsListItemProps> = (props) => {
         display="flex"
         flexDirection="column"
         border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }}
-        padding="s6"
+        padding={{ initial: 's6', ml: 's6 s4', tb: 's5', lp: 's5' }}
         borderRadius="r6"
         gap="s3"
-        width={{ initial: '27.35%', tb: 'fit-content', ml: '75%' }}
+        width={{ initial: '290px', ml: 'auto', tb: '278px', lp: '278px' }}
         css={css`
           flex-shrink: 0;
         `}
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { useSmoothHorizontalScroll } from './useSmoothHorizontalScroll';
		export { useIsVisible } from './useIsVisible';