Documentation

Tutorials: Showing all my Stations

The Component

Now that we have 2 ways to work with the data (via the query or the component), we can attach this to as many components as we want. 

Stations

The stations component uses the withCollectedStations provider as a data source and has 5 different UI states:

• Loading: When the provider sets the isLoading property on the component to true, a loading message is displayed.
• Error: When the provider sets the error property on the component to a value, the error message is displayed. 
• Shows stations: When the provider sets the stations property on the component, the stations are displayed using the ImageWithMeta component that contains a clickable image with a title underneath.
• Show no items message: When hideOnNoData property is set to false, isLoading is false, no error message is present, and the stations property is not set, or set to an empty list, a message will be displayed.
• Null: When hideOnNoData property is set to true, isLoading is false, no error message is present, and the stations property is not set, or set to an empty list, nothing will be displayed and the component will not render any html elements.

import React from 'react';
import PropTypes from 'prop-types';

import styles from './styles.module.scss';

import { withCollectedStations } from '../../graphql/catalog/collectedStations';
import ImageWithMeta from '../ImageWithMeta';

export const Stations = (props) => {
 const noItemsMessage = "Use search to find stations. Click on one of the results to start the station.";
 const {
   isLoading,
   error,
   stations,
   hideOnNoData,
 } = props;


 if (isLoading) {
   return (
     

       
Loading...
     
   );
 }

 if (error) {
   return (
     

       
Error loading stations.
     
   );
 }

 const stationList = stations && stations.map(({ meta }) => {
   const {
     id,
     art,
     name,
   } = meta;
   if (!id || !name) return null;

   return (
);
 });

 if (hideOnNoData && (!stationList || stationList.length === 0)) {
   return null;
 }

 return (
   

     

       Stations
     
       {
         (stationList && stationList.length !== 0)
         ?
           
{stationList}
         :
           
{noItemsMessage}
       }
   
 );
};

Stations.propTypes = {
 isLoading: PropTypes.bool,
 hideOnNoData: PropTypes.bool,
 error: PropTypes.string,
 stations: PropTypes.array,
};

Stations.defaultProps = {
 isLoading: false,
 hideOnNoData: false,
};

export default withCollectedStations(Stations);

Bringing all of the above together, you will have a component using the collection query to display the stations of a listener. This is what the above example will look like:

[screen]