Skip to content

Commit d88c1ed

Browse files
ShahanaFarooquiShahanaFarooqui
committed
Fixed Toggle Switch for Generic Use
1 parent f18580a commit d88c1ed

4 files changed

Lines changed: 62 additions & 37 deletions

File tree

‎apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@
1616
display: flex;
1717
justify-content: flex-start;
1818

19+
&.toggle-disabled {
20+
opacity: 0.45;
21+
&:hover {
22+
cursor: not-allowed;
23+
}
24+
}
25+
1926
& .toggle-bg-text {
2027
height: 100%;
2128
}

‎apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.test.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { APP_ANIMATION_DURATION } from '../../../utilities/constants';
44
import { createMockStore } from '../../../utilities/test-utilities/mockStore';
55
import { mockAppStore } from '../../../utilities/test-utilities/mockData';
66
import ToggleSwitch from './ToggleSwitch';
7-
import { Units } from '../../../utilities/constants';
87

98
describe('ToggleSwitch component ', () => {
109
it('should be in the document', async () => {
@@ -13,9 +12,8 @@ describe('ToggleSwitch component ', () => {
1312
<Provider store={store}>
1413
<ToggleSwitch
1514
values={['SATS', 'BTC']}
16-
selValue={Units.SATS}
17-
storeSelector="appConfig"
18-
storeKey="unit"
15+
selIndex={0}
16+
onChange={() => {}}
1917
/>
2018
</Provider>
2119
);

‎apps/frontend/src/components/shared/ToggleSwitch/ToggleSwitch.tsx‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,56 @@
11
import './ToggleSwitch.scss';
2-
import { useState } from 'react';
2+
import { useEffect, useState } from 'react';
33
import { motion } from 'framer-motion';
44

5-
import { SPRING_VARIANTS } from '../../../utilities/constants';
6-
import { RootService } from '../../../services/http.service';
7-
import { setConfig } from '../../../store/rootSlice';
8-
import { useDispatch, useSelector } from 'react-redux';
9-
import { selectAppConfig } from '../../../store/rootSelectors';
5+
import { BOUNCY_SPRING_VARIANTS_1 } from '../../../utilities/constants';
106

11-
const ToggleSwitch = props => {
12-
const dispatch = useDispatch();
13-
const [isSwitchOn, setIsSwitchOn] = useState(props.selValue === props.values[1]);
14-
const appConfig = useSelector(selectAppConfig);
15-
16-
const changeValueHandler = async() => {
17-
setIsSwitchOn((prevValue) => !prevValue);
18-
const currValue = isSwitchOn ? 0 : 1;
19-
const updatedConfig = {
20-
...appConfig,
21-
uiConfig: {
22-
...appConfig.uiConfig,
23-
unit: props.values[currValue]
24-
}
25-
};
26-
await RootService.updateConfig(updatedConfig);
27-
dispatch(setConfig(updatedConfig));
7+
const ToggleSwitch = ({
8+
values,
9+
selIndex,
10+
onChange,
11+
className = '',
12+
disabled = false,
13+
}: {
14+
values: (string | React.ReactNode)[];
15+
selIndex: number;
16+
onChange: (index: number) => void;
17+
className?: string;
18+
disabled?: boolean;
19+
}) => {
20+
const [isSwitchOn, setIsSwitchOn] = useState(selIndex === 1);
21+
22+
useEffect(() => {
23+
setIsSwitchOn(selIndex === 1);
24+
}, [selIndex]);
25+
26+
const changeValueHandler = () => {
27+
if (disabled) return;
28+
const nextIndex = isSwitchOn ? 0 : 1;
29+
setIsSwitchOn(!isSwitchOn);
30+
onChange(nextIndex);
2831
};
2932

3033
return (
3134
<div
32-
className={'fs-7 toggle ' + (props.className ? props.className : '')}
35+
className={'fs-7 toggle ' + (className ? className : '') + (disabled ? ' toggle-disabled' : '')}
3336
data-isswitchon={isSwitchOn}
3437
onClick={changeValueHandler}
3538
data-testid="toggle-switch"
39+
aria-disabled={disabled}
3640
>
3741
<div className="toggle-bg-text px-2 d-flex flex-fill align-items-center justify-content-between">
38-
<span className="text-center me-2">{props.values[0]}</span>
39-
<span className="text-center ms-2">{props.values[1]}</span>
42+
<span>{values[0]}</span>
43+
<span className="me-1">{values[1]}</span>
4044
</div>
4145
<motion.div
4246
layout
43-
transition={SPRING_VARIANTS}
47+
transition={BOUNCY_SPRING_VARIANTS_1}
4448
className={
45-
'toggle-switch justify-content-center d-flex align-items-center ' +
49+
'toggle-switch d-flex align-items-center justify-content-center ' +
4650
(isSwitchOn ? 'toggle-right' : 'toggle-left')
4751
}
4852
>
49-
<span>{props.selValue}</span>
53+
<span>{isSwitchOn ? values[1] : values[0]}</span>
5054
</motion.div>
5155
</div>
5256
);

‎apps/frontend/src/components/ui/Settings/Settings.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import './Settings.scss';
22
import { Dropdown } from 'react-bootstrap';
3-
3+
import { useDispatch, useSelector } from 'react-redux';
44
import logger from '../../../services/logger.service';
55
import useBreakpoint from '../../../hooks/use-breakpoint';
6-
import { CURRENCY_UNITS } from '../../../utilities/constants';
6+
import { CURRENCY_UNITS, Units } from '../../../utilities/constants';
77
import { SettingsSVG } from '../../../svgs/Settings';
88
import FiatSelection from '../../shared/FiatSelection/FiatSelection';
99
import ToggleSwitch from '../../shared/ToggleSwitch/ToggleSwitch';
1010
import { setShowModals } from '../../../store/rootSlice';
11-
import { useDispatch, useSelector } from 'react-redux';
11+
import { RootService } from '../../../services/http.service';
12+
import { setConfig } from '../../../store/rootSlice';
13+
import { selectAppConfig } from '../../../store/rootSelectors';
1214
import { selectIsAuthenticated, selectNodeInfo, selectServerConfig, selectShowModals, selectUIConfigUnit, selectWalletConnect } from '../../../store/rootSelectors';
15+
import { ApplicationConfiguration } from '../../../types/root.type';
1316

1417
const Settings = (props) => {
1518
const dispatch = useDispatch();
19+
const appConfig = useSelector(selectAppConfig);
1620
const isAuthenticated = useSelector(selectIsAuthenticated);
1721
const uiConfigUnit = useSelector(selectUIConfigUnit);
1822
const nodeInfo = useSelector(selectNodeInfo);
@@ -22,6 +26,18 @@ const Settings = (props) => {
2226
const currentScreenSize = useBreakpoint();
2327
logger.info('Screen Size Changed: ' + currentScreenSize);
2428

29+
const changeCurrencyUnitHandler = async(changedIndex: number) => {
30+
const updatedConfig: ApplicationConfiguration = {
31+
...appConfig,
32+
uiConfig: {
33+
...appConfig.uiConfig,
34+
unit: CURRENCY_UNITS[changedIndex]
35+
}
36+
};
37+
await RootService.updateConfig(updatedConfig);
38+
dispatch(setConfig(updatedConfig));
39+
};
40+
2541
return (
2642
<Dropdown autoClose={'outside'} className={!!(nodeInfo.error || (isAuthenticated && nodeInfo.isLoading)) ? 'settings-menu dropdown-disabled' : 'settings-menu'} data-testid='settings'>
2743
<Dropdown.Toggle variant={props.compact ? '' : 'primary'} disabled={!!(nodeInfo.error || (isAuthenticated && nodeInfo.isLoading))} className={props.compact ? 'd-flex align-items-center btn-rounded btn-compact btn-settings-menu' : 'd-flex align-items-center btn-rounded btn-settings-menu'}>
@@ -40,7 +56,7 @@ const Settings = (props) => {
4056
}
4157
<Dropdown.Divider />
4258
<Dropdown.Item as='div' className='d-flex align-items-center justify-content-between'>Fiat Currency <FiatSelection className='ms-4 fiat-dropdown' /></Dropdown.Item>
43-
<Dropdown.Item as='div' className='d-flex align-items-center justify-content-between'>Currency <ToggleSwitch values={CURRENCY_UNITS} selValue={uiConfigUnit} /></Dropdown.Item>
59+
<Dropdown.Item as='div' className='d-flex align-items-center justify-content-between'>Currency <ToggleSwitch onChange={changeCurrencyUnitHandler} values={CURRENCY_UNITS} selIndex={uiConfigUnit === Units.BTC ? 1 : 0} /></Dropdown.Item>
4460
</Dropdown.Menu>
4561
</Dropdown>
4662
);

0 commit comments

Comments
 (0)