@plusscommunities/pluss-feeds-web 1.0.1-beta.0

package/src/index.js

@@ -0,0 +1,27 @@
+import FeedHub from './screens/FeedHub';
+import Feed from './screens/Feed';
+import AddFeed from './screens/AddFeed';
+// import { AnalyticsHub } from './components/AnalyticsHub.js';
+import FeedReducer from './reducers/FeedReducer';
+import { values } from './values.config';
+
+export const Reducers = (() => {
+  const reducers = {};
+  reducers[values.reducerKey] = FeedReducer;
+  return reducers;
+})();
+export const Screens = (() => {
+  const screens = {};
+  screens[values.screenFeedHub] = FeedHub;
+  screens[values.screenFeed] = Feed;
+  screens[values.screenAddFeed] = AddFeed;
+  return screens;
+})();
+export { default as Config } from './feature.config';
+// export { default as ActivityText } from './components/ActivityText';
+export { default as ViewWidget } from './components/ViewWidget';
+export { default as ViewFull } from './components/ViewFull';
+export { default as PreviewWidget } from './components/PreviewWidget';
+export { default as PreviewFull } from './components/PreviewFull';
+export { default as PreviewGrid } from './components/PreviewGrid';
+// export const Analytics = [AnalyticsHub];

package/src/reducers/FeedReducer.js

@@ -0,0 +1,71 @@
+import _ from 'lodash';
+
+import {
+  FEEDS_LOADING,
+  FEEDS_LOADED,
+  FEEDS_REMOVED,
+  FEEDS_SUBMISSIONS_LOADED,
+  FEEDS_SUBMISSIONS_REMOVED,
+  FEED_TYPES_LOADED,
+} from '../actions/types';
+
+const INITIAL_STATE = {
+  feeds: [],
+  submissions: [],
+  feedTypes: [],
+  loading: false,
+};
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case FEEDS_LOADING:
+      return { ...state, loading: true };
+    case FEEDS_LOADED:
+      const feeds = _.unionWith(action.payload, state.feeds, (v1, v2) => {
+        return v1 != null && v2 != null && v1.id === v2.id;
+      });
+      return {
+        ...state,
+        feeds: feeds.map((feedItem) => ({ ...feedItem })),
+        loading: false,
+      };
+    case FEEDS_REMOVED:
+      const fIndex = _.findIndex(state.feeds, (feed) => {
+        return feed != null && feed.id === action.payload;
+      });
+      if (fIndex > -1) {
+        const newFeeds = [...state.feeds];
+        newFeeds.splice(fIndex, 1);
+        return { ...state, feeds: newFeeds };
+      }
+      return state;
+    case FEEDS_SUBMISSIONS_LOADED:
+      var submissions = _.unionWith(action.payload, state.submissions, (v1, v2) => {
+        return v1 != null && v2 != null && v1.id === v2.id;
+      });
+      return {
+        ...state,
+        submissions: _.filter(submissions, (feed) => !feed.deleted),
+      };
+    case FEEDS_SUBMISSIONS_REMOVED:
+      const sIndex = _.findIndex(state.submissions, (submission) => {
+        return submission != null && submission.id === action.payload;
+      });
+      if (sIndex > -1) {
+        const newSubmissions = [...state.submissions];
+        newSubmissions.splice(sIndex, 1);
+        return { ...state, submissions: newSubmissions };
+      }
+      return state;
+    case FEED_TYPES_LOADED:
+      const feedTypes = _.unionWith(action.payload, state.feedTypes, (v1, v2) => {
+        return v1 != null && v2 != null && v1.id === v2.id;
+      });
+      return {
+        ...state,
+        feedTypes: feedTypes,
+      };
+    default:
+      return state;
+  }
+};

package/src/screens/AddFeed.js

@@ -0,0 +1,402 @@
+import _ from 'lodash';
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { feedsLoaded, feedsUpdate } from '../actions';
+import { PlussCore } from '../feature.config';
+import { feedActions, userActions } from '../apis';
+import { values } from '../values.config';
+
+const { Components, Helper, Session } = PlussCore;
+
+class AddFeed extends Component {
+  constructor(props) {
+    super(props);
+    this.imageInput = null;
+    const queryParams = new URLSearchParams(props.location.search);
+    this.state = {
+      feedId: Helper.safeReadParams(props, 'feedId') ? props.match.params.feedId : null,
+      feed: null,
+      updating: false,
+      types: [],
+      users: [],
+      photos: [],
+      userSearch: '',
+      userFilterOpen: false,
+      selectedUser: null,
+      id: null,
+      userId: queryParams.get('userId') || '',
+      userName: '',
+      title: '',
+      text: '',
+      type: '',
+      showWarnings: false,
+      success: false,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    Session.checkLoggedIn(this, this.props.auth);
+  }
+
+  componentDidMount() {
+    this.getFeedTypes();
+    this.getUsers();
+    if (this.state.feedId) this.getFeed();
+  }
+
+  getFeed = async () => {
+    try {
+      const res = await feedActions.getFeed(this.state.feedId);
+      // console.log('getFeed:', res.data);
+      this.setState({ ...res.data, selectedUser: res.data.user, userId: res.data.user.id, userName: res.data.user.displayName });
+      this.checkSetImages(res.data.photos);
+    } catch (error) {
+      console.error('getFeed', error);
+    }
+  };
+
+  checkSetImages(photos) {
+    if (this.imageInput) {
+      if (!_.isEmpty(photos)) {
+        this.imageInput.getWrappedInstance().setValue(photos);
+      }
+    } else {
+      setTimeout(() => {
+        this.checkSetImages(photos);
+      }, 100);
+    }
+  }
+
+  getFeedTypes = async () => {
+    try {
+      const res = await feedActions.getFeedTypes(this.props.auth.site);
+      this.setState({ types: res.data }, this.setDefaultFeedType);
+      // if (res.data != null) this.props.feedTypesLoaded(res.data);
+    } catch (error) {
+      console.error('getFeedTypes', error);
+    }
+  };
+
+  setDefaultFeedType = () => {
+    const { types, feedId } = this.state;
+    if (types.length !== 0 && feedId == null) {
+      this.setState({ type: types[0].label });
+    }
+  };
+
+  getUsers = async () => {
+    try {
+      const res = await userActions.fetchUsers(this.props.auth.site);
+      if (res.userFetchFail) return;
+      if (res.data != null && !_.isEmpty(res.data.results.Items)) {
+        const items = res.data.results.Items;
+        this.setState(
+          {
+            users: _.sortBy(items, (u) => {
+              return (u.displayName || '').toLowerCase();
+            }),
+          },
+          this.setDefaultUser,
+        );
+      }
+    } catch (error) {
+      console.error('getUsers', error);
+    }
+  };
+
+  getUserId = (user) => user.userId || user.Id || user.id;
+
+  setDefaultUser = () => {
+    const { users, userId } = this.state;
+    // console.log('setDefaultUser', { userId });
+    if (userId) {
+      const user = users.find((u) => this.getUserId(u) === userId);
+      if (user) this.onSelectUser(user);
+    } else {
+      this.onUnselectUser();
+    }
+  };
+
+  onSelectType = (key) => {
+    this.setState({ type: key });
+  };
+
+  renderTypeOptions() {
+    const { types, type } = this.state;
+    return (
+      <div style={{ marginBottom: 15 }}>
+        <Components.Text type="formLabel">Select Type</Components.Text>
+        <div className="marginTop-4">
+          {types.map((ev) => {
+            if (ev === null) return null;
+            return (
+              <Components.Tag
+                key={ev.id}
+                text={ev.label}
+                style={{ backgroundColor: ev.colour, borderRadius: 8, marginRight: 10, opacity: ev.label === type ? 1 : 0.5 }}
+                onClick={() => this.onSelectType(ev.label)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  onOpenUserSelector = () => {
+    this.setState({ userFilterOpen: true });
+  };
+
+  onCloseUserSelector = () => {
+    this.setState({ userFilterOpen: false });
+  };
+
+  onSelectUser = (user) => {
+    // console.log('onSelectUser', user);
+    this.setState({ selectedUser: user, userId: this.getUserId(user), userName: user.displayName, userFilterOpen: false });
+  };
+
+  onUnselectUser = () => {
+    this.setState({ selectedUser: null, userId: '', userName: '' });
+  };
+
+  onSave = async () => {
+    try {
+      this.setState({ showWarnings: false });
+      if (!this.validateForm()) {
+        this.setState({ showWarnings: true });
+        return;
+      }
+      if (this.state.updating) return;
+      this.setState({ updating: true });
+      const feed = {
+        id: this.state.id,
+        userId: this.state.userId,
+        type: this.state.type,
+        title: this.state.title,
+        text: this.state.text,
+        photos: this.state.photos,
+        site: this.props.auth.site,
+      };
+
+      if (this.state.id !== null) {
+        await feedActions.editFeed(feed);
+        this.setState({ success: true, updating: false });
+        this.props.feedsLoaded([feed]);
+      } else {
+        await feedActions.createFeed(feed);
+        this.setState({ success: true, updating: false });
+        this.props.feedsUpdate(this.props.auth.site);
+      }
+    } catch (error) {
+      this.setState({ updating: false });
+      alert('Something went wrong with the request. Please try again.');
+    }
+  };
+
+  renderSuccess() {
+    if (!this.state.success) return null;
+
+    const title = this.props.strings[`${values.featureKey}_textTitleFeeds`] || values.textTitleFeeds;
+    return (
+      <Components.SuccessPopup
+        text={`Feed has been ${this.state.id != null ? 'edited' : 'added'}`}
+        buttons={[
+          {
+            type: 'outlined',
+            onClick: () => window.history.back(),
+            text: `Back to ${title}`,
+          },
+        ]}
+      />
+    );
+  }
+
+  validateForm() {
+    const { userId, userName, title } = this.state;
+    // console.log('validateForm', { userId, userName, title });
+
+    if (_.isEmpty(userId)) return false;
+    if (_.isEmpty(userName)) return false;
+    if (_.isEmpty(title)) return false;
+    return true;
+  }
+
+  renderSubmit() {
+    if (this.state.updating) {
+      return <Components.Button buttonType="secondary">Saving...</Components.Button>;
+    }
+
+    return (
+      <div>
+        <Components.Button
+          inline
+          buttonType="tertiary"
+          onClick={() => this.props.history.push(values.routeHub)}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          Cancel
+        </Components.Button>
+        <Components.Button inline buttonType="primary" onClick={this.onSave} isActive={this.validateForm()}>
+          Save
+        </Components.Button>
+      </div>
+    );
+  }
+
+  renderSelectUser() {
+    const { showWarnings, selectedUser } = this.state;
+    const isValid = !_.isNil(selectedUser);
+    const showError = showWarnings && !isValid;
+    return (
+      <div className={`genericInputContainer ${isValid ? 'genericInput-valid' : ''} ${showError ? 'genericInput-error' : ''}`.trim()}>
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 0, justifyContent: 'space-between' }}>
+          <div className="fieldLabel">Select User</div>
+          {showError ? <div className="fieldLabel fieldLabel-warning">Required</div> : null}
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+          <div className="inputRequired " />
+          {selectedUser ? (
+            <Components.Tag className="marginRight-10" rightIcon="close" rightClick={this.onUnselectUser}>
+              <Components.UserListing size={15} user={selectedUser} textClass="tag_text" />
+            </Components.Tag>
+          ) : (
+            <Components.Tag onClick={this.onOpenUserSelector} text="Select User" />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  renderMain() {
+    return (
+      <div style={{ marginBottom: 15 }}>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          <Components.Text type="formTitleLarge" className="marginBottom-24">
+            {this.state.feedId == null ? 'New' : 'Edit'} Feed
+          </Components.Text>
+          {/* Resident Information */}
+          {this.renderSelectUser()}
+          {this.renderTypeOptions()}
+          <Components.GenericInput
+            id="title"
+            label="Title"
+            type="textarea"
+            placeholder="Title"
+            value={this.state.title}
+            onChange={(e) => this.onHandleChange(e)}
+            inputStyle={{
+              height: 80,
+            }}
+            isRequired
+            isValid={() => {
+              return !_.isEmpty(this.state.title);
+            }}
+            showError={() => {
+              return this.state.showWarnings && _.isEmpty(this.state.title);
+            }}
+            alwaysShowLabel
+          />
+          <Components.GenericInput
+            id="text"
+            label="Text"
+            type="textarea"
+            placeholder="Text"
+            value={this.state.text}
+            onChange={(e) => this.onHandleChange(e)}
+            inputStyle={{
+              height: 80,
+            }}
+            alwaysShowLabel
+          />
+          <div className="marginBottom-16">
+            <Components.Text type="formLabel" className="marginBottom-4">
+              Images
+            </Components.Text>
+            <Components.ImageInput
+              ref={(ref) => (this.imageInput = ref)}
+              multiple
+              refreshCallback={(photos) => this.setState({ photos })}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderUserFilterPopup() {
+    const { userFilterOpen, userSearch, users } = this.state;
+    if (!userFilterOpen) return null;
+    return (
+      <Components.Popup
+        title="Select Requestor"
+        maxWidth={600}
+        minWidth={400}
+        maxHeight={600}
+        minHeight={600}
+        hasPadding
+        onClose={this.onCloseUserSelector}
+        buttons={[
+          {
+            type: 'tertiary',
+            onClick: this.onCloseUserSelector,
+            isActive: true,
+            text: 'Cancel',
+          },
+        ]}
+      >
+        <Components.GenericInput
+          id="userSearch"
+          type="text"
+          label="Search User"
+          placeholder="Search name"
+          value={userSearch}
+          onChange={(e) => this.onHandleChange(e)}
+          alwaysShowLabel
+        />
+        {_.sortBy(users, (u) => u.displayName.toUpperCase())
+          .filter((u) => {
+            if (_.isEmpty(userSearch)) return true;
+            return u.displayName.toUpperCase().indexOf(userSearch.toUpperCase()) > -1;
+          })
+          .map((user) => {
+            return <Components.UserListing key={this.getUserId(user)} user={user} onClick={() => this.onSelectUser(user)} />;
+          })}
+      </Components.Popup>
+    );
+  }
+
+  render() {
+    const { success } = this.state;
+
+    return (
+      <Components.OverlayPage>
+        <Components.OverlayPageContents noBottomButtons={success}>
+          <Components.OverlayPageSection className="pageSectionWrapper--newPopup">
+            <div>
+              {this.renderSuccess()}
+              {!success && this.renderMain()}
+            </div>
+            {this.renderUserFilterPopup()}
+          </Components.OverlayPageSection>
+        </Components.OverlayPageContents>
+        <Components.OverlayPageBottomButtons>{this.renderSubmit()}</Components.OverlayPageBottomButtons>
+      </Components.OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return { auth, strings: (state.strings && state.strings.config) || {} };
+};
+
+export default connect(mapStateToProps, { feedsUpdate, feedsLoaded })(withRouter(AddFeed));