e-lado/client/app/components/sections/SearchPage/SearchPage.story.js

[](https://circleci.com/gh/sharetribe/sharetribe/tree/master) [](https://gemnasium.com/sharetribe/shar

import r, { div, h1, h2, p } from 'r-dom';
import Immutable from 'immutable';
import { toFixedNumber } from '../../../utils/numbers';
import ListingModel from '../../../models/ListingModel';
import { Distance, Money } from '../../../types/types';
import { Image, ListingImage, AvatarImage } from '../../../models/ImageModel';
import ListingCard from '../../composites/ListingCard/ListingCard';
import ListingCardPanel from '../../composites/ListingCardPanel/ListingCardPanel';
import css from './SearchPage.story.css';

const { storiesOf } = storybookFacade;
const LISTINGS_COUNT = 7;

const listingCardTemplate = (title, perUnit, price, distance) => (
  r(ListingCard,
    {
      color: '#347F9D',
      listing: new ListingModel({
        id: 'lkjg84573874yjdf',
        title,
        images: new Immutable.List([new ListingImage({
          square: new Image({
            url: 'https://placehold.it/408x408',
          }),
          square2x: new Image({
            type: 'square2x',
            width: 816,
            height: 816,
            url: 'https://placehold.it/816x816',
          }),
        })]),
        listingURL: 'https://example.com/listing/342iu4',
        price: new Immutable.Map({
          ':money': new Money({
            fractionalAmount: price || toFixedNumber(Math.random() * 9999, 2), // eslint-disable-line no-magic-numbers
            currency: 'EUR',
          }),
          ':pricingUnit': new Immutable.Map({ en: (perUnit || 'day'), fi: 'päivä' }),
        }),
        distance: new Distance({
          value: distance || Math.random() * (20000) + 0.01, // eslint-disable-line no-magic-numbers
          unit: ':km',
        }),
        author: {
          familyName: 'family name',
          givenName: 'given name',
          description: 'product author',
          avatarImage: new AvatarImage({ thumb: new Image({ url: 'https://placehold.it/40x40' }) }),
          profileURL: `#profile${Math.random(10)}`, // eslint-disable-line no-magic-numbers
        },
      }),
    }
  )
);

const generateListings = (arrayLength) => {
  const titleDraft = 'Cisco SF300-48 SRW248G4-K9-NA 10/100 Managed Switch 48 Port';
  const titleDraftLength = titleDraft.length;
  const listings = new Array(arrayLength);

  for (let i = 0; i < arrayLength; i++) {
    const title = titleDraft.substring(0, Math.random() * titleDraftLength);
    listings[i] = listingCardTemplate(title);
  }

  return listings;
};


storiesOf('Search results')
  .add('Summary', () => (
    div(null, [
      h1({ className: css.title }, 'Listings'),
      p({ className: css.description }, 'Search results are shown in grid view using listing cards. They contain square images and the result set is paged.'),
      h2({ className: css.sectionTitle }, 'ListingCard'),
      div({
        className: css.singleListingWrapper,
      }, listingCardTemplate('Listing title', 'hundred centimeters')),
      h2({ className: css.sectionTitle }, `ListingCardPanel (${LISTINGS_COUNT} listings)`),
      r(ListingCardPanel, null, generateListings(LISTINGS_COUNT)),
    ])
  ));