Article Feed

example.jsx

/**
 * Option: pre-render articles via server-side page load & pass
 * them directly into component via props.
 * 
 *    render(
 *      <ArticleFeed articles={articlesArrayProvidedFromPageLoad} />
 *    );
 * 
 * otherwise use XHR request in <ArticleFeed /> component's
 * "componentDidMount" lifecycle function. This function's
 * primary task would be to update the component state with
 * the results of the XHR request.
 * (consider loading spinner, etc)
 */ 

/** psudo code for component structure */
<ArticleFeed>
  <FilterOptions /> 
  <List>
    <ListItem>
      <Article />
    </ListItem>
  </List>
</ArticleFeed>


/**
 * <ArticleFeed />
 * 
 * State would be stored here. This would be your only
 * "stateful" component. The state might look something like:
 * state = {
 *   filter: {},
 *   filterResults: {}
 * }
 */

/**
 * <FilterOptions onChange={handleFilterChange}/> 
 * 
 * This guy would handle collecting the desired 'filter' values and
 * invoking a function to update state.filter && state.filterResults.
 * Ui would contain elements to allow users to select filters. Pass
 * the results of those back up through "onChange" prop or similar
 * & let the parent component handle updating the state
 */ 

/**
 * <List items={this.state.filterResults}/>
 * 
 * Would recursively render 
 * 
 *  <ListItem>
 *    <Article {...itemProps}/>
 *  </ListItem> 
 * 
 * components.
 * I usually just use items.map(itemProps => {}) for this
 * 
 */

/**
 * <ListItem />
 * 
 * Generic "view" container for a list. Just styles.
 */

/** 
 * <Article {...item} />
 * 
 * This guy would handle laying out the article. would receive
 * all props from each item in the list of articles. You could
 * pass along a "primary" boolean prop to conditionally 
 * render alternate styles, etc
 * 
 * This component may contain many "layout" & "view" type components
 * responsible solely for rendering spacing, type, & images, etc.
 */