Martinsos
commented
3 years ago Sounds good @cursorial , I like the general idea behind this, you are driving Thoughts to became a really nice project :)! And sorry for slow response, I was on vacation and days just flew by!
MainPage component -> I agree, we can remove this one.
Splitting Thought component into smaller components -> certainly, let's do that.
Naming (ThoughtPage, ThoughtsPage) -> those are very good arguments and I agree with the train of thought. I like the final proposal of ThoughtCreatePage and ThoughtIndexPage. I am considering some small changes, specificaly ThoughtEditorPage and ThoughtListPage, but that is very similar and I am ok with the naming you proposed if you prefer that.
Regarding proposed file structure, I agree it is time to organize stuff! I am however big fan of organizing files by function/feature, instead of organizing them by type. I tried both in the past and I found the former to be easier to navigate as project grows, it also organically grows with the project. So if following that, it could look like:
ext/
- auth/
- LoginPage.css
- LoginPage.js
- SignupPage.css
- SignupPage.js
- operations.js (queries and actions related to auth would go here. If there are many we could split them further.)
- thought/
- editor/
- ThoughtEditorPage.css
- ThoughtEditorPage.js
- ThoughtTextInput.css
- ThoughtTextInput.js
- ThoughtControls.css
- ThoughtControls.js
- ThoughtListPage.css
- ThoughtListPage.js
- operations.js
- tag/
- Tag.css
- Tag.js
- TagsSidebar.css
- TagsSidebar.js
- TagInput.css
- TagInput.js
- operations.js
- layout/
- TopNavbar.css
- TopNavbar.js
- Layout.css
- Layout.js
- images/
- waspLogo.png
This is certainly not the only way to organize it, we could do it somewhat differently, maybe even mix two approaches in the sense that there exists frontend/backend separation on the top level and then from there it is organized by function. But I somewhat like the idea that frontend/backend are not clearly separated, due to how Wasp is trying to blur the line between the two. From the organization I proposed above I feel least confident with the layout dir, it feels like we are putting all the "view" logic there that is general, so maybe it could have a better name. Maybe it should be frontend or view or client or frontend/layout. Not sure thought, I am thinking that will evolve as project grows and will become clearer.
What do you think about this?
cursorial
The MainPage file currently has two components defined in it.
MainPage6 lines long. Does it need to exist? No. We can move the Layout down into the Thought component.Thought128 lines long. Too long, too much going on. Let's break this one down and separate concerns a little. Made up of three main sections:These should all be split out into their own components, we can render them from the
Thoughtcomponent. In addition, CSS can be split out to handle each of these, bringing the app structure closer to where we'd like it forstyled-components.We should change the name of
MainPageto something else. I was thinkingThoughtPagebut this will come awfully close toThoughtsPage, seems picky but this will cause confusion for someone and I don't wanna be that dev. That being said, naming it something too far removed fromThoughtsPagecould be difficult while leavingThoughtsPagealone. I'm tempted to implement a different naming convention here, potentially something along the lines ofThoughtCreatePageandThoughtIndexPageto accurately reflect the way we interact withThoughtdata on each page. I think it would also make a lot of sense to start breaking up the structure into directories at this point.See proposed file structure here: ext/
The
main.waspfile will need to be updated in order to match these new directories.