@messenger-box/platform-browser 0.0.1-alpha.135 → 0.0.1-alpha.136

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.136](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.135...v0.0.1-alpha.136) (2022-02-14)
+
+
+### Features
+
+* add support to upload files via signed url ([d83f7d3](https://github.com/cdmbase/messenger-box/commit/d83f7d360d5bab45a55f6ea45e44da670d8a6ace))
+
+
+
+
+
 ## [0.0.1-alpha.135](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.134...v0.0.1-alpha.135) (2022-02-10)
 
 **Note:** Version bump only for package @messenger-box/platform-browser

package/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-upload-file.hook';
+export * from './use-upload-files.hook';

package/lib/hooks/use-upload-file.hook.d.ts

@@ -0,0 +1,2 @@
+import { useUploadFile as useBaseUploadFile } from '../temp';
+export declare const useUploadFile: () => ReturnType<typeof useBaseUploadFile>;

package/lib/hooks/use-upload-files.hook.d.ts

@@ -0,0 +1,2 @@
+import { useUploadFiles as useBaseUploadFiles } from '../temp';
+export declare const useUploadFiles: () => ReturnType<typeof useBaseUploadFiles>;

package/lib/index.js

@@ -1659,14 +1659,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessengerComponent = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const antd_1 = __webpack_require__(/*! antd */ "antd");
-// import { MessagesList, ThreadMessagesList } from './messagesList';
-const messagesList_1 = __webpack_require__(/*! ./messagesList */ "./src/components/messenger/messagesList/index.tsx");
 const core_1 = __webpack_require__(/*! @messenger-box/core */ "@messenger-box/core");
 const all_1 = __webpack_require__(/*! react-icons/all */ "react-icons/all");
-const style_1 = __webpack_require__(/*! ./messagesList/style */ "./src/components/messenger/messagesList/style.ts");
 const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
 const emoji_mart_1 = __webpack_require__(/*! emoji-mart */ "emoji-mart");
 __webpack_require__(/*! emoji-mart/css/emoji-mart.css */ "emoji-mart/css/emoji-mart.css");
+const hooks_1 = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.ts");
+const style_1 = __webpack_require__(/*! ./messagesList/style */ "./src/components/messenger/messagesList/style.ts");
+const messagesList_1 = __webpack_require__(/*! ./messagesList */ "./src/components/messenger/messagesList/index.tsx");
 const MessengerComponent = ({ channel, currentUsrId }) => {
     document.getElementsByClassName('demo')[0].setAttribute('style', `{{overflow: 'hidden'}}`);
     const { css } = react_fela_1.useFela();
@@ -1679,6 +1679,7 @@ const MessengerComponent = ({ channel, currentUsrId }) => {
     const [day, setDay] = react_1.useState('Today');
     const [threadEmoji, setThreadEmoji] = react_1.useState(false);
     const [files, setFiles] = react_1.useState([]);
+    const { startUploads } = hooks_1.useUploadFiles();
     // let token;
     // useEffect(() => {
     //     token = window.localStorage.getItem('access_token');
@@ -1687,7 +1688,7 @@ const MessengerComponent = ({ channel, currentUsrId }) => {
         variables: {
             channelId: channel.id,
         },
-        fetchPolicy: "cache-first"
+        fetchPolicy: 'cache-first'
     });
     // useEffect(() => {
     //     if (isRefetch) {
@@ -1717,20 +1718,34 @@ const MessengerComponent = ({ channel, currentUsrId }) => {
         // context: {headers: {Authorization: token}},
         // refetchQueries: ['GetMessages']
     });
-    const handleEnterButton = (e) => {
-        if (enterValue) {
-            sendMsg({
-                variables: {
-                    channelId: channel.id,
-                    content: enterValue,
-                    files: files
-                },
-            });
-            setEnterValue('');
-            scrollToBottom();
-            setFlag(true);
+    const handleEnterButton = react_1.useCallback(async (e) => {
+        if (!enterValue) {
+            return;
         }
-    };
+        const { data } = await sendMsg({
+            variables: {
+                channelId: channel.id,
+                content: enterValue,
+                files: []
+            },
+        });
+        const uploadedFiles = await startUploads({
+            files,
+            ref: data.sendMessage.id,
+            refName: 'postId'
+        });
+        await editMessage({
+            variables: {
+                channelId: channel.id,
+                messageId: data.sendMessage.id,
+                files: uploadedFiles.map(i => i.data.id),
+                content: enterValue
+            }
+        });
+        setEnterValue('');
+        scrollToBottom();
+        setFlag(true);
+    }, [channel, files, enterValue]);
     const [deleteMsg, {}] = core_1.useDeleteMessageMutation({
     // context: {headers: {Authorization: token}},
     // refetchQueries: ['GetMessages']
@@ -1795,17 +1810,21 @@ const MessengerComponent = ({ channel, currentUsrId }) => {
     const handleShowSideBar = () => {
         setShowThread(!showThread);
     };
-    const handleEditMessage = (id, msg) => {
-        editMessage({
+    const handleEditMessage = react_1.useCallback(async (id, msg) => {
+        const uploadedFiles = await startUploads({
+            files,
+            ref: id,
+            refName: 'postId'
+        });
+        return editMessage({
             variables: {
                 channelId: channel.id,
                 messageId: id,
                 content: msg,
-                files: files
+                files: uploadedFiles.map(i => i.data.id),
             },
         });
-    };
-    const [fileUpload, uploadedRes] = core_1.useUploadImgMutation();
+    }, [files, channel]);
     const handleFileChange = (e) => {
         let inputFiles = [];
         Object.keys(e.target.files).map((key) => inputFiles.push(e.target.files[key]));
@@ -1818,14 +1837,14 @@ const MessengerComponent = ({ channel, currentUsrId }) => {
         let imgs = document.getElementById('preview_img');
         imgs.innerHTML = '';
         files.forEach((f, index) => {
-            let childDiv = document.createElement("div");
-            childDiv.className = "child_div";
-            let childImg = document.createElement("img");
+            let childDiv = document.createElement('div');
+            childDiv.className = 'child_div';
+            let childImg = document.createElement('img');
             childImg.src = URL.createObjectURL(f);
-            let childClose = document.createElement("i");
-            childClose.className = "fa fa-times";
+            let childClose = document.createElement('i');
+            childClose.className = 'fa fa-times';
             let overLayDiv = document.createElement('div');
-            overLayDiv.className = "overlay";
+            overLayDiv.className = 'overlay';
             childClose.onclick = () => previewClose(f);
             childDiv.appendChild(overLayDiv);
             childDiv.appendChild(childImg);
@@ -24116,6 +24135,88 @@ exports.schema = schema;
 __webpack_require__.r(__webpack_exports__);
 /* harmony default export */ __webpack_exports__["default"] = ("\n\nextend type Post {\n    isPinned: Boolean @client\n    disableGroupHighlight: Boolean @client\n    fromBot: Boolean @client\n\n    \"\"\" Set to center the post \"\"\"\n    center: Boolean @client\n\n    \"\"\" Set to render post compactly \"\"\"\n    compactDisplay: Boolean @client\n\n    \"\"\" Set to render a preview of the parent post above this reply \"\"\"\n    isFirstReply: Boolean @client\n\n    \"\"\" Set to highlight the background of the post \"\"\"\n    shouldHighlight: Boolean @client\n\n    \"\"\" Set to render this post as if it was attached to the previous post \"\"\"\n    consecutivePostByUser: Boolean @client\n\n    \"\"\" Set if the previous post is a comment \"\"\"\n    previousPostIsComment: Boolean @client\n\n    togglePostMenu: Boolean @client\n\n    \"\"\" Set to render this comment as a mention \"\"\"\n    isCommentMention: Boolean @client\n\n    \"\"\" If the post has replies \"\"\"\n    hasReplies: Boolean @client\n\n    \"\"\" To check if the current post is last in the list \"\"\"\n    isLastPost: Boolean @client\n\n    \"\"\" Whether or not the channel that contains this post is archived \"\"\"\n    channelArchived: Boolean @client\n\n    \"\"\" Set to mark the post as flagged \"\"\"\n    isFlagged: Boolean @client\n\n    isCollapsedThreadsEnabled: Boolean @client\n}");
 
+/***/ }),
+
+/***/ "./src/hooks/index.ts":
+/*!****************************!*\
+  !*** ./src/hooks/index.ts ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./use-upload-file.hook */ "./src/hooks/use-upload-file.hook.ts"), exports);
+__exportStar(__webpack_require__(/*! ./use-upload-files.hook */ "./src/hooks/use-upload-files.hook.ts"), exports);
+
+
+/***/ }),
+
+/***/ "./src/hooks/use-upload-file.hook.ts":
+/*!*******************************************!*\
+  !*** ./src/hooks/use-upload-file.hook.ts ***!
+  \*******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadFile = void 0;
+const core_1 = __webpack_require__(/*! @messenger-box/core */ "@messenger-box/core");
+const temp_1 = __webpack_require__(/*! ../temp */ "./src/temp/index.ts");
+const useUploadFile = () => temp_1.useUploadFile({
+    createUploadLink: {
+        name: 'createMessageFileUploadLink',
+        mutation: core_1.useCreateMessageFileUploadLinkMutation,
+    },
+    saveUploadedFile: {
+        name: 'attachUploadedFileToMessage',
+        mutation: core_1.useAttachUploadedFileToMessageMutation,
+    },
+});
+exports.useUploadFile = useUploadFile;
+
+
+/***/ }),
+
+/***/ "./src/hooks/use-upload-files.hook.ts":
+/*!********************************************!*\
+  !*** ./src/hooks/use-upload-files.hook.ts ***!
+  \********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadFiles = void 0;
+const core_1 = __webpack_require__(/*! @messenger-box/core */ "@messenger-box/core");
+const temp_1 = __webpack_require__(/*! ../temp */ "./src/temp/index.ts");
+const useUploadFiles = () => temp_1.useUploadFiles({
+    createUploadLink: {
+        name: 'createMessageFileUploadLink',
+        mutation: core_1.useCreateMessageFileUploadLinkMutation,
+    },
+    saveUploadedFile: {
+        name: 'attachUploadedFileToMessage',
+        mutation: core_1.useAttachUploadedFileToMessageMutation,
+    },
+});
+exports.useUploadFiles = useUploadFiles;
+
+
 /***/ }),
 
 /***/ "./src/index.tsx":
@@ -24585,6 +24686,143 @@ exports.styleSheet = {
 };
 
 
+/***/ }),
+
+/***/ "./src/temp/index.ts":
+/*!***************************!*\
+  !*** ./src/temp/index.ts ***!
+  \***************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./use-upload-file.hook */ "./src/temp/use-upload-file.hook.ts"), exports);
+__exportStar(__webpack_require__(/*! ./use-upload-files.hook */ "./src/temp/use-upload-files.hook.ts"), exports);
+
+
+/***/ }),
+
+/***/ "./src/temp/use-upload-file.hook.ts":
+/*!******************************************!*\
+  !*** ./src/temp/use-upload-file.hook.ts ***!
+  \******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadFile = void 0;
+const file_info_client_1 = __webpack_require__(/*! @container-stack/file-info-client */ "@container-stack/file-info-client");
+const axios_1 = __importDefault(__webpack_require__(/*! axios */ "axios"));
+const react_1 = __webpack_require__(/*! react */ "react");
+function isFileImage(file) {
+    var _a;
+    return file && ((_a = file.type) === null || _a === void 0 ? void 0 : _a.split('/')[0]) === 'image';
+}
+const useUploadFile = (options) => {
+    const { createUploadLink: createLink, saveUploadedFile } = options;
+    const [createUploadLink, { loading: linkLoading, error: linkError }] = createLink.mutation();
+    const [attachFile, { loading: fileSaving, error: fileSaveError }] = saveUploadedFile.mutation();
+    const startUpload = react_1.useCallback(async (options) => {
+        try {
+            const { file, ref, refName } = options;
+            const { data: link, errors: linkErrors } = await createUploadLink({
+                variables: {
+                    filename: file.name,
+                    [refName]: ref,
+                },
+            });
+            if (linkErrors) {
+                return { error: linkErrors[0] };
+            }
+            const { width, height } = isFileImage
+                ? await file_info_client_1.imageSize(await file.arrayBuffer())
+                : { width: null, height: null };
+            const url = link[createLink.name];
+            const { status } = await axios_1.default.put(url, file);
+            if (status !== 200) {
+                return;
+            }
+            const { data: attachedFile, errors: attachFileErrors } = await attachFile({
+                variables: {
+                    [refName]: ref,
+                    file: {
+                        name: file.name,
+                        size: file.size,
+                        mimeType: file.type,
+                        url,
+                        width,
+                        height,
+                    },
+                },
+            });
+            return {
+                data: attachedFile[saveUploadedFile.name],
+                error: attachFileErrors ? attachFileErrors[0] : null,
+            };
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, []);
+    return {
+        startUpload,
+        loading: linkLoading || fileSaving,
+        error: linkError || fileSaveError,
+    };
+};
+exports.useUploadFile = useUploadFile;
+
+
+/***/ }),
+
+/***/ "./src/temp/use-upload-files.hook.ts":
+/*!*******************************************!*\
+  !*** ./src/temp/use-upload-files.hook.ts ***!
+  \*******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadFiles = void 0;
+const use_upload_file_hook_1 = __webpack_require__(/*! ./use-upload-file.hook */ "./src/temp/use-upload-file.hook.ts");
+const useUploadFiles = (options) => {
+    const _a = use_upload_file_hook_1.useUploadFile(options), { startUpload: startUploadSingle } = _a, rest = __rest(_a, ["startUpload"]);
+    const startUploads = async ({ files, ref, refName }) => Promise.all(files.map((file) => startUploadSingle({ file, ref, refName })));
+    return Object.assign(Object.assign({}, rest), { startUploads });
+};
+exports.useUploadFiles = useUploadFiles;
+
+
 /***/ }),
 
 /***/ "./src/utils/index.ts":
@@ -24678,6 +24916,17 @@ module.exports = require("@common-stack/client-react");
 
 /***/ }),
 
+/***/ "@container-stack/file-info-client":
+/*!****************************************************!*\
+  !*** external "@container-stack/file-info-client" ***!
+  \****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("@container-stack/file-info-client");
+
+/***/ }),
+
 /***/ "@messenger-box/core":
 /*!**************************************!*\
   !*** external "@messenger-box/core" ***!
@@ -24711,6 +24960,17 @@ module.exports = require("antd/dist/antd.css");
 
 /***/ }),
 
+/***/ "axios":
+/*!************************!*\
+  !*** external "axios" ***!
+  \************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("axios");
+
+/***/ }),
+
 /***/ "emoji-mart":
 /*!*****************************!*\
   !*** external "emoji-mart" ***!