feat(export): MIN-162 select annotation
Short description:
Added select annotation in export drawer
Approach:
Added export drawer with tabs. Select annotation was created along with fetching data from the backend.
Merge request reports
Activity
assigned to @mateusz-winiarczyk
1 import { stepTypeExportDrawerStateSelector } from '@/redux/drawer/drawer.selectors'; 2 import { useAppSelector } from '@/redux/hooks/useAppSelector'; 3 import { DrawerHeading } from '@/shared/DrawerHeading'; 4 import { TabNavigator } from './TabNavigator'; 5 import { Elements } from './Elements'; 6 7 export const ExportDrawer = (): React.ReactNode => { 8 const stepType = useAppSelector(stepTypeExportDrawerStateSelector); -
I'm curious what is behind this decision ;) It might be also locally stored state since it's simplest stepper and not that complicated compared to "stepper" in search drawer.
According to redux FAQ
Do I have to put all my state into Redux? Should I ever use React's useState or useReducer? There is no “right” answer for this. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state.Don't get me wrong - it's not that implementation is bad. I'm asking just by curiosity
changed this line in version 2 of the diff
I wanted to adhere to the convention I observed in the store where a similar solution already existed. However, in this case, it seems like an overkill because we won't be using it anywhere globally, only in the export drawer component. We can keep it in the local state without any problem. I believe that if this is not our convention, the fewer things we add to the global store, the better.
Fixed
10 const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState); 11 12 return ( 13 render( 14 <Wrapper> 15 <Annotations /> 16 </Wrapper>, 17 ), 18 { 19 store, 20 } 21 ); 22 }; 23 24 describe('Annotations Component', () => { 25 test('renders without crashing', () => { -
Just by reading test cases you should have idea what's happening in the component. They should reflect behaviour E.g. "should not render anotations checboxes when didn't receive anotations data from api" "should render when xyz"
Second thing: when I remove most of the component or remove logic and leave "Select annotations" text -> it will still pass test, won't it? ;) But component behaviour has changed
changed this line in version 2 of the diff
1 /* eslint-disable no-magic-numbers */ 2 import Image from 'next/image'; 3 import React, { KeyboardEvent, useEffect, useState } from 'react'; 4 import lensIcon from '@/assets/vectors/icons/lens.svg'; 5 6 type CheckboxItem = { id: string; label: string }; 7 8 type CheckboxFilterProps = { 9 options: CheckboxItem[]; 10 onFilterChange?: (filteredItems: CheckboxItem[]) => void; 11 onCheckedChange?: (filteredItems: CheckboxItem[]) => void; 12 }; 13 14 const ENTER_KEY_CODE = 'Enter'; 15 16 export const CheckboxFilter = ({ @teoMiesiac I did this in the first implementation so that everything was on onChange, but I noticed that in the topbar search input did not respond to onChange and only to click, and I did the same. I can add onChange again without any problem
added 5 commits
-
26d66b48...33770a77 - 4 commits from branch
development - 5e0e8872 - Merge remote-tracking branch 'origin/development' into MIN-162-select-annotation
-
26d66b48...33770a77 - 4 commits from branch
mentioned in commit 5a7c99ce
