@plusscommunities/pluss-feeds-web 1.0.7 → 1.0.9-beta.0

package/src/components/FeedSubmissions.js

@@ -1,169 +0,0 @@
-import React, { Component } from 'react';
-import { Table } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import { Link } from 'react-router-dom';
-import { feedsSubmissionsLoaded } from '../actions';
-import { feedActions } from '../apis';
-import { PlussCore } from '../feature.config';
-import { values } from '../values.config';
-
-const { Session } = PlussCore;
-
-class FeedSubmissions extends Component {
-  state = {
-    feedSubmissions: [],
-    sortColumn: 'created', // column to sort by
-    sortDesc: false, // if true, sort descending rather than ascending
-  };
-
-  UNSAFE_componentWillMount() {
-    Session.checkLoggedIn(this, this.props.auth);
-    this.updateProps(this.props);
-  }
-
-  componentDidMount() {
-    this.getData();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateProps(nextProps);
-  }
-
-  updateProps(props) {
-    this.setState({ feedSubmissions: props.submissions });
-  }
-
-  getData = async () => {
-    const { auth } = this.props;
-    try {
-      const res = await feedActions.getFeedSubmissions(auth.site);
-      const submissions = res.data.Items;
-      // console.log('getSubmissions', submissions && submissions[0]);
-      if (!_.isEmpty(submissions) && submissions[0].site === auth.site) {
-        this.props.feedsSubmissionsLoaded(submissions);
-      }
-    } catch (error) {
-      console.log('getData error', error);
-    }
-  };
-
-  sortByCol(col) {
-    if (this.state.sortColumn === col) {
-      this.setState({
-        sortDesc: !this.state.sortDesc,
-      });
-    } else {
-      this.setState({
-        sortColumn: col,
-        sortDesc: false,
-      });
-    }
-  }
-
-  renderSubmissions() {
-    let source = _.sortBy(this.props.source, (feed) => {
-      if (this.state.sortColumn === 'userName') return feed.user.displayName;
-      if (this.state.sortColumn === 'authorName') return feed.author.displayName;
-      if (this.state.sortColumn !== 'created') return feed[this.state.sortColumn];
-      return feed.created;
-    });
-    if (this.state.sortDesc) source.reverse();
-    source = _.filter(source, (feed) => feed);
-
-    return source.map((feed) => {
-      if (feed != null) {
-        return (
-          <tr key={feed.id}>
-            <td className="table-TitleColumn">
-              <Link to={`${values.routeFeedDetails}/${feed.id}`}>
-                <span>{feed.title}</span>
-              </Link>
-            </td>
-            <td>{moment.utc(feed.createdTime).local().format('ddd D MMM YYYY h:mma')}</td>
-            <td>{feed.user && feed.user.displayName}</td>
-            <td>{feed.author && feed.author.displayName}</td>
-          </tr>
-        );
-      }
-      return null;
-    });
-  }
-
-  renderSort(col) {
-    if (col !== this.state.sortColumn) {
-      return null;
-    }
-    return <FontAwesome style={{ marginLeft: 5 }} name={this.state.sortDesc ? 'chevron-up' : 'chevron-down'} />;
-  }
-
-  sortIsActive(col) {
-    if (col !== this.state.sortColumn) {
-      return '';
-    }
-    return ' table--columnActive';
-  }
-
-  render() {
-    return (
-      <div style={{ minWidth: '100%' }}>
-        <Table className="plussTable" striped bordered condensed hover>
-          <thead>
-            <tr>
-              <th
-                className={`${this.sortIsActive('title')}`}
-                style={{ cursor: 'pointer', minWidth: 200 }}
-                onClick={() => {
-                  this.sortByCol('title');
-                }}
-              >
-                Title{this.renderSort('title')}
-              </th>
-              <th
-                className={`${this.sortIsActive('created')}`}
-                style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  this.sortByCol('created');
-                }}
-              >
-                Time{this.renderSort('created')}
-              </th>
-              <th
-                className={`${this.sortIsActive('userName')}`}
-                style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  this.sortByCol('userName');
-                }}
-              >
-                Posted To{this.renderSort('userName')}
-              </th>
-              <th
-                className={`${this.sortIsActive('authorName')}`}
-                style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  this.sortByCol('authorName');
-                }}
-              >
-                Author{this.renderSort('authorName')}
-              </th>
-              <th style={{ width: 50 }} />
-            </tr>
-          </thead>
-          <tbody>{this.renderSubmissions()}</tbody>
-        </Table>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  const { auth } = state;
-  return {
-    submissions: state[values.reducerKey].submissions,
-    auth,
-  };
-};
-
-export default connect(mapStateToProps, { feedsSubmissionsLoaded })(FeedSubmissions);

package/src/components/FeedTypes.js

@@ -1,324 +0,0 @@
-import React, { Component } from 'react';
-import { Table } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import { withRouter } from 'react-router';
-import { feedTypesLoaded, feedTypesUpdate } from '../actions';
-import { feedActions } from '../apis';
-import Config, { PlussCore } from '../feature.config';
-import { values } from '../values.config';
-
-const { Session, Components } = PlussCore;
-
-class FeedTypes extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      feedTypeList: [],
-      sortColumn: 'name',
-      sortDesc: false,
-      loading: true,
-      showFeedType: false,
-      feedTypeId: null,
-      feedTypeLabel: '',
-      feedTypeColour: '',
-      showWarnings: false,
-      submitting: false,
-    };
-  }
-
-  componentWillMount() {
-    this.updateProps(this.props);
-    Session.checkLoggedIn(this, this.props.auth);
-  }
-
-  componentDidMount() {
-    this.getFeedTypes();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.updateProps(nextProps);
-  }
-
-  updateProps(props) {
-    this.setState({ feedTypeList: props.feedTypes });
-  }
-
-  getFeedTypes = async () => {
-    try {
-      const res = await feedActions.getFeedTypes(this.props.auth.site);
-      if (res.data != null) this.props.feedTypesLoaded(res.data);
-    } catch (error) {
-      console.error('getFeedTypes', error);
-    } finally {
-      this.setState({ loading: false });
-    }
-  };
-
-  sortByCol = (col) => {
-    if (this.state.sortColumn === col) {
-      this.setState({ sortDesc: !this.state.sortDesc });
-    } else {
-      this.setState({ sortColumn: col, sortDesc: false });
-    }
-  };
-
-  isFeedTypeValid = () => {
-    const { feedTypeLabel, feedTypeColour } = this.state;
-
-    if (_.isEmpty(feedTypeLabel)) return false;
-    if (_.isEmpty(feedTypeColour)) return false;
-
-    return true;
-  };
-
-  onRemoveFeedType = async (ev) => {
-    if (!window.confirm(`Are you sure you want to delete ${ev.label}?`)) return;
-
-    try {
-      await feedActions.deleteFeedType(this.props.auth.site, ev.id);
-      const index = _.findIndex(this.state.feedTypeList, (feedType) => {
-        return feedType != null && feedType.id === ev.id;
-      });
-      if (index > -1) {
-        const newFeedTypes = [...this.state.feedTypeList];
-        newFeedTypes[index].Deleted = true;
-        this.props.feedTypesLoaded(newFeedTypes);
-      }
-    } catch (error) {
-      console.error('onRemoveFeedType', error);
-      alert('Something went wrong with the request. Please try again.');
-    }
-  };
-
-  onShowFeedType = (feedType = null) => {
-    this.setState({
-      showFeedType: true,
-      feedTypeId: feedType ? feedType.id : null,
-      feedTypeLabel: feedType ? feedType.label : '',
-      feedTypeColour: feedType ? feedType.colour : Config.env.colourBrandingMain,
-    });
-  };
-
-  onHideFeedType = () => {
-    if (this.state.submitting) return;
-
-    this.setState({
-      showWarnings: false,
-      showFeedType: false,
-      feedTypeId: null,
-      feedTypeLabel: '',
-      feedTypeColour: '',
-    });
-  };
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onSave = () => {
-    const { site } = this.props.auth;
-    const { submitting, feedTypeId, feedTypeLabel, feedTypeColour } = this.state;
-    if (submitting) return;
-    if (!this.isFeedTypeValid()) {
-      this.setState({ showWarnings: true });
-      return;
-    }
-    this.setState({ submitting: true }, async () => {
-      try {
-        if (feedTypeId) {
-          await feedActions.editFeedType(site, feedTypeId, feedTypeLabel, feedTypeColour);
-        } else {
-          await feedActions.addFeedType(site, feedTypeLabel, feedTypeColour);
-        }
-        this.props.feedTypesUpdate(site);
-        this.setState({ submitting: false }, this.onHideFeedType);
-      } catch (error) {
-        console.error('onSave', error);
-        this.setState({ submitting: false });
-        alert('Something went wrong with the request. Please try again.');
-      }
-    });
-  };
-
-  renderList() {
-    const canEdit = Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth);
-    let source = _.sortBy(this.state.feedTypeList, this.state.sortColumn);
-    if (this.state.sortDesc) source.reverse();
-    source = _.filter(source, (ev) => {
-      if (!ev) return false;
-      if (ev.Deleted) return false;
-      return true;
-    });
-
-    return source.map((ev, index) => {
-      if (ev != null) {
-        return (
-          <tr key={index}>
-            <td className="table-TitleColumn">
-              <a onClick={() => this.onShowFeedType(ev)}>{ev.label}</a>
-            </td>
-            <td>
-              <div className="flex flex-row flex-center">
-                <div className="colourPicker_button" style={{ width: 80, height: 30, marginBottom: 'unset', backgroundColor: ev.colour }} />
-                <div className="marginLeft-10">{ev.colour && ev.colour.toUpperCase()}</div>
-              </div>
-            </td>
-            <td className="table-options">
-              {canEdit ? (
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <a onClick={() => this.onShowFeedType(ev)}>
-                    <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 12, cursor: 'pointer' }} name="pencil" />
-                  </a>
-                  <a onClick={() => this.onRemoveFeedType(ev)}>
-                    <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 8, cursor: 'pointer' }} name="minus-circle" />
-                  </a>
-                </div>
-              ) : null}
-            </td>
-          </tr>
-        );
-      }
-      return null;
-    });
-  }
-
-  renderView() {
-    return (
-      <Table className="plussTable" striped bordered condensed hover style={{ minWidth: '100%' }}>
-        <thead>
-          <tr>
-            <th style={{ cursor: 'pointer' }} onClick={() => this.sortByCol('label')}>
-              Feed type
-            </th>
-            <th style={{ cursor: 'pointer' }} onClick={() => this.sortByCol('colour')}>
-              Type colour
-            </th>
-            <th style={{ width: 70 }} />
-          </tr>
-        </thead>
-        <tbody>{this.renderList()}</tbody>
-      </Table>
-    );
-  }
-
-  renderEmpty() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 32 }}>
-        <div className="emptyState" />
-        <div className="marginTop-32" style={{ maxWidth: 600, textAlign: 'center' }}>
-          <span className="fontRegular fontSize-13">
-            Please add the feed types that exist in your village which work alongside the Care Feeds area.
-          </span>
-        </div>
-        <div className="marginTop-8 fontRegular fontSize-13" style={{ maxWidth: 600, textAlign: 'center' }}>
-          Examples might be; Lifestyle.
-        </div>
-      </div>
-    );
-  }
-
-  renderContent() {
-    if (_.isEmpty(this.state.feedTypeList)) return this.renderEmpty();
-    return this.renderView();
-  }
-
-  renderFeedTypes() {
-    const { feedTypeList, loading } = this.state;
-    const canAdd = Session.validateAccess(this.props.auth.site, values.permissionFeedManagement, this.props.auth);
-
-    if (feedTypeList.length === 0 && loading) {
-      return (
-        <div style={{ minWidth: '100%' }}>
-          <div className="padding-60 paddingVertical-40" style={{ textAlign: 'center' }}>
-            <FontAwesome style={{ fontSize: 30, color: Config.env.colourBrandingOff }} name="spinner fa-pulse fa-fw" />
-          </div>
-        </div>
-      );
-    }
-    return (
-      <div style={{ minWidth: '100%' }}>
-        {canAdd ? (
-          <div className="marginBottom-32">
-            <Components.AddButton onClick={() => this.onShowFeedType()} text="NEW FEED TYPE" />
-          </div>
-        ) : null}
-        {this.renderContent()}
-      </div>
-    );
-  }
-
-  renderNewFeedTypePopup() {
-    const { submitting, showFeedType, feedTypeId, showWarnings, feedTypeLabel, feedTypeColour } = this.state;
-    if (!showFeedType) return null;
-
-    return (
-      <Components.Popup
-        maxWidth={800}
-        minWidth={450}
-        hasPadding
-        buttons={[
-          {
-            type: 'primaryAction',
-            onClick: this.onSave,
-            isActive: !submitting && this.isFeedTypeValid(),
-            text: submitting ? 'Saving...' : 'Save',
-            className: 'popupButton',
-          },
-          {
-            type: 'outlinedAction',
-            onClick: this.onHideFeedType,
-            isActive: !submitting,
-            text: 'Cancel',
-            className: 'popupButton',
-          },
-        ]}
-        onClose={this.onHideFeedType}
-        title={feedTypeId ? 'Edit Type' : 'New Type'}
-      >
-        <Components.GenericInput
-          id="feedTypeLabel"
-          type="text"
-          label="Label"
-          placeholder="Feed type label"
-          value={feedTypeLabel}
-          onChange={this.onHandleChange}
-          isRequired
-          isValid={() => !_.isEmpty(feedTypeLabel)}
-          showError={() => showWarnings && _.isEmpty(feedTypeLabel)}
-          alwaysShowLabel
-        />
-        <Components.ColourOptions
-          options={['vibrant', 'picker']}
-          defaultTab="vibrant"
-          value={feedTypeColour}
-          onColourSelected={(feedTypeColour) => this.setState({ feedTypeColour })}
-        />
-        <div className="marginTop-24">
-          <div className="fieldLabel marginBottom-4">Preview</div>
-          <Components.Tag text={this.state.feedTypeLabel} style={{ backgroundColor: feedTypeColour, borderColor: feedTypeColour }} />
-        </div>
-      </Components.Popup>
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ minWidth: '100%' }}>
-        <div>{this.renderFeedTypes()}</div>
-        {this.renderNewFeedTypePopup()}
-        <div className="hub_tidioPadding"></div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  const { auth } = state;
-  return { feedTypes: state[values.reducerKey].feedTypes, auth };
-};
-
-export default connect(mapStateToProps, { feedTypesLoaded, feedTypesUpdate })(withRouter(FeedTypes));

package/src/components/PreviewFull.js

@@ -1,25 +0,0 @@
-import React, { Component } from 'react';
-import fullNoTitle from '../images/fullNoTitle.png';
-
-class PreviewFull extends Component {
-  render() {
-    const { backgroundColor, widgetTitle, titleClassName } = this.props;
-    return (
-      <div style={styles.container}>
-        <p className={titleClassName}>{widgetTitle}</p>
-        <img style={{ ...styles.image, backgroundColor }} src={fullNoTitle} alt="fullNoTitle" />
-      </div>
-    );
-  }
-}
-
-const styles = {
-  container: {
-    position: 'relative',
-  },
-  image: {
-    width: '100%',
-  },
-};
-
-export default PreviewFull;

package/src/components/PreviewGrid.js

@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-import { values } from '../values.config';
-
-const SVG_PATH = values.svgPathGridIcon;
-const SVG_VIEWBOX = values.svgPathGridIconViewBox || '0 0 30 30';
-
-class PreviewGrid extends Component {
-  render() {
-    const { colour } = this.props;
-
-    if (Array.isArray(SVG_PATH)) {
-      return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox={SVG_VIEWBOX}>
-          {SVG_PATH.map((p) => {
-            return <path key={p.substring(0, 20)} d={p} fill={colour} />;
-          })}
-        </svg>
-      );
-    } else {
-      return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox={SVG_VIEWBOX}>
-          <path key={SVG_PATH.substring(0, 20)} d={SVG_PATH} fill={colour} />
-        </svg>
-      );
-    }
-  }
-}
-
-export default PreviewGrid;

package/src/components/PreviewWidget.js

@@ -1,27 +0,0 @@
-import React, { Component } from 'react';
-import previewWidget from '../images/previewWidget.png';
-
-class PreviewWidget extends Component {
-  render() {
-    const { backgroundColor, widgetTitle, titleClassName } = this.props;
-    return (
-      <div style={styles.container}>
-        <img style={{ ...styles.image, backgroundColor }} src={previewWidget} alt="previewWidget" />
-        <p className={titleClassName} style={styles.title}>
-          {widgetTitle}
-        </p>
-      </div>
-    );
-  }
-}
-
-const styles = {
-  container: {
-    position: 'relative',
-  },
-  image: {
-    width: '100%',
-  },
-};
-
-export default PreviewWidget;

package/src/components/ViewFull.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-import full from '../images/full.png';
-
-class ViewFull extends Component {
-  render() {
-    return <img style={styles.image} src={full} alt="full" />;
-  }
-}
-
-const styles = {
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-  },
-};
-
-export default ViewFull;

package/src/components/ViewWidget.js

@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-import widget from '../images/widget.png';
-
-class ViewWidget extends Component {
-  render() {
-    return <img style={styles.image} src={widget} alt="widget" />;
-  }
-}
-
-const styles = {
-  image: {
-    width: 80,
-  },
-};
-
-export default ViewWidget;

package/src/feature.config.js

@@ -1,86 +0,0 @@
-// import * as PlussCore from '../../pluss-core/src';
-import * as PlussCore from '@plusscommunities/pluss-core-web';
-import { values } from './values.config';
-
-export { PlussCore };
-
-const FeatureConfig = {
-  key: values.featureKey,
-  aliases: values.aliases,
-  singularName: values.textSingularName,
-  description: 'Submit and track resident feed.',
-  emptyText: values.textEmptyState,
-  widgetOptions: [],
-  menu: {
-    order: values.menuOrder,
-    text: values.textMenuTitle,
-    icon: 'list-burger',
-    url: values.routeHub,
-    countProps: null,
-    visibleExps: {
-      type: 'and',
-      exps: [
-        { type: 'feature', value: values.featureKey },
-        {
-          type: 'or',
-          exps: [
-            { type: 'permission', value: values.permissionFeedManagement },
-            { type: 'permission', value: values.permissionFeedPost },
-            { type: 'permission', value: values.permissionFeedDraft },
-          ],
-        },
-      ],
-    },
-  },
-  addUrl: values.routeAddFeed,
-  addPermission: values.permissionFeedPost,
-  activities: [],
-  permissions: [
-    {
-      displayName: values.textPermissionFeedManagement,
-      key: values.permissionFeedManagement,
-      hq: false,
-    },
-    {
-      displayName: values.textPermissionFeedPost,
-      key: values.permissionFeedPost,
-      hq: false,
-    },
-    {
-      displayName: values.textPermissionFeedDraft,
-      key: values.permissionFeedDraft,
-      hq: false,
-    },
-  ],
-  hiddenSections: [],
-  moreSections: [],
-  routes: [
-    { path: values.routeHub, component: values.screenFeedHub, exact: false },
-    { path: values.routeAddFeed, component: values.screenAddFeed, exact: true },
-    { path: `${values.routeAddFeed}/:feedId`, component: values.screenAddFeed, exact: true },
-    { path: `${values.routeFeedDetails}/:feedId`, component: values.screenFeed, exact: true },
-    { path: values.routeFeedTypes, component: values.screenFeedTypes, exact: false },
-  ],
-  env: {
-    baseStage: '',
-    baseAPIUrl: '',
-    baseUploadsUrl: '',
-    uploadBucket: '',
-    colourBrandingMain: '',
-    colourBrandingOff: '',
-    colourBrandingApp: '',
-    defaultProfileImage: '',
-    utcOffset: '',
-    hasAvailableNews: false,
-    newsHaveTags: true,
-    defaultAllowComments: true,
-    makeApiKey: '',
-    logo: '',
-    clientName: '',
-  },
-  init: (environment) => {
-    FeatureConfig.env = environment;
-    PlussCore.Config.init(environment);
-  },
-};
-export default FeatureConfig;