Beginning React+Redux "Music Store" sample

samples/react/MusicStore/ReactApp/components/public/AlbumDetails.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Link } from 'react-router';
+import { provide } from '../../TypedRedux';
+import { ApplicationState }  from '../../store';
+import * as AlbumDetailsState from '../../store/AlbumDetails';
+
+interface RouteParams {
+    albumId: number;
+}
+
+class AlbumDetails extends React.Component<AlbumDetailsProps, void> {
+    componentWillMount() {
+        this.props.requestAlbumDetails(this.props.params.albumId);
+    }
+
+    componentWillReceiveProps(nextProps: AlbumDetailsProps) {
+        if (nextProps.params.albumId !== this.props.params.albumId) {
+            nextProps.requestAlbumDetails(nextProps.params.albumId);
+        }
+    }
+
+    public render() {
+        if (this.props.isLoaded) {
+            const albumData = this.props.album;
+            return <div>
+                <h2>{ albumData.Title }</h2>
+                
+                <p><img alt={ albumData.Title } src={ albumData.AlbumArtUrl } /></p>
+                
+                <div id="album-details">
+                    <p>
+                        <em>Genre:</em>
+                        { albumData.Genre.Name }
+                    </p>
+                    <p>
+                        <em>Artist:</em>
+                        { albumData.Artist.Name }
+                    </p>
+                    <p>
+                        <em>Price:</em>
+                        ${ albumData.Price.toFixed(2) }
+                    </p>
+                    <p className="button">
+                        Add to cart
+                    </p>
+                </div>
+            </div>;
+        } else {
+            return <p>Loading...</p>;
+        }
+    }
+}
+
+// Selects which part of global state maps to this component, and defines a type for the resulting props
+const provider = provide(
+    (state: ApplicationState) => state.albumDetails,
+    AlbumDetailsState.actionCreators
+).withExternalProps<{ params: RouteParams }>();
+type AlbumDetailsProps = typeof provider.allProps;
+export default provider.connect(AlbumDetails);