Bai 1641 sort files tab by different fields #2122
Conversation
IR96334
added
enhancement
frontend/src/entry/model/Files.tsx
Outdated
| const menuOpen = Boolean(anchorEl) | ||
| const [orderByValue, setOrderByValue] = useState('createdAt') | ||
| const [orderByButtonTitle, setOrderByButtonTitle] = useState('Order by') | ||
| const [ASCorDESC, setASCorDESC] = useState('DESC') |
There was a problem hiding this comment.
I think we should type this:
export const SortingDirection= {
ASC: 'ascending',
DESC: 'descending',
} as const
export type SortingDirectionKeys = (typeof SortingDirection)[keyof typeof SortingDirection]
That way, we can use it like so:
const [ascOrDesc, setAscOrDesc] = useState<SortingDirectionKeys>(SortingDirection.DESC)
In the above I also changed ASCorDESC to ascOrDesc as the casing is more consistent
frontend/src/entry/model/Files.tsx
Outdated
| [orderByValue], | ||
| ) | ||
|
|
||
| function handleMenuButtonClick(event: React.MouseEvent<HTMLButtonElement>) { |
There was a problem hiding this comment.
Change to
(event: MouseEvent<HTMLButtonElement>)
And import MouseEvent from react
frontend/src/entry/model/Files.tsx
Outdated
| <Box ml='auto'> | ||
| <Stack direction={'row'}> | ||
| <Button | ||
| variant='text' |
There was a problem hiding this comment.
text is the default value for the variant prop so it can be removed
frontend/src/entry/model/Files.tsx
Outdated
| endIcon={anchorEl ? <ExpandLess /> : <ExpandMore />} | ||
| > | ||
| <Stack sx={{ minWidth: '150px' }} direction={'row'} spacing={2} justifyContent={'space-evenly'}> | ||
| {ASCorDESC === 'ASC' ? ( |
There was a problem hiding this comment.
After doing the type change for SortingDirection then you should be able to do:
ascOrDesc === SortingDirection.ASC
frontend/src/entry/model/Files.tsx
Outdated
| setOrderByValue(value) | ||
| setOrderByButtonTitle(title) | ||
| }} | ||
| sx={{ paddingX: '8px' }} |
There was a problem hiding this comment.
paddingX can be shortened to px
and of defining pixels, we can just use numbers, like: px: 2 (obviously change the number to match what you need! Essentially, each number corresponds to a set number of pixels specified in our app (although we could well be using the default value). For example, if 1 corresponds to 5px then 2 would be 10px etc.
frontend/src/entry/model/Files.tsx
Outdated
| onClick={() => { | ||
| setASCorDESC('ASC') | ||
| }} | ||
| sx={{ paddingX: '8px' }} |
There was a problem hiding this comment.
See earlier comment about setting to px: <number>
frontend/src/entry/model/Files.tsx
Outdated
| onClick={() => { | ||
| setASCorDESC('DESC') | ||
| }} | ||
| sx={{ paddingX: '8px' }} |
No description provided.