Skip to content

Commit

Permalink
Subscribe change to subscribev2 (#1524)
Browse files Browse the repository at this point in the history
* Subscribe change to subscribev2

* Changed the code from for loop to array.reduce

* Removed Comments
  • Loading branch information
abhishek-01k authored May 28, 2024
1 parent 5dfc3a6 commit 75c87a5
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 52 deletions.
11 changes: 8 additions & 3 deletions src/components/dropdowns/OptinNotifSettingDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -209,7 +209,7 @@ const OptinNotifSettingDropdown: FC<OptinNotifSettingDropdownProps> = (options)
channelSettings?: ChannelSetting[];
setLoading?: Dispatch<SetStateAction<boolean>>;
}) => {
const setLoadingFunc = setLoading || (options && options.setLoading) || (() => {});
const setLoadingFunc = setLoading || (options && options.setLoading) || (() => { });
setLoadingFunc(true);

let userPushInstance = userPushSDKInstance;
Expand Down Expand Up @@ -240,10 +240,15 @@ const OptinNotifSettingDropdown: FC<OptinNotifSettingDropdownProps> = (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(
Expand Down
10 changes: 5 additions & 5 deletions src/components/reusables/sliders/InputSlider.tsx
Original file line number Diff line number Diff line change
@@ -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<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'> {
Expand All @@ -10,8 +10,8 @@ interface InputSliderProps extends Omit<ComponentPropsWithoutRef<'div'>, '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 = ({
Expand All @@ -33,7 +33,7 @@ const InputSlider = ({
const containerRef = useRef<HTMLDivElement>(null);
const previewSliderRef = useRef<HTMLDivElement>(null);

const handleMouseDown = (e: MouseEvent | TouchEvent) => {
const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => {
if (disabled) return;
if (onDragStart) onDragStart(e);
document.addEventListener('mousemove', handleMouseMove);
Expand Down Expand Up @@ -165,4 +165,4 @@ const PreviewContainer = styled.div`
gap: 10px;
`;

export default InputSlider;
export default InputSlider;
34 changes: 12 additions & 22 deletions src/components/reusables/sliders/RangeSlider.tsx
Original file line number Diff line number Diff line change
@@ -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<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'> {
Expand All @@ -11,9 +11,9 @@ interface RangeSliderProps extends Omit<ComponentPropsWithoutRef<'div'>, '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 = ({
Expand All @@ -40,7 +40,7 @@ const RangeSlider = ({
const inactiveLeftRef = useRef<HTMLDivElement>(null);
const inactiveRightRef = useRef<HTMLDivElement>(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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}%`;
Expand Down Expand Up @@ -191,12 +185,8 @@ const RangeSlider = ({
onMouseUp={handleMouseUpRightThumb}
/>
<Inactive ref={inactiveRightRef} />
{preview && !Number.isNaN(Number(startVal)) && (
<PreviewContainer ref={previewSliderStartRef}>{startVal}</PreviewContainer>
)}
{preview && !Number.isNaN(Number(endVal)) && (
<PreviewContainer ref={previewSliderEndRef}>{endVal}</PreviewContainer>
)}
{preview && !Number.isNaN(Number(startVal)) && <PreviewContainer ref={previewSliderStartRef}>{startVal}</PreviewContainer>}
{preview && !Number.isNaN(Number(endVal)) && <PreviewContainer ref={previewSliderEndRef}>{endVal}</PreviewContainer>}
</Container>
);
};
Expand Down Expand Up @@ -261,4 +251,4 @@ const SliderRange = styled.div`
background-color: #999;
`;

export default RangeSlider;
export default RangeSlider;
104 changes: 82 additions & 22 deletions src/helpers/channel/notifSetting.ts
Original file line number Diff line number Diff line change
@@ -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;
};
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;
};

0 comments on commit 75c87a5

Please sign in to comment.