Organize "components" and "views" folders

[taoeffect]

Problem

The folders frontend/simple/{components,views} are disorganized and it's unclear what goes where.

Everything .vue related used to go into a single folder, but during some hackathon things were split up for some reason, perhaps to differentiate between reusable components and single-page views. However, this isn't how the files in these folders are organized now, and in general it's a mess.

The main problem is with the views folder, which now contains several files that seem better placed in the components folder.

Solution

A simple solution is to require that all of the files in views are mapped to top-level routes defined in js/router.js (with the exception of debug routes for testing individual components, for example, '/members-circle').

Files like TimeTravel.vue, i18n.vue, included.ejs, and anything else that isn't mapped via the router would be moved to components.

There is also the idea of perhaps having components be a subfolder of views. Other suggestions are welcome!

[sandrina-p]

I completely agree with this, since I been there, done that with React Apps. It's not that different from Vue.
My suggestion is similar to yours.

/routers
  -- directly connected to a router (a view -dashboard, inbox, profile, etc..)
/components
  -- pure reusable components (ex: member, votingBanner, etc..)
/containers
  -- components directly connected to the store (ex: create group, navbar, etc..)
/store
  -- any file related to actions, mutations, etc..  

[hubudibu]

+1 for separating components and containers, that made my life much easier with React apps as well.

and +1 for keeping state related stuff in a separate folder - I would go as far as separating actual vuex actions/mutations from our custom events/contract stuff into at least different files, but I think that is another issue :)

for routers, I would stick with calling that views: we only have 1 router, and you used view in the description of it as well, I think it would be more straightforward

[sandrina-p]

I agree with @hubudibu . Do you wanna create a PR with those changes? I can do it too as well if you can't. 😊

[hubudibu]

oh and also, in my current PR I created a mixins folder for the stuff that make vue components smarter, I would keep that as well.

the containers and components separation itself is a bigger task, that would also mean separating existing components into a pure and a connected one (eg. votingBanner is connected to the store since my last PR 😱 ). I'm happy to do these, as I'm already working on eg. the voting stuff

[sandrina-p]

To avoid too many comments here, let's use slack to refine this better and then post here the conclusion ;)

[hubudibu]

"So the first one to finish her task at hands can pick it up first! :)"
"just assign yourself if you start working on it so that we don’t do double work, and I will do the same"