channel details page

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"

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"
  >

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"
  >

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

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%"

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) => {

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;

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;

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>
  );
 }