@plusscommunities/pluss-circles-web 1.0.9 → 1.0.12

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
     "build": "npm i && rollup -c",
-    "core": "npm i @plusscommunities/pluss-core-web@latest",
+    "betapatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
+    "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
+    "betaupload:p": "npm run betapatch && npm run betaupload",
     "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"
+    "copy:add": "run(){ ext=${1:-default}; test -f src/values.config.$ext.js || cp src/values.config.default.js src/values.config.$ext.js; }; run",
+    "copy:get": "echo $npm_package_name",
+    "copy:set": "run(){ target='\\@plusscommunities\\/pluss-circles-web'; ext=${1:-default}; [ $ext == 'default' ] && replace=$target || replace=$target'-'$ext; echo 'Setting target to '$replace; test -f src/values.config.$ext.js && cp -f src/values.config.$ext.js src/values.config.js; sed -i '' -e 's/'$target'.*\"/'$replace'\"/g' package.json; }; run",
+    "copy:betaupload": "npm run betapatch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run betaupload; done; npm run copy:set;",
+    "copy:upload": "npm run patch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run upload; done; npm run copy:set;"
   },
   "author": "Phillip Suh",
   "license": "ISC",
@@ -29,7 +35,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "^1.2.5",
+    "@plusscommunities/pluss-core-web": "1.4.10",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/src/actions/types.js

@@ -1,3 +1,5 @@
-export const CIRCLES_LOADED = 'CIRCLES_LOADED';
-export const CIRCLE_UPDATED = 'CIRCLE_UPDATED';
-export const CIRCLE_REMOVED = 'CIRCLE_REMOVED';
+import { values } from '../values.config';
+
+export const CIRCLES_LOADED = `${values.actionCircleKey}S_LOADED`;
+export const CIRCLE_UPDATED = `${values.actionCircleKey}_UPDATED`;
+export const CIRCLE_REMOVED = `${values.actionCircleKey}_REMOVED`;

package/src/apis/circleActions.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { values } from '../values.config';
 import { PlussCore } from '../feature.config';
 const { Helper, Session } = PlussCore;
 
@@ -6,49 +7,51 @@ export const circleActions = {
   getAll: (site) => {
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('circles', 'get/all', { site }),
+      url: Helper.getUrl(values.serviceKey, 'get/all', { site }),
     });
   },
   getFiles: (circleId) => {
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('circles', 'get/files', { circleId }),
+      url: Helper.getUrl(values.serviceKey, 'get/files', { circleId }),
     });
   },
   getImages: (circleId) => {
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('circles', 'get/images', { circleId }),
+      url: Helper.getUrl(values.serviceKey, 'get/images', { circleId }),
     });
   },
-  add: (site, title, image, audience) => {
+  add: (site, title, image, audience, isPublic) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('circles', 'update/add'),
+      url: Helper.getUrl(values.serviceKey, 'update/add'),
       data: {
         site,
         title,
         image,
         audience,
+        isPublic,
       },
     });
   },
-  edit: (circleId, title, image, audience) => {
+  edit: (circleId, title, image, audience, isPublic) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('circles', 'update/edit'),
+      url: Helper.getUrl(values.serviceKey, 'update/edit'),
       data: {
         circleId,
         title,
         image,
         audience,
+        isPublic,
       },
     });
   },
   delete: (circleId) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('circles', 'update/delete'),
+      url: Helper.getUrl(values.serviceKey, 'update/delete'),
       data: {
         circleId,
       },
@@ -57,7 +60,7 @@ export const circleActions = {
   addAdmin: (circleId, userId) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('circles', 'update/addadmin'),
+      url: Helper.getUrl(values.serviceKey, 'update/addadmin'),
       data: {
         circleId,
         userId,
@@ -67,7 +70,7 @@ export const circleActions = {
   removeAdmin: (circleId, userId) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('circles', 'update/removeadmin'),
+      url: Helper.getUrl(values.serviceKey, 'update/removeadmin'),
       data: {
         circleId,
         userId,
@@ -87,13 +90,13 @@ export const circleActions = {
     }
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('circles', 'getMessages', query),
+      url: Helper.getUrl(values.serviceKey, 'getMessages', query),
     });
   },
   sendMessage: async (circleId, message) => {
     return Session.authedFunction({
       method: 'post',
-      url: Helper.getUrl('circles', 'sendMessage'),
+      url: Helper.getUrl(values.serviceKey, 'sendMessage'),
       data: {
         groupId: circleId,
         message,

package/src/feature.config.js

@@ -1,39 +1,54 @@
 // import * as PlussCore from '../../pluss-core/src';
+import _ from 'lodash';
 import * as PlussCore from '@plusscommunities/pluss-core-web';
+import { values } from './values.config';
 
 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: [],
+  key: values.featureKey,
+  singularName: _.capitalize(values.entityName),
+  description: `App users can create ${values.entityName}s and message each other.`,
+  emptyText: `You aren't in any ${_.capitalize(values.entityName)}s`,
+  widgetOptions: [
+    {
+      widget: true,
+      main: true,
+      hideOnTabNumbers: [],
+      optionKey: values.allowPublicKey,
+      type: 'toggle',
+      inverseOption: false,
+      title: `Allow for public ${values.entityName}s`,
+      description: `Public ${values.entityName}s can be viewed and joined by anyone in the community.`,
+      defaultNew: values.allowPublicKeyDefault,
+      default: values.allowPublicKeyDefault,
+    },
+  ],
   menu: {
     order: 11,
-    text: 'Circles',
-    icon: 'circle-o',
-    isFontAwesome: true,
-    url: '/circles',
+    text: values.textFeatureTitle,
+    icon: values.menuIcon,
+    isFontAwesome: values.isFontAwesome,
+    url: `/${values.featureKey}`,
     countProps: null,
     visibleExps: {
       type: 'feature',
-      value: 'circles',
+      value: values.featureKey,
     },
   },
-  addUrl: '/circles/add',
-  addPermission: 'circles',
+  addUrl: `/${values.featureKey}/add`,
+  addPermission: values.permission,
   permissions: [
     {
-      displayName: 'Manage and View Circles',
-      key: 'circles',
+      displayName: `Manage and View ${_.capitalize(values.entityName)}s`,
+      key: values.permission,
     },
   ],
   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 },
+    { path: `/${values.featureKey}`, component: values.componentCircles, exact: false },
+    { path: `/${values.featureKey}/add`, component: values.componentAddCircle, exact: true },
+    { path: `/${values.featureKey}/${values.entityKey}/:circleId`, component: values.componentCircle, exact: true },
+    { path: `/${values.featureKey}/edit/:circleId`, component: values.componentAddCircle, exact: true },
   ],
   env: {
     baseStage: '',

package/src/index.js

@@ -2,9 +2,10 @@ import Circles from './screens/Circles';
 import AddCircle from './screens/AddCircle';
 import Circle from './screens/Circle';
 import CircleReducer from './reducers/CircleReducer';
+import { values } from './values.config';
 
-export const Reducers = { circles: CircleReducer };
-export const Screens = { Circles, AddCircle, Circle };
+export const Reducers = { [values.reducerKey]: CircleReducer };
+export const Screens = { [values.componentCircles]: Circles, [values.componentAddCircle]: AddCircle, [values.componentCircle]: Circle };
 export { default as Config } from './feature.config';
 export { default as ViewWidget } from './components/ViewWidget';
 export { default as ViewFull } from './components/ViewFull';

package/src/screens/AddCircle.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { PlussCore } from '../feature.config';
 import { circleActions } from '../apis';
 import { circlesLoaded, circleUpdated } from '../actions';
+import { values } from '../values.config';
 
 const { Actions, Components, Session, Apis, Colours, Helper } = PlussCore;
 
@@ -24,12 +25,14 @@ class AddCircle extends Component {
       users: [],
       selectedUsers: [],
       userSearch: '',
+      isPublic: false,
+      selectedOption: 'visibility',
     };
   }
 
   componentDidMount() {
     Session.checkLoggedIn(this, this.props.auth);
-    this.props.addRecentlyCreated('circle');
+    this.props.addRecentlyCreated(values.entityKey);
     this.getUsers();
 
     this.checkGetCircle();
@@ -85,6 +88,7 @@ class AddCircle extends Component {
     });
     const newState = {
       title: circle.Title,
+      isPublic: !!circle.IsPublic,
       selectedUsers,
     };
     this.setState(newState);
@@ -180,7 +184,7 @@ class AddCircle extends Component {
 
     if (this.state.circleId) {
       circleActions
-        .edit(this.state.circleId, this.state.title, this.state.image, audience)
+        .edit(this.state.circleId, this.state.title, this.state.image, audience, this.state.isPublic)
         .then((res) => {
           this.setState({
             success: true,
@@ -196,7 +200,7 @@ class AddCircle extends Component {
         });
     } else {
       circleActions
-        .add(this.props.auth.site, this.state.title, this.state.image, audience)
+        .add(this.props.auth.site, this.state.title, this.state.image, audience, this.state.isPublic)
         .then((res) => {
           this.setState({
             success: true,
@@ -249,14 +253,14 @@ class AddCircle extends Component {
     if (!this.state.success) return null;
     return (
       <Components.SuccessPopup
-        text={`Circle has been ${this.state.circleId == null ? 'added' : 'edited'}`}
+        text={`${_.capitalize(values.entityName)} has been ${this.state.circleId == null ? 'added' : 'edited'}`}
         buttons={[
           {
             type: 'outlined',
             onClick: () => {
               window.history.back();
             },
-            text: `Back to Circles`,
+            text: `Back to ${values.textFeatureTitle}`,
           },
         ]}
       />
@@ -273,7 +277,7 @@ class AddCircle extends Component {
         <Components.Button
           inline
           buttonType="tertiary"
-          onClick={() => this.props.history.push('/circles')}
+          onClick={() => this.props.history.push(`/${values.featureKey}`)}
           isActive
           style={{ marginRight: 16 }}
         >
@@ -286,12 +290,61 @@ class AddCircle extends Component {
     );
   }
 
+  renderVisibility() {
+    return (
+      <div className="optionsContent_bottom">
+        <Components.RadioButton
+          label={`Do you want to make this ${values.entityName} a public ${values.entityName}?`}
+          isActive={this.state.isPublic}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ isPublic: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ isPublic: false }) },
+          ]}
+        />
+        <div className="genericInput-help" style={{ marginTop: 4 }}>
+          {`This will allow anyone in the community to view and join the ${values.entityName}.`}
+        </div>
+      </div>
+    );
+  }
+
+  renderSelectedOption() {
+    return (
+      <div>
+        <div style={{ display: this.state.selectedOption === 'visibility' ? 'block' : 'none' }}>{this.renderVisibility()}</div>
+      </div>
+    );
+  }
+
+  renderOptionsSection() {
+    let options = [
+      {
+        key: 'visibility',
+        icon: 'people3',
+        text: 'Visibility',
+      },
+    ];
+    if (!this.props.circleAllowPublicCircles) {
+      options = _.filter(options, (o) => {
+        return o.key !== 'visibility';
+      });
+    }
+    if (_.isEmpty(options)) {
+      return null;
+    }
+    return (
+      <Components.OptionsSection options={options} selected={this.state.selectedOption} selectOption={this.selectOption}>
+        {this.renderSelectedOption()}
+      </Components.OptionsSection>
+    );
+  }
+
   renderMain() {
     return (
-      <div style={{ marginBottom: 15 }}>
+      <div>
         <div className="padding-60 paddingVertical-40 bottomDivideBorder">
           <Components.Text type="formTitleLarge" className="marginBottom-24">
-            {this.state.circleId == null ? 'New' : 'Edit'} Circle
+            {this.state.circleId == null ? 'New' : 'Edit'} {_.capitalize(values.entityName)}
           </Components.Text>
           {/* Resident Information */}
           <div className="flex flex-reverse">
@@ -309,7 +362,7 @@ class AddCircle extends Component {
                 id="title"
                 type="text"
                 label="Title"
-                placeholder="Name the Circle"
+                placeholder={`Name the ${_.capitalize(values.entityName)}`}
                 value={this.state.title}
                 onChange={(e) => this.onHandleChange(e)}
                 isRequired
@@ -392,6 +445,8 @@ class AddCircle extends Component {
             </div>
           </div>
         </div>
+
+        {this.renderOptionsSection()}
       </div>
     );
   }
@@ -416,11 +471,12 @@ class AddCircle extends Component {
 }
 
 const mapStateToProps = (state) => {
-  const { circles } = state.circles;
+  const { circles } = state[values.reducerKey];
   const { auth } = state;
   return {
     circles,
     auth,
+    circleAllowPublicCircles: Helper.getSiteSettingFromState(state, values.allowPublicKey),
   };
 };
 

package/src/screens/Circle.js

@@ -7,7 +7,7 @@ import { circlesLoaded } from '../actions';
 import { circleActions } from '../apis';
 import FontAwesome from 'react-fontawesome';
 import moment from 'moment';
-import { getFileName, getPluralS } from '../../../pluss-core/src/helper';
+import { values } from '../values.config';
 
 const { Components, Helper, Actions, Session, Colours } = PlussCore;
 
@@ -294,7 +294,7 @@ class Circle extends Component {
   };
 
   validateCircleAdmin() {
-    if (Session.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
+    if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
       return true;
     }
     return _.some(this.getCircle().Audience, (user) => {
@@ -306,7 +306,7 @@ class Circle extends Component {
     if (!this.isMember()) {
       return (
         <Components.Text type="highlightedHelp" className="chat_noMessage">
-          You can't send a message to this Circle as you are not a member.
+          You can't send a message to this {_.capitalize(values.entityName)} as you are not a member.
         </Components.Text>
       );
     }
@@ -423,7 +423,7 @@ class Circle extends Component {
     }
     return (
       <div className="flex flex-center">
-        <Link to={`/circles/edit/${this.state.circleId}`}>
+        <Link to={`/${values.featureKey}/edit/${this.state.circleId}`}>
           <FontAwesome className="header_back" name="cog" />
         </Link>
       </div>
@@ -450,7 +450,7 @@ class Circle extends Component {
             />
             <div className="flex-1">
               <Components.Text type="formTitleMedium">
-                Member{getPluralS(members.length)} ({members.length})
+                Member{Helper.getPluralS(members.length)} ({members.length})
               </Components.Text>
             </div>
           </div>
@@ -471,7 +471,7 @@ class Circle extends Component {
             />
             <div className="flex-1">
               <Components.Text type="formTitleMedium">
-                Image{getPluralS(this.state.images.length)} ({this.state.images.length})
+                Image{Helper.getPluralS(this.state.images.length)} ({this.state.images.length})
               </Components.Text>
             </div>
           </div>
@@ -480,7 +480,7 @@ class Circle extends Component {
               {this.state.images.map((image, i) => {
                 return (
                   <a href={image.Url} target="_blank">
-                    <img src={image.Url} className="chat_section_image" alt={getFileName(image.Url)} />
+                    <img src={image.Url} className="chat_section_image" alt={Helper.getFileName(image.Url)} />
                   </a>
                 );
               })}
@@ -496,7 +496,7 @@ class Circle extends Component {
             />
             <div className="flex-1">
               <Components.Text type="formTitleMedium">
-                File{getPluralS(this.state.files.length)} ({this.state.files.length})
+                File{Helper.getPluralS(this.state.files.length)} ({this.state.files.length})
               </Components.Text>
             </div>
           </div>
@@ -579,7 +579,7 @@ class Circle extends Component {
 const styles = {};
 
 const mapStateToProps = (state) => {
-  const { circles } = state.circles;
+  const { circles } = state[values.reducerKey];
   const { auth } = state;
   return {
     circles,

package/src/screens/Circles.js

@@ -8,6 +8,7 @@ import { circlesLoaded, circleRemoved } from '../actions';
 import { circleActions } from '../apis';
 import { Table } from 'react-bootstrap';
 import FontAwesome from 'react-fontawesome';
+import { values } from '../values.config';
 
 const { Components, Session, Helper } = PlussCore;
 
@@ -77,7 +78,7 @@ class Circles extends Component {
   }
 
   validateCircleAdmin(circle, onlyCreator) {
-    if (Session.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
+    if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
       return true;
     }
     if (onlyCreator) {
@@ -90,13 +91,13 @@ class Circles extends Component {
 
   canAddNew = () => {
     const { auth } = this.props;
-    return Session.validateAccess(auth.site, 'circles', auth);
+    return Session.validateAccess(auth.site, values.permission, auth);
   };
 
   onAddNew = () => {
     const { auth } = this.props;
-    if (Session.validateAccess(auth.site, 'circles', auth)) {
-      this.props.history.push(`/circles/add`);
+    if (Session.validateAccess(auth.site, values.permission, auth)) {
+      this.props.history.push(`/${values.featureKey}/add`);
     }
   };
 
@@ -159,7 +160,11 @@ class Circles extends Component {
   };
 
   removeCircle = (circle) => {
-    if (window.confirm(`Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.`)) {
+    if (
+      window.confirm(
+        `Are you sure you want to delete that ${values.entityName}? You will no longer be able to access the messages in the ${values.entityName}.`,
+      )
+    ) {
       this.props.circleRemoved(circle.Id);
       circleActions
         .delete(circle.Id)
@@ -176,7 +181,7 @@ class Circles extends Component {
     if (type === 'private') {
       return 'Private Message';
     }
-    return 'Circle';
+    return _.capitalize(values.entityName);
   };
 
   getTitle = (circle) => {
@@ -192,7 +197,7 @@ class Circles extends Component {
     return (
       <tr key={circle.Id}>
         <td className="table-TitleColumn">
-          <Link to={`/circles/circle/${circle.Id}`}>{this.getTitle(circle)}</Link>
+          <Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>{this.getTitle(circle)}</Link>
         </td>
         <td>{moment(circle.Changed).local().format('D MMM YYYY')}</td>
         <td>
@@ -210,7 +215,7 @@ class Circles extends Component {
         <td className="table-options">
           <div style={{ display: 'flex', alignItems: 'center' }}>
             {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
-              <Link to={`/circles/edit/${circle.Id}`}>
+              <Link to={`/${values.featureKey}/edit/${circle.Id}`}>
                 <FontAwesome
                   style={{
                     fontSize: 20,
@@ -318,7 +323,7 @@ class Circles extends Component {
           onClick={() => {
             this.selectTypeFilter('circle');
           }}
-          text="Circle"
+          text={_.capitalize(values.entityName)}
           className="marginRight-10"
         />
         <Components.Tag
@@ -336,10 +341,12 @@ class Circles extends Component {
       <div>
         {this.renderTypeFilterPopup()}
         {this.renderUserFilterPopup()}
-        <Components.Header>{this.canAddNew() && <Components.AddButton onClick={this.onAddNew} text="NEW CIRCLE" />}</Components.Header>
+        <Components.Header>
+          {this.canAddNew() && <Components.AddButton onClick={this.onAddNew} text={`NEW ${_.upperCase(values.entityName)}`} />}
+        </Components.Header>
         <div className="pageContainer paddingVertical-20 paddingHorizontal-40">
           <Components.Text type="h1" className="">
-            Circles
+            {values.textFeatureTitle}
           </Components.Text>
           {this.renderFilters()}
 
@@ -368,7 +375,7 @@ class Circles extends Component {
 const styles = {};
 
 const mapStateToProps = (state) => {
-  const { circles } = state.circles;
+  const { circles } = state[values.reducerKey];
   const { auth } = state;
 
   return {

package/src/values.config.default.js

@@ -0,0 +1,35 @@
+const values = {
+  featureKey: 'circles',
+  entityKey: 'circle',
+  entityName: 'circle',
+  serviceKey: 'circles',
+  permission: 'circles',
+  menuIcon: 'circle-o',
+  isFontAwesome: true,
+
+  reducerKey: 'circles',
+
+  actionCircleKey: 'CIRCLE',
+
+  textFeatureTitle: 'Circles',
+  textAddMenuTitle: 'Circle',
+  textEmptyGroups: "You aren't in any Circles",
+  textEmptyPeople: 'Contacts will show here',
+
+  componentCircles: 'Circles',
+  componentAddCircle: 'AddCircle',
+  componentCircle: 'Circle',
+
+  inviteKey: 'circleInvite',
+  messageKey: 'circleMessage',
+  chatRoute: 'circleChat',
+  updateKeyUserCircles: 'userCircles',
+  allowPublicKey: 'circleAllowPublicCircles',
+  allowPublicKeyDefault: false,
+
+  settings: {
+    allowAnyCreate: false,
+  },
+};
+
+export { values };

package/src/values.config.groups.js

@@ -0,0 +1,35 @@
+const values = {
+  featureKey: 'groups',
+  entityKey: 'group',
+  entityName: 'group',
+  serviceKey: 'groups',
+  permission: 'groups',
+  menuIcon: 'comments',
+  isFontAwesome: true,
+
+  reducerKey: 'groups',
+
+  actionCircleKey: 'GROUP',
+
+  textFeatureTitle: 'Groups',
+  textAddMenuTitle: 'Group',
+  textEmptyGroups: "You aren't in any Groups",
+  textEmptyPeople: 'Contacts will show here',
+
+  componentCircles: 'Groups',
+  componentAddCircle: 'AddGroup',
+  componentCircle: 'Group',
+
+  inviteKey: 'groupInvite',
+  messageKey: 'groupMessage',
+  chatRoute: 'groupChat',
+  updateKeyUserCircles: 'userGroups',
+  allowPublicKey: 'groupAllowPublicGroups',
+  allowPublicKeyDefault: true,
+
+  settings: {
+    allowAnyCreate: true,
+  },
+};
+
+export { values };