Improve file structure

[prank7]

We need to refactor the file structure of shared directory.

[carloscuatin]

I agree as there are several errors in the file structure and the import of these examples would one leave a index.js in each folder and from there export files, classes or components that are part of that folder

containers/index.js

export DevTools from './DevTools/DevTools';
export PostContainer from './PostContainer/PostContainer';

Import of routers.js

import { PostContainer } from './containers';

[SOSANA]

@carloscuatin I think we should have index.js in reducers folder, than each reducer have its name as the purpose, that way in index.js we can utilize import { combineReducers } from 'redux';

good example that I really liked was @choonkending repo react-webpack-node, each reducer as the name as the reducer and added in index check it out here

Also we should add actions by there name as well as in the future this repo should include another api for users so in future we could have /actions/posts.js and /actions/user.js or whatever future action js file that is needed

Also this brings up questions with server side api and how we would include a new schema to our exisitng api? I know we would add a controller and model but what about applying it to our current server.js file? app.use('/api', posts);

[carloscuatin]

exactly what I mean @SOSANA in fact I'm already asking about certain changes to include REACT-router-redux and agree we should separate our api project and then implement nothing but a proxy so that it can be used in mern

[SOSANA]

@carloscuatin 1+

[SOSANA]

@carloscuatin started refactor reducer plus implementation react-router-redux, you down to update rest of redux folder as per my comment on pr #93

@prank7 @carloscuatin I will do a pr for a refactor in shared components and container to have no sub folder just js files. I will update our module pattern for files affected by new directory path. Are okay with this? plus I'll update files to remove minor errors to fix for eslint that keep showing up I can do at same time.

[prank7]

@SOSANA @carloscuatin sure. We need to get rid of redux folder and it should look more like this-

|- shared
  |- components
  |- containers
  |- tests
  |- actions
  |- constants
  |- reducers
  |- store
  - routes.js

I am in favour of keeping folders inside components and containers because it leaves the scope for anyone using css modules to write css files in the same folder. However, we should rename the main files inside these sub-folders to go by the name of index.js like @carloscuatin mentioned.

Is it a good idea to include react-router-redux?

[SOSANA]

@prank7 @carloscuatin what if we used domain file structure instead of organize files by nature (action, component, container, reducer)?

curious if you have this problem working on hashnode or larger projects? "Fast forward two months from now, and the components/ directory contains dozens of files, and I need to open 4 files in 4 different directories each time I touch a single feature." check out this blog

| - shared
    | - app
        | - Header.js
        | - Sidebar.js
        | -  App.js
        | - reducers.js
        | - routes.js
    | - command/
        | - Command.js
        | - CommandContainer.js
        | - CommandActions.js
        | - CommandList.js
        | - CommandItem.js
        | - CommandHelper.js
        | - commandReducer.js
    | - Post
        | - Post.js
        | - PostContainer.js
        | - PostActions.js
        | - PostList.js
        | - PostItem.js
        | - PostImage.js // if we haded this in future
        | - PostReducer.js
        | - Post.css
    | - user // for future
        | - User.js
        | - UserContainer.js
        | - UserActions.js
        | - UserProfile.js
        | - UserAvatar.js
        | - userReducer.js
        | - User.css
    | - test
        | - app
            | - Header.js
            | - Sidebar.js
            | -  App.js
            | - reducers.js
            | - routes.js
        | - command/
            | - Command.js
            | - CommandContainer.js
            | - CommandActions.js
            | - CommandList.js
            | - CommandItem.js
            | - CommandHelper.js
            | - commandReducer.js
            | - Post
        | - Post.js
            | - PostContainer.js
            | - PostActions.js
            | - PostList.js
            | - PostItem.js
            | - PostImage.js // if we haded this in future
            | - PostReducer.js
            | - Post.css
        | - user // for future
            | - User.js
            | - UserContainer.js
            | - UserActions.js
            | - UserProfile.js
            | - UserAvatar.js
            | - userReducer.js
            | - User.css

[carloscuatin]

@prank7 the idea of implementing react-router-redux is because react-router is not well liked redux, implementing react-router-redux allow you to have full control of our application from redux

[YarivGilad]

What do you think about this suggested folder structure approach?
http://marmelab.com/blog/2015/12/17/react-directory-structure.html

[somus]

Hello, everyone. Past few weeks we have been busy with the development of hashnode. In coming weeks, we are planning to actively work on mern.

Regarding the file structure, what @SOSANA has shared make sense. I've added little changes to that structure. Let me know what you think.

| - shared
    | - components // globaly shared components
        |  - Button.js
    | - pages // can also be called views
        | - App
            | - __tests__ // all the tests for this folder goes here
                | - components // Sub components of this page
                    | - Header.spec.js
                    | - Sidebar.spec.js
                | - App.spec.js
                | - AppReducer.spec.js
                | - AppActions.spec.js
            | - components // Sub components of this page
                | - Header.js
                | - Sidebar.js
            | - App.js
            | - AppReducer.js
            | - AppActions.js
            | - App.css
        | - PostPage
            | - components // Sub components of this page
                | - Post.js
                | - PostList.js
                | - PostItem.js
                | - PostImage.js
            | - PostPage.js
            | - PostReducer.js
            | - PostActions.js
            | - PostPage.css
        | - UserPage
            | - components // Sub components of this page
                | - User.js
                | - UserProfile.js
                | - UserAvatar.js
            | - UserPage.js
            | - UserReducer.js
            | - UserActions.js
            | - UserPage.css
| - utils // utility scripts
| - reducer.js // root reducer
| - store.js
| - routes.js

[SOSANA]

@somus 1+