Remove all class components and replace them functional components using hooks

[kschiffer]

Summary

To follow the latest best practices and simplify implementations, we should work to replace any React class component with a functional component. We already converted many in the last years and I replaced many more as part of #6327 but there is still a substantial amount left.

Current Situation

Many older components still use the class-based approach, which is becoming increasingly cumbersome as it often causes incompatibilities with upgraded dependencies, such as react-router v6 but also overall constitutes a code smell. Latest react versions clearly state functional components as the preferred modus.

Why do we need this? Who uses it, and when?

We need this to address technical debt and to make our codebase more future-proof. It's also annoying to have to convert classes on the spot while working on other features, as it takes additional time, poses potential error risks and dilutes the diff which makes reviewing harder.

Proposed Implementation

Let's make sure we do this in a consistent manner. Here's are the guidelines I followed when converting components:

1. Class components that make use of withRequest()-HOC to fetch initial data should be split into two functional components (outer and inner, arrow functions, the outer should keep the original name), so that <RequireRequest requestAction={exampleActionCreator(param1, param2)} /> can be run in the outer function to ensure that all required data will be available in the inner class when using useSelect.
2. Class components that make use of connect()-HOC should be refactored to use useSelect() instead (in the inner component)
3. Class components that make use of withBreadcrumbs()-HOC should use useBreadcrumbs('id.path', <Breadcrumbs … />)-hook instead (same signature as withBreadcrumbs)
4. Class components that make use of withFeatureRequirement()-HOC for feature flags should use <Require featureCheck={mayDoAction} otherwise={{ redirect: '/example-route' }} /> instead
5. Classes using Routes should use relative paths (react router v6)
6. All hooks and handlers should be wrapped in useCallback()
7. Unused proptypes should be removed

Contributing

• I can help by doing more research.
• I can help by implementing the feature after the proposal above is approved.
• I can help by testing the feature before it's released.

Code of Conduct

• I agree to follow TTN's Community Code of Conduct.

[kschiffer]

Once we have all class components removed, we'll also be able to refactor our redux-actions to get rid of REQUEST|SUCCESS|FAILURE actions, as we can fully switch to promisified dispatches. This will make action definition a lot simpler, readable, and maintainable.

[KrishnaIyer]

As discussed offline, @ryaplots will take a crack at this this milestone to see how far we can get.