DAPP-1871 subscribed filter support added

package.json

@@ -34,7 +34,7 @@
     "@metamask/eth-sig-util": "^4.0.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.5.0",
-    "@pushprotocol/restapi": "^1.7.30",
+    "@pushprotocol/restapi": "^1.7.31",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.7.3",
     "@radix-ui/react-dialog": "^1.1.1",

src/modules/channels/Channels.constants.ts

@@ -1,2 +1,3 @@
 export const AllCategories = 'All';
+export const subscribedCategory = 'Subscribed';
 export const channelFilterList = ['0x8AAAa9c3a06a4A9FE7C5cCe17d8B5db1E225Eadf'];

src/modules/channels/Channels.tsx

@@ -1,22 +1,31 @@
-import { FC } from 'react';
+import { FC, useContext, useEffect } from 'react';
 import { ChannelListOrderType, ChannelListSortType } from '@pushprotocol/restapi';
 
-import { useChannelsFilters } from './hooks/useChannelsFilters';
+import { Box, Search, Text } from 'blocks';
+import { getSelectChains } from 'common';
+import { appConfig } from 'config';
+import { useAccount } from 'hooks';
 import { useChannelSearch, useGetChannelslist } from 'queries';
 
-import { Box, Search, Text } from 'blocks';
 import { ChannelSearchAndChainSelection } from './components/ChannelSearchAndChainSelection';
 import { ChannelCategories } from './components/ChannelCategories';
 import { AllChannelList } from './components/AllChannelsList';
+import { useChannelsFilters } from './hooks/useChannelsFilters';
 
-import { getSelectChains } from 'common';
-import { AllCategories, channelFilterList } from './Channels.constants';
+import { AllCategories, channelFilterList, subscribedCategory } from './Channels.constants';
 import { getSuggestedChannels } from './Channels.utils';
-import { appConfig } from 'config';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 export type ChannelsProps = {};
 
 const Channels: FC<ChannelsProps> = () => {
+  // @ts-expect-error
+  const { readOnlyWallet } = useContext(GlobalContext);
+
+  const { account } = useAccount();
+
+  const walletAddress = account !== readOnlyWallet ? account : null;
+
   const chainOptions = getSelectChains(appConfig.allowedNetworks);
 
   const { filters, setFilter } = useChannelsFilters({
@@ -26,6 +35,9 @@ const Channels: FC<ChannelsProps> = () => {
 
   const isEthereumChain = chainOptions.find((chain) => chain.value === filters.chain)?.label.includes('Ethereum');
 
+  const tag = filters.category === AllCategories || filters.category === subscribedCategory ? '' : filters.category;
+
+  const subscribed = filters.category === subscribedCategory ? `eip155:${walletAddress}` : '';
   const {
     data: channelList,
     isLoading: loadingChannels,
@@ -37,7 +49,8 @@ const Channels: FC<ChannelsProps> = () => {
     order: ChannelListOrderType.DESCENDING,
     sort: ChannelListSortType.SUBSCRIBER,
     chain: isEthereumChain ? '' : filters.chain,
-    tag: filters.category === AllCategories ? '' : filters.category,
+    tag,
+    subscribed,
   });
 
   const {
@@ -50,9 +63,16 @@ const Channels: FC<ChannelsProps> = () => {
     pageSize: 21,
     query: filters.search,
     chain: isEthereumChain ? '' : filters.chain,
-    tag: filters.category === AllCategories ? '' : filters.category,
+    tag,
+    subscribed,
   });
 
+  useEffect(() => {
+    if (account === readOnlyWallet && filters.category === subscribedCategory) {
+      setFilter({ category: AllCategories });
+    }
+  }, [account, filters]);
+
   const channels =
     loadingChannels || searchingChannels
       ? Array(9).fill(0)
@@ -98,6 +118,7 @@ const Channels: FC<ChannelsProps> = () => {
           <ChannelCategories
             filters={filters}
             setFilter={setFilter}
+            walletAddress={walletAddress}
           />
         </Box>
         {!channels.length && !suggestedChannels.length && !isLoading ? (

src/modules/channels/components/ChannelCategories.tsx

@@ -3,16 +3,17 @@ import { Box, Button, CaretLeft, CaretRight, Pill, Skeleton } from 'blocks';
 import { css } from 'styled-components';
 import { useGetChannelCategories } from 'queries';
 import { Filters } from '../hooks/useChannelsFilters';
-import { AllCategories } from '../Channels.constants';
+import { AllCategories, subscribedCategory } from '../Channels.constants';
 import { appConfig } from 'config';
 
 export type ChannelCategoriesProps = {
   filters: Filters;
   setFilter: (filter: Partial<Filters>) => void;
+  walletAddress: string | null;
 };
 const scrollAmount = 150;
 
-const ChannelCategories: FC<ChannelCategoriesProps> = ({ filters, setFilter }) => {
+const ChannelCategories: FC<ChannelCategoriesProps> = ({ filters, setFilter, walletAddress }) => {
   const categoryContainerRef = useRef<HTMLDivElement>(null);
 
   const { data, isLoading } = useGetChannelCategories();
@@ -60,12 +61,22 @@ const ChannelCategories: FC<ChannelCategoriesProps> = ({ filters, setFilter }) =
         padding="spacing-none spacing-xxl"
       >
         {!isLoading && (
-          <Pill
-            isActive={filters.category === AllCategories}
-            onClick={() => setFilter({ category: AllCategories })}
-          >
-            {AllCategories}
-          </Pill>
+          <>
+            <Pill
+              isActive={filters.category === AllCategories}
+              onClick={() => setFilter({ category: AllCategories })}
+            >
+              {AllCategories}
+            </Pill>
+            {walletAddress && (
+              <Pill
+                isActive={filters.category === subscribedCategory}
+                onClick={() => setFilter({ category: subscribedCategory })}
+              >
+                {subscribedCategory}
+              </Pill>
+            )}
+          </>
         )}
         {channelCategories.map((cat, index) => (
           <Skeleton

src/modules/channels/components/ChannelSearchAndChainSelection.tsx

@@ -5,7 +5,7 @@ import { Box, Search, Select, TextInput } from 'blocks';
 import { getSelectChains } from 'common';
 import { appConfig } from 'config';
 import { Filters } from '../hooks/useChannelsFilters';
-import { AllCategories } from '../Channels.constants';
+import { AllCategories, subscribedCategory } from '../Channels.constants';
 
 export type ChannelSearchAndChainSelectionProps = {
   filters: Filters;
@@ -19,7 +19,11 @@ const ChannelSearchAndChainSelection: FC<ChannelSearchAndChainSelectionProps> =
 
   const getSearchResults = useCallback(
     debounce((value) => {
-      if (value !== '') setFilter({ search: value, category: AllCategories });
+      if (value !== '')
+        setFilter({
+          search: value,
+          category: filters.category === subscribedCategory ? filters.category : AllCategories,
+        });
     }, 800),
     [setFilter]
   );
@@ -55,7 +59,12 @@ const ChannelSearchAndChainSelection: FC<ChannelSearchAndChainSelectionProps> =
         <Select
           options={getSelectChains(appConfig.allowedNetworks)}
           value={filters.chain}
-          onSelect={(value) => setFilter({ chain: value, category: AllCategories })}
+          onSelect={(value) =>
+            setFilter({
+              chain: value,
+              category: filters.category === subscribedCategory ? filters.category : AllCategories,
+            })
+          }
         />
       </Box>
     </Box>

src/queries/hooks/channels/useChannelSearch.ts

@@ -11,15 +11,16 @@ export type UseChannelSearchProps = {
   pageSize: ChannelSearchParams['pageSize'];
   chain: ChannelSearchParams['chain'];
   tag: ChannelSearchParams['tag'];
+  subscribed: ChannelSearchParams['subscribed'];
 };
 
 // TODO make it a sdk call in future
-export const useChannelSearch = ({ pageSize, query, chain, tag }: UseChannelSearchProps) => {
+export const useChannelSearch = ({ pageSize, query, chain, tag, subscribed }: UseChannelSearchProps) => {
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => {
     return state.user;
   });
   const infiniteQuery = useInfiniteQuery<ChannelsSearchListModelledResponse>({
-    queryKey: [channelSearchList, query, chain, tag],
+    queryKey: [channelSearchList, userPushSDKInstance?.account, query, chain, tag, subscribed],
     initialPageParam: 1,
     enabled: !!query,
     queryFn: ({ pageParam }) =>
@@ -30,6 +31,7 @@ export const useChannelSearch = ({ pageSize, query, chain, tag }: UseChannelSear
         query,
         chain,
         tag,
+        subscribed,
       }),
     getNextPageParam: ({}, allPages, lastPageParam) => {
       if (allPages[(lastPageParam as number) - 1].length < pageSize) {

src/queries/hooks/channels/useGetChannelsList.ts

@@ -13,15 +13,16 @@ export type UseChannelSearchProps = {
   chain?: ChannelListParams['chain'];
   tag?: ChannelListParams['tag'];
   sort?: ChannelListParams['sort'];
+  subscribed: ChannelListParams['subscribed'];
 };
 
 // TODO make it a sdk call in future
-export const useGetChannelslist = ({ order, pageSize, sort, chain, tag }: UseChannelSearchProps) => {
+export const useGetChannelslist = ({ order, pageSize, sort, chain, tag, subscribed }: UseChannelSearchProps) => {
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => {
     return state.user;
   });
   const reactQuery = useInfiniteQuery<ChannelsListModelledResponse>({
-    queryKey: [allChannelsList, chain, tag],
+    queryKey: [allChannelsList, userPushSDKInstance?.account, chain, tag, subscribed],
     initialPageParam: 1,
     queryFn: ({ pageParam }) =>
       getChannelsList({
@@ -32,6 +33,7 @@ export const useGetChannelslist = ({ order, pageSize, sort, chain, tag }: UseCha
         page: pageParam as number,
         chain,
         tag,
+        subscribed,
       }),
     getNextPageParam: ({ itemcount }, allPages, lastPageParam) => {
       if (pageSize * ((lastPageParam as number) + 1) >= itemcount) {

src/queries/services/channels/channelSearch.ts

@@ -1,9 +1,18 @@
 import { ChannelSearchParams } from '../../types';
 
-export const channelSearch = ({ userPushSDKInstance, page, pageSize, query, chain, tag }: ChannelSearchParams) =>
+export const channelSearch = ({
+  userPushSDKInstance,
+  page,
+  pageSize,
+  query,
+  chain,
+  tag,
+  subscribed,
+}: ChannelSearchParams) =>
   userPushSDKInstance.channel.search(query, {
     limit: pageSize,
     page: page,
+    ...(subscribed ? { user_subscribed: subscribed } : {}),
     ...(chain ? { filter: Number(chain) } : {}),
     ...(tag ? { tag } : {}),
   });

src/queries/services/channels/getChannelsList.ts

@@ -1,11 +1,21 @@
 import { ChannelListParams } from '../../types';
 
-export const getChannelsList = ({ userPushSDKInstance, page, pageSize, order, sort, chain, tag }: ChannelListParams) =>
+export const getChannelsList = ({
+  userPushSDKInstance,
+  page,
+  pageSize,
+  order,
+  sort,
+  chain,
+  tag,
+  subscribed,
+}: ChannelListParams) =>
   userPushSDKInstance.channel.list({
     page,
     limit: pageSize,
     order,
     sort,
+    ...(subscribed ? { user_subscribed: subscribed } : {}),
     ...(chain ? { filter: Number(chain) } : {}),
     ...(tag ? { tag } : {}),
   });

src/queries/types/channels.ts

@@ -198,6 +198,7 @@ export type ChannelListParams = {
   sort?: ChannelListSortType;
   chain?: string;
   tag?: string;
+  subscribed?: string;
 };
 
 export type ChannelSearchParams = {
@@ -207,6 +208,7 @@ export type ChannelSearchParams = {
   query: string;
   chain?: string;
   tag?: string;
+  subscribed?: string;
 };
 
 export type ChannelCategoriesResponse = {

yarn.lock

@@ -3808,9 +3808,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pushprotocol/restapi@npm:^1.7.30":
-  version: 1.7.30
-  resolution: "@pushprotocol/restapi@npm:1.7.30"
+"@pushprotocol/restapi@npm:^1.7.31":
+  version: 1.7.31
+  resolution: "@pushprotocol/restapi@npm:1.7.31"
   dependencies:
     "@metamask/eth-sig-util": "npm:^5.0.2"
     axios: "npm:^0.27.2"
@@ -3833,7 +3833,7 @@ __metadata:
   peerDependenciesMeta:
     ethers:
       optional: true
-  checksum: 10/327dbd17b7b3f34d56e5326502358196fcf9320a2fcdc0b73efa60e959c90f7c9359f1ea5d53387dbc8dc0551bbd9f60685dffd688ef6215558fe9939f2aee8a
+  checksum: 10/f79108330cedeeb5decb6d80637569219467d7aa76db8ad1f95270b0a20471592dcacf5920a795373bc6079739e87a1eb22cd4af06a3def13e7e6c032ebb8810
   languageName: node
   linkType: hard
 
@@ -11638,6 +11638,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-set-tostringtag@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "es-set-tostringtag@npm:2.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.2"
+  checksum: 10/86814bf8afbcd8966653f731415888019d4bc4aca6b6c354132a7a75bb87566751e320369654a101d23a91c87a85c79b178bcf40332839bd347aff437c4fb65f
+  languageName: node
+  linkType: hard
+
 "es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.46, es5-ext@npm:^0.10.62, es5-ext@npm:^0.10.63, es5-ext@npm:^0.10.64, es5-ext@npm:~0.10.14, es5-ext@npm:~0.10.2":
   version: 0.10.64
   resolution: "es5-ext@npm:0.10.64"
@@ -12823,13 +12835,14 @@ __metadata:
   linkType: hard
 
 "form-data@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "form-data@npm:4.0.1"
+  version: 4.0.2
+  resolution: "form-data@npm:4.0.2"
   dependencies:
     asynckit: "npm:^0.4.0"
     combined-stream: "npm:^1.0.8"
+    es-set-tostringtag: "npm:^2.1.0"
     mime-types: "npm:^2.1.12"
-  checksum: 10/6adb1cff557328bc6eb8a68da205f9ae44ab0e88d4d9237aaf91eed591ffc64f77411efb9016af7d87f23d0a038c45a788aa1c6634e51175c4efa36c2bc53774
+  checksum: 10/82c65b426af4a40090e517a1bc9057f76970b4c6043e37aa49859c447d88553e77d4cc5626395079a53d2b0889ba5f2a49f3900db3ad3f3f1bf76613532572fb
   languageName: node
   linkType: hard
 
@@ -18017,7 +18030,7 @@ __metadata:
     "@metamask/eth-sig-util": "npm:^4.0.0"
     "@mui/icons-material": "npm:^5.8.4"
     "@mui/material": "npm:^5.5.0"
-    "@pushprotocol/restapi": "npm:^1.7.30"
+    "@pushprotocol/restapi": "npm:^1.7.31"
     "@pushprotocol/socket": "npm:0.5.3"
     "@pushprotocol/uiweb": "npm:1.7.3"
     "@radix-ui/react-dialog": "npm:^1.1.1"