Component refactor and loading indicator stub

includes/page-templates.php

@@ -71,6 +71,23 @@ function enqueue_assets() {
 		true
 	);
 
+	$urls = [
+		'schedule' => esc_url( site_url( __( 'schedule', 'wordcamp-pwa-page' ) ) ),
+		'posts' => esc_url( get_post_type_archive_link( 'post' ) ),
+	];
+
+	$pwa_config = /** @lang JavaScript */
+		<<<SCRIPT
+window.WCPWAP = window.WCPWAP || {};
+
+window.WCPWAP.urls = Object.assign(window.WCPWAP.urls || {}, {
+	schedule: '{$urls['schedule']}',
+	posts: '{$urls['posts']}',
+});
+SCRIPT;
+
+	wp_add_inline_script( 'wordcamp-pwa-page', $pwa_config, 'before' );
+
 	wp_enqueue_style(
 		'wordcamp-pwa-page',
 		WCPWAP_PLUGIN_URL . '/templates/assets/pwa-page.css',

templates/assets/components/page.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { fetchSessions, fetchTracks, fetchPosts } from '../api';
+import { LatestPosts } from './posts';
+import { Schedule } from './schedule';
+
+/**
+ * Update every x seconds.
+ *
+ * @type {number}
+ */
+const UPDATE_INTERVAL = 60 * 1000; // Convert to milliseconds.
+
+const entityLists = {
+	sessionList: fetchSessions,
+	trackList: fetchTracks,
+	postList: fetchPosts,
+};
+
+const DEFAULT_CONFIG = {
+	urls: {},
+};
+
+export class Page extends Component {
+
+	constructor( props ) {
+		super( props );
+
+		const config = window.WCPWAP || {};
+		this.updateIntervalId = -1;
+		this.state = {
+			config: { ...DEFAULT_CONFIG, ...config },
+		};
+
+		for ( const listName of Object.keys( entityLists ) ) {
+			this.state[ listName ] = {
+				isFetching: true,
+				error: null,
+				data: [],
+			};
+		}
+	}
+
+	/**
+	 * Loop over the entityLists we defined earlier and set their initial state.
+	 */
+	updateLists() {
+		let entityFetcher;
+		for ( const listName of Object.keys( entityLists ) ) {
+			entityFetcher = entityLists[ listName ];
+			entityFetcher().then( ( data ) => {
+				this.setState( { [ listName ]: { isFetching: false, data } } );
+			} ).catch( ( error ) => this.setState( ( state ) => ( {
+				...state,
+				[ listName ]: {
+					...state[ listName ],
+					isFetching: false,
+					error,
+				},
+			} ) ) );
+		}
+	}
+
+	componentDidMount() {
+		this.updateLists();
+
+		this.updateIntervalId = window.setInterval( this.updateLists, UPDATE_INTERVAL );
+	}
+
+	componentWillUnmount() {
+		window.clearInterval( this.updateIntervalId );
+	}
+
+	render() {
+		const { postList, sessionList, trackList, config } = this.state;
+
+		return <>
+			<div className="pwa-page-content">
+				<Schedule sessionList={ sessionList } trackList={ trackList } />
+
+				<a href={ config.urls.schedule } className="full-schedule">
+					{ _x( 'View Full Schedule', 'text', 'wordcamp-pwa-page' ) }
+				</a>
+			</div>
+
+			<div className="pwa-page-content">
+				<h2>{ _x( 'Latest Posts', 'title', 'wordcamp-pwa-page' ) }</h2>
+				<LatestPosts list={ postList } />
+
+				<a href={ config.urls.posts } className="all-posts">
+					{ _x( 'View all Posts', 'title', 'wordcamp-pwa-page' ) }
+				</a>
+			</div>
+		</>;
+	}
+
+}

templates/assets/components/post.js

@@ -36,7 +36,7 @@ export const Post = ( { post } ) => {
 			<span className="wordcamp-latest-post-excerpt">{ stripTagsAndEncodeText( excerpt ) }</span>
 			<span className="wordcamp-latest-post-categories">
 				{
-					categories.length && categories.map( ( c, index ) => {
+					!! categories.length && categories.map( ( c, index ) => {
 						const term = terms[ c ];
 						const {
 							name,

templates/assets/components/posts.js

@@ -1,22 +1,22 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { Post } from './post';
+import { LoadingIndicator } from './ui/loading';
 
-export const LatestPosts = ( { posts } ) => (
-
-	<Fragment>
-		{ posts.filter( ( post ) => !! post ).map( ( post ) => {
+export const LatestPosts = ( { list } ) => {
+	const { isFetching, data } = list;
 
-			return (
-				<Post key={ post.id } post={ post } />
-			);
-		} ) }
-	</Fragment>
+	if ( isFetching && data.length === 0 ) {
+		return <LoadingIndicator />;
+	}
 
-);
+	return <>
+		{
+			data.filter( ( post ) => !! post ).map(
+				( post ) => <Post key={ post.id } post={ post } />
+			)
+		}
+	</>;
+};
+export default LatestPosts;

templates/assets/components/schedule.js

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { LoadingIndicator } from './ui/loading';
+/**
+ * External dependencies
+ */
+import { sortBy } from 'lodash';
+import { SessionsGroup } from './sessions';
+
+/**
+ * @param {{tracks: [], sessions: []}} data an object with tracks and sessions
+ * @returns {{next: *, now: *, track: T}[]} an array with schedule data
+ */
+const getScheduleData = ( data ) => {
+
+	const now = window.now || new Date();
+
+	if ( ! Array.isArray( data.tracks ) ) {
+		return;
+	}//end if
+
+	const scheduleData = data.tracks.map( ( track ) => {
+		const sessionsInTrack = sortBy(
+			data.sessions.filter(
+				( session ) => session.session_track.includes( track.id )
+			),
+			( sessionInTrack ) => sessionInTrack.meta._wcpt_session_time
+		);
+
+		const indexOfNextSession = sessionsInTrack.findIndex(
+			( session ) => now < new Date( session.meta._wcpt_session_time * 1000 )
+		);
+
+		const nextSession = sessionsInTrack[ indexOfNextSession ];
+		const nowSession = sessionsInTrack[ indexOfNextSession - 1 ];
+
+		return {
+			track,
+			now: nowSession,
+			next: nextSession,
+		};
+	} );
+
+	return scheduleData;
+};
+
+export const Schedule = ( { sessionList, trackList } ) => {
+
+	if ( ( sessionList.isFetching || trackList.isFetching ) && sessionList.data.length === 0 ) {
+		return <LoadingIndicator />;
+	}
+
+	const tracks = getScheduleData( { sessions: sessionList.data, tracks: trackList.data } );
+
+	const onNowSessions = tracks.map( ( track ) => {
+		return {
+			track: track.track,
+			session: track.now,
+		};
+	} ).filter( ( sessionInTrack ) => !! sessionInTrack.session );
+
+	const upNextSessions = tracks.map( ( track ) => {
+		return {
+			track: track.track,
+			session: track.next,
+		};
+	} );
+
+	return <>
+		{ !! onNowSessions.length &&
+			<SessionsGroup sessions={ onNowSessions } title={ _x( 'On now', 'title', 'wordcamp-pwa-page' ) } />
+		}
+		{ !! upNextSessions.length &&
+			<SessionsGroup sessions={ upNextSessions } title={ _x( 'Up next', 'title', 'wordcamp-pwa-page' ) } />
+		}
+	</>;
+};
+export default Schedule;

templates/assets/components/session.js

@@ -7,26 +7,34 @@ import { keyBy, flatten } from 'lodash';
  * WordPress dependencies
  */
 import { stripTagsAndEncodeText } from '@wordpress/sanitize';
+import { _x } from '@wordpress/i18n';
 
 export const Session = ( { session } ) => {
 
 	const {
 		session: {
-			link,
+			link = '#',
 			title: {
-				rendered: title,
+				rendered: title = '',
 			},
 			session_date_time: {
-				time,
+				time = '',
 			},
-			session_category: sessionCategories,
+			session_category: sessionCategories = [],
 			_embedded: {
-				'wp:term': embeddedTerms,
+				'wp:term': embeddedTerms = {},
 				speakers = [],
 			},
 			meta: {
 				_wcpt_session_type: sessionType = '',
 			},
+		} = {
+			link: '#',
+			title: { rendered: _x( 'Track finished', 'session title', 'wordcamp-pwa-page' ) },
+			session_date_time: { time: '' },
+			session_category: [],
+			_embedded: { 'wp:term': {}, speakers: [] },
+			meta: { _wcpt_session_type: '' },
 		},
 		track: {
 			name: trackName,

templates/assets/components/sessions.js

@@ -1,23 +1,19 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { Session } from './session';
 
-export const SessionsGroup = ( { title, sessions } ) => (
-
-	<Fragment>
-		<h3>{ title }</h3>
-		{ sessions.filter( ( session ) => !! session ).map( ( session ) => {
-
-			return (
-				<Session key={ session.id } session={ session } />
-			);
-		} ) }
-	</Fragment>
+export const SessionsGroup = ( { title, sessions } ) => <>
+	<h3>{ title }</h3>
+	{
+		sessions.filter( ( session ) => !! session ).map( ( session, index ) => {
+			const sessionKey = session.session ? session.session.id : index;
 
-);
+			return <Session
+				key={ `${ sessionKey }-${ session.track.id }` }
+				session={ session }
+			/>;
+		}
+		)
+	}
+</>;

templates/assets/components/ui/loading.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+export const LoadingIndicator = () => {
+	return (
+		<div className="wordcamp-loading">
+			{ _x( 'Loading...', 'pwa-placeholder', 'wordcamp-pwa-page' ) }
+		</div>
+	);
+};