Skip to content

React 18 Type changes#1027

Draft
tordans wants to merge 22 commits intodevelopfrom
react18
Draft

React 18 Type changes#1027
tordans wants to merge 22 commits intodevelopfrom
react18

Conversation

@tordans
Copy link
Copy Markdown
Contributor

@tordans tordans commented Apr 11, 2022

With React 18, the Types for React.FC changed from including children props to not including them.

Now, React.FC and React.VFC are the same, see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L508-L526

Changes

  • Add children props explicitly where we use React.FC (not all React.FC did in fact use the children props, so some stay as they are)
  • Remove React.VFC in favor of React.FC

TODOs

  • We still need to run type check on this change once we update React.
  • Rebase on master once we are ready

FYI, es gibt noch mehr deprecated types https://github.com/eps1lon/types-react-codemod#all-deprecated--transforms

tordans added 22 commits March 14, 2022 15:31
- extract menu, routes as names export
- rename default route to `.landing`.
- Add first set of content with dummy maps and images for CycleNetworkDevelopmentPage
- Rename ZesPlusResearchPage to follow the *Page pattern
- use named exports
- move maps from components to page-content-folder
- add types in a more standard way
- Extract flying legend to component
- Standardize import/export of planning legend
The linked extension was not available anymore. This one looks more official.
- Message as children
- Make TS
- Move to components2
- Move icons to component folders
- Cleanup SVGs by removing filter and duplicate circle
- Refactor LocatorControl to TS into components2
- Extract LocatorButton from LocatorControl and use that inside the Planung/HBI map, so all Button have the same behavior
- Refactor Styling of MapButtons so they all look the same; and less duplicated styles. Also some hover styles and such.
- Refactor the layer show/hide feature to be used in the fullscreen map; remove it from the previous test page since the interface is now different
- Add a test map on the ZES+ page to test the fullscreen map
- This includes a debug panel that allows to show/hide all layers of the current style. HOWEVER, there is something out of sync here (likely due to async data processing internally in mapbox) so the visibility state is only correct after the next click).
This whole folder was only used by the Map-"Product" (HBI/Planungen) (by now), so we should move it in the component folder over there.

Also import styles directly from the styles file and rename that so it's easier to understand the imports.
Using `css` here activates the code styling; and does not change the outcome.
- Rename ModalCloseIcon component to ClosePanelButton component
- Remove duplicated CloseMapIcon component in favor of reusing ClosePanelButton
- Refactor components to use `style` props which overwrite the given styled-components styles automatically. This means, we need to write less code in styled components.
- Allow MapsControl to be hidden via props
- Add styles for FullscreenMap on mobile
- Cleanup FullscreenMap comments and props
This was an experiment that we do not need anymore. The rest of the code was already removed.
Its used by the Article/Map and Article/FullscreenMap.
Lets use true/false props here for position which makes the code a lot easier.

Also fixes the visibility of the button on desktop.
- Use named export
- Consolidate the types in a /config/types folder
- Simplify the types where possible; did not manage to get rid of the per route-types, though; but they are simplified
- Add types where missing
Remove React.VFC.

This is in preparation for React 18.
@tordans tordans marked this pull request as draft April 11, 2022 07:16
@tordans tordans changed the base branch from develop to zesplus-update-2022-03 April 11, 2022 07:16
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 11, 2022

Codecov Report

❌ Patch coverage is 51.35135% with 198 lines in your changes missing coverage. Please review.
✅ Project coverage is 36.55%. Comparing base (a325118) to head (891c216).
⚠️ Report is 251 commits behind head on develop.

Files with missing lines Patch % Lines
...omponents2/Article/FullscreenMap/FullscreenMap.tsx 34.21% 25 Missing ⚠️
...nents2/Article/FullscreenMap/LayerToggleTester.tsx 15.78% 16 Missing ⚠️
src/apps/Map/index.tsx 0.00% 15 Missing ⚠️
...arch/radnetzentwicklung/components/MapNetworks.tsx 0.00% 15 Missing ⚠️
src/components2/MapsControls/MapControl.tsx 22.22% 14 Missing ⚠️
src/apps/Map/components/MapLegend/Legend.tsx 0.00% 11 Missing ⚠️
...s/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx 0.00% 10 Missing ⚠️
...pages/ZESPlus-Research/radnetzentwicklung/index.ts 0.00% 7 Missing ⚠️
src/components2/ErrorMessage/ErrorMessage.tsx 57.14% 6 Missing ⚠️
...s-Research/radnetzentwicklung/02_SectionBasics.tsx 0.00% 6 Missing ⚠️
... and 23 more
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #1027      +/-   ##
===========================================
+ Coverage    36.37%   36.55%   +0.17%     
===========================================
  Files          500      524      +24     
  Lines         9456     9594     +138     
  Branches      1946     1969      +23     
===========================================
+ Hits          3440     3507      +67     
- Misses        5730     5807      +77     
+ Partials       286      280       -6     
Flag Coverage Δ
unittests 36.55% <51.35%> (+0.17%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ohrie
Copy link
Copy Markdown
Contributor

ohrie commented Jun 13, 2022

It could be useful to use https://github.com/eps1lon/types-react-codemod for automatic migrations to the new explicit type writing for children props and more. Have you tried this already?

Oh I see, you linked it already :D

@tordans tordans force-pushed the zesplus-update-2022-03 branch from d32ea42 to 2bab89c Compare July 6, 2022 14:08
Base automatically changed from zesplus-update-2022-03 to develop July 21, 2022 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants