@plusscommunities/pluss-circles-web 1.0.3 → 1.0.8

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.0.3",
+  "version": "1.0.8",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm i && rollup -c",
     "core": "npm i @plusscommunities/pluss-core-web@latest",
-    "upload": "npm version patch && npm publish --access public",
-    "deploy": "npm run core && npm run build && npm run upload",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "patch": "npm version patch",
+    "upload": "npm run build && npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload",
+    "upload:cp": "npm run core && npm run patch && npm run upload"
   },
   "author": "Phillip Suh",
   "license": "ISC",
@@ -28,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "^1.0.4",
+    "@plusscommunities/pluss-core-web": "^1.2.5",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/rollup.config.js

@@ -38,6 +38,7 @@ MODE.map((m) => {
       // these are babel comfigurations
       babel({
         exclude: 'node_modules/**',
+        presets: ['@babel/preset-react', '@babel/preset-env'],
         plugins: ['@babel/transform-runtime'],
         babelHelpers: 'runtime',
       }),

package/src/actions/CirclesActions.js

@@ -0,0 +1,16 @@
+import _ from 'lodash';
+import { CIRCLES_LOADED, CIRCLE_UPDATED } from './types';
+
+export const circlesLoaded = (circles) => {
+  return {
+    type: CIRCLES_LOADED,
+    payload: circles,
+  };
+};
+
+export const circleUpdated = (circle) => {
+  return {
+    type: CIRCLE_UPDATED,
+    payload: circle,
+  };
+};

package/src/actions/index.js

@@ -0,0 +1 @@
+export * from './CirclesActions';

package/src/actions/types.js

@@ -0,0 +1,2 @@
+export const CIRCLES_LOADED = 'CIRCLES_LOADED';
+export const CIRCLE_UPDATED = 'CIRCLE_UPDATED';

package/src/apis/circleActions.js

@@ -0,0 +1,94 @@
+import _ from 'lodash';
+import { PlussCore } from '../feature.config';
+const { Helper, Session } = PlussCore;
+
+export const circleActions = {
+  getAll: (site) => {
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl('circles', 'get/all', { site }),
+    });
+  },
+  getFiles: (circleId) => {
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl('circles', 'get/files', { circleId }),
+    });
+  },
+  getImages: (circleId) => {
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl('circles', 'get/images', { circleId }),
+    });
+  },
+  add: (site, title, image, audience) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('circles', 'update/add'),
+      data: {
+        site,
+        title,
+        image,
+        audience,
+      },
+    });
+  },
+  edit: (circleId, title, image, audience) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('circles', 'update/edit'),
+      data: {
+        circleId,
+        title,
+        image,
+        audience,
+      },
+    });
+  },
+  addAdmin: (circleId, userId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('circles', 'update/addadmin'),
+      data: {
+        circleId,
+        userId,
+      },
+    });
+  },
+  removeAdmin: (circleId, userId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('circles', 'update/removeadmin'),
+      data: {
+        circleId,
+        userId,
+      },
+    });
+  },
+  getMessages: async (groupId, limit, minTime, maxTime) => {
+    const query = { groupId };
+    if (!_.isUndefined(minTime)) {
+      query.minTime = minTime;
+    }
+    if (!_.isUndefined(maxTime)) {
+      query.maxTime = maxTime;
+    }
+    if (limit) {
+      query.limit = limit;
+    }
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl('circles', 'getMessages', query),
+    });
+  },
+  sendMessage: async (circleId, message) => {
+    return Session.authedFunction({
+      method: 'post',
+      url: Helper.getUrl('circles', 'sendMessage'),
+      data: {
+        groupId: circleId,
+        message,
+      },
+    });
+  },
+};

package/src/apis/index.js

@@ -0,0 +1 @@
+export * from './circleActions';

package/src/feature.config.js

@@ -5,8 +5,36 @@ export { PlussCore };
 
 const FeatureConfig = {
   key: 'circles',
+  singularName: 'Circle',
   description: 'App users can create circles and message each other.',
   emptyText: "You aren't in any Circles",
+  widgetOptions: [],
+  menu: {
+    order: 11,
+    text: 'Circles',
+    icon: 'circle-o',
+    isFontAwesome: true,
+    url: '/circles',
+    countProps: null,
+    visibleExps: {
+      type: 'feature',
+      value: 'circles',
+    },
+  },
+  addUrl: '/circles/add',
+  addPermission: 'circles',
+  permissions: [
+    {
+      displayName: 'Manage and View Circles',
+      key: 'circles',
+    },
+  ],
+  routes: [
+    { path: '/circles', component: 'Circles', exact: false },
+    { path: '/circles/add', component: 'AddCircle', exact: true },
+    { path: '/circles/circle/:circleId', component: 'Circle', exact: true },
+    { path: '/circles/edit/:circleId', component: 'AddCircle', exact: true },
+  ],
   env: {
     baseStage: '',
     baseAPIUrl: '',
@@ -14,6 +42,15 @@ const FeatureConfig = {
     uploadBucket: '',
     colourBrandingMain: '',
     colourBrandingOff: '',
+    colourBrandingApp: '',
+    defaultProfileImage: '',
+    utcOffset: '',
+    hasAvailableNews: false,
+    newsHaveTags: true,
+    defaultAllowComments: true,
+    makeApiKey: '',
+    logo: '',
+    clientName: '',
   },
   init: (environment) => {
     FeatureConfig.env = environment;

package/src/index.js

@@ -1,3 +1,10 @@
+import Circles from './screens/Circles';
+import AddCircle from './screens/AddCircle';
+import Circle from './screens/Circle';
+import CircleReducer from './reducers/CircleReducer';
+
+export const Reducers = { circles: CircleReducer };
+export const Screens = { Circles, AddCircle, Circle };
 export { default as Config } from './feature.config';
 export { default as ViewWidget } from './components/ViewWidget';
 export { default as ViewFull } from './components/ViewFull';

package/src/reducers/CircleReducer.js

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import { CIRCLES_LOADED, CIRCLE_UPDATED } from '../actions/types';
+
+const INITIAL_STATE = {
+  circles: [],
+};
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case CIRCLES_LOADED:
+      return { ...state, circles: action.payload };
+    case CIRCLE_UPDATED:
+      return { ...state, circles: _.uniqBy([action.payload, ...state.circles], (c) => c.Id) };
+    default:
+      return state;
+  }
+};

package/src/screens/AddCircle.js

@@ -0,0 +1,429 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { PlussCore } from '../feature.config';
+import { circleActions } from '../apis';
+import { circlesLoaded, circleUpdated } from '../actions';
+
+const { Actions, Components, Session, Apis, Colours, Helper } = PlussCore;
+
+class AddCircle extends Component {
+  constructor(props) {
+    super(props);
+
+    const circleId = Helper.safeReadParams(props, 'circleId');
+    this.state = {
+      circleId,
+      circle: _.find(props.circles, (c) => {
+        return c.Id === circleId;
+      }),
+      title: '',
+      showWarnings: false,
+      success: false,
+      users: [],
+      selectedUsers: [],
+      userSearch: '',
+    };
+  }
+
+  componentDidMount() {
+    Session.checkLoggedIn(this, this.props.auth);
+    this.props.addRecentlyCreated('circle');
+    this.getUsers();
+
+    this.checkGetCircle();
+  }
+
+  getUsers = () => {
+    Apis.userActions
+      .fetchUsers(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          loadingAll: false,
+        });
+        if (res.userFetchFail) {
+          return;
+        }
+        if (res.data != null && !_.isEmpty(res.data.results.Items)) {
+          this.setState({
+            users: _.sortBy(res.data.results.Items, (u) => {
+              return (u.displayName || '').toLowerCase();
+            }),
+          });
+        }
+      })
+      .catch((error) => {
+        this.setState({ loadingAll: false });
+      });
+  };
+
+  getShownUsers = () => {
+    return _.filter(this.state.users, (u) => {
+      if (
+        _.some(this.state.selectedUsers, (selectedUser) => {
+          return u.userId === selectedUser.userId;
+        })
+      ) {
+        return false;
+      }
+      if (!_.isEmpty(this.state.userSearch)) {
+        return (u.displayName || '').toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
+      }
+      return true;
+    });
+  };
+
+  parseCircle = (circle) => {
+    const selectedUsers = circle.Audience.map((user) => {
+      return {
+        userId: user.userId,
+        profilePic: user.profilePic,
+        displayName: user.displayName,
+        isAdmin: user.isAdmin,
+      };
+    });
+    const newState = {
+      title: circle.Title,
+      selectedUsers,
+    };
+    this.setState(newState);
+
+    if (!_.isEmpty(circle.Image)) {
+      this.checkSetImage(circle.Image);
+    }
+  };
+
+  checkSetImage(url) {
+    if (this.imageInput) {
+      this.setState({
+        image: url,
+      });
+      this.imageInput.getWrappedInstance().setValue(url);
+    } else {
+      setTimeout(() => {
+        this.checkSetImage(url);
+      }, 100);
+    }
+  }
+
+  checkGetCircle = () => {
+    if (!this.state.circleId) {
+      return;
+    }
+    if (this.state.circle) {
+      return this.parseCircle(this.state.circle);
+    }
+    const { auth } = this.props;
+    this.setState({ loadingAll: true }, async () => {
+      try {
+        const res = await circleActions.getAll(auth.site);
+        console.log('getData', res.data);
+        const circle = _.find(res.data, (c) => {
+          return c.Id === this.state.circleId;
+        });
+
+        this.props.circlesLoaded(res.data);
+        this.setState({ loadingAll: false, circle });
+        this.parseCircle(circle);
+      } catch (error) {
+        console.error('getData', error);
+        this.setState({ loadingAll: false });
+      }
+    });
+  };
+
+  onHandleChange = (event) => {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  };
+
+  onImageUpdated = (url) => {
+    this.setState({
+      image: url,
+    });
+  };
+
+  toggleSelf = () => {
+    this.setState({
+      includeSelf: !this.state.includeSelf,
+    });
+  };
+
+  onSelectUser = (user) => {
+    const newState = {
+      selectedUsers: _.xor(this.state.selectedUsers, [user]),
+    };
+    if (_.isEmpty(this.state.title) && _.includes(newState.selectedUsers, user)) {
+      newState.title = `${user.displayName.split(' ')[0]}'s Circle`;
+    }
+    this.setState(newState);
+  };
+
+  onSave = () => {
+    this.setState({ showWarnings: false });
+    if (!this.validateForm()) {
+      this.setState({ showWarnings: true });
+      return;
+    }
+    if (this.state.updating) return;
+    this.setState({ updating: true });
+    const audience = this.state.selectedUsers.map((user) => {
+      return {
+        userId: user.userId,
+        profilePic: user.profilePic,
+        displayName: user.displayName,
+        isAdmin: user.isAdmin,
+      };
+    });
+
+    if (this.state.circleId) {
+      circleActions
+        .edit(this.state.circleId, this.state.title, this.state.image, audience)
+        .then((res) => {
+          this.setState({
+            success: true,
+            updating: false,
+          });
+          console.log('success');
+          this.props.circleUpdated(res.data);
+        })
+        .catch((err) => {
+          console.log('error');
+          this.setState({ updating: false });
+          alert('Something went wrong with the request. Please try again.');
+        });
+    } else {
+      circleActions
+        .add(this.props.auth.site, this.state.title, this.state.image, audience)
+        .then((res) => {
+          this.setState({
+            success: true,
+            updating: false,
+          });
+          console.log('success');
+          this.props.circleUpdated(res.data);
+        })
+        .catch((err) => {
+          console.log('error');
+          this.setState({ updating: false });
+          alert('Something went wrong with the request. Please try again.');
+        });
+    }
+  };
+
+  getSelectableUsers() {
+    return _.filter(this.state.users, (user) => {
+      if (
+        _.some(this.state.selectedUsers, (selectedUser) => {
+          return user.userId === selectedUser.userId;
+        })
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }
+
+  validateForm() {
+    if (_.isEmpty(this.state.title)) return false;
+    return true;
+  }
+
+  addAdmin = (user) => {
+    user.isAdmin = true;
+    this.setState({
+      selectedUsers: [...this.state.selectedUsers],
+    });
+  };
+
+  removeAdmin = (user) => {
+    user.isAdmin = false;
+    this.setState({
+      selectedUsers: [...this.state.selectedUsers],
+    });
+  };
+
+  renderSuccess() {
+    if (!this.state.success) return null;
+    return (
+      <Components.SuccessPopup
+        text={`Circle has been ${this.state.circleId == null ? 'added' : 'edited'}`}
+        buttons={[
+          {
+            type: 'outlined',
+            onClick: () => {
+              window.history.back();
+            },
+            text: `Back to Circles`,
+          },
+        ]}
+      />
+    );
+  }
+
+  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('/circles')}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          Cancel
+        </Components.Button>
+        <Components.Button inline buttonType="primary" onClick={this.onSave} isActive={this.validateForm()}>
+          Save
+        </Components.Button>
+      </div>
+    );
+  }
+
+  renderMain() {
+    return (
+      <div style={{ marginBottom: 15 }}>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          <Components.Text type="formTitleLarge" className="marginBottom-24">
+            {this.state.circleId == null ? 'New' : 'Edit'} Circle
+          </Components.Text>
+          {/* Resident Information */}
+          <div className="flex flex-reverse">
+            <Components.ImageInput
+              ref={(ref) => {
+                this.imageInput = ref;
+              }}
+              label="IMAGE"
+              limit={1}
+              refreshCallback={this.onImageUpdated}
+              containerStyle={{ marginLeft: 40 }}
+            />
+            <div className="flex-1">
+              <Components.GenericInput
+                id="title"
+                type="text"
+                label="Title"
+                placeholder="Name the Circle"
+                value={this.state.title}
+                onChange={(e) => this.onHandleChange(e)}
+                isRequired
+                alwaysShowLabel
+                isValid={() => {
+                  return !_.isEmpty(this.state.title);
+                }}
+                showError={() => {
+                  return this.state.showWarnings && _.isEmpty(this.state.title);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          <Components.Text type="formTitleMedium">Members</Components.Text>
+          <div className="flex marginTop-20">
+            <div className="flex-1">
+              <Components.Text type="formTitleSmall" className="marginBottom-10">
+                Select Users
+              </Components.Text>
+              <Components.GenericInput
+                id="userSearch"
+                type="text"
+                label="Search"
+                placeholder="Enter name"
+                value={this.state.userSearch}
+                onChange={(e) => this.onHandleChange(e)}
+                alwaysShowLabel
+              />
+              {this.getShownUsers().map((user) => {
+                return (
+                  <Components.UserListing
+                    key={user.userId}
+                    user={user}
+                    onClick={() => {
+                      this.onSelectUser(user);
+                    }}
+                  />
+                );
+              })}
+            </div>
+            <div className="flex-1">
+              <Components.Text type="formTitleSmall" className="marginBottom-10">
+                Selected
+              </Components.Text>
+              {this.state.selectedUsers.map((user) => {
+                return (
+                  <Components.UserListing
+                    key={user.userId}
+                    user={user}
+                    rightContent={
+                      <div className="flex flex-reverse flex-center">
+                        <Components.SVGIcon
+                          className="removeIcon marginLeft-8"
+                          icon="close"
+                          colour={Colours.COLOUR_DUSK}
+                          onClick={() => {
+                            this.onSelectUser(user);
+                          }}
+                        />
+                        <Components.StatusButton
+                          isActive={user.isAdmin}
+                          activate={() => {
+                            this.addAdmin(user);
+                          }}
+                          deactivate={() => {
+                            this.removeAdmin(user);
+                          }}
+                          activeText="Admin"
+                          activateText="Make Admin"
+                          deactivateText="Remove Admin"
+                          inactiveText="Not Admin"
+                        />
+                      </div>
+                    }
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { success } = this.state;
+
+    return (
+      <Components.OverlayPage>
+        <Components.OverlayPageContents noBottomButtons={success}>
+          <Components.OverlayPageSection className="pageSectionWrapper--newPopup">
+            <div>
+              {this.renderSuccess()}
+              {!success && this.renderMain()}
+            </div>
+          </Components.OverlayPageSection>
+        </Components.OverlayPageContents>
+        <Components.OverlayPageBottomButtons>{this.renderSubmit()}</Components.OverlayPageBottomButtons>
+      </Components.OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { circles } = state.circles;
+  const { auth } = state;
+  return {
+    circles,
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { circlesLoaded, circleUpdated, addRecentlyCreated: Actions.addRecentlyCreated })(
+  withRouter(AddCircle),
+);