SAIC Training

Catalog

import React, { Fragment } from 'react';
import { KappLink as Link, PageTitle } from 'common';
import { CatalogSearchContainer } from '../shared/CatalogSearchContainer';
import { CategoryCard } from '../shared/CategoryCard';
import { ServiceCard } from '../shared/ServiceCard';
import { RequestCard, IntegrationCard } from '../shared/RequestCard';
import { getSubmissionPath } from '../../utils';
import { I18n } from '../../../../app/src/I18nProvider';

export const Catalog = ({
  kapp,
  forms,
  submissions,
  homePageMode,
  homePageItems,
  fetchSubmissions,
  integrationItems,
}) => {
  return (
    <Fragment>
      <PageTitle parts={[]} />
      <div className="search-services-home">
        <div className="search-services-home__wrapper">
          <h1 className="text-truncate">
            <I18n>Welcome, how can we help?</I18n>
          </h1>
          <div className="search-box">
            <CatalogSearchContainer />
          </div>
        </div>
      </div>
      <div className="page-container page-container--services-home">
        <div className="page-panel page-panel--transparent page-panel--one-thirds page-panel--auto-height page-panel--my-requests">
          <div className="page-title">
            <div className="page-title__wrapper">
              <h3 className="text-lowercase">
                <I18n>{kapp.name}</I18n> /
              </h3>
              <h1>
                <I18n>Recent Requests</I18n>
              </h1>
            </div>
            <Link to="/requests">
              <I18n>View All</I18n>
            </Link>
          </div>

          <div className="cards__wrapper cards__wrapper--requests">
            {submissions.size > 0 ? (
              submissions
                .take(5)
                .map(submission => ({
                  submission,
                  forms,
                  key: submission.id,
                  path: getSubmissionPath(submission),
                  deleteCallback: fetchSubmissions,
                }))
                .map(props => <RequestCard {...props} />)
            ) : (
              <div className="card card--empty-state">
                <h1>
                  <I18n>You have no requests yet.</I18n>
                </h1>
                <p>
                  <I18n>As you request new services, they’ll appear here.</I18n>
                </p>
              </div>
            )}
          </div>
        </div>
        <div className="page-panel page-panel--transparent page-panel--two-thirds page-panel--services">
          <div className="page-title">
            <div className="page-title__wrapper">
              <h3 className="text-lowercase">
                <I18n>{kapp.name}</I18n> /
              </h3>
              <h1>
                <I18n>{homePageMode}</I18n>
              </h1>
            </div>
          </div>
          <div className="cards__wrapper cards__wrapper--categories">
            {homePageItems.map(
              item =>
                homePageMode === 'Categories' ? (
                  <CategoryCard
                    key={item.slug}
                    category={item}
                    path={`/categories/${item.slug}`}
                  />
                ) : (
                  <ServiceCard
                    key={item.slug}
                    form={item}
                    path={`/forms/${item.slug}`}
                  />
                ),
            )}
          </div>
          <div className="page-title">
            <div className="page-title__wrapper">
              <h1>Integration Status</h1>
              {integrationItems.map(item => (
                <IntegrationCard key={item.slug} submission={item} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

CatalogContainer

import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';
import { selectCurrentKapp } from 'common';
import { Catalog } from './Catalog';
import { actions } from '../../redux/modules/submissions';
import { actions as datastoreActions } from '../../redux/modules/datastore';

const mapStateToProps = state => ({
  kapp: selectCurrentKapp(state),
  forms: state.services.forms.data,
  submissions: state.services.submissions.data,
  integrationItems: state.services.datastore.data,
});

const mapDispatchToProps = {
  fetchSubmissions: actions.fetchSubmissions,
  fetchIntegrations: datastoreActions.fetchIntegrations,
};

export const CatalogContainer = compose(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  ),
  lifecycle({
    componentWillMount() {
      this.props.fetchSubmissions();
      this.props.fetchIntegrations();
    },
  }),
)(Catalog);

modules -> datastore

import { List } from 'immutable';

export const types = {
  FETCH_INTEGRATIONS: '@kd/catalog/FETCH_INTEGRATIONS',
  SET_INTEGRATIONS: '@kd/catalog/SET_INTEGRATIONS',
};

export const actions = {
  fetchIntegrations: coreState => ({
    type: types.FETCH_INTEGRATIONS,
    payload: { coreState },
  }),
  setIntegrations: submissions => ({
    type: types.SET_INTEGRATIONS,
    payload: { submissions },
  }),
};

export const defaultState = {
  loading: true,
  data: List(),
};

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case types.FETCH_INTEGRATIONS:
      return {
        ...state,
        loading: true,
      };
    case types.SET_INTEGRATIONS:
      return {
        ...state,
        loading: false,
        data: List(action.payload.submissions),
      };
    default:
      return state;
  }
};

export default reducer;

reducers

import categoriesReducer from './modules/categories';
import formsReducer from './modules/forms';
import searchReducer from './modules/search';
import submissionsReducer from './modules/submissions';
import submissionReducer from './modules/submission';
import submissionCountsReducer from './modules/submissionCounts';
import systemErrorReducer from './modules/systemError';
import servicesSettingsReducer from './modules/settingsServices';
import settingsFormsReducer from './modules/settingsForms';
import settingsCategoriesReducer from './modules/settingsCategories';
import datastoreReducer from './modules/datastore';

export default {
  categories: categoriesReducer,
  forms: formsReducer,
  search: searchReducer,
  submissions: submissionsReducer,
  submission: submissionReducer,
  submissionCounts: submissionCountsReducer,
  systemError: systemErrorReducer,
  servicesSettings: servicesSettingsReducer,
  settingsForms: settingsFormsReducer,
  settingsCategories: settingsCategoriesReducer,
  datastore: datastoreReducer,
};

RequestCard

export const IntegrationCard = props => {
  const values = props.submission.values;
  return (
    <Link to={'kapps/services'} className="card card--request">
      <h1>
        <span>{values['Integration Source']}</span>
        <span
          className={`status ${
            values['Integration Status'].toLowerCase() === 'up'
              ? 'status--green'
              : 'status--red'
          }`}
        >
          {values['Integration Status']}
        </span>
      </h1>
    </Link>
  );
};

sagas

import { all } from 'redux-saga/effects';

import { watchCategories } from './sagas/categories';
import { watchForms } from './sagas/forms';
import { watchSubmissions } from './sagas/submissions';
import { watchSubmission, watchSubmissionPoller } from './sagas/submission';
import { watchSubmissionCounts } from './sagas/submissionCounts';
import { watchSettingsServices } from './sagas/settingsServices';
import { watchSettingsForms } from './sagas/settingsForms';
import { watchSettingsCategories } from './sagas/settingsCategories';
import { watchDatastore } from './sagas/datastore';

export default function*() {
  yield all([
    watchCategories(),
    watchForms(),
    watchSubmissions(),
    watchSubmission(),
    watchSubmissionPoller(),
    watchSubmissionCounts(),
    watchSettingsServices(),
    watchSettingsForms(),
    watchSettingsCategories(),
    watchDatastore(),
  ]);
}

sagas -> datastore

import { takeEvery, call, put } from 'redux-saga/effects';
import { CoreAPI } from 'react-kinetic-core';

import { actions, types } from '../modules/datastore';

export function* fetchIntegrationsSaga() {
  const form = 'integrations';
  const searchBuilder = new CoreAPI.SubmissionSearch({ datastore: true })
    .eq('values[Status]', 'active')
    .index('values[Status]')
    .limit('1000')
    .includes(['values'])
    .end();
  const search = searchBuilder.build();

  const { submissions, serverError } = yield call(CoreAPI.searchSubmissions, {
    search,
    datastore: true,
    form,
  });

  if (serverError) {
    window.console.log('server error', serverError);
  } else {
    yield put(actions.setIntegrations(submissions));
  }
}

export function* watchDatastore() {
  yield takeEvery(types.FETCH_INTEGRATIONS, fetchIntegrationsSaga);
}