github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 01:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ensure data is only loaded if not already loaded (needed to keep client/server state consistent)

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-09 23:06:30 -08:00
parent 3a567823e8
commit a84688d65c
9 changed files with 69 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react/MusicStore/ReactApp/components/NavMenu.tsx
View File

@@ -12,7 +12,7 @@ class NavMenu extends React.Component<NavMenuProps, void> {
}
public render() {
var genres = this.props.genres.slice(0, 5);
const genres = this.props.genres.slice(0, 5);
return (
<Navbar inverse fixedTop>
<Navbar.Header>

10
samples/react/MusicStore/ReactApp/components/public/AlbumDetails.tsx
View File

@@ -5,22 +5,20 @@ import { ApplicationState } from '../../store';
import * as AlbumDetailsState from '../../store/AlbumDetails';
interface RouteParams {
albumId: number;
albumId: string;
}
class AlbumDetails extends React.Component<AlbumDetailsProps, void> {
componentWillMount() {
this.props.requestAlbumDetails(this.props.params.albumId);
this.props.requestAlbumDetails(parseInt(this.props.params.albumId));
}
componentWillReceiveProps(nextProps: AlbumDetailsProps) {
if (nextProps.params.albumId !== this.props.params.albumId) {
nextProps.requestAlbumDetails(nextProps.params.albumId);
}
this.props.requestAlbumDetails(parseInt(nextProps.params.albumId));
}
public render() {
if (this.props.isLoaded) {
if (this.props.album) {
const albumData = this.props.album;
return <div>
<h2>{ albumData.Title }</h2>

11
samples/react/MusicStore/ReactApp/components/public/GenreDetails.tsx
View File

@@ -6,28 +6,25 @@ import * as GenreDetailsStore from '../../store/GenreDetails';
import { AlbumTile } from './AlbumTile';
interface RouteParams {
genreId: number
genreId: string
}
class GenreDetails extends React.Component<GenreDetailsProps, void> {
componentWillMount() {
this.props.requestGenreDetails(this.props.params.genreId);
this.props.requestGenreDetails(parseInt(this.props.params.genreId));
}
componentWillReceiveProps(nextProps: GenreDetailsProps) {
if (nextProps.params.genreId !== this.props.params.genreId) {
nextProps.requestGenreDetails(nextProps.params.genreId);
}
this.props.requestGenreDetails(parseInt(nextProps.params.genreId));
}
public render() {
if (this.props.isLoaded) {
let albums = this.props.albums;
return <div>
<h3>Albums</h3>
<ul className="list-unstyled">
{albums.map(album =>
{this.props.albums.map(album =>
<AlbumTile key={ album.AlbumId } album={ album } />
)}
</ul>

9
samples/react/MusicStore/ReactApp/components/public/Genres.tsx
View File

@@ -6,18 +6,15 @@ import * as GenreList from '../../store/GenreList';
class Genres extends React.Component<GenresProps, void> {
componentWillMount() {
if (!this.props.genres.length) {
this.props.requestGenresList();
}
this.props.requestGenresList();
}
public render() {
let { genres } = this.props;
const { genres } = this.props;
return <div>
<h3>Browse Genres</h3>
<p>Select from { genres.length || '...' } genres:</p>
<p>Select from { this.props.isLoaded ? genres.length : '...' } genres:</p>
<ul className="list-group">
{genres.map(genre =>

7
samples/react/MusicStore/ReactApp/components/public/Home.tsx
View File

@@ -7,20 +7,17 @@ import { AlbumTile } from './AlbumTile';
class Home extends React.Component<HomeProps, void> {
componentWillMount() {
if (!this.props.albums.length) {
this.props.requestFeaturedAlbums();
}
this.props.requestFeaturedAlbums();
}
public render() {
let { albums } = this.props;
return <div>
<div className="jumbotron">
<h1>MVC Music Store</h1>
<img src="/Images/home-showcase.png" />
</div>
<ul className="row list-unstyled" id="album-list">
{albums.map(album =>
{this.props.albums.map(album =>
<AlbumTile key={ album.AlbumId } album={ album } />
)}
</ul>