From 75c87a51670d4157d056e82141a045057e7ce4e9 Mon Sep 17 00:00:00 2001 From: Abhishek <77395788+abhishek-01k@users.noreply.github.com> Date: Tue, 28 May 2024 18:44:47 +0530 Subject: [PATCH] Subscribe change to subscribev2 (#1524) * Subscribe change to subscribev2 * Changed the code from for loop to array.reduce * Removed Comments --- .../dropdowns/OptinNotifSettingDropdown.tsx | 11 +- .../reusables/sliders/InputSlider.tsx | 10 +- .../reusables/sliders/RangeSlider.tsx | 34 ++---- src/helpers/channel/notifSetting.ts | 104 ++++++++++++++---- 4 files changed, 107 insertions(+), 52 deletions(-) diff --git a/src/components/dropdowns/OptinNotifSettingDropdown.tsx b/src/components/dropdowns/OptinNotifSettingDropdown.tsx index fa0fda0839..fe5abb8d9f 100644 --- a/src/components/dropdowns/OptinNotifSettingDropdown.tsx +++ b/src/components/dropdowns/OptinNotifSettingDropdown.tsx @@ -20,7 +20,7 @@ import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; import useToast from 'hooks/useToast'; import { MdCheckCircle, MdError } from 'react-icons/md'; import { ChannelSetting } from 'helpers/channel/types'; -import { userSettingsFromDefaultChannelSetting } from 'helpers/channel/notifSetting'; +import { UserSettingType, getMinimalUserSetting, notifChannelSettingFormatString, userSettingsFromDefaultChannelSetting } from 'helpers/channel/notifSetting'; import { AppContext } from 'contexts/AppContext'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { updateSubscriptionStatus, updateUserSetting } from 'redux/slices/channelSlice'; @@ -209,7 +209,7 @@ const OptinNotifSettingDropdown: FC = (options) channelSettings?: ChannelSetting[]; setLoading?: Dispatch>; }) => { - const setLoadingFunc = setLoading || (options && options.setLoading) || (() => {}); + const setLoadingFunc = setLoading || (options && options.setLoading) || (() => { }); setLoadingFunc(true); let userPushInstance = userPushSDKInstance; @@ -240,10 +240,15 @@ const OptinNotifSettingDropdown: FC = (options) const _signer = await web3Provider?.getSigner(walletAddress); - await PushAPI.channels.subscribe({ + const notifSettings: UserSettingType[] = notifChannelSettingFormatString({ settings: channelSettings }); + + const settingsToSubscribe = getMinimalUserSetting(notifSettings); + + await PushAPI.channels.subscribeV2({ signer: _signer, channelAddress: convertAddressToAddrCaip(channelAddress, chainId), // channel address in CAIP userAddress: convertAddressToAddrCaip(walletAddress, chainId), // user address in CAIP + settings: settingsToSubscribe, onSuccess: () => { dispatch(updateSubscriptionStatus({ channelAddress, status: true })); dispatch( diff --git a/src/components/reusables/sliders/InputSlider.tsx b/src/components/reusables/sliders/InputSlider.tsx index 1a7431977f..152d916459 100644 --- a/src/components/reusables/sliders/InputSlider.tsx +++ b/src/components/reusables/sliders/InputSlider.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, useEffect, useRef, MouseEvent, TouchEvent } from 'react'; +import React, { ComponentPropsWithoutRef, useEffect, useRef } from 'react'; import styled from 'styled-components'; interface InputSliderProps extends Omit, 'children' | 'onChange'> { @@ -10,8 +10,8 @@ interface InputSliderProps extends Omit, 'childr defaultVal: number; preview?: boolean; onChange: (value: { x: number }) => void; - onDragStart?: (e: MouseEvent | TouchEvent) => void; - onDragEnd?: (e: MouseEvent | TouchEvent) => void; + onDragStart?: (e: React.MouseEvent | React.TouchEvent) => void; + onDragEnd?: (e: React.MouseEvent | React.TouchEvent) => void; } const InputSlider = ({ @@ -33,7 +33,7 @@ const InputSlider = ({ const containerRef = useRef(null); const previewSliderRef = useRef(null); - const handleMouseDown = (e: MouseEvent | TouchEvent) => { + const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => { if (disabled) return; if (onDragStart) onDragStart(e); document.addEventListener('mousemove', handleMouseMove); @@ -165,4 +165,4 @@ const PreviewContainer = styled.div` gap: 10px; `; -export default InputSlider; +export default InputSlider; \ No newline at end of file diff --git a/src/components/reusables/sliders/RangeSlider.tsx b/src/components/reusables/sliders/RangeSlider.tsx index 5dd7ced154..4815e48cd9 100644 --- a/src/components/reusables/sliders/RangeSlider.tsx +++ b/src/components/reusables/sliders/RangeSlider.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, useEffect, useRef, MouseEvent, TouchEvent } from 'react'; +import React, { ComponentPropsWithoutRef, useEffect, useRef } from 'react'; import styled from 'styled-components'; interface RangeSliderProps extends Omit, 'children' | 'onChange'> { @@ -11,9 +11,9 @@ interface RangeSliderProps extends Omit, 'childr defaultStartVal: number; defaultEndVal: number; preview?: boolean; - onChange: (value: { startVal: number; endVal: number }) => void; - onDragStart?: (e: MouseEvent | TouchEvent) => void; - onDragEnd?: (e: MouseEvent | TouchEvent) => void; + onChange: (value: { startVal: number, endVal: number }) => void; + onDragStart?: (e: React.MouseEvent | React.TouchEvent) => void; + onDragEnd?: (e: React.MouseEvent | React.TouchEvent) => void; } const RangeSlider = ({ @@ -40,7 +40,7 @@ const RangeSlider = ({ const inactiveLeftRef = useRef(null); const inactiveRightRef = useRef(null); - const handleMouseDownLeftThumb = (e: MouseEvent | TouchEvent) => { + const handleMouseDownLeftThumb = (e: React.MouseEvent | React.TouchEvent) => { if (disabled) return; if (onDragStart) onDragStart(e); // Add event listeners for mousemove and touchmove to track thumb movement @@ -84,7 +84,7 @@ const RangeSlider = ({ document.removeEventListener('touchend', handleMouseUpLeftThumb); }; - const handleMouseDownRightThumb = (e: MouseEvent | TouchEvent) => { + const handleMouseDownRightThumb = (e: React.MouseEvent | React.TouchEvent) => { if (disabled) return; if (onDragStart) onDragStart(e); // Add event listeners for mousemove and touchmove to track thumb movement @@ -132,21 +132,15 @@ const RangeSlider = ({ const showPreview = () => { previewSliderStartRef.current?.style.setProperty('display', 'flex'); previewSliderEndRef.current?.style.setProperty('display', 'flex'); - }; + } const hidePreview = () => { previewSliderStartRef.current?.style.setProperty('display', 'none'); previewSliderEndRef.current?.style.setProperty('display', 'none'); - }; + } useEffect(() => { - if ( - thumbStartRef.current && - inactiveLeftRef.current && - thumbEndRef.current && - activeRef.current && - inactiveRightRef.current - ) { + if (thumbStartRef.current && inactiveLeftRef.current && thumbEndRef.current && activeRef.current && inactiveRightRef.current) { thumbStartRef.current.style.left = `${((startVal - min) / (max - min)) * 98}%`; inactiveLeftRef.current.style.width = `${((startVal - min) / (max - min)) * 100}%`; activeRef.current.style.width = `${((endVal - startVal) / (max - min)) * 100}%`; @@ -191,12 +185,8 @@ const RangeSlider = ({ onMouseUp={handleMouseUpRightThumb} /> - {preview && !Number.isNaN(Number(startVal)) && ( - {startVal} - )} - {preview && !Number.isNaN(Number(endVal)) && ( - {endVal} - )} + {preview && !Number.isNaN(Number(startVal)) && {startVal}} + {preview && !Number.isNaN(Number(endVal)) && {endVal}} ); }; @@ -261,4 +251,4 @@ const SliderRange = styled.div` background-color: #999; `; -export default RangeSlider; +export default RangeSlider; \ No newline at end of file diff --git a/src/helpers/channel/notifSetting.ts b/src/helpers/channel/notifSetting.ts index 2683800193..f688d9c866 100644 --- a/src/helpers/channel/notifSetting.ts +++ b/src/helpers/channel/notifSetting.ts @@ -1,30 +1,90 @@ -import { ChannelSetting, UserSetting } from "./types"; +import { ChannelSetting, UserSetting } from './types'; const isSettingType1 = (setting: ChannelSetting) => setting.type === 1; +export type UserSettingType = { + enabled: boolean; + value?: number | { lower: number; upper: number }; +}; + export const notifChannelSettingFormatString = ({ settings }: { settings: ChannelSetting[] }) => { - let _notifSettings = []; - settings && settings.forEach((setting) => - isSettingType1(setting) - ? _notifSettings.push({ enabled: (setting as ChannelSetting & { type: 1 }).default }) - : _notifSettings.push({ value: (setting as ChannelSetting & { type: 2 }).default , enabled: (setting as ChannelSetting & { type: 2 }).enabled })); - return _notifSettings; -} + let _notifSettings: UserSettingType[] = []; + settings && + settings.forEach((setting) => + isSettingType1(setting) + ? _notifSettings.push({ enabled: (setting as ChannelSetting & { type: 1 }).default }) + : _notifSettings.push({ + value: (setting as ChannelSetting & { type: 2 }).default, + enabled: (setting as ChannelSetting & { type: 2 }).enabled + }) + ); + + return _notifSettings; +}; export const notifUserSettingFormatString = ({ settings }: { settings: UserSetting[] }) => { - let _notifSettings = []; - settings && settings.forEach((setting) => - isSettingType1(setting) - ? _notifSettings.push({ enabled: setting.user }) - : _notifSettings.push({ value: setting.user, enabled: (setting as ChannelSetting & { type: 2 }).enabled })); - return _notifSettings; -} + let _notifSettings = []; + settings && + settings.forEach((setting) => + isSettingType1(setting) + ? _notifSettings.push({ enabled: setting.user }) + : _notifSettings.push({ value: setting.user, enabled: (setting as ChannelSetting & { type: 2 }).enabled }) + ); + return _notifSettings; +}; export const userSettingsFromDefaultChannelSetting = ({ channelSetting }: { channelSetting: ChannelSetting[] }) => { - let _userSettings = []; - channelSetting && channelSetting.forEach((setting) => - isSettingType1(setting) - ? _userSettings.push({ ...setting, user: setting.default }) - : _userSettings.push({ ...setting, user: setting.default })); - return _userSettings; -}; \ No newline at end of file + let _userSettings = []; + channelSetting && + channelSetting.forEach((setting) => + isSettingType1(setting) + ? _userSettings.push({ ...setting, user: setting.default }) + : _userSettings.push({ ...setting, user: setting.default }) + ); + return _userSettings; +}; + +const SETTING_DELIMITER = '-'; +const SETTING_SEPARATOR = '+'; +const RANGE_TYPE = 3; +const SLIDER_TYPE = 2; +const BOOLEAN_TYPE = 1; + +export const getMinimalUserSetting = (settings: UserSettingType[]) => { + if (!settings) { + return null; + } + + let numberOfSettings = 0; + + const userSetting = settings.reduce((acc, ele, i) => { + const enabled = ele.enabled ? 1 : 0; + if (ele.enabled) numberOfSettings++; + + if (Object.keys(ele).includes('value')) { + // slider type + if (typeof ele.value === 'number') { + acc = acc + SLIDER_TYPE + SETTING_DELIMITER + enabled + SETTING_DELIMITER + ele.value; + } else { + acc = + acc + + RANGE_TYPE + + SETTING_DELIMITER + + enabled + + SETTING_DELIMITER + + ele.value?.lower + + SETTING_DELIMITER + + ele.value?.upper; + } + } else { + // boolean type + acc = acc + BOOLEAN_TYPE + SETTING_DELIMITER + enabled; + } + + if (i !== settings.length - 1) acc = acc + SETTING_SEPARATOR; + + return acc; + }, ''); + + return numberOfSettings + SETTING_SEPARATOR + userSetting; +};