In my app I have a recurring scenario in which the app shows a feedback screen to the user after some backend command is executed to provide info for the user on the outcome of that request. My particular issue is that many of those scenarios have too many different outcome that needs to be informed to the user.
type Feedback = { color: 'green' | 'red'; title: string; subtitle?: string; primaryButton: { label: string; onPress(): void; }; secondaryButton?: { label: string; onPress(): void; };}The component is the same, what changes is the value of the state properties that each feedback has. The component is prepared to produce a variety of options based on the state: e.g., color, title, sometimes subtitle, primary button, sometimes secondary button, etc;
function FeedbackScreen() { const navigation = useNavigation(); const [feedback, setFeedback] = useState<Feedback>(); useEffect(() => { doBackendStuff().then(res => { if (res.success) { setFeedback({ color: 'green', //... primaryButton: { label: 'Go Home!', onPress: () => navigation.navigate('Home'), } }) } else if (res.errorCode = 'error.code.0') { setFeedback({ color: 'red', //... primaryButton: { label: 'Go to help center!', onPress: () => navigation.navigate('Help', { id: 1 }), } }) } else if (/*... */) { //... } //... }); }, []); return ( !feedback ? <Loading /> : <FeeedbackView {...feedback} /> );}So the problem is, as the number of possible feedbacks increase, it becomes unreasonable to maintain all feedbacks in the same place, as I showed on the example code, each feedback is unique, but it depends on the react context to execute hooks functions among other things. In reality, the Feedback type is much more complex than that, but it should be sufficient to illustrate.
My question is [I guess], is there a better way to do that? Is there a pattern to define those states each in their own files? So that it become easier to maintain the code perhaps?
In one of the experiments that I tried, I created a redux like solution to select one feedback from the list of feedbacks possible based on a code and a payload, like redux do with action and a payload as per say, it's was a good approach, helped isolate each possible state if I wanted, but, it required react context to implement the side effects like navigation and collecting function like translations for example.
Anyways, does anybody have a better idea or a known pattern to solve this type o problem? Perhaps there are a totally different approach to it that might be better.