Added SDK and type changes for multi-range notif

push-protocol · Nov 29, 2023 · 600edd9 · 600edd9
1 parent e1a3c34
commit 600edd9
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@mui/lab": "^5.0.0-alpha.72",
     "@mui/material": "^5.5.0",
     "@pushprotocol/ledgerlive": "latest",
-    "@pushprotocol/restapi": "1.4.38",
+    "@pushprotocol/restapi": "1.4.41",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.1.19",
     "@reduxjs/toolkit": "^1.7.1",

diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx
@@ -170,7 +170,12 @@ function SendNotifications() {
     if (channelSettings) {
       const settingsOptions = channelSettings.map((setting) => ({
         label:
-          setting.type === 2 ? (
+          setting.type === 3 ? (
+            <DropdownLabel>
+              <div>{setting.description}</div>
+              <Tag>Multi-Range</Tag>
+            </DropdownLabel>
+          ) : setting.type === 2 ? (
             <DropdownLabel>
               <div>{setting.description}</div>
               <Tag>Range</Tag>

diff --git a/src/components/channel/AddSettingModalContent.tsx b/src/components/channel/AddSettingModalContent.tsx
@@ -95,10 +95,10 @@ const AddSettingModalContent = ({
 
   // for range slider
   const [defaultStartValue, setDefaultStartValue] = useState<string>(
-    settingToEdit && settingToEdit.type === 3 ? settingToEdit.defaultStartVal.toString() : ''
+    settingToEdit && settingToEdit.type === 3 ? settingToEdit.default.lower.toString() : ''
   );
   const [defaultEndValue, setDefaultEndValue] = useState<string>(
-    settingToEdit && settingToEdit.type === 3 ? settingToEdit.defaultEndVal.toString() : ''
+    settingToEdit && settingToEdit.type === 3 ? settingToEdit.default.upper.toString() : ''
   );
   const [sliderPreviewStartVal, setSliderPreviewStartVal] = useState<number>();
   const [sliderPreviewEndVal, setSliderPreviewEndVal] = useState<number>();
@@ -117,17 +117,33 @@ const AddSettingModalContent = ({
     if (
       isAllFilledAndValid({
         setErrorInfo,
-        defaultValue,
+        defaultValue: enableMultiRange ? { lower: defaultStartValue, upper: defaultEndValue } : defaultValue,
         settingName,
         lowerLimit,
-        type: isRange ? 2 : 1,
+        type: isRange ? (enableMultiRange ? 3 : 2) : 1,
         upperLimit,
         sliderStep,
       })
     ) {
       const index = settingToEdit ? settingToEdit.index : Math.floor(Math.random() * 1000000);
       const settingData: ChannelSetting = isRange
-        ? {
+        ? enableMultiRange 
+          ? 
+          {
+            type: 3,
+            default: {
+              lower: Number(defaultStartValue),
+              upper: Number(defaultEndValue)
+            },
+            enabled: isDefault,
+            description: settingName,
+            index: index,
+            lowerLimit: Number(lowerLimit),
+            upperLimit: Number(upperLimit),
+            ticker: Number(sliderStep),
+          } 
+          : 
+          {
             type: 2,
             default: Number(defaultValue),
             enabled: isDefault,
@@ -379,10 +395,13 @@ const AddSettingModalContent = ({
                     color={theme.editChannelPrimaryText}
                     value={defaultStartValue}
                     onChange={(e) => {
+                      setErrorInfo((prev) => ({ ...prev, defaultStart: undefined }));
+                      if (isInvalidNumber(e.target.value)) return;
                       setDefaultStartValue(e.target.value);
                       setSliderPreviewStartVal(Number(e.target.value));
                     }}
                     autocomplete="off"
+                    hasError={errorInfo?.defaultStart ? true : false}
                   />
                   <Label padding="0px 16px">to</Label>
                   <MaxWidthInput
@@ -402,12 +421,16 @@ const AddSettingModalContent = ({
                     color={theme.editChannelPrimaryText}
                     value={defaultEndValue}
                     onChange={(e) => {
+                      setErrorInfo((prev) => ({ ...prev, defaultEnd: undefined }));
+                      if (isInvalidNumber(e.target.value)) return;
                       setDefaultEndValue(e.target.value);
                       setSliderPreviewEndVal(Number(e.target.value));
                     }}
                     autocomplete="off"
+                    hasError={errorInfo?.defaultEnd ? true : false}
                   />
                 </Item> 
+                <ErrorInfo>{errorInfo?.defaultStart || errorInfo?.defaultEnd}</ErrorInfo>
               </Item>
             }
             <Item

diff --git a/src/components/channel/ChannelInfoList.tsx b/src/components/channel/ChannelInfoList.tsx
@@ -89,6 +89,7 @@ const ChannelInfoList = (props: ChannelInfoListProps) => {
                           <>
                             <NotificationSettingName>{item.description}</NotificationSettingName>
                             {item.type === 2 && <Tag>Range</Tag>}
+                            {item.type === 3 && <Tag>Multi-Range</Tag>}
                           </>
                         )}
                         {props.isAddress && isOwner(props.account, item) && <Tag>Creator</Tag>}

diff --git a/src/components/channel/NotificationSettings.tsx b/src/components/channel/NotificationSettings.tsx
@@ -142,7 +142,32 @@ function NotificationSettings() {
             default: setting.default ? 1 : 0,
           };
         }
-        if (setting.type === 2) {
+        else if (setting.type === 2) {
+          console.log(
+            {
+              type: setting.type,
+            description: setting.description,
+            default: setting.default,
+            data: {
+              lower: setting.lowerLimit,
+              upper: setting.upperLimit,
+              ticker: setting.ticker,
+              enabled: setting.enabled,
+            },
+            }
+          )
+          return {
+            type: setting.type,
+            description: setting.description,
+            default: setting.default,
+            data: {
+              lower: setting.lowerLimit,
+              upper: setting.upperLimit,
+              ticker: setting.ticker,
+              enabled: setting.enabled,
+            },
+          };
+        } else if (setting.type === 3) {
           console.log(
             {
               type: setting.type,
@@ -169,6 +194,7 @@ function NotificationSettings() {
           };
         }
       });
+      console.log(settingData);
       await userPushSDKInstance.channel.setting(settingData);
 
       dispatch(updateChannelSetting({ channelAddress, settings }));

diff --git a/src/components/dropdowns/OptinNotifSettingDropdown.tsx b/src/components/dropdowns/OptinNotifSettingDropdown.tsx
@@ -42,7 +42,7 @@ const OptinNotifSettingDropdownContainer: React.FC<OptinNotifSettingDropdownCont
 
   const theme = useTheme();
 
-  const handleSliderChange = (index: number, value: number) => {
+  const handleSliderChange = (index: number, value: number | { lower: number, upper: number }) => {
     const updatedSettings = [...modifiedSettings];
     updatedSettings[index].default = value;
     setModifiedSettings(updatedSettings);
@@ -84,36 +84,36 @@ const OptinNotifSettingDropdownContainer: React.FC<OptinNotifSettingDropdownCont
                     handleDiameter={12}
                 />
             </DropdownSwitchItem>
-          {setting.type === 2 && setting.enabled === true && (
-            <DropdownSliderItem>
+            {setting.type === 2 && setting.enabled === true && (
+              <DropdownSliderItem>
+                <SpanV2 color={theme.fontColor} fontSize="18px" fontWeight='600' alignSelf="flex-start">
+                    {setting.default}
+                </SpanV2>
                 <InputSlider
+                    val={setting.default}
                     max={setting.upperLimit}
                     min={setting.lowerLimit}
                     step={setting.ticker || 1}
-                    val={setting.default}
                     defaultVal={setting.default}
                     onChange={({ x }) => handleSliderChange(index, x)}
                 />
-                <SpanV2 color={theme.fontColor} fontSize="16px" fontWeight='500' textAlign="right" margin="0 0 0 16px">
-                    {setting.default}
-                </SpanV2>
-            </DropdownSliderItem>
-          )}
+              </DropdownSliderItem>
+            )}
           {setting.type === 3 && setting.enabled === true && (
             <DropdownSliderItem>
-                <RangeSlider
-                    max={setting.upperLimit}
-                    min={setting.lowerLimit}
-                    step={setting.ticker || 1}
-                    startVal={setting.defaultStartVal}
-                    endVal={setting.defaultEndVal}
-                    defaultStartVal={setting.defaultStartVal}
-                    defaultEndVal={setting.defaultEndVal}
-                    onChange={({ x }) => handleSliderChange(index, x)}
-                />
-                <SpanV2 color={theme.fontColor} fontSize="16px" fontWeight='500' textAlign="right" margin="0 0 0 16px">
-                    {setting.defaultStartVal} - {setting.defaultEndVal}
-                </SpanV2>
+              <SpanV2 color={theme.fontColor} fontSize="18px" fontWeight='600' alignSelf="flex-start">
+                  {setting.default.lower} - {setting.default.upper}
+              </SpanV2>
+              <RangeSlider
+                  startVal={setting.default.lower}
+                  endVal={setting.default.upper}
+                  max={setting.upperLimit}
+                  min={setting.lowerLimit}
+                  step={setting.ticker || 1}
+                  defaultStartVal={setting.default.lower}
+                  defaultEndVal={setting.default.upper}
+                  onChange={({ startVal, endVal }) => handleSliderChange(index, {lower: startVal, upper: endVal})}
+              />
             </DropdownSliderItem>
           )}
         </DropdownInnerContainer>
@@ -276,14 +276,14 @@ const DropdownSwitchItem = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center; 
-    padding: 10px 0px;
+    padding: 12px 0px;
 `;
 
 const DropdownSubmitItem = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center; 
-    padding: 10px 0px;
+    padding: 12px 0px;
 `;
 
 const DropdownSubmitButton = styled.button`
@@ -329,9 +329,10 @@ const DropdownSubmitButton = styled.button`
 
 const DropdownSliderItem = styled.div`
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 13px;
     align-items: center; 
-    padding-bottom: 10px;
+    padding-bottom: 12px;
 `;
 
 const ActionTitle = styled.span<{ hideIt: boolean }>`

diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx
@@ -9,6 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 // Internal Components
 import { DropdownBtnHandler } from "./DropdownBtnHandler";
 import InputSlider from "components/reusables/sliders/InputSlider";
+import RangeSlider from "components/reusables/sliders/RangeSlider";
 
 // Internal Configs
 import { SpanV2 } from "components/reusables/SharedStylingV2";
@@ -43,7 +44,7 @@ const UpdateNotifSettingDropdownContainer: React.FC<UpdateNotifSettingDropdownCo
 
   const theme = useTheme();
 
-  const handleSliderChange = (index: number, value: number) => {
+  const handleSliderChange = (index: number, value: number | {lower: number, upper: number}) => {
     const updatedSettings = [...modifiedSettings];
     updatedSettings[index].user = value;
     setModifiedSettings(updatedSettings);
@@ -56,11 +57,16 @@ const UpdateNotifSettingDropdownContainer: React.FC<UpdateNotifSettingDropdownCo
       // Use a type guard to narrow the type to UserSetting of type 1
       const setting = updatedSettings[index] as UserSetting & { type: 1 };
       setting.user = !setting.user;
-    } else {
+    } else if (updatedSettings[index].type === 2) {
       // Type 2
       // Use a type guard to narrow the type to UserSetting of type 2
       const setting = updatedSettings[index] as UserSetting & { type: 2 };
       setting.enabled = !setting.enabled;
+    } else {
+      // Type 3
+      // Use a type guard to narrow the type to UserSetting of type 2
+      const setting = updatedSettings[index] as UserSetting & { type: 3 };
+      setting.enabled = !setting.enabled;
     }
     setModifiedSettings(updatedSettings);
   };
@@ -87,17 +93,34 @@ const UpdateNotifSettingDropdownContainer: React.FC<UpdateNotifSettingDropdownCo
             </DropdownSwitchItem>
           {setting.type === 2 && setting.enabled === true && (
             <DropdownSliderItem>
-                <InputSlider
-                    val={setting.user}
-                    max={setting.upperLimit}
-                    min={setting.lowerLimit}
-                    step={setting.ticker || 1}
-                    defaultVal={setting.default}
-                    onChange={({ x }) => handleSliderChange(index, x)}
-                />
-                <SpanV2 color={theme.fontColor} fontSize="16px" fontWeight='500' textAlign="right" margin="0 0 0 16px">
-                    {setting.user}
-                </SpanV2>
+              <SpanV2 color={theme.fontColor} fontSize="18px" fontWeight='600' alignSelf="flex-start">
+                  {setting.user || setting.default}
+              </SpanV2>
+              <InputSlider
+                  val={setting.user}
+                  max={setting.upperLimit}
+                  min={setting.lowerLimit}
+                  step={setting.ticker || 1}
+                  defaultVal={setting.default}
+                  onChange={({ x }) => handleSliderChange(index, x)}
+              />
+            </DropdownSliderItem>
+          )}
+          {setting.type === 3 && setting.enabled === true && (
+            <DropdownSliderItem>
+              <SpanV2 color={theme.fontColor} fontSize="18px" fontWeight='600' alignSelf="flex-start">
+                  {setting.user.lower || setting.default.lower} - {setting.user.upper || setting.default.upper}
+              </SpanV2>
+              <RangeSlider
+                  startVal={setting.user.lower || setting.default.lower}
+                  endVal={setting.user.upper || setting.default.upper}
+                  max={setting.upperLimit}
+                  min={setting.lowerLimit}
+                  step={setting.ticker || 1}
+                  defaultStartVal={setting.default.lower}
+                  defaultEndVal={setting.default.upper}
+                  onChange={({ startVal, endVal }) => handleSliderChange(index, {lower: startVal, upper: endVal})}
+              />
             </DropdownSliderItem>
           )}
         </DropdownInnerContainer>
@@ -258,14 +281,14 @@ const DropdownSwitchItem = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center; 
-    padding: 10px 0px;
+    padding: 12px 0px;
 `;
 
 const DropdownSubmitItem = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center; 
-    padding: 10px 0px;
+    padding: 12px 0px;
 `;
 
 const DropdownSubmitButton = styled.button`
@@ -311,9 +334,10 @@ const DropdownSubmitButton = styled.button`
 
 const DropdownSliderItem = styled.div`
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 13px;
     align-items: center; 
-    padding-bottom: 10px;
+    padding-bottom: 12px;
 `;
 
 const ActionTitle = styled.span<{ hideIt: boolean }>`

diff --git a/src/components/reusables/sliders/RangeSlider.tsx b/src/components/reusables/sliders/RangeSlider.tsx
@@ -144,7 +144,7 @@ const RangeSlider = ({
       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}%`;
-      thumbEndRef.current.style.left = `${((endVal) / (max - min)) * 98}%`;
+      thumbEndRef.current.style.left  = `${((endVal - min) / (max - min)) * 95}%`;
       inactiveRightRef.current.style.width = `${((max - endVal) / (max - min)) * 100}%`;
 
       previewSliderStartRef.current?.style.setProperty(