Improved naming

js/components/ascribe_piece_detail/piece_detail.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-/**
- * This is the component that implements display-specific functionality
- */
-let PieceDetail = React.createClass({
-  propTypes: {
-    title: React.PropTypes.string.isRequired
-  },
-
-  render() {
-    return (
-      <p>Title: {this.props.title}</p>
-    );
-  }
-});
-
-export default PieceDetail;

js/components/piece.js

@@ -1,45 +1,17 @@
 import React from 'react';
 
-import PieceActions from '../actions/piece_actions';
-import PieceStore from '../stores/piece_store';
-
-import PieceDetail from './ascribe_piece_detail/piece_detail';
-
 /**
- * This is the component that implements resource/data specific functionality
+ * This is the component that implements display-specific functionality
  */
 let Piece = React.createClass({
-
+  propTypes: {
-    getInitialState() {
+    title: React.PropTypes.string.isRequired
-        return PieceStore.getState();
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    componentDidMount() {
-        PieceActions.fetchOne(this.props.params.pieceId);
-        PieceStore.listen(this.onChange);
-    },
-
-    componentDidUnmount() {
-        PieceStore.unlisten(this.onChange);
   },
 
   render() {
-
-        if('title' in this.state.piece) {
     return (
-                <PieceDetail title={this.state.piece.title}></PieceDetail>
+      <p>Title: {this.props.title}</p>
     );
-        } else {
-            return (
-                <p>Loading</p>
-            );
-        }
-
-        
   }
 });
 

js/components/piece_container.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import PieceActions from '../actions/piece_actions';
+import PieceStore from '../stores/piece_store';
+
+import Piece from './piece';
+
+/**
+ * This is the component that implements resource/data specific functionality
+ */
+let PieceContainer = React.createClass({
+
+    getInitialState() {
+        return PieceStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        PieceActions.fetchOne(this.props.params.pieceId);
+        PieceStore.listen(this.onChange);
+    },
+
+    componentDidUnmount() {
+        PieceStore.unlisten(this.onChange);
+    },
+
+    render() {
+
+        if('title' in this.state.piece) {
+            return (
+                <Piece title={this.state.piece.title}></Piece>
+            );
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
+
+        
+    }
+});
+
+export default PieceContainer; 

js/routes.js

@@ -3,7 +3,7 @@ import Router from 'react-router';
 
 import AscribeApp from './components/ascribe_app';
 import PieceList from './components/piece_list';
-import Piece from './components/piece';
+import PieceContainer from './components/piece_container';
 
 let Route = Router.Route;
 
@@ -13,7 +13,7 @@ let routes = (
         <Route name="pieces" path="/pieces" handler={PieceList}>
             
         </Route>
-        <Route name="piece" path="/pieces/:pieceId" handler={Piece}>
+        <Route name="piece" path="/pieces/:pieceId" handler={PieceContainer}>
         </Route>
     </Route>
 );