Theo's Typesafe Cult•2y ago

How would you structure this Component? A challenge to all advanced React users...

I'm having a bit of trouble structuring this component and I really don't know what to do about my data flow, so all help is appreciated 🙏 I'm creating an app to track what you have done on your job, like a diary. On the page /user/days/ you can add a new day. The main day component has 3 children each representing a section (general info, duration, timeline). The problem lies with the timeline component which has an array of activities and each of those activities is a separate component. The Activity has to be a special component because it has among other details a Uppy file upload for that particular activity and I need to create a special Uppy uploader instance to link it to that activity.

> Day
 --> General
 --> Duration
 --> Timeline
   -> Array< Activity >

> Day
 --> General
 --> Duration
 --> Timeline
   -> Array< Activity >

The problem lies in the fact that the submit button is on the Day component, meaning that I want to trigger the Upload() function (which triggers uppy upload) from the Day component. Which then means I have to use useImperativeHandle from Activity up to Day component. And even then I don't know if I can do that because you pass the ImperativeHanlders when importing a component, import UploadImageComponent, { ForwardedFunctions } from "@components/Upload/UploadBookCoverImage"; so I don't know if that works if I have to map those components.

const activities = []

return (
  {activities.map(_ac => {
    return (
      <UploadImageComponent />
    )
  })}
)

const activities = []

return (
  {activities.map(_ac => {
    return (
      <UploadImageComponent />
    )
  })}
)

^ How can I use a singular ForwaredFunctions to trigger multiple components who pass it?? I hope you understand what I wrote here, and if anyone has any ideas please let me know 👍

3 Replies

benten•2y ago

Use context Each activity uses the context in your parent Day component to do what it needs to do, and the day component handles your uploading logic

arcanereinz•2y ago

Sounds like global state is needed to coordinate between non-direct components. Context or redux is a good choice.

JulieCezarOP•2y ago

True, seems I've been trying to hard to just make it work with props instead of opting for the easier solution xD

Gaming

Programming

How would you structure this Component? A challenge to all advanced React users...