Aiven-Open / Aiven-Open/klaw

refactor(coral): Replace use of `useOutletContext` by a `query` hook independent from`react-router` context

未关闭
#1,452 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Frontend Housekeeping
主要语言
Java
星标
195
派生
77
平均合并
8 天 9 小时
30 天内合并 PR
1

描述

# What happened?

We are defining a pretty large context through the `useOutletContext` hook provided by `react-router`, both in [`TopicDetails`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/TopicDetails.tsx#L207-L217) and [`ConnectorDetails`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/connectors/details/ConnectorDetails.tsx#L213-L217).

We then initialize this context with data in [`TopicOverviewResourceTabs`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.tsx#L123-L138) and [`ConnectorOverviewResourceTabs.tsx`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.tsx#L104-L114).

We finally use this data wherever we need it by calling the context hook ([example](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/documentation/TopicDocumentation.tsx#L37))

This is a little convoluted, and leads to confusion. Additionally, relying on `react-router` for this kind of data business logic seems unfocused, as we also use `@tanstack/query`, which is much more flexible and powerful.

# What should happen next?

We would want to define `useTopicDetails` and `useConnectorDetails` as hooks wrapping a series of `useQuery` (or one `useQueries`), which would then return the data we need in a more straightforward way. An example of this kind of approach in the codebase [`useExtendedEnvironments`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/acl-request/queries/useExtendedEnvironments.tsx) which compose several API calls.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。