@plusscommunities/pluss-core-web 1.6.9 → 1.6.10-auth.0

package/package.json

@@ -1,49 +1,52 @@
 {
-	"name": "@plusscommunities/pluss-core-web",
-	"version": "1.6.9",
-	"description": "Core extension package for Pluss Communities platform",
-	"main": "dist/index.cjs.js",
-	"scripts": {
-		"build": "npm i && rollup -c",
-		"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"
-	},
-	"author": "Phillip Suh",
-	"license": "ISC",
-	"devDependencies": {
-		"@babel/cli": "^7.14.3",
-		"@babel/core": "^7.14.3",
-		"@babel/plugin-transform-runtime": "^7.14.3",
-		"@babel/preset-env": "^7.14.2",
-		"@babel/preset-react": "^7.13.13",
-		"@rollup/plugin-babel": "^5.3.0",
-		"@rollup/plugin-json": "^4.1.0",
-		"autoprefixer": "^10.2.6",
-		"rollup": "^2.50.1",
-		"rollup-plugin-local-resolve": "^1.0.7",
-		"rollup-plugin-styles": "^3.14.1"
-	},
-	"dependencies": {
-		"@babel/runtime": "^7.14.0"
-	},
-	"peerDependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.4.0",
-		"@fortawesome/free-solid-svg-icons": "^6.4.0",
-		"@fortawesome/react-fontawesome": "^0.2.0",
-		"jquery": "^3.2.1",
-		"js-cookie": "^2.2.0",
-		"lodash": "^4.17.4",
-		"moment": "^2.30.1",
-		"react": "^16.14.0",
-		"react-dropzone": "^14.2.3",
-		"react-fontawesome": "^1.6.1",
-		"react-redux": "^7.2.8",
-		"react-router-dom": "^4.2.2",
-		"react-textarea-autosize": "^7.1.0-1"
-	},
-	"keywords": []
+  "name": "@plusscommunities/pluss-core-web",
+  "version": "1.6.10-auth.0",
+  "description": "Core extension package for Pluss Communities platform",
+  "main": "dist/index.cjs.js",
+  "scripts": {
+    "build": "npm i && rollup -c",
+    "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",
+    "authpatch": "npm version prepatch --preid=auth",
+    "authupload": "npm run build && npm publish --access public --tag auth && rm -rf node_modules",
+    "authupload:p": "npm run authpatch && npm run authupload",
+    "upload": "npm run build && npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload"
+  },
+  "author": "Phillip Suh",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "autoprefixer": "^10.2.6",
+    "rollup": "^2.50.1",
+    "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-styles": "^3.14.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "jquery": "^3.2.1",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.4",
+    "moment": "^2.30.1",
+    "react": "^16.14.0",
+    "react-dropzone": "^14.2.3",
+    "react-fontawesome": "^1.6.1",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^4.2.2",
+    "react-textarea-autosize": "^7.1.0-1"
+  },
+  "keywords": []
 }

package/src/apis/fileActions.js

@@ -4,18 +4,33 @@ import { Storage } from 'aws-amplify';
 import CanvasImageUploader from '../helper/files/canvasImageUploader';
 import $ from 'jquery';
 import { generateImageName, randomString, getUrl } from '../helper';
+import Axios from 'axios';
 
 export const fileActions = {
   uploadMediaAsync: async (file, filename) => {
     const newFilename = filename.replace(/[^a-z0-9+.]+/gi, '').toLowerCase();
-    const userId = await getCurrentUserSub();
-    const url = `uploads/users/${userId}/public/${randomString()}/${newFilename}`;
-
-    const { baseUploadsUrl, uploadBucket } = Config.env;
-    await Storage.put(url, file, { level: 'public', bucket: uploadBucket });
-    console.log('uploaded file', `${baseUploadsUrl}${url}`);
-    return `${baseUploadsUrl}${url}`;
+    const signedUrlRes = await authedFunction({
+      method: 'GET',
+      url: getUrl('media', 'get/presignedurl', { filename: newFilename, contentType: file.type }),
+    });
+    await Axios.put(signedUrlRes.data.url, file, {
+      headers: {
+        'Content-Type': file.type,
+      },
+    });
+    const { baseUploadsUrl } = Config.env;
+    return `${baseUploadsUrl}${signedUrlRes.data.key}`;
   },
+  // uploadMediaAsync: async (file, filename) => {
+  //   const newFilename = filename.replace(/[^a-z0-9+.]+/gi, '').toLowerCase();
+  //   const userId = await getCurrentUserSub();
+  //   const url = `uploads/users/${userId}/public/${randomString()}/${newFilename}`;
+
+  //   const { baseUploadsUrl, uploadBucket } = Config.env;
+  //   await Storage.put(url, file, { level: 'public', bucket: uploadBucket });
+  //   console.log('uploaded file', `${baseUploadsUrl}${url}`);
+  //   return `${baseUploadsUrl}${url}`;
+  // },
 
   // readBase64: async (file) => {
   //   return new Promise((resolve, reject) => {
@@ -30,6 +45,12 @@ export const fileActions = {
   //     };
   //   });
   // },
+  getPresignedUrl: (filename) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('media', 'get/presignedurl', { filename }),
+    });
+  },
   compressImage: (file, maxSize, quality, noCompress) => {
     return new Promise((resolve, reject) => {
       if (noCompress) {

package/src/components/MakerPopup.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Lottie } from '@crello/react-lottie';
+import Lottie from 'react-lottie';
 import _ from 'lodash';
 import { unauthedFunction } from '../session';
 import { Popup } from './Popup';
@@ -28,6 +28,9 @@ class MakerPopup extends Component {
       { Key: 'jpg', Title: 'JPEG' },
     ];
 
+    this.lottieAnimationUrl =
+      'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
+
     this.state = {
       ...this.props.initialData,
       logo: null,
@@ -38,8 +41,8 @@ class MakerPopup extends Component {
       selectedSize: 'A4',
       selectedFormat: 'pdf',
       lottieConfig: {
-        path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
         loop: true,
+        autoplay: true,
         name: 'lottie-layout',
       },
     };
@@ -66,12 +69,11 @@ class MakerPopup extends Component {
   getLottieConfig() {
     unauthedFunction({
       method: 'GET',
-      url: this.state.lottieConfig.path,
+      url: this.lottieAnimationUrl,
     }).then((res) => {
       this.setState({
         lottieConfig: {
           ...this.state.lottieConfig,
-          path: undefined,
           animationData: res.data,
         },
       });
@@ -227,7 +229,15 @@ class MakerPopup extends Component {
     if (this.state.submitting) {
       return (
         <div className="flex flex-column flex-center">
-          <Lottie key="lottie-layout" height="260px" width="260px" config={this.state.lottieConfig} />
+          {this.state.lottieConfig.animationData && (
+            <Lottie
+              key="lottie-layout"
+              height={260}
+              width={260}
+              options={this.state.lottieConfig}
+              isClickToPauseDisabled
+            />
+          )}
           <Text type="h3" className="marginTop-16">
             Generating
           </Text>

package/src/config.js

@@ -17,6 +17,11 @@ const CoreConfig = {
     makeApiKey: '',
     logo: '',
     clientName: '',
+    AuthStrategy: {
+      getAccessToken: async () => null,
+      getCurrentUserId: async () => null,
+      hasActiveSession: async () => false,
+    },
   },
   init: (environment) => {
     CoreConfig.env = environment;

package/src/session.js

@@ -1,14 +1,12 @@
 import _ from 'lodash';
 import axios from 'axios';
-import { Auth } from 'aws-amplify';
+import Config from './config';
 
 export const getSessionTokenAWS = async (prefix) => {
-  const data = await Auth.currentSession();
-  const token = data.getAccessToken().getJwtToken();
+  const token = await Config.env.AuthStrategy.getAccessToken();
   if (_.isUndefined(prefix)) return token;
   return `${prefix} ${token}`;
 };
-
 // export const getRefreshTokenAWS = async () => {
 //   const data = await Auth.currentSession();
 //   return data.getRefreshToken().token;
@@ -34,8 +32,7 @@ export const unauthedFunction = (request) => {
 
 export const getCurrentUserSub = async () => {
   try {
-    const user = await Auth.currentUserInfo();
-    return user.id;
+    return await Config.env.AuthStrategy.getCurrentUserId();
   } catch (error) {
     return null;
   }
@@ -43,8 +40,8 @@ export const getCurrentUserSub = async () => {
 
 export const checkLoggedIn = async (self) => {
   try {
-    const user = await Auth.currentAuthenticatedUser();
-    if (_.isUndefined(user) || user == null || user.username == null) {
+    const isLoggedIn = await Config.env.AuthStrategy.hasActiveSession();
+    if (!isLoggedIn) {
       console.log('redirecting to login');
       self.props.history.push('/login');
     }