Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscribe change to subscribev2 #1524

Merged
merged 4 commits into from
May 28, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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;
106 changes: 84 additions & 22 deletions src/helpers/channel/notifSetting.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,92 @@
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 })
);
abhishek-01k marked this conversation as resolved.
Show resolved Hide resolved
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 userSetting = '';
abhishek-01k marked this conversation as resolved.
Show resolved Hide resolved
let numberOfSettings = 0;

//TODO: Use array.reduce( preffered) or array.forEach (less preffered) instead of for loop
abhishek-01k marked this conversation as resolved.
Show resolved Hide resolved
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;
};
Loading