Handling complex component reuse, but with different api requests
Hello,
I have a situation which fried my brain a little and I am posting here to maybe get some suggestions or to confirm if these are my only options.
In our app we have a complex modal with features inside it. Lists, filters on those lists, 3-4 requests are done inside that modal. It also has a navigation nested inside it. It works well.
But, we are now trying to reuse that modal with the same exact functionality, in a different part of our app, but there is a small issue there: the requests there are completely different (different graphql queries and mutations, and the feature requires an additional id). Besides that, everything else, look, feel, etc, is exactly the same. I am trying to find the best solution for this and found 3:
1. Extract as much code as possible into reusable dumb components and make different routes/wrappers for the modal which handle the actual requests - This could work but I feel we would still have some hefty copy/paste code and multiple components and files.
2. Keep the modal as it is, but based on a prop, either do the requests for feature A or feature B - probably the easiest way, but feels messy and what if in the future we add another feature? Add another case?
3. Not sure how well it would work, but... simply send the react query hooks (our custom wrapper ones) as props to the modal which integrates with them when needed?
How do you usually solve these things? Any idea would be much appreciated.
2 Replies
harsh-harlequin•3y ago
I'd probably do something between 1 and 3: create a react context for that feature. Put everything in that context that comes from different sources. Then you can fill the providers for each page with query data from different sources.
This is the opposite of number 2, which I think is the worst solution as it puts one component into two "modes".
Now you have some inversion of control and a feature that is not necessarily "dumb" but it still doesn't know where it's dependencies come from
This feels like great content for a blogpost 😅
absent-sapphireOP•3y ago
Thank you! Yes, putting things into a context was what I was thinking. And yes, even if number 2 seems to be the fastest, it just feels dirty 😄