How to make a page to view a single widget?

[kulakowka]

Let's say I have a route

<Route path="widget/:id" component={Widget}/>

How to load it from the server? I have to create a separate option in the state?
Or should I add it to the general list of the widgets?

You can add an example of creating CRUD interface?

For example:

• /widgets Page to show a list of widgets
• /widgets/:id Page to show a single widget
• /widgets/new Page to create a new widget
• /widgets/:id/edit Page to edit a widget

It is very difficult to figure out how to do it. Maybe someone else can share an example of implementation?

It would be nice to see an example of pagination and the various filters to control sorting and so on.

[whatifif]

How to use the route /widget/:id/edit for example:

This example shows how to set up _/widget/:id/edit_ route
and retrieve data based on the params from MongoDB.

Apparently this will apply to other DB too.

//
// src/routes.js
// Add a route to use 
// In this example <Route path="widget/:id/edit" component={Widgets}/> is added
  return (
    <Route path="/" component={App}>
      { /* Home (main) route */ }
      <IndexRoute component={Home}/>

      { /* Routes requiring login */ }
      <Route onEnter={requireLogin}>
        <Route path="chat" component={Chat}/>
        <Route path="loginSuccess" component={LoginSuccess}/>
      </Route>

      { /* Routes */ }
      <Route path="about" component={About}/>
      <Route path="login" component={Login}/>
      <Route path="survey" component={Survey}/>
      <Route path="widgets" component={Widgets}/>
      <Route path="widget/:id/edit" component={Widgets}/>

      { /* Catch all route */ }
      <Route path="*" component={NotFound} status={404} />
    </Route>
  );

// src/containers/Widgets/Widgets.js
// Add params as argument and transfer it to loadWidgets

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}, params}) => {
    // console.log('widget14-params', params);
    if (!isLoaded(getState())) {
      return dispatch(loadWidgets(params));
    }
  }
}])

// src/redux/modules/widgets.js
// Create url to use as the api action 
export function load(params) {

  let url;
  if(params.id){
    url = '/widget/load/' + params.id + '/edit';
  } else{
    url = '/widget/load';
  }

  // console.log('widgets97-url', url);
  return {
    types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
    promise: (client) => client.get(url) // params not used, just shown as demonstration
  };
}

// api/actions/widget/load.js
import { WidgetModel } from './resource/WidgetModel';


export default function load(req, params) {
  const query = params[0]? {id: params[0]} : {};
  const query2 = params[1]? params[1] : '';
  // // console.log("load57-params", params)
  // console.log("load77-query", query);
  // console.log("load78-query2", query2);


  return new Promise((resolve, reject) => {
    // make async call to database
    WidgetModel.find(query).then(function(result){
      resolve(result);
    }, function(err){
      reject(err);
    })
  });
}

// api/actions/widget/resource/WidgetModel
// Create WidgetModel for mongoDB

import mongoose from 'mongoose';

const WidgetSchema = new mongoose.Schema({
    id: { type: Number, unique: true },
    color: { type: String },
    sprocketCount: { type: Number },
    owner: { type: String }
})


export const WidgetModel = mongoose.model('Widget', WidgetSchema);

// api/api.js
// If seed data is needed, add the following at the upper part of api.js
//mongoDB-----------------------------------
import mongoose from 'mongoose';
import WidgetSeed from './actions/widget/resource/WidgetSeed';

const mongo_url = process.env.MONGO_URI || 
process.env.MONGOHQ_URL || 
process.env.MONGOLAB_URI || 
process.env.MONGOSOUP_URL || 
config.mongo_url;

mongoose.connect(mongo_url);

if(config.useSeed === true) {
  WidgetSeed();
  config.useSeed = false;
}
//===================================

// api/widget/resource/WidgetSeed.js
// Here is a seed data
import { WidgetModel } from './WidgetModel';


export default function seed() {
  WidgetModel.find({}).remove(function() {
    WidgetModel.create([
      { id: 1, color: 'Red', sprocketCount: 7, owner: 'John' },
      { id: 2, color: 'Taupe', sprocketCount: 1, owner: 'George' },
      { id: 3, color: 'Green', sprocketCount: 8, owner: 'Ringo' },
      { id: 4, color: 'Blue', sprocketCount: 2, owner: 'Paul' },
      { id: 5, color: 'Blue', sprocketCount: 2, owner: 'Paul2' }
    ])
  })

}

Now go to _/widget/2/edit_ in browser, only widget ( id===2 ) will show up.

_/widgets_ will show all the widgets.