Fractal routes

[renanvalentin]

Hey guys!

I would try the fractal structure since the flat isn't scale right now because it is getting hard to locate files.

I've created this poc, but still I'm having some doubts:

Let's suppose that I need this routes: /bid /bid/request /bid/{id}/details

How would be the project structure like?

.
│   ── routes               
│       ├── index.js      
│       └── Bid            
│           ├── index.js    
│           ├── assets      
│           ├── components
│           ├── container   
│           ├── modules    
│           └── routes 
│                └── Request            
│                     ├── index.js    
│                     ├── assets      
│                     ├── components
│                     ├── container   
│                     ├── modules    
│                └── Details            
│                     ├── index.js    
│                     ├── assets      
│                     ├── components
│                     ├── container   
│                     ├── modules    

And the routes would be something like this?

javascript
// Bid/index.js
import React from 'react';

import BidView from './components/BidView';

import Routes from './routes';

export default {
  path: 'bid',
  component: BidView,
  childRoutes: [
    Routes
  ]
}

// Bid/routes/index.js
import React from 'react';

import Request from './Request';
import Details from './Details';

export default {
  childRoutes: [
    Request,
    Details
  ]
};

// Bid/routes/Request/index.js
import React from 'react';

import RequestView from './components/RequestView';

export default {
  path: 'request',
  component: RequestView
}

// Bid/routes/Details/index.js

import React from 'react';

import DetailsView from './components/DetailsView';

export default {
  path: ':id/details',
  component: DetailsView
}

Where should be defined the path routes? Am I doing it the right way?

Thanks in advance!

[zentuit]

@renanvalentin : have you gotten any further with this? I'm investigating fractal routes right now and am looking for more examples/documentation.

[zargold]

I think right now its confusing to have to look at all the containers and then switch completely to components. I'd prefer to have each applet in a folder with all of its components by itself it can still be fractal but what do I care about the messaging app when I'm working on something totally different only problem with this approach is that it still puts things in routes. For my app I have a side menu app which is always there part of the layout it really doesn't make sense for anything to be in routes (its always there...) regardless of the route so now I have to have components, and containers in its folder and I might as well have that for each route. I don't have to use Routes on everything, just like I don't have to have components for everything (some things might just be containers)... So I'd prefer:

 |  ── apps (which also reduces the redundant routes, this is also nice because its like django).               
│       ├── index.js
│       └── Core or Base (alternatively this could be outside of apps but either way it can go through in a loop with routes or reducers or whatever else and get the contents of the files).
│       └── Home       
│           ├── assets
│           ├── index.js
│           ├── container   
│       └── Bid            
│           ├── index.js    
│           ├── assets      
│           ├── components
│           ├── container   
│           ├── modules    
│           └── routes 
│                └── Request            
│                     ├── index.js    
│                     ├── assets      
│                     ├── components
│                     ├── container   
│                     ├── modules    
│                └── Details            
│                     ├── index.js    
│                     ├── assets      
│                     ├── components
│                     ├── container   
│                     ├── modules

Since people are confused I'll try a different way: Say you have a component like sidemenu that can always make certain actions that might not need the routes folder. Say you have a multipage form that DOES need the route folder. A single page form DOES NOT need a route folder but it needs an action folder, and a reducers folder. A simple display container that displays how data is right now MIGHT need a routes folder and it might not. It probably does NOT NEED actions or reducers or components.

Each of these elements of the page need different folders or sets of pages to make them up (sometimes you need to change the route of the page to get there sometimes you don't). So rather than organize starting by routes which suggests that everything in here is its own Route (aka page URL) like bid in the above example must be a route if its in the routes folder...) lets have each component have its own folder and certain things in a base component. Does that help?

routes -> (everything here has to have its own route)

[6zz]

@davezuko I'm starting to like the fractal structure. but how do I add a child route that takes a param? for example, if I want to add a dynamic route under Bid like 'localhost:3000/bid/:slug'?

do I create BidSlug route under Bid?

Bid
    |_ routes
       |_ BidSlug
          |_ index.js

// BidSlug/index.js
export default (store) => ({
  path: ':slug',
  getComponent (nextState, cb) {
...

that does not seem to work for me. No errors but it seems always to show /bid route.

thank you

[Nitemaeric]

@6zz I'm getting the exact same issue as you. It's always showing the parent route. Did you find a solution to this?

I've currently got:

// routes/Categories/index.js
export default (store) => ({
  path : 'categories',
  childRoutes: [
    CategoryRoute(store)
  ],
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Categories = require('./containers/CategoriesContainer').default
      const reducer = require('./modules/categories').default

      injectReducer(store, { key: 'categories', reducer })

      cb(null, Categories)
    }, 'categories')
  }
})

AND

// routes/Categories/routes/Category/index.js
export default (store) => ({
  path : ':id',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Category = require('./containers/CategoryContainer').default

      cb(null, Category)
  }, 'category')
  }
})

Or must I...

// routes/Categories/index.js
export default (store) => ({
  path : 'categories',
  component: 'CategoriesLayout',
  getIndexRoute (nextState, cb) {
    require.ensure([], (require) => {
      const Categories = require('./containers/CategoriesContainer').default
      const reducer = require('./modules/categories').default

      injectReducer(store, { key: 'categories', reducer })

      cb(null, Categories)
    }, 'categories')
  },
  childRoutes: [
    CategoryRoute(store)
  ],
})

[6zz]

oh yeah, I totally forgot to update this...you basically create two children routes: index route and slug route, for example, routes/Categories/routes/Index and routes/Categories/routes/Slug. Then on the Categories route definition:

routes/Categories/index.js

import Layout from './components/CategoriesLayout';
import IndexRoute from './routes/Index';
import SlugRoute from './routes/Slug';

export default (store) => ({
  path: 'categories',
  component : Layout,
  indexRoute: IndexRoute(store),
  childRoutes: [
    SlugRoute(store)
  ]
});