import React , { useEffect , useState } from 'react' ; import * as Styled from './DesktopApps.styles' ; import { useDesktopApps } from './DesktopApps.config' ; import DesktopButton from '../DesktopButton/DesktopButton' ; import { useTypedSelector } from '../../hooks/useTypedSelector' ; import { IDesktopApp } from '../../types/ui/desktop-app' ; function returns { JSX . Element } const DesktopApps = ( ) : JSX . Element => { const [ displayedDesktopApps , setDisplayedDesktopApps ] = useState < IDesktopApp [ ] > ( [ ] ) ; const { sortedAlphabetically , sortedByDate , sortedBySize } = useDesktopApps ( ) ; const { sortDesktopIconsBy , removedApps , compressedApps } = useTypedSelector ( ( state ) => state . ui ) ; useEffect ( ( ) => { if ( sortDesktopIconsBy === 'name' ) { setDisplayedDesktopApps ( sortedAlphabetically ) ; } if ( sortDesktopIconsBy === 'date' ) { setDisplayedDesktopApps ( sortedByDate ) ; } if ( sortDesktopIconsBy === 'size' ) { setDisplayedDesktopApps ( sortedBySize ) ; } } , [ sortDesktopIconsBy , removedApps . length , compressedApps . length ] ) ; return ( < Styled . UL > { displayedDesktopApps . map ( ( app ) => ( < Styled . LI key = { app . id + removedApps . length } > < DesktopButton variant = { app . variant } text = { app . text } iconSrc = { app . iconSrc } iconSize = { app . iconSize } action = { app . action } willOpenWindowWith = { app . willOpenWindowWith } / > < /Styled.LI>))} < /Styled.UL>); } ; export default DesktopApps ;