Skip to content

Commit

Permalink
Merge pull request #1465 from ethereum-push-notification-service/fix-…
Browse files Browse the repository at this point in the history 
…navigation-between-channelsProfile-and-viewChannels

Channels Profile UI is done according to the figma
  • Loading branch information
@HarshRajat
HarshRajat authored Mar 22, 2024
2 parents cdfa62d + e3f3384 commit ff6cddb
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 105 deletions.
108 changes: 83 additions & 25 deletions src/components/ViewChannelItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// React + Web3 Essentials
import React, { useContext, useEffect, useMemo } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';

// External Packages
import Skeleton from '@yisheng90/react-loading';
Expand All @@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom';
import { toast as toaster } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';
import styled, { css, useTheme } from 'styled-components';
import { useAccount, useDeviceWidthCheck } from 'hooks';

// Internal Compoonents
import * as PushAPI from '@pushprotocol/restapi';
Expand All @@ -22,6 +23,7 @@ import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderS
import {
ButtonV2,
} from 'components/reusables/SharedStylingV2';
import RedCircleSvg from '../assets/RedCircle.svg';
import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
import { isAddressEqual, LOGO_FROM_CHAIN_ID, MaskedAliasChannels, shortenText } from 'helpers/UtilityHelper';
import useToast from 'hooks/useToast';
Expand All @@ -31,14 +33,6 @@ import ChannelTutorial, { isChannelTutorialized } from 'segments/ChannelTutorial
import ChannelsDataStore from 'singletons/ChannelsDataStore';
import NotificationToast from '../primaries/NotificationToast';
import { Image, ItemH, Span } from '../primaries/SharedStyling';

// Internal Configs
import { Button } from '@mui/material';
import { addresses, appConfig, CHAIN_DETAILS } from 'config';
import APP_PATHS from "config/AppPaths";
import { AppContext } from 'contexts/AppContext';
import { IPFSGateway } from 'helpers/IpfsHelper';
import { useAccount, useDeviceWidthCheck } from 'hooks';
import InfoImage from '../assets/info.svg';
import ManageNotifSettingDropdown from './dropdowns/ManageNotifSettingDropdown';
import OptinNotifSettingDropdown from './dropdowns/OptinNotifSettingDropdown';
Expand All @@ -47,6 +41,11 @@ import Tooltip from './reusables/tooltip/Tooltip';
import UpdateChannelTooltipContent from './UpdateChannelTooltipContent';
import VerifiedTooltipContent from "./VerifiedTooltipContent";

// Internal Configs
import { addresses, appConfig, CHAIN_DETAILS } from 'config';
import APP_PATHS from "config/AppPaths";
import { IPFSGateway } from 'helpers/IpfsHelper';

// Create Header
function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, profileType }) {
const dispatch = useDispatch();
Expand All @@ -60,15 +59,16 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
const { epnsReadProvider, epnsWriteProvider, epnsCommReadProvider, pushAdminAddress, ZERO_ADDRESS } = useSelector(
(state) => state.contracts
);
const { canVerify } = useSelector((state) => state.admin);
const { channelsCache, CHANNEL_BLACKLIST, subscriptionStatus, userSettings: currentUserSettings } = useSelector((state) => state.channels);
const { canVerify, channelDetails, coreChannelAdmin } = useSelector((state) => state.admin);
const { channelsCache, CHANNEL_BLACKLIST, CHANNEL_ACTIVE_STATE, subscriptionStatus, userSettings: currentUserSettings } = useSelector((state) => state.channels);

const { account, provider, chainId } = useAccount();

const onCoreNetwork = chainId === appConfig.coreContractChain;

const [channelObject, setChannelObject] = React.useState(channelObjectProp);
const [subscribed, setSubscribed] = React.useState(false);
const [loading, setLoading] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [subscriberCount, setSubscriberCount] = React.useState(0);
const [isPushAdmin, setIsPushAdmin] = React.useState(false);
const [vLoading, setvLoading] = React.useState(false);
Expand All @@ -86,6 +86,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
const isBlocked = channelObject.blocked;
const isMobile = useDeviceWidthCheck(600);
const mobileToolTip = useDeviceWidthCheck(500);
const isChannelActive = channelObject.activation_status;

// Setup navigation
const navigate = useNavigate();
Expand All @@ -99,8 +100,6 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
setSubscribed(subscriptionStatus[channelObject.channel]);
}, [subscriptionStatus]);

// console.log("Channel Object >>>>>",channelObject);

useEffect(() => {
setIsPushAdmin(pushAdminAddress == account);
}, [pushAdminAddress, account]);
Expand All @@ -122,8 +121,6 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
const url = IPFS_GATEWAY + channelObject.ipfshash;
const response = await axios.get(url);

// console.log("Response >>>>>",response);

if (response.data) setChannelObjectFromHash(response.data);
if (response.data.icon) setChannelIcon(response.data.icon);
}, [channelObject]);
Expand Down Expand Up @@ -405,13 +402,14 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
setToolTipheight(containerHeight?.top);
};


// render
return (
<Container
key={channelObject.channel}
id={channelObject.channel}
minimal={minimal}
profileType={profileType}
border={profileType == 'Profile' ? 'none' : `1px solid ${minimal ? 'transparent' : themes.default.border}`}
>
{isMobile && (
<ChannelLogoContainer>
Expand Down Expand Up @@ -486,7 +484,12 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
</Tooltip>
)}

<Span onClick={() => navigate(generateChannelProfileLink(channelObject.channel, false))}>{channelObject.name}</Span>
<Span
onClick={() => {
navigate(generateChannelProfileLink(channelObject.channel, false))
}

}>{channelObject.name}</Span>
</Span>

{isVerified == 1 && (
Expand Down Expand Up @@ -654,7 +657,10 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
</Tooltip>
)}

<Span onClick={() => navigate(generateChannelProfileLink(channelObject.channel, false))}>{channelObject.name}</Span>
<Span onClick={() => {
navigate(generateChannelProfileLink(channelObject.channel, false))
}}
>{channelObject.name}</Span>


{isVerified == 1 && (
Expand Down Expand Up @@ -729,6 +735,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
</Span>
)}
</Span>

</ChannelTitleLink>
)}
</ChannelTitle>
Expand Down Expand Up @@ -826,6 +833,20 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
}}
/>

{profileType === 'Profile' && (
<ChanneStateText active={isChannelActive}>
{isChannelActive === 0 && (
<ImageV2
width="12px"
src={RedCircleSvg}
margin="0 5px 2px 0px"
height="30px"
/>
)}
{isChannelActive === 1 ? 'Active' : 'Deactivated'}
</ChanneStateText>
)}

{isChannelTutorialized(channelObject.channel) && (
<ChannelTutorial
addr={channelObject.channel}
Expand All @@ -850,6 +871,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
<Skeleton color={themes.interfaceSkeleton} />
</SkeletonButton>
)}

{!loading && isPushAdmin && (profileType == "Channel") && (
<SubscribeButton
onClick={blockChannel}
Expand Down Expand Up @@ -903,19 +925,18 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
)}
{!loading && !subscribed && (
<>
{/* {isOwner && <OwnerButton disabled>Owner</OwnerButton>} */}
{isOwner && (
<>
{(profileType == "Profile") ? (
<DashboardButton onClick={()=>navigate("/dashboard")}>
<DashboardButton onClick={() => navigate("/dashboard")}>
Go To Dashboard
</DashboardButton>
) : (
<OwnerButton disabled>Owner</OwnerButton>
)}
</>
)}
{!isOwner && (
{!isOwner && isChannelActive !== 0 && (
<OptinNotifSettingDropdown
channelDetail={channelObject}
setLoading={setTxInProgress}
Expand Down Expand Up @@ -944,13 +965,13 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
)}
</>
)}
{!loading && subscribed && (
{!loading && subscribed && isChannelActive !== 0 && (
<>
{/* {isOwner && <OwnerButton disabled>Owner</OwnerButton>} */}
{isOwner && (
<>
{(profileType == "Profile") ? (
<DashboardButton onClick={()=>navigate("/dashboard")}>
<DashboardButton onClick={() => navigate("/dashboard")}>
Go To Dashboard
</DashboardButton>
) : (
Expand Down Expand Up @@ -1021,7 +1042,7 @@ const Container = styled.div`
// flex: 1;
display: flex;
flex-wrap: nowrap;
border: ${(props) => props.profileType == 'Profile' ? 'none' : `1px solid ${(props) => props.minimal ? 'transparent' : props.theme.default.border}`};
border:${(props) => props.border};
border-bottom: none;
border-left: none;
border-right: none;
Expand Down Expand Up @@ -1094,6 +1115,7 @@ const ChannelLogo = styled(ButtonV2)`
align-self: center;
min-width: ${props => props.minimal ? "48px" : "100px"};
max-width: ${props => props.minimal ? "48px" : "100px"};
min-height: ${props => props.minimal ? "48px" : "100px"};
}
@media (max-width: 600px) {
Expand Down Expand Up @@ -1415,6 +1437,7 @@ const SkeletonButton = styled.div`

const SubscribeButton = styled(ChannelActionButton)`
background: #e20880;
color: #fff;
border-radius: 8px;
padding: 0px;
min-height: 36px;
Expand Down Expand Up @@ -1458,5 +1481,40 @@ const ToasterMsg = styled.div`
margin: 0px 10px;
`;

const StateText = styled.div`
font-weight: 500;
font-size: 14px;
line-height: 150%;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 2px 8px;
border-radius: 25px;
height: 26px;
background-color: pink;
font-family: Strawford, Source Sans Pro;
`;

const ChanneStateText = styled(StateText)`
color: #2dbd81;
color: ${(props) => (props.active ? '#2DBD81' : '#E93636')};
background-color: ${(props) => (props.active ? '#c6efd1' : '#FFD8D8')};
margin-left: 10px;
${(props) =>
props.active &&
`
&::before {
width:16px;
height:16px;
background: #2DBD81;
border-radius: 50%;
content: "";
display: inline-flex;
align-items: center;
margin-right: 6px;
}
`}
`;

// Export Default
export default ViewChannelItem;
24 changes: 14 additions & 10 deletions src/modules/channels/ChannelsModule.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// React + Web3 Essentials
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import ReactGA from "react-ga";

// External Packages
Expand All @@ -8,7 +8,7 @@ import styled from "styled-components";
// Internal Components
import ChannelProfile from "segments/ChannelProfile";
import ViewChannels from "segments/ViewChannels";

// Internal Configs
import APP_PATHS from "config/AppPaths";
import GLOBALS, { device, globalsMargin } from "config/Globals";
Expand All @@ -26,14 +26,18 @@ const ChannelsModule = ({ channelID, loadTeaser, playTeaser }) => {
return (
<Container>
<Interface>
<ViewChannels loadTeaser={loadTeaser} playTeaser={playTeaser} minimal={channelID ? true : false} />
{channelID &&
<ChannelProfile
channelID={channelID}
loadTeaser={loadTeaser}
playTeaser={playTeaser}
minimal={false}
profileType={ChannelTYPE.CHANNEL_PROFILE}
<ViewChannels
loadTeaser={loadTeaser}
playTeaser={playTeaser}
minimal={channelID ? true : false}
/>
{channelID &&
<ChannelProfile
channelID={channelID}
loadTeaser={loadTeaser}
playTeaser={playTeaser}
minimal={false}
profileType={ChannelTYPE.CHANNEL_PROFILE}
/>
}
</Interface>
Expand Down
Loading

0 comments on commit ff6cddb

Please sign in to comment.