refactored deviceLimit, linkExpiry and menuItem component

src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx

@@ -25,48 +25,46 @@ export function ManageDeviceLimit({
             deviceLimit: newLimit,
         });
     };
-    const [shareDeviceLimitModalView, setDeviceLimitModalView] =
+    const [changeDeviceLimitView, setChangeDeviceLimitView] = useState(false);
-        useState(false);
-    const [shareDeviceLimitValue, setDeviceLimitValue] = useState(
-        publicShareProp.deviceLimit
-    );
-    useEffect(() => {
-        if (shareDeviceLimitModalView) {
-            setDeviceLimitModalView(true);
-        } else setDeviceLimitModalView(false);
-    }, [shareDeviceLimitModalView]);
     const closeShareExpiryOptionsModalView = () =>
-        setDeviceLimitModalView(false);
+        setChangeDeviceLimitView(false);
-    const openShareExpiryOptionsModalView = () => setDeviceLimitModalView(true);
+    const openShareExpiryOptionsModalView = () =>
-    const changeshareExpiryValue = (value: number) => () => {
+        setChangeDeviceLimitView(true);
+    const changeDeviceLimitValue = (value: number) => () => {
         updateDeviceLimit(value);
-        setDeviceLimitValue(value);
+        publicShareProp.deviceLimit = value;
-        setDeviceLimitModalView(false);
+        setChangeDeviceLimitView(false);
     };
+
+    useEffect(() => {
+        if (changeDeviceLimitView) {
+            setChangeDeviceLimitView(true);
+        } else setChangeDeviceLimitView(false);
+    }, [changeDeviceLimitView]);
+
     return (
         <>
             <EnteMenuItem
                 onClick={openShareExpiryOptionsModalView}
                 endIcon={<ChevronRight />}
-                subText={String(shareDeviceLimitValue)}>
+                subText={String(publicShareProp.deviceLimit)}>
                 {t('LINK_DEVICE_LIMIT')}
             </EnteMenuItem>
             <EnteDrawer
                 anchor="right"
-                open={shareDeviceLimitModalView}
+                open={changeDeviceLimitView}
                 onClose={closeShareExpiryOptionsModalView}>
                 <DialogTitleWithCloseButton
                     onClose={closeShareExpiryOptionsModalView}>
                     {t('LINK_EXPIRY')}
                 </DialogTitleWithCloseButton>
                 <DialogContent>
-                    {/* <OptionWithDivider data={shareExpiryOptions} /> */}
                     <tbody>
                         {getDeviceLimitOptions().map((item) => (
                             <tr key={item.label}>
                                 <td>
                                     <EnteMenuItem
-                                        onClick={changeshareExpiryValue(
+                                        onClick={changeDeviceLimitValue(
                                             item.value
                                         )}>
                                         {item.label}

src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx

@@ -27,24 +27,25 @@ export function ManageLinkExpiry({
             validTill: optionFn,
         });
     };
+
     const [shareExpiryOptionsModalView, setShareExpiryOptionsModalView] =
         useState(false);
+
     const [shareExpiryValue, setShareExpiryValue] = useState(0);
+
     const [labelText, setLabelText] = useState(
         publicShareProp?.validTill
             ? formatDateTime(publicShareProp?.validTill / 1000)
             : 'never'
     );
-    useEffect(() => {
+
-        if (shareExpiryOptionsModalView) {
-            setShareExpiryOptionsModalView(true);
-        } else setShareExpiryOptionsModalView(false);
-    }, [shareExpiryOptionsModalView]);
     const closeShareExpiryOptionsModalView = () =>
         setShareExpiryOptionsModalView(false);
+
     const openShareExpiryOptionsModalView = () =>
         setShareExpiryOptionsModalView(true);
-    const changeshareExpiryValue = (value: number) => () => {
+
+    const changeShareExpiryValue = (value: number) => () => {
         updateDeviceExpiry(value);
         setLabelText(
             publicShareProp?.validTill
@@ -55,6 +56,13 @@ export function ManageLinkExpiry({
         shareExpiryValue;
         setShareExpiryOptionsModalView(false);
     };
+
+    useEffect(() => {
+        if (shareExpiryOptionsModalView) {
+            setShareExpiryOptionsModalView(true);
+        } else setShareExpiryOptionsModalView(false);
+    }, [shareExpiryOptionsModalView]);
+
     return (
         <>
             <EnteMenuItem
@@ -72,13 +80,12 @@ export function ManageLinkExpiry({
                     {t('LINK_EXPIRY')}
                 </DialogTitleWithCloseButton>
                 <DialogContent>
-                    {/* <OptionWithDivider data={shareExpiryOptions} /> */}
                     <tbody>
                         {shareExpiryOptions().map((item) => (
                             <tr key={item.label}>
                                 <td>
                                     <EnteMenuItem
-                                        onClick={changeshareExpiryValue(
+                                        onClick={changeShareExpiryValue(
                                             item.value()
                                         )}>
                                         {item.label}

src/components/Menu/menuItem.tsx

@@ -32,19 +32,11 @@ export function EnteMenuItem({
     checked,
 }: Iprops) {
     const menuContext = useContext(OverflowMenuContext);
-    // const [buttonState, setButtonState] = useState<
-    //     'Default' | 'Loading' | 'Success'
-    // >('Default');
     const handleClick = () => {
-        // setButtonState('Loading');
         onClick();
         if (!keepOpenAfterClick) {
             menuContext.close();
         }
-        // setButtonState('Success');
-        // setTimeout(() => {
-        //     setButtonState('Default');
-        // }, 2000);
     };
     return (
         <MenuItem
@@ -88,7 +80,6 @@ export function EnteMenuItem({
                     {endIcon && (
                         <Box
                             sx={{
-                                padding: 0,
                                 marginLeft: 1,
                             }}>
                             {endIcon}