From a2cfa33cfacaaeb9cd6622924ec4b08897926999 Mon Sep 17 00:00:00 2001 From: harshrajat Date: Fri, 22 Mar 2024 15:54:26 +0400 Subject: [PATCH 1/2] added logic to show timestamp if available --- src/segments/ChannelProfile.tsx | 156 +++++++++++++++----------------- 1 file changed, 73 insertions(+), 83 deletions(-) diff --git a/src/segments/ChannelProfile.tsx b/src/segments/ChannelProfile.tsx index 966df8d57b..13f2dab0df 100644 --- a/src/segments/ChannelProfile.tsx +++ b/src/segments/ChannelProfile.tsx @@ -1,30 +1,30 @@ // React + Web3 Essentials -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState } from 'react'; // External Packages -import { NotificationItem } from "@pushprotocol/uiweb"; -import { useDispatch, useSelector } from "react-redux"; +import { NotificationItem } from '@pushprotocol/uiweb'; +import { useDeviceWidthCheck } from 'hooks'; +import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; -import { useClickAway } from "react-use"; -import styled, { ThemeProvider, useTheme } from "styled-components"; -import { addPaginatedNotifications, setFinishedFetching } from "redux/slices/notificationSlice"; -import { useDeviceWidthCheck } from "hooks"; +import { useClickAway } from 'react-use'; +import { addPaginatedNotifications, setFinishedFetching } from 'redux/slices/notificationSlice'; +import styled, { ThemeProvider, useTheme } from 'styled-components'; // Internal Compoonents import { ReactComponent as Back } from 'assets/chat/arrowleft.svg'; -import ChannelLoading from "components/ChannelLoading"; +import ChannelLoading from 'components/ChannelLoading'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; -import DisplayNotice from "primaries/DisplayNotice"; +import DisplayNotice from 'primaries/DisplayNotice'; // Internal Configs -import { latest } from "@pushprotocol/restapi/src/lib/chat"; -import ViewChannelItem from "components/ViewChannelItem"; -import ChannelProfileComponent from "components/channel/ChannelProfileComponent"; -import { ItemVV2, SpanV2 } from "components/reusables/SharedStylingV2"; -import { appConfig } from "config"; -import APP_PATHS from "config/AppPaths"; -import { device } from "config/Globals"; -import ChannelsDataStore from "singletons/ChannelsDataStore"; +import { latest } from '@pushprotocol/restapi/src/lib/chat'; +import ViewChannelItem from 'components/ViewChannelItem'; +import ChannelProfileComponent from 'components/channel/ChannelProfileComponent'; +import { ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { appConfig } from 'config'; +import APP_PATHS from 'config/AppPaths'; +import { device } from 'config/Globals'; +import ChannelsDataStore from 'singletons/ChannelsDataStore'; // Constants const NOTIFICATIONS_PER_PAGE = 20; @@ -49,7 +49,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp const navigate = useNavigate(); useEffect(() => { - setChannelDetails(null) + setChannelDetails(null); if (userPushSDKInstance) { setLoading(true); (async () => { @@ -58,40 +58,42 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp setChannelDetails(channelBasedOnChannelID); setLoading(false); } catch (error) { - console.log("Error", error); + console.log('Error', error); setLoading(false); } - })() + })(); } - - }, [channelID, userPushSDKInstance]) + }, [channelID, userPushSDKInstance]); // load notifications useEffect(() => { if (userPushSDKInstance) { setLoading(true); - userPushSDKInstance.channel.notifications(channelID, { - page: 1, - limit: NOTIFICATIONS_PER_PAGE, - }).then((response) => { - setNotifications(response.feeds); - setLoadingNotifs(false); - - // ENABLE PAGINATION HERE - dispatch(addPaginatedNotifications(response.feeds)); - if (response.feeds.length === 0) { - dispatch(setFinishedFetching()); - } - }).catch((err) => { - // ENABLE NO NOTIFICATION FOUND HERE - console.error("Error >>>>", err); - setLoadingNotifs(false); - }); - }; + userPushSDKInstance.channel + .notifications(channelID, { + page: 1, + limit: NOTIFICATIONS_PER_PAGE, + }) + .then((response) => { + setNotifications(response.feeds); + setLoadingNotifs(false); + + // ENABLE PAGINATION HERE + dispatch(addPaginatedNotifications(response.feeds)); + if (response.feeds.length === 0) { + dispatch(setFinishedFetching()); + } + }) + .catch((err) => { + // ENABLE NO NOTIFICATION FOUND HERE + console.error('Error >>>>', err); + setLoadingNotifs(false); + }); + } return () => { setNotifications([]); setLoadingNotifs(true); - } + }; }, [channelID, userPushSDKInstance]); const isMobile = useDeviceWidthCheck(768); @@ -104,9 +106,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp alignSelf="flex-start" padding="0px" > - + { navigate(APP_PATHS.Channels); @@ -117,7 +117,7 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp {!isMobile && ( <> - {channelDetails && !loading && + {channelDetails && !loading && ( - } + )} {/* Show Latest Notifications of the Channel */} {!loading && ( @@ -136,25 +136,21 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp > Recent Notifications - - Showing preview of the latest non-encrypted notifications sent by the channel. - + Showing preview of the latest non-encrypted notifications sent by the channel. )} - {loadingNotifs && + {loadingNotifs && ( - } + )} {!notifications.length && !loadingNotifs && ( -
- +
+
)} @@ -165,8 +161,8 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp return ( - {/* New Channel Profile Component */} - {channelDetails && !loading && + {channelDetails && !loading && ( - } + )} {/* Show Latest Notifications of the Channel */} {!loading && ( @@ -205,28 +200,25 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp > Recent Notifications - - Showing preview of the latest non-encrypted notifications sent by the channel. - + Showing preview of the latest non-encrypted notifications sent by the channel. )} - {loadingNotifs && + {loadingNotifs && ( - } + )} {notifications.map((item, index) => { const payload = item.payload; - // render the notification item return ( ); -} +}; // css styles const Container = styled.div` @@ -261,9 +253,7 @@ const Container = styled.div` } `; -const NotifsOuter = styled.div` - -`; +const NotifsOuter = styled.div``; const ScrollItem = styled(ItemVV2)` display: flex; @@ -293,7 +283,7 @@ const ScrollItem = styled(ItemVV2)` background-color: none; border-radius: 9px; } - + &::-webkit-scrollbar { background-color: none; width: 4px; @@ -306,24 +296,24 @@ const ScrollItem = styled(ItemVV2)` linear, left top, left bottom, - color-stop(0.44, #CF1C84), - color-stop(0.72, #CF1C84), - color-stop(0.86, #CF1C84) + color-stop(0.44, #cf1c84), + color-stop(0.72, #cf1c84), + color-stop(0.86, #cf1c84) ); } `; const TextContainer = styled(ItemVV2)` - flex:0; - border-bottom: 1px solid rgba(0, 0, 0, 0.10); + flex: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 10px; - align-items:baseline; - margin:7px 20px 24px 5px; -` + align-items: baseline; + margin: 7px 20px 24px 5px; +`; const Notice = styled(SpanV2)` font-size: 0.8em; -` +`; // Export Default -export default ChannelProfile; \ No newline at end of file +export default ChannelProfile; From 06584bb0b6eca4668f79a4de3927dfd3b9ecc824 Mon Sep 17 00:00:00 2001 From: harshrajat Date: Fri, 22 Mar 2024 18:12:53 +0400 Subject: [PATCH 2/2] tweaks for channel profile UI --- .env.sample | 4 +- public/index.html | 22 +-- public/robots.txt | 2 +- public/sitemap.txt | 34 ++--- src/segments/ChannelProfile.tsx | 244 ++++++++++++++------------------ 5 files changed, 137 insertions(+), 169 deletions(-) diff --git a/.env.sample b/.env.sample index d764d8bf8a..a32ccccc77 100644 --- a/.env.sample +++ b/.env.sample @@ -12,8 +12,8 @@ REACT_APP_PUBLIC_URL=https://dev.push.org/ REACT_APP_WALLETCONNECT_PROJECT_ID=walletconnect_project_id # LOCALHOST CREDS -# REACT_APP_IPFS_INFURA_API_KEY="your_secret_infura_api_key_for_localhost" -# REACT_APP_IPFS_INFURA_API_SECRET="your_secret_infura_api_secret_for_localhost" +REACT_APP_IPFS_INFURA_API_KEY="your_secret_infura_api_key_for_localhost" +REACT_APP_IPFS_INFURA_API_SECRET="your_secret_infura_api_secret_for_localhost" # ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true diff --git a/public/index.html b/public/index.html index 3ff8d6d661..897e1c95eb 100644 --- a/public/index.html +++ b/public/index.html @@ -33,23 +33,23 @@ Learn how to configure a non-root public URL by running `npm run build`. --> - Push Alpha App (Previously EPNS) | Communication Protocol of Web3 - + Push Dev App (Previously EPNS) | Communication Protocol of Web3 + - + - - - + + + - - - - - + + + + + diff --git a/public/robots.txt b/public/robots.txt index eac4e33dd0..0d4bc51f1d 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,3 +1,3 @@ # https://www.robotstxt.org/robotstxt.html User-agent: * -Sitemap: https://alpha.push.org/sitemap.txt \ No newline at end of file +Sitemap: https://dev.push.org/sitemap.txt \ No newline at end of file diff --git a/public/sitemap.txt b/public/sitemap.txt index fb6a4f5eba..148423115e 100644 --- a/public/sitemap.txt +++ b/public/sitemap.txt @@ -1,17 +1,17 @@ -https://alpha.push.org/ -https://alpha.push.org/?/inbox -https://alpha.push.org/?/chat -https://alpha.push.org/?/channels -https://alpha.push.org/?/dashboard -https://alpha.push.org/?/send -https://alpha.push.org/?/spam -https://alpha.push.org/?/receive -https://alpha.push.org/?/govern -https://alpha.push.org/?/yield -https://alpha.push.org/?/rockstar -https://alpha.push.org/?/gratitude -https://alpha.push.org/?/live_walkthrough -https://alpha.push.org/?/notavailable -https://alpha.push.org/?/faq -https://alpha.push.org/?/internal -https://alpha.push.org/?/support \ No newline at end of file +https://dev.push.org/ +https://dev.push.org/?/inbox +https://dev.push.org/?/chat +https://dev.push.org/?/channels +https://dev.push.org/?/dashboard +https://dev.push.org/?/send +https://dev.push.org/?/spam +https://dev.push.org/?/receive +https://dev.push.org/?/govern +https://dev.push.org/?/yield +https://dev.push.org/?/rockstar +https://dev.push.org/?/gratitude +https://dev.push.org/?/live_walkthrough +https://dev.push.org/?/notavailable +https://dev.push.org/?/faq +https://dev.push.org/?/internal +https://dev.push.org/?/support \ No newline at end of file diff --git a/src/segments/ChannelProfile.tsx b/src/segments/ChannelProfile.tsx index 13f2dab0df..47f20cbf80 100644 --- a/src/segments/ChannelProfile.tsx +++ b/src/segments/ChannelProfile.tsx @@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react'; // External Packages import { NotificationItem } from '@pushprotocol/uiweb'; -import { useDeviceWidthCheck } from 'hooks'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { useClickAway } from 'react-use'; @@ -14,6 +13,7 @@ import styled, { ThemeProvider, useTheme } from 'styled-components'; import { ReactComponent as Back } from 'assets/chat/arrowleft.svg'; import ChannelLoading from 'components/ChannelLoading'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; +import { useAccount } from 'hooks'; import DisplayNotice from 'primaries/DisplayNotice'; // Internal Configs @@ -45,6 +45,10 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp const [loadingNotifs, setLoadingNotifs] = useState(true); const [notifications, setNotifications] = useState([]); const [channelDetails, setChannelDetails] = useState(null); + + // get signer + const { account, provider } = useAccount(); + // Setup navigation const navigate = useNavigate(); @@ -96,144 +100,94 @@ const ChannelProfile = ({ channelID, loadTeaser, playTeaser, minimal, profileTyp }; }, [channelID, userPushSDKInstance]); - const isMobile = useDeviceWidthCheck(768); // Render return ( - - - - - { - navigate(APP_PATHS.Channels); - }} - /> - - - - {!isMobile && ( - <> - {channelDetails && !loading && ( - - )} - - {/* Show Latest Notifications of the Channel */} - {!loading && ( - - - Recent Notifications - - Showing preview of the latest non-encrypted notifications sent by the channel. - - )} - - - {loadingNotifs && ( - - )} - - {!notifications.length && !loadingNotifs && ( -
- -
- )} - - {notifications.map((item, index) => { - const payload = item.payload; - - // render the notification item - return ( - - - - ); - })} - - + + + { + navigate(APP_PATHS.Channels); + }} + /> + + + <> + {channelDetails && !loading && ( + )} - {isMobile && ( - - {/* New Channel Profile Component */} - {channelDetails && !loading && ( - - )} - - {/* Show Latest Notifications of the Channel */} - {!loading && ( - - - Recent Notifications - - Showing preview of the latest non-encrypted notifications sent by the channel. - - )} - - {loadingNotifs && ( - - )} - - {notifications.map((item, index) => { - const payload = item.payload; - // render the notification item - return ( - - - - ); - })} - + {/* Show Latest Notifications of the Channel */} + {!loading && ( + + + Recent Notifications + + + Showing preview of the latest non-encrypted notifications sent by the channel. + + )} - - + + + {loadingNotifs && ( + + )} + + {!notifications.length && !loadingNotifs && ( +
+ +
+ )} + + {notifications.map((item, index) => { + const payload = item.payload; + + // render the notification item + return ( + + + + ); + })} + + + + {/* Add Support chat */} + {/* {!loadingNotifs && ( + + )} */} + ); }; @@ -244,18 +198,31 @@ const Container = styled.div` flex-direction: column; align-content: center; align-items: center; - justify-content: center; + justify-content: flex-start; font-weight: 200; margin: 20px 0px 0px 20px; - @media (max-width: 768px) { + @media ${device.tablet} { + overflow-y: auto; margin: 20px 10px 0px 10px; } `; +const BackContainer = styled(ItemVV2)` + @media ${device.tablet} { + position: absolute; + z-index: 1; + padding: 10px; + backdrop-filter: blur(4px); + top: 0; + left: 0; + right: 0; + } +`; + const NotifsOuter = styled.div``; -const ScrollItem = styled(ItemVV2)` +const NotificationItems = styled(ItemVV2)` display: flex; align-self: stretch; align-items: stretch; @@ -276,8 +243,9 @@ const ScrollItem = styled(ItemVV2)` width: 6px; } - @media (max-width: 768px) { + @media ${device.tablet} { padding: 0px 20px; + overflow-y: visible; &::-webkit-scrollbar-track { background-color: none;