search

zeeguu / web

Frontend for the zeeguu web application.
https://www.zeeguu.org
5 stars 9 forks source link

Hiding responsiveness related code inside separate component #426

Open mircealungu opened 3 months ago

mircealungu commented 3 months ago

For code like this, (from EditButton.js) 

        <Box sx={isPhoneScreen ? s.stylePhone : s.style}>

should we not generate a responsive component that hides that behavior and we simply call it ResponsiveBox or similar?

tfnribeiro commented 2 months ago

I am not sure if this case it is a "Generic" component, or if it's essentially just the word edit Modal. If we consider that it would be a generic component I guess it could be made into it's own thing, but in this case it's just a variation on the EditWordForm in the phone screen.

So at the moment, I would say it's not a "Generic" component that would need a ResponsiveBox to be re-usable.

mircealungu commented 2 months ago

I see what you're saying. The Box is only used in the WordEdit modal so we can leave it like this for now.

However, the Box that contains the WordEditForm is still a generic box that renders whatever it is given as {children}... still, given that we're not doing this conditional rendering of a box elsewhere, we can also leave this till we have to actually do it again. Then it will probably make sense to also introduce an isPhoneScreen hook.