diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx index e6cef0383d..03af1aeb5e 100644 --- a/frontend/src/container/GeneralSettings/Retention.tsx +++ b/frontend/src/container/GeneralSettings/Retention.tsx @@ -1,12 +1,10 @@ -import { DownOutlined } from '@ant-design/icons'; -import { Button, Col, Menu, Row, Select } from 'antd'; +import { Col, Row, Select } from 'antd'; import { find } from 'lodash-es'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; -import { Dropdown, Input, RetentionContainer, Typography } from './styles'; +import { Input, RetentionContainer, Typography } from './styles'; import { convertHoursValueToRelevantUnit, - ITimeUnit, SettingPeriod, TimeUnits, } from './utils'; @@ -18,24 +16,22 @@ function Retention({ setRetentionValue, text, hide, -}: RetentionProps): JSX.Element { +}: RetentionProps): JSX.Element | null { const { value: initialValue, timeUnitValue: initialTimeUnitValue, - } = convertHoursValueToRelevantUnit(retentionValue); + } = convertHoursValueToRelevantUnit(Number(retentionValue)); const [selectedTimeUnit, setSelectTimeUnit] = useState(initialTimeUnitValue); const [selectedValue, setSelectedValue] = useState(null); - + const interacted = useRef(false); useEffect(() => { - setSelectedValue(initialValue); + if (!interacted.current) setSelectedValue(initialValue); }, [initialValue]); - useEffect(() => { - setSelectTimeUnit(initialTimeUnitValue); + if (!interacted.current) setSelectTimeUnit(initialTimeUnitValue); }, [initialTimeUnitValue]); - const menuItems = TimeUnits.map((option) => (