SVA-444 update filters to new dropdown designs#219
Conversation
dkaschl
left a comment
dkaschl
left a comment
There was a problem hiding this comment.
Give the rather unclear scope and explanation of the ticket mixed with a design where I'm not sure which version we really need to implement, it's a pretty complex and difficult task! As already mentioned it would be important to clarify the exact scope of this ticket and also address what the UI should really be in order to know what exactly what we need to do :)
There was a problem hiding this comment.
please don't commit this file - probably some temp file?
| import SkeletonLoading from '../Components/SkeletonLoading' | ||
| import FreeSearchBar from '../Components/FreeSearchBar' | ||
| import MaterialIcons from 'react-native-vector-icons/MaterialIcons' | ||
| import TagButtons from '../Components/TagButtons' |
There was a problem hiding this comment.
please remove unused imports (do you see them as unused in your IDE? otherwise activating linting would help and there is afaik also the possibility to auto-clean imports on save)
There was a problem hiding this comment.
was adjusting this page part of this ticket scope?
| return ( | ||
| <HStack space={2} alignItems="center"> | ||
| {tags.map(tag => ( | ||
| <Pressable |
There was a problem hiding this comment.
I'd also extract a single tagbutton into it's own component. This component here (TagButtons) could be then just using those tagbutton components. Naming wise we could also name HTagButtons (H for horinzontal) but as we do have only one version currently I think FilterTagButtons would be a good name as it says that it's about tag buttons used for filtering.
| </HStack> | ||
|
|
||
| {/* Display filtered roles based on the search */} | ||
| <SearchResultsView> |
There was a problem hiding this comment.
I am not exactly sure how the search result should be implemented, but when it comes to results I suppose it should be the same style like the other lists and not in this section here. Also searching after every keychange is performancewise a bit costly (and makes the system also slow) so I'd advise here to use something like a debouncing pattern.
|
|
||
| <VStack> | ||
| <ScrollView horizontal showsHorizontalScrollIndicator={false}> | ||
| <ProjectSearchContainer /> |
There was a problem hiding this comment.
we should rethink about the structure and/or the naming of the components. In this component we put together the freesearchbar with it's extra icon on the right "unwrapped" but then wrapp the tagbuttons with it's choicelists in "ProjectSearchContainer" which is actually not the correct naming as it's actually filtering.
There was a problem hiding this comment.
I've added comments on how this component is used in ListContainer.tsx. I think we should rename it and maybe restructure it too.
| } from '@react-navigation/bottom-tabs' | ||
| import { useRoute } from '@react-navigation/native' | ||
| import { ListContainer } from '@/NativeBase/Containers' | ||
| import { ListContainer, ProjectSearchContainer } from '@/NativeBase/Containers' |
There was a problem hiding this comment.
please remove unused imports
| import { ProjectsState } from '@/Store/Projects' | ||
| import { searchByArray, fuzzySearchByArray } from '@/Utils/Search' | ||
|
|
||
| enum Tab { |
There was a problem hiding this comment.
i would have kept the enum, as we would use only the enums throughout this code and if we want to change a name to another one we'd only change it once here.
2 participants
Jira ticket: SVA-444- Roles List - update filters to new drop down designs (curently called projects list)