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.
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.
