Discover how to design a flexible request-type system in a service desk application using composable APIs and dependency injection. This issue presents a real-world problem, provides context, and invites developers to share their solutions. Learn how to handle dynamic headers and improve your software design skills with practical examples and modern design patterns. Join the discussion and enhance your coding expertise with our hands-on design challenge.
Adding new types of headers would now be as simple as defining a new header component and setting them up in the `headerComponents` map. If the new header is pretty similar to the two existing one (eg: has a title and a description), we could extract a generic `Header` component and use it for each of the headers:
This is an interesting exercise!
I don't have much experience with React but I'll give it a go.
I'd first make the change easy by extracting one component for each of the existing types of headers and a map of header components for each type:
https://gist.github.com/alonsogarciapablo/73ca613d8547690dff37f950971c7411#file-refactor01-js
Adding new types of headers would now be as simple as defining a new header component and setting them up in the `headerComponents` map. If the new header is pretty similar to the two existing one (eg: has a title and a description), we could extract a generic `Header` component and use it for each of the headers:
https://gist.github.com/alonsogarciapablo/73ca613d8547690dff37f950971c7411#file-refactor02-js
This way it'd be even easier to add new headers.
Hope my React code makes any sense 🤣
Thank you so much Pablo for sharing your solution here, I'll share mine in my next issue.
Looking forward to it! 👍