Refactor styled components and add local storage for expanded state

src/app/ChannelsForType.tsx

@@ -18,14 +18,15 @@ import { Icon } from '@iconify/react';
 import { Channel, ChannelType } from './../types/types';
 import { RainDetectionControl } from './controls/RainDetectionControl';
 import { DoorControl } from './controls/DoorControl';
+import { styledWithForward } from './../styled';
 
 
 interface ExpandMoreProps {
-  expanded: string;
+  isExpanded: boolean;
 }
 
-const ExpandMore = styled(Icon)<ExpandMoreProps>(({ expanded }) => ({
-  transform: expanded === 'true' ? 'rotate(180deg)' : 'rotate(0deg)',
+const ExpandMore = styledWithForward(Icon)<ExpandMoreProps>(({ isExpanded }) => ({
+  transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
   marginLeft: 'auto',
   transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   fontSize: '25px',
@@ -86,9 +87,12 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
   const [hasTransitionExited, setHasTransitionExited] = useState<
   boolean
   >(true);
-  const [expanded, setExpanded] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(localStorage.getItem(channelType) === 'true');
 
-  const handleExpandClick = () => setExpanded(!expanded);
+  const handleExpandClick = () => {
+    localStorage.setItem(channelType, (!expanded).toString());
+    setExpanded(!expanded)
+  };
 
   return (
     <Box key={index}>
@@ -110,7 +114,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
           >
             {t(channelType)}
           </Typography>
-          <ExpandMore icon="uiw:down" expanded={expanded.toString()}/>
+          <ExpandMore icon="uiw:down" isExpanded={expanded}/>
         </ListItemButton>
       </ListItem>
       {hasTransitionExited ? <Divider /> : null}

src/app/controls/DoorControl.tsx

@@ -3,6 +3,7 @@ import { StyledIconButton } from '../components/StyledIcons';
 import { KeymaticChannel } from './../../types/types';
 import { useSetValueMutation } from './../../hooks/useApi';
 import { styled } from '@mui/system';
+import { styledWithForward } from './../../styled';
 
 const StyledOuterBox = styled(Box)({
     display: 'flex',
@@ -19,7 +20,7 @@ const StyledOuterBox = styled(Box)({
   interface StyledTypographyProps {
     isUncertain: boolean;
   }
-  const StyledTypography = styled(Typography)<StyledTypographyProps>(({ isUncertain }) => ({
+  const StyledTypography = styledWithForward(Typography)<StyledTypographyProps>(({ isUncertain }) => ({
     display: isUncertain ? 'block' : 'none',
   }));
 

src/styled.ts

@@ -0,0 +1,10 @@
+import isPropValid from '@emotion/is-prop-valid';
+import { styled as muiStyled, CreateMUIStyled } from '@mui/system';
+
+
+export const styledWithForward: CreateMUIStyled = (component: any, options: any) => {
+  return muiStyled(component, {
+    shouldForwardProp: (prop: string | number) => typeof prop === 'string' && isPropValid(prop),
+    ...options,
+  });
+};