From 0e20995e26dae1322c8648b8e2d1a6c2c13f8097 Mon Sep 17 00:00:00 2001
From: Monalisha Mishra <mishramonalisha76@gmail.com>
Date: Fri, 20 Sep 2024 14:17:52 +0530
Subject: [PATCH] channel details page

---
 src/modules/channelDetails/ChannelDetails.tsx |  4 +-
 .../components/ChannelDetail.tsx              |  5 +-
 .../channelDetails/components/ChannelList.tsx |  1 +
 .../components/ChannelTutorialContent.tsx     |  6 ++-
 .../components/UserJourneyPreview.tsx         |  4 +-
 .../hooks/channels/useGetChannelsList.ts      |  3 +-
 .../channels/getChannelsListModelCreator.ts   |  8 ++-
 .../services/channels/getChannelsList.ts      |  2 +-
 src/structure/MasterInterfacePage.tsx         | 49 +------------------
 9 files changed, 20 insertions(+), 62 deletions(-)

diff --git a/src/modules/channelDetails/ChannelDetails.tsx b/src/modules/channelDetails/ChannelDetails.tsx
index 5f79255d17..aff55ac521 100644
--- a/src/modules/channelDetails/ChannelDetails.tsx
+++ b/src/modules/channelDetails/ChannelDetails.tsx
@@ -24,19 +24,19 @@ const ChannelDetails: FC = () => {
   const hasMoreData = !isFetchingNextPage && hasNextPage;
 
   const selectedChannel = channelsList?.find((channel) => channel?.channel === selectedChannelId);
-  console.debug(selectedChannel, channelsList, 'channel');
 
   useEffect(() => {
     if (!isAddress(id || '')) navigate(APP_PATHS.Channels);
   }, [id]);
 
   //channel tutotrial
-  //delete old channel page
+  //delete old channel and related pages
   return (
     <Box
       width="-webkit-fill-available"
       padding="spacing-md spacing-sm"
       display="flex"
+      height={{ dp: '100vh', ml: 'auto' }}
       justifyContent="flex-start"
       borderRadius="radius-md radius-md radius-none radius-none"
       gap="spacing-md"
diff --git a/src/modules/channelDetails/components/ChannelDetail.tsx b/src/modules/channelDetails/components/ChannelDetail.tsx
index d259bdf359..5a52f046eb 100644
--- a/src/modules/channelDetails/components/ChannelDetail.tsx
+++ b/src/modules/channelDetails/components/ChannelDetail.tsx
@@ -3,9 +3,10 @@ import { FC, useState } from 'react';
 import { css } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import { ChannelTutorialContent } from './ChannelTutorialContent';
 import { ChannelDetailSubscribe } from './ChannelDetailSubscribe';
 import { RecentNotifications } from './RecentNotifications';
-import { Box, Text, Back, Tag, Skeleton, Tutorial, Tooltip, TickDecoratedCircleFilled } from 'blocks';
+import { Box, Text, Back, Tag, Skeleton, Tooltip, TickDecoratedCircleFilled } from 'blocks';
 import { CopyButton, LOGO_ALIAS_CHAIN, VerifiedChannelTooltipContent, formatSubscriberCount } from 'common';
 
 import { ChannelDetails } from 'queries';
@@ -15,7 +16,6 @@ import { shortenText } from 'helpers/UtilityHelper';
 import APP_PATHS from 'config/AppPaths';
 import { appConfig } from 'config';
 
-import { ChannelTutorialContent } from './ChannelTutorialContent';
 import { getChannelTutorialDetails } from '../ChannelDetails.utils';
 
 export type ChannelDetailProps = { channel: ChannelDetails; isLoading: boolean };
@@ -39,6 +39,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
       display="flex"
       flexDirection="column"
       width="100%"
+      height="100vh"
       gap="spacing-xl"
       padding="spacing-none spacing-xxs"
     >
diff --git a/src/modules/channelDetails/components/ChannelList.tsx b/src/modules/channelDetails/components/ChannelList.tsx
index dc368604be..6895b3031f 100644
--- a/src/modules/channelDetails/components/ChannelList.tsx
+++ b/src/modules/channelDetails/components/ChannelList.tsx
@@ -33,6 +33,7 @@ const ChannelList: FC<ChannelListProps> = ({
       overflow="auto"
       customScrollbar={true}
       height="100%"
+      maxHeight="100%"
       padding="spacing-none spacing-sm spacing-none spacing-none"
       flexDirection="column"
     >
diff --git a/src/modules/channelDetails/components/ChannelTutorialContent.tsx b/src/modules/channelDetails/components/ChannelTutorialContent.tsx
index 08ce246fc2..1459d3c504 100644
--- a/src/modules/channelDetails/components/ChannelTutorialContent.tsx
+++ b/src/modules/channelDetails/components/ChannelTutorialContent.tsx
@@ -1,9 +1,10 @@
-import { FC, useState } from 'react';
+import { FC } from 'react';
 
 import { Box, Button, Dropdown, ExternalLink, Link, Text, Tutorial } from 'blocks';
+import { UserJourney } from './UserJourneyPreview';
 
 import { useBlocksTheme } from 'blocks/Blocks.hooks';
-import { UserJourney } from './UserJourneyPreview';
+
 import { useDisclosure } from 'common';
 
 export type ChannelTutorialContentProps = { tutotrialDetails: any };
@@ -39,6 +40,7 @@ const ChannelTutorialContent: FC<ChannelTutorialContentProps> = ({ tutotrialDeta
               <Box
                 width="218px"
                 height="142px"
+                overflow="hidden"
                 borderRadius="radius-xs"
               >
                 <img
diff --git a/src/modules/channelDetails/components/UserJourneyPreview.tsx b/src/modules/channelDetails/components/UserJourneyPreview.tsx
index d4f04a5cbf..d404938b16 100644
--- a/src/modules/channelDetails/components/UserJourneyPreview.tsx
+++ b/src/modules/channelDetails/components/UserJourneyPreview.tsx
@@ -10,10 +10,12 @@ const UserJourney: FC<UserJourneyProps> = ({ videoLink, modalControl }) => {
       size="large"
       isOpen={isOpen}
       onClose={onClose}
+      acceptButtonProps={null}
+      cancelButtonProps={null}
     >
       <Box
         width="100%"
-        height="100%"
+        height={{ dp: '80vh', ml: 'auto' }}
       >
         <iframe
           width="100%"
diff --git a/src/queries/hooks/channels/useGetChannelsList.ts b/src/queries/hooks/channels/useGetChannelsList.ts
index 295060802e..bbf661c234 100644
--- a/src/queries/hooks/channels/useGetChannelsList.ts
+++ b/src/queries/hooks/channels/useGetChannelsList.ts
@@ -1,9 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { useSelector } from 'react-redux';
 
 import { allChannelsList } from '../../queryKeys';
 import { getChannelsList } from '../../services';
+
 import { ChannelsListModelledResponse, ChannelListParams } from '../../types';
-import { useSelector } from 'react-redux';
 import { UserStoreType } from 'types';
 
 export const useGetChannelslist = ({ order, pageSize, sort }: ChannelListParams) => {
diff --git a/src/queries/models/channels/getChannelsListModelCreator.ts b/src/queries/models/channels/getChannelsListModelCreator.ts
index 5c1e740e74..d5b79f901e 100644
--- a/src/queries/models/channels/getChannelsListModelCreator.ts
+++ b/src/queries/models/channels/getChannelsListModelCreator.ts
@@ -1,7 +1,5 @@
-import { ChannelsListModelledResponse } from 'queries/types';
+import { ChannelsListModelledResponse } from '../../types';
 
 //any remodelling needed in the response can be done here
-export const getChannelsListModelCreator = (response: ChannelsListModelledResponse): ChannelsListModelledResponse => {
-  console.debug(response, 'response');
-  return response;
-};
+export const getChannelsListModelCreator = (response: ChannelsListModelledResponse): ChannelsListModelledResponse =>
+  response;
diff --git a/src/queries/services/channels/getChannelsList.ts b/src/queries/services/channels/getChannelsList.ts
index 182ee72a55..bb2012267d 100644
--- a/src/queries/services/channels/getChannelsList.ts
+++ b/src/queries/services/channels/getChannelsList.ts
@@ -1,7 +1,7 @@
 import { PushAPI } from '@pushprotocol/restapi';
 
 import { getChannelsListModelCreator } from '../../models';
-import { ChannelListParams } from 'queries/types';
+import { ChannelListParams } from '../../types';
 
 type GetChannelsListParams = {
   userPushSDKInstance: PushAPI;
diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx
index 2269016f88..d3d1081af0 100644
--- a/src/structure/MasterInterfacePage.tsx
+++ b/src/structure/MasterInterfacePage.tsx
@@ -1,10 +1,9 @@
 // React + Web3 Essentials
-import { lazy, Suspense, useState, useEffect, useContext } from 'react';
+import { lazy, Suspense, useEffect, useContext } from 'react';
 
 // External Packages
 import useToast from 'hooks/useToast';
 import { MdWarning } from 'react-icons/md';
-import { VscClose } from 'react-icons/vsc';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
@@ -88,10 +87,6 @@ function MasterInterfacePage() {
   // get location
   const location = useLocation();
 
-  // Master Interface controls settings
-  const [playTeaserVideo, setPlayTeaserVideo] = useState(false);
-  const [loadTeaserVideo, setLoadTeaserVideo] = useState(null);
-
   const { MetamaskPushSnapModalComponent, blockedLoading }: AppContextType = useContext(AppContext);
 
   const { showMetamaskPushSnap } = useContext(AppContext);
@@ -340,48 +335,6 @@ function MasterInterfacePage() {
           progressNotice={blockedLoading.progressNotice}
         />
       )}
-
-      {/* To play youtube video from anywhere */}
-      {playTeaserVideo && (
-        <PreviewOuter>
-          <PreviewBG
-            href="#"
-            bg="transparent"
-            onClick={(e) => {
-              e.preventDefault();
-              setPlayTeaserVideo(!playTeaserVideo);
-            }}
-          >
-            <PreviewContent className="contentBox">
-              <PreviewClose
-                href="#"
-                bg="transparent"
-                hover="transparent"
-                hoverBG="transparent"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setPlayTeaserVideo(!playTeaserVideo);
-                }}
-              >
-                <VscClose
-                  size={40}
-                  color="#fff"
-                />
-              </PreviewClose>
-              <Preview>
-                <div className="videoWrapper">
-                  <iframe
-                    src={loadTeaserVideo}
-                    frameborder="0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen
-                  ></iframe>
-                </div>
-              </Preview>
-            </PreviewContent>
-          </PreviewBG>
-        </PreviewOuter>
-      )}
     </Container>
   );
 }