refactoring my react code by making an empty state wrapper component

drying up code by abstracting the empty state logic into a component

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

[benjaminbialy]

If all else fails when deciding what to do i usually fallback to the single responsibility principle for components. I like this pattern, it definitely cleans the code up more, I’ll be doing this!

[jamesreinhart]

Great video! Lots to think about. Going to look into how others are accomplishing the task.

[jjhehe]

is the code in your public repo in github?

[Evikeuklavier]

I think of these things at work all the time. Imperative vs declarative. I tried something like that with a Tooltip component, for which component to appear, the component that controls the show/hide, etc. but my coworker preferred imperatively adding all that logic in each component. I don't think she likes me. 😂

[woops]

what keyboard shortcut do you use to delete entire lines that quickly? 🤔

[Harish-rzgv]

Where can I find your classroom app website? Link??

[AndrewIsherwood]

Great video. When refactoring, it's always hard to know how far is too far. I was wondering whether something that has knowledge of things like loading state, the resulting data etc. should also have responsibility for fetching the data, which would obviously involve your wrapper being passed the query definition. But is that too far? Who knows, I'm inclined to think you got it right (if there is such a thing!) 🙂

[AmenAmenzo]

I guess this should wrap existing components in the project, without a sensible default because at some point I am not concerned about specific customised empty state page. So what I do is use children and provide a default fallback empty state. Otherwise, I really admired the refactoring process, you should do this often!

[ELHAUKEZ]

Hey, what to do if you have a redux store dispatch that changes state and want to act on those state changes in the same function ? I keep getting the old state value. Maybe thats worth a short ❤

[ГенаПетров-ны]

<LoadingStateWrapper isLoading="isLoading">
{isEmpty ? <Empty/> : <Staff/>
</LoadingStateWrapper>

[imornar]

Title should be "code butchering"