From d30f5f934f709313df1c6c6bc43b29cdfcece990 Mon Sep 17 00:00:00 2001 From: Daniel Stefan Date: Wed, 27 Jul 2022 14:13:10 +0300 Subject: [PATCH] feat: add file store ui --- src/pages/Files/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pages/Files/index.js b/src/pages/Files/index.js index ad772d51..c9123f11 100644 --- a/src/pages/Files/index.js +++ b/src/pages/Files/index.js @@ -17,6 +17,7 @@ import { getFileList } from '../../store/actions/climateWarehouseActions'; const StyledUploadIcon = styled(UploadIcon)` margin-left: auto; + cursor: pointer; `; const StyledSectionContainer = styled('div')` @@ -86,11 +87,16 @@ const StyledIconContainer = styled('div')` cursor: pointer; `; +const SortEnum = { + aToZ: 'aToZ', + zToA: 'zToA', +}; + const Files = () => { const dispatch = useDispatch(); const { fileList } = useSelector(store => store.climateWarehouse); const [filteredFileList, setFilteredFileList] = useState(fileList ?? []); - const [sortOrder, setSortOrder] = useState('A to Z'); + const [sortOrder, setSortOrder] = useState(SortEnum.aToZ); useEffect(() => dispatch(getFileList()), []); useEffect(() => setFilteredFileList(fileList), [fileList]); @@ -119,16 +125,17 @@ const Files = () => { }; }, []); - const getArraySortedAlphabetically = (arr, order) => { + const getArraySortedAlphabetically = useCallback((arr, order) => { const sortAToZ = (a, b) => a.fileName.localeCompare(b.fileName); const sortZToA = (a, b) => b.fileName.localeCompare(a.fileName); - const sortFunction = order === 'A to Z' ? sortAToZ : sortZToA; + const sortFunction = order === SortEnum.aToZ ? sortAToZ : sortZToA; return [...arr].sort(sortFunction); - }; + }, []); const changeSortOrder = useCallback(() => { setSortOrder(prevOrder => { - const newOrder = prevOrder === 'A to Z' ? 'Z to A' : 'A to Z'; + const newOrder = + prevOrder === SortEnum.aToZ ? SortEnum.zToA : SortEnum.aToZ; setFilteredFileList( getArraySortedAlphabetically(filteredFileList, newOrder), ); @@ -146,7 +153,7 @@ const Files = () => { - {sortOrder === 'A to Z' ? ( + {sortOrder === SortEnum.aToZ ? ( <>