@plusscommunities/pluss-core-web 1.1.1 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.1.1",
+  "version": "1.1.5",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -26,15 +26,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "lodash": "^4.17.4",
     "jquery": "^3.2.1",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",
     "react-dropzone": "^7.0.1",
     "react-fontawesome": "^1.6.1",
     "react-redux": "^5.0.6",
-    "react-textarea-autosize": "^7.1.0-1",
-    "js-cookie": "^2.2.0"
+    "react-textarea-autosize": "^7.1.0-1"
   },
   "keywords": []
 }

package/src/apis/fileActions.js

@@ -3,11 +3,7 @@ import Config from '../config';
 import { Storage } from 'aws-amplify';
 import CanvasImageUploader from '../helper/files/canvasImageUploader';
 import $ from 'jquery';
-import {
-  //generateImageName,
-  randomString,
-  getUrl,
-} from '../helper';
+import { generateImageName, randomString, getUrl } from '../helper';
 
 export const fileActions = {
   uploadMediaAsync: async (file, filename) => {
@@ -56,33 +52,33 @@ export const fileActions = {
       });
     });
   },
-  // blobToFile: (theBlob, fileName) => {
-  //   const file = new File([theBlob], fileName, { lastModified: new Date() });
-  //   console.log(file);
-  //   return file;
-  // },
-  // putCanvas: (canvas, filename) => {
-  //   return new Promise((resolve, reject) => {
-  //     const img = canvas.getTrimmedCanvas().toDataURL('image/png');
-  //     const imageData = Buffer.from(img.replace(/^data:image\/\w+;base64,/, ''), 'base64');
+  blobToFile: (theBlob, fileName) => {
+    const file = new File([theBlob], fileName, { lastModified: new Date() });
+    console.log(file);
+    return file;
+  },
+  putCanvas: (canvas, filename) => {
+    return new Promise((resolve, reject) => {
+      const img = canvas.getTrimmedCanvas().toDataURL('image/png');
+      const imageData = Buffer.from(img.replace(/^data:image\/\w+;base64,/, ''), 'base64');
 
-  //     canvas.off();
+      canvas.off();
 
-  //     const imgName = generateImageName(filename);
+      const imgName = generateImageName(filename);
 
-  //     Storage.put(`images/${imgName}.png`, imageData, {
-  //       contentType: 'image/png',
-  //       level: 'public',
-  //     })
-  //       .then((res) => {
-  //         console.log('put the image');
-  //         return resolve(res);
-  //       })
-  //       .catch((err) => {
-  //         return reject(err);
-  //       });
-  //   });
-  // },
+      Storage.put(`images/${imgName}.png`, imageData, {
+        contentType: 'image/png',
+        level: 'public',
+      })
+        .then((res) => {
+          console.log('put the image');
+          return resolve(res);
+        })
+        .catch((err) => {
+          return reject(err);
+        });
+    });
+  },
   getMediaFolders: (site) => {
     // console.log('getMediaFolders', 'site', site);
     const query = { site };

package/src/components/AnalyticsFilter.js

@@ -3,7 +3,8 @@ import { DropdownButton, MenuItem } from 'react-bootstrap';
 import _ from 'lodash';
 import moment from 'moment';
 import { getAnalyticsFilterOptions } from '../analytics';
-import { GenericInput, DatePicker } from './';
+import { GenericInput } from './GenericInput';
+import { DatePicker } from './DatePicker';
 
 class AnalyticsFilter extends PureComponent {
   constructor(props) {

package/src/components/AudienceIncluder.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
-import { GenericInput, Text } from './';
 import Config from '../config';
 import { SVGIcon } from './SVGIcon';
+import { GenericInput } from './GenericInput';
+import { Text } from './Text';
 import { COLOUR_DUSK } from '../colours';
 
 class AudienceIncluder extends Component {

package/src/components/AudienceSelector.js

@@ -3,11 +3,12 @@ import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { setAuth } from '../actions';
-import { RadioButton, DropdownInput } from './';
 import { profileActions, typeActions, userActions } from '../apis';
 import { COLOUR_DUSK } from '../colours';
 import { AudienceIncluder } from './AudienceIncluder';
-import { Text } from './';
+import { Text } from './Text';
+import { RadioButton } from './RadioButton';
+import { DropdownInput } from './DropdownInput';
 
 class AudienceSelector extends Component {
   state = {

package/src/components/DatePicker.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
-import { P60Icon } from './';
+import { P60Icon } from './P60Icon';
 
 class DatePicker extends Component {
   state = {

package/src/components/FileInput.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import _ from 'lodash';
 import Dropzone from 'react-dropzone';
 import FontAwesome from 'react-fontawesome';
-import { Button } from './';
+import { Button } from './Button';
 import { fileActions } from '../apis';
 import { getFileName } from '../helper';
 

package/src/components/GenericInput.js

@@ -94,7 +94,8 @@ class GenericInput extends Component {
             className={`genericInput ${this.props.inputClass}`}
             value={this.props.value || ''}
             onChange={this.props.onChange}
-            onKeyPress={this.props.onEnter}
+            onKeyPress={this.props.onKeyPress || this.props.onEnter}
+            onKeyDown={this.props.onKeyDown}
             style={{ ...this.props.inputStyle }}
             readOnly={!_.isUndefined(this.props.readOnly) ? this.props.readOnly : false}
             disabled={!_.isUndefined(this.props.disabled) ? this.props.disabled : false}
@@ -120,7 +121,8 @@ class GenericInput extends Component {
           value={this.props.value || ''}
           onChange={this.props.onChange}
           onClick={this.props.onClick}
-          onKeyPress={this.props.onEnter}
+          onKeyPress={this.props.onKeyPress || this.props.onEnter}
+          onKeyDown={this.props.onKeyDown}
           style={{ ...this.props.inputStyle }}
           readOnly={!_.isUndefined(this.props.readOnly) ? this.props.readOnly : false}
           disabled={!_.isUndefined(this.props.disabled) ? this.props.disabled : false}

package/src/components/Header.js

@@ -17,6 +17,20 @@ class Header extends Component {
     this.props.setNavData({ isSideMenuOpen: !this.props.isSideMenuOpen });
   };
 
+  renderRight() {
+    if (this.props.rightContent) {
+      return this.props.rightContent;
+    }
+    return (
+      <div className="flex flex-center">
+        <Button buttonType="primary" onClick={this.goToRoadmap} narrow isActive className="marginRight-16">
+          Roadmap
+        </Button>
+        <div className="sideMenuButtonContainer"></div>
+      </div>
+    );
+  }
+
   renderHeader() {
     return (
       <div className="header">
@@ -25,12 +39,7 @@ class Header extends Component {
             <div style={{ display: 'flex', height: '100%', alignItems: 'center', marginLeft: 16 }}>{this.props.children}</div>
           )}
         </div>
-        <div className="flex flex-center">
-          <Button buttonType="primary" onClick={this.goToRoadmap} narrow isActive className="marginRight-16">
-            Roadmap
-          </Button>
-          <div className="sideMenuButtonContainer"></div>
-        </div>
+        {this.renderRight()}
       </div>
     );
   }
@@ -49,10 +58,17 @@ class Header extends Component {
     );
   }
 
+  renderContainerHeader() {
+    return <div className={`header header-simple ${this.props.fixed ? 'header-fixed' : ''}`}>{this.props.children}</div>;
+  }
+
   render() {
     if (this.props.simple) {
       return this.renderSimpleHeader();
     }
+    if (this.props.onlyContainer) {
+      return this.renderContainerHeader();
+    }
     return this.renderHeader();
   }
 }

package/src/components/ImageInput.js

@@ -5,11 +5,12 @@ import $ from 'jquery';
 import moment from 'moment';
 import Dropzone from 'react-dropzone';
 import FontAwesome from 'react-fontawesome';
-import { Button, GenericInput } from './';
 import { get1400, getThumb300, isVideo } from '../helper';
 import { fileActions } from '../apis';
 import { validateAccess, getApiError } from '../session';
 import { Popup } from './Popup';
+import { Button } from './Button';
+import { GenericInput } from './GenericInput';
 
 const DEFAULT_INPUT = {
   uploadingImage: false,
@@ -432,10 +433,8 @@ class ImageInputComponent extends Component {
     newState.inputs = newInputs;
 
     this.setState(newState);
-    // for single item
-    if (!_.isUndefined(this.props.refreshCallback)) {
-      this.props.refreshCallback();
-    }
+
+    this.checkRefreshCallback(newInputs);
   }
 
   selectTab(tab) {

package/src/components/MakerPopup.js

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import { unauthedFunction } from '../session';
 import { Popup } from './Popup';
 import { GenericInput } from './GenericInput';
-import { Text } from './';
+import { Text } from './Text';
 import { Button } from './Button';
 import { DropdownInput } from './DropdownInput';
 import { typeActions, utilityActions } from '../apis';

package/src/components/OptionsSection.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import { COLOUR_BRANDING_MAIN } from '../colours';
 import { SVGIcon } from './SVGIcon';
-import { Text } from './';
+import { Text } from './Text';
 
 class OptionsSection extends Component {
   getTitle() {

package/src/components/OverlayPage.js

@@ -26,6 +26,17 @@ class OverlayPage extends Component {
     this.setState({ width: window.innerWidth, height: window.innerHeight });
   }
 
+  renderContent() {
+    if (this.props.fullPage) {
+      return (
+        <div className="overlayPage-full" style={this.props.fullPageStyle}>
+          {this.props.children}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+
   render() {
     return (
       <div style={{ ...styles.pageWrapper, ...this.props.style }}>
@@ -35,7 +46,7 @@ class OverlayPage extends Component {
             ...this.props.backgroundStyle,
           }}
         />
-        {this.props.children}
+        {this.renderContent()}
       </div>
     );
   }

package/src/components/ProfilePic.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import Config from '../config';
-import getAppColourFromState from '../helper/colours.js/getAppColourFromState';
+import { getAppColourFromState } from '../helper';
 
 class ProfilePicComponent extends Component {
   render() {

package/src/components/StatusButton.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+class StatusButton extends Component {
+  render() {
+    if (this.props.isActive) {
+      return (
+        <div className="tagWrapper tagWrapper--active" onClick={this.props.deactivate}>
+          <p className="tagWrapper__content tagWrapper__text">{this.props.activeText}</p>
+          <p className="tagWrapper__hoverContent tagWrapper__text">{this.props.deactivateText}</p>
+        </div>
+      );
+    }
+    return (
+      <div className="tagWrapper tagWrapper--inactive" onClick={this.props.activate}>
+        <p className="tagWrapper__content tagWrapper__text">{this.props.inactiveText}</p>
+        <p className="tagWrapper__hoverContent tagWrapper__text">{this.props.activateText}</p>
+      </div>
+    );
+  }
+}
+
+export { StatusButton };

package/src/components/UserListing.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import Config from '../config';
+import { Text } from './Text';
+import { ProfilePic } from './ProfilePic';
 
 class UserListing extends Component {
   getSize() {
@@ -23,35 +24,21 @@ class UserListing extends Component {
   render() {
     return (
       <div
+        key={this.props.user.userId || this.props.user.Id || this.props.user.id}
+        className="userListing"
         style={{
           minHeight: this.getSize() + 5,
-          display: 'flex',
-          cursor: this.props.onClick ? 'pointer' : 'default',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginTop: 10,
+          cursor: this.props.onClick ? 'pointer' : 'inherit',
           opacity: this.props.user && this.props.user.loading ? 0.5 : 1,
         }}
         onClick={this.props.onClick}
       >
-        <div key={this.props.user.id} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <div
-            style={{
-              height: this.getSize(),
-              width: this.getSize(),
-              borderRadius: this.getSize() / 2,
-              marginRight: 16,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundImage: `url(${this.props.user.profilePic != null ? this.props.user.profilePic : Config.env.defaultProfileImage})`,
-            }}
-            alt="user profile pic"
-          />
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', height: this.getSize() }}>
-            <p className={`fontMedium fontSize-16 ${this.props.whiteText ? 'text-white' : 'text-dark'}`} style={{ margin: 0 }}>
+        <div className="userListing_inner">
+          <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.props.user.profilePic} />
+          <div className="userListing_middle" style={{ height: this.getSize() }}>
+            <Text type="name" style={this.props.whiteText ? { color: '#fff' } : null} className={this.props.textClass}>
               {this.props.user.displayName}
-            </p>
+            </Text>
             {this.renderSub()}
           </div>
         </div>

package/src/components/index.js

@@ -2,6 +2,7 @@ export * from './AddButton';
 export * from './Attachment';
 export * from './Button';
 export * from './CheckBox';
+export * from './DatePicker';
 export * from './FileInput';
 export * from './GenericInput';
 export * from './Header';
@@ -13,11 +14,13 @@ export * from './OverlayPageSection';
 export * from './OverlayPageBottomButtons';
 export * from './PageTitle';
 export * from './Popup';
+export * from './P60Icon';
 export * from './ProfilePic';
 export * from './RadioButton';
 export * from './SVGIcon';
 export * from './Tag';
 export * from './Text';
+export * from './StatusButton';
 export * from './SuccessPopup';
 export * from './Reactions';
 export * from './P60Icon';

package/src/config.js

@@ -7,8 +7,7 @@ const CoreConfig = {
     colourBrandingMain: '',
     colourBrandingOff: '',
     colourBrandingApp: '',
-    defaultProfileImage:
-      'https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:80aecdcb-9955-493e-a341-2f2263f64777/public/31164ebf4807a5f0de438dd02a/profilepic2.png',
+    defaultProfileImage: 'https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-uploads/android/TinyDefaultProfile.png',
     utcOffset: '',
     hasAvailableNews: false,
     newsHaveTags: true,

package/src/helper/auth/getUserFromState.js

@@ -0,0 +1,8 @@
+const getUserFromState = (state) => {
+  if (!state || !state.auth || !state.auth.user) {
+    return {};
+  }
+  return state.auth.user;
+};
+
+export default getUserFromState;

package/src/helper/{colours.js → colours}/getAppColourFromState.js

@@ -1,4 +1,4 @@
-import { Config } from '../..';
+import Config from '../../config';
 
 const getAppColourFromState = (state) => {
   if (!state || !state.auth || !state.auth.siteBranding || !state.auth.siteBranding.MainBrandingColour) {

package/src/helper/files/generateImageName.js

@@ -0,0 +1,10 @@
+const generateImageName = (name) => {
+  return `xxxxxxxx4xxxyxxxxxxxxxxxxx${name}`.replace(/[xy]/g, (c) => {
+    // eslint-disable-next-line
+    var r = (Math.random() * 16) | 0,
+      v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export default generateImageName;

package/src/helper/index.js

@@ -3,8 +3,15 @@ export { default as getUrl } from './api/getUrl';
 export { default as getUrlParams } from './api/getUrlParams';
 export { default as safeReadParams } from './api/safeReadParams';
 
+// auth
+export { default as getUserFromState } from './auth/getUserFromState';
+
+// colours
+export { default as getAppColourFromState } from './colours/getAppColourFromState';
+
 // files
 export { default as get1400 } from './files/get1400';
+export { default as generateImageName } from './files/generateImageName';
 export { default as getExtension } from './files/getExtension';
 export { default as getFileName } from './files/getFileName';
 export { default as getThumb300 } from './files/getThumb300';

package/src/session.js

@@ -24,6 +24,7 @@ export const authedFunction = async (request) => {
     return await axios(request);
   } catch (error) {
     console.error('authedFunction error', error, request);
+    throw error;
   }
 };