filter-category.js

import random from 'lodash/random';
import filter from 'lodash/filter';
import map from 'lodash/map';
import extend from 'lodash/extend';
import mixin from 'lodash/mixin';
import _ from 'lodash/wrapperLodash';

mixin(_, {
  random: random,
  filter: filter,
  map: map,
  extend: extend
});

const filterCategory = (array, filter) => {
  const randomKey = () => {
    return 'imgkey_' + _.random(0, 10000) + '-' + _.random(0, 100);
  };
  const filterArray = (array, filter) => {
    return _.filter(array, {
      nav_categories : [
        filter
      ]
    });
  };
  const filtered = filterArray(array, filter);
  const newArray = _.map(filtered, i =>
    _.extend({new_key: randomKey()}, i));
  return newArray;
};

export default filterCategory;

PortfolioLanding.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  NavLink
} from 'react-router-dom';
import { filterCategory } from './../scripts';
import PageWrapper from './PageWrapper';
import HeroSlider from './hero-slider/HeroSlider';
import MasonryGrid from './MasonryGrid';
import PortfolioGrid from './PortfolioGrid';
import FilmArtGrid from './FilmArtGrid';
import Error from './Error';
import StickySubNav from './StickySubNavWaypoint';
import { heights, spacing, colors, widths, fonts } from './../styles/theme.json';

const PortfolioLanding = ({ match, slider, navigation, grid, grid_type, grid_cols, grid_namespace, page }) => {
  console.log(grid);
  let CategoryNav = null;
  let CategoryNavWrapper = null;
  if (navigation) {
    CategoryNav = navigation.map((item, i) =>
      <li key={i} className="category-menu-item">
        <NavLink to={`${match.url}/${item.slug}`} className="category-button" activeClassName="active">
          <span>{item.name}</span>
        </NavLink>
      </li>
    );
    CategoryNavWrapper = (props) => (
      <section id={'category-menu-wrapper'} className={props.headerClass + ' ' + props.isScrolled}>
        <menu className={'categories'}>
          <ul className={'category-nav-wrapper'}>
            {CategoryNav}
          </ul>
        </menu>
        <style jsx>{`
          #category-menu-wrapper {
            width: 100vw;
            display: flex;
            flex-direction: row;
            justify-content: center;
            height: calc(${heights.header} - ${spacing.masonry_cell_padding});
            padding: ${spacing.masonry_cell_padding} 1.5rem 0;
            margin-top: 100vh;
          }
          .categories {
            width: 100%;
            max-width: ${widths.global_max_width};
          }
          .category-nav-wrapper {
            list-style: none;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0;
          }
        `}</style>
      </section>
    );
  }
  return (
    <PageWrapper>
      {
        (slider)
        ? <HeroSlider sliderContent={slider} />
        : <section className={'empty'}/>
      }
      {
        (navigation) ? (
      <StickySubNav >
          <CategoryNavWrapper headerClass={'sticky-sub-header'} />
      </StickySubNav>
        ) : null
      }
      <div className={'portfolio-wrapper'}>
        <Route path={`${match.url}/:categoryId`} render={ routeProps => (
          <Portfolio {...routeProps}
            grid={grid} grid_type={grid_type} grid_namespace={grid_namespace} grid_cols={grid_cols} page={page}/>)}
          />
          {
            (grid_type == 'masonry')
            ? <Route exact path={match.url} render={ routeProps => (<MasonryGrid {...routeProps} GridItems={grid} />)}/> :
            (grid_type == 'columns')
            ? <Route exact path={match.url} render={routeProps => (<PortfolioGrid {...routeProps} GridNamespace={grid_namespace} GridCols={grid_cols} GridItems={grid} />)}/> :
            (grid_type == 'film-art-grid')
            ? <Route exact path={match.url} render={ routeProps => (<FilmArtGrid {...routeProps} GridItems={grid} Page={page}/>)}/> :
            <Error/>
          }
        <style jsx>{`
          .empty {
            width: 100vw;
            height: 75vh;
            background: #000;
          }
          .portfolio-wrapper {
            margin-top: calc(${heights.header} - ${spacing.masonry_cell_padding});
            width: 100%;
            display: flex;
            justify-content: center;
          }
        `}</style>
      </div>
    </PageWrapper>
  );
};

const Portfolio = ({ match, slider, navigation, grid, grid_type, grid_cols, grid_namespace, page }) => {
  console.log(grid_namespace);
  return (
    (grid_type == 'masonry')
    ? <MasonryGrid GridItems={filterCategory(grid, match.params.categoryId)}/> :
    (grid_type == 'columns')
    ? <PortfolioGrid GridItems={filterCategory(grid, match.params.categoryId)} GridNamespace={grid_namespace} GridCols={grid_cols}/> :
    (grid_type == 'film-art-grid')
    ? <FilmArtGrid GridItems={filterCategory(grid, match.params.categoryId)} Page={page}/> :
    <Error/>
  );
};

export default PortfolioLanding;

sample-prop-data.json

"grid": [
  {
      "image": {
          "large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2016/11/11225516/1478553478-1.jpg",
          "small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2016/11/11225516/1478553478-1-600x338.jpg"
      },
      "project_caption": {
          "headline": "Test Film Three",
          "description": "Surf it"
      },
      "nav_categories": [
          "everything",
          "campaign",
          "editorial"
      ],
      "link": {
          "id": 96,
          "postType": "films",
          "slug": "test-film-three"
      }
  },
  {
      "image": {
          "large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/09/30000001/Screen-Shot-2017-09-13-at-6.30.21-PM-1200x750.png",
          "small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2017/09/30000001/Screen-Shot-2017-09-13-at-6.30.21-PM-600x375.png"
      },
      "project_caption": {
          "headline": "Test Film Two",
          "description": null
      },
      "nav_categories": [
          "everything",
          "campaign",
          "editorial",
          "featured-documentaries",
          "shorts"
      ],
      "link": {
          "id": 95,
          "postType": "films",
          "slug": "test-film-two"
      }
  },
  {
      "image": {
          "large": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2016/06/11195313/1467128623.jpg",
          "small": "https://s3.amazonaws.com/bruce-weber/wp-content/uploads/2016/06/11195313/1467128623-600x600.jpg"
      },
      "project_caption": {
          "headline": "Test Film One",
          "description": null
      },
      "nav_categories": [
          "everything",
          "featured-documentaries",
          "shorts"
      ],
      "link": {
          "id": 94,
          "postType": "films",
          "slug": "test-film-one"
      }
  }
]