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 摘要。