@fixefy/fixefy-ui-components 0.3.46 → 0.3.48

package/dist/FxUserImage/FxUserImage.d.ts

@@ -0,0 +1,6 @@
+export declare const FxUserImage: ({ bucketAddress, user, loading, setLoading }: {
+    bucketAddress: string;
+    user: any;
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+}) => any;

package/dist/FxUserImage/FxUserImage.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxUserImage", {
+    enumerable: true,
+    get: function() {
+        return FxUserImage;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
+const _nookies = require("nookies");
+const _FxIcon = require("../FxIcon");
+const _nexts3upload = require("@fixefy/next-s3-upload");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _fixefyhooks = require("@fixefy/fixefy-hooks");
+const _material = require("@mui/material");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const FxUserImage = ({ bucketAddress, user, loading, setLoading })=>{
+    const getRandomColor = (0, _fixefyhooks.useRandomColor)();
+    const { listS3Bucket } = (0, _nexts3upload.useS3ListBucket)();
+    const { downloadFromS3 } = (0, _nexts3upload.useS3Download)('download-bytearray');
+    const { email, full_name, first_name, last_name } = user;
+    var _ref;
+    // @ts-ignore
+    const initials = (0, _fixefyuiutils.toInitials)((_ref = full_name !== null && full_name !== void 0 ? full_name : first_name && last_name) !== null && _ref !== void 0 ? _ref : 'unknown').slice(0, 2);
+    const [file, setFile] = (0, _react.useState)(null);
+    const [files, setFiles] = (0, _react.useState)([]);
+    (0, _react.useEffect)(()=>{
+        fetchFiles();
+    }, []);
+    (0, _react.useEffect)(()=>{
+        if (file) {
+            setLoading(false);
+        }
+    }, [
+        file
+    ]);
+    (0, _react.useEffect)(()=>{
+        fetchFile(files);
+    }, []);
+    //// fetch single file from s3
+    const fetchFile = function() {
+        var _ref = _async_to_generator(function*(files) {
+            if (files.length) {
+                try {
+                    var _files_, _files__Key, _files_1;
+                    const data = yield downloadFromS3({
+                        path: (_files_ = files[0]) === null || _files_ === void 0 ? void 0 : _files_.Key,
+                        bucketName: `fixefy-${bucketAddress}`
+                    });
+                    const fileNames = (_files_1 = files[0]) === null || _files_1 === void 0 ? void 0 : (_files__Key = _files_1.Key) === null || _files__Key === void 0 ? void 0 : _files__Key.split('/').filter((part)=>part != '');
+                    const fileName = fileNames[(fileNames === null || fileNames === void 0 ? void 0 : fileNames.length) - 1];
+                    const fileType = fileName.split('.').pop();
+                    const currentFile = {
+                        data: data.content,
+                        type: fileType,
+                        name: fileName
+                    };
+                    setFile(currentFile);
+                    setLoading(false);
+                } catch (err) {
+                    console.error(err, err.stack, 'err');
+                    setLoading(false);
+                }
+                setLoading(false);
+            }
+        });
+        return function fetchFile(files) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    /// fetch files from s3
+    const fetchFiles = function() {
+        var _ref = _async_to_generator(function*() {
+            setLoading(true);
+            const { ws, user } = (0, _nookies.parseCookies)();
+            let { workspaces } = JSON.parse(user);
+            if (typeof workspaces === 'string') {
+                workspaces = JSON.parse(workspaces);
+            }
+            const currentWorkspace = workspaces.find((workspace)=>(workspace === null || workspace === void 0 ? void 0 : workspace._id) === ws);
+            if (!currentWorkspace) {
+                console.log('Workspace not found.');
+                setLoading(false);
+                return;
+            }
+            const bucket = `fixefy-${bucketAddress}`;
+            const startAfter = `${currentWorkspace.readable_id}/${email}`;
+            const data = yield listS3Bucket({
+                bucketName: bucket,
+                prefix: startAfter,
+                startAfter
+            });
+            try {
+                if (data.contents.length) {
+                    setFiles(data.contents);
+                    fetchFile(data.contents);
+                } else {
+                    setLoading(false);
+                }
+            } catch (err) {
+                console.error(err, err.stack, 'err');
+            }
+        });
+        return function fetchFiles() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    if (loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+        size: 24
+    });
+    if (!file && !loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+        icon: 'users',
+        width: 24,
+        height: 24,
+        variant: "rounded",
+        fontSize: 12,
+        initials: initials,
+        background: getRandomColor()
+    });
+    return file && !loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(ImageView, {
+        data: file.data,
+        fileName: file.name,
+        type: file.type
+    });
+};
+const ImageView = ({ data, fileName, type })=>{
+    const [imageSrc, setImageSrc] = (0, _react.useState)(null);
+    (0, _react.useEffect)(()=>{
+        if (data instanceof Uint8Array) {
+            const blob = new Blob([
+                data
+            ], {
+                type: `image/${type == 'svg' ? 'svg+xml' : type}`
+            });
+            const url = URL.createObjectURL(blob);
+            setImageSrc(url);
+            return ()=>{
+                URL.revokeObjectURL(url);
+            };
+        } else {
+            setImageSrc(null);
+            return;
+        }
+    }, [
+        data
+    ]);
+    return imageSrc && /*#__PURE__*/ (0, _jsxruntime.jsx)(_image.default, {
+        width: 24,
+        height: 24,
+        src: imageSrc,
+        alt: fileName
+    });
+};

package/dist/FxUserImage/index.d.ts

@@ -0,0 +1 @@
+export { FxUserImage } from './FxUserImage';

package/dist/FxUserImage/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxUserImage", {
+    enumerable: true,
+    get: function() {
+        return _FxUserImage.FxUserImage;
+    }
+});
+const _FxUserImage = require("./FxUserImage");

package/dist/index.d.ts

@@ -29,5 +29,6 @@ export { FxTabs } from './FxTabs';
 export { FxTag, TagPropsType } from './FxTag';
 export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoItemType, TodoPropsType } from './FxTodo';
+export { FxUserImage } from './FxUserImage';
 export { FxWizard, StepsLauncher } from './FxWizard';
 export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars, } from './FxStyledComponents';

package/dist/index.js

@@ -135,6 +135,9 @@ _export(exports, {
     FxToggleButtons: function() {
         return _FxToggleButtons.FxToggleButtons;
     },
+    FxUserImage: function() {
+        return _FxUserImage.FxUserImage;
+    },
     FxWizard: function() {
         return _FxWizard.FxWizard;
     },
@@ -263,5 +266,6 @@ const _FxTabs = require("./FxTabs");
 const _FxTag = require("./FxTag");
 const _FxTextField = require("./FxTextField");
 const _FxTodo = require("./FxTodo");
+const _FxUserImage = require("./FxUserImage");
 const _FxWizard = require("./FxWizard");
 const _FxStyledComponents = require("./FxStyledComponents");

package/package.json

@@ -7,6 +7,7 @@
     "@apollo/client": "3.10.4",
     "@fixefy/fixefy-hooks": "0.0.11",
     "@fixefy/fixefy-ui-utils": "0.2.54",
+    "@fixefy/next-s3-upload": "^0.0.12",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "6.0.0-beta.7",
     "@mui/material": "5.16.7",
@@ -68,5 +69,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.3.46"
+  "version": "0.3.48"
 }