touchstudy-core 0.1.192 → 0.1.193

package/dist/components/Chats/components/CanvasOverlay.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+interface Props {
+    open: boolean;
+    width: number;
+    height: number;
+    size: number;
+    color: string;
+    isEraser: boolean;
+}
+declare const CanvasOverlay: FC<Props>;
+export default CanvasOverlay;

package/dist/components/Chats/components/InputChat.d.ts

@@ -1,12 +1,11 @@
 import { FC } from "react";
-import { MessageRequest } from "../configs/types";
 export interface IInputChatProps {
     text: string;
     onSubmit: () => void;
     onChangeInput: (text: string) => void;
     isCompleted?: boolean;
     handleUploadImage: (file: File) => void;
-    selectedFile?: MessageRequest | null;
+    selectedFile?: string | null;
     handleDeleteSelectedImage: () => void;
 }
 interface Props extends IInputChatProps {

package/dist/components/Chats/components/SketchDialog/CanvasOverlay.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+interface Props {
+    open: boolean;
+    width: number;
+    height: number;
+    size: number;
+    color: string;
+    isEraser: boolean;
+}
+declare const CanvasOverlay: FC<Props>;
+export default CanvasOverlay;

package/dist/components/Chats/components/SketchDialog/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEvent, FC } from "react";
+interface Props {
+    value: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const ColorPicker: FC<Props>;
+export default ColorPicker;

package/dist/components/Chats/components/SketchDialog/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface SketchDialogProps {
+    open: boolean;
+    handleClose: () => void;
+}
+declare const SketchDialog: FC<SketchDialogProps>;
+export default SketchDialog;

package/dist/components/Chats/components/SketchDialog.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface SketchDialogProps {
+    open: boolean;
+    handleClose: () => void;
+}
+declare const SketchDialog: FC<SketchDialogProps>;
+export default SketchDialog;

package/dist/components/Chats/hooks/useChatContainer.d.ts

@@ -29,7 +29,7 @@ declare const useChatContainer: (props: Props) => {
         handleDeleteMessage: (conversationId: number, id: number, callback: any) => Promise<void>;
     };
     inputProps: {
-        selectedFile: MessageRequest | null | undefined;
+        selectedFile: string | null;
         text: string;
         onChangeInput: (text: string) => void;
         onSubmit: () => Promise<void>;

package/dist/components/List/hooks/useVirtualListView.d.ts

@@ -1,7 +1,8 @@
 import { ScrollParams } from "react-virtualized";
 import { VirtualListViewProps } from "../configs/interfaces";
+import _ from "lodash";
 declare const useVirtualListView: (props: VirtualListViewProps<any>) => {
     rowCount: number;
-    onScroll: ({ scrollTop, clientHeight, scrollHeight }: ScrollParams) => void;
+    onScroll: _.DebouncedFunc<({ scrollTop, clientHeight, scrollHeight }: ScrollParams) => void>;
 };
 export default useVirtualListView;

package/dist/index.js

@@ -1576,6 +1576,7 @@ var recent_class_exams = "최근 수업 시험";
 var there_are_no_problems_you_were_working_on = "풀던 문제가 없습니다.";
 var incomplete_exam = "미참가";
 var completed_exam = "참가";
+var failed_to_send_the_image_error = "이미지를 보내지 못했습니다: {{ message }}";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -2783,7 +2784,8 @@ var lang_ko = {
 	recent_class_exams: recent_class_exams,
 	there_are_no_problems_you_were_working_on: there_are_no_problems_you_were_working_on,
 	incomplete_exam: incomplete_exam,
-	completed_exam: completed_exam
+	completed_exam: completed_exam,
+	failed_to_send_the_image_error: failed_to_send_the_image_error
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -4018,6 +4020,7 @@ var recent_class_exams$1 = "Recent Class Exams";
 var there_are_no_problems_you_were_working_on$1 = "There are no problems you were working on";
 var incomplete_exam$1 = "Incomplete";
 var completed_exam$1 = "Completed";
+var failed_to_send_the_image_error$1 = "Failed to send the image: {{ message }}";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -5227,7 +5230,8 @@ var lang_en = {
 	recent_class_exams: recent_class_exams$1,
 	there_are_no_problems_you_were_working_on: there_are_no_problems_you_were_working_on$1,
 	incomplete_exam: incomplete_exam$1,
-	completed_exam: completed_exam$1
+	completed_exam: completed_exam$1,
+	failed_to_send_the_image_error: failed_to_send_the_image_error$1
 };
 
 i18n__default.use(reactI18next.initReactI18next).init({
@@ -7345,15 +7349,18 @@ var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
   var _useState2 = React.useState(0),
     totalPages = _useState2[0],
     setTotalPages = _useState2[1];
-  var _useState3 = React.useState(),
-    selectedItem = _useState3[0],
-    setSelectedItem = _useState3[1];
-  var _useState4 = React.useState(false),
-    isLoading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = React.useState(),
-    filter = _useState5[0],
-    setFilter = _useState5[1];
+  var _useState3 = React.useState(0),
+    totalItems = _useState3[0],
+    setTotalItems = _useState3[1];
+  var _useState4 = React.useState(),
+    selectedItem = _useState4[0],
+    setSelectedItem = _useState4[1];
+  var _useState5 = React.useState(false),
+    isLoading = _useState5[0],
+    setLoading = _useState5[1];
+  var _useState6 = React.useState(),
+    filter = _useState6[0],
+    setFilter = _useState6[1];
   var handleChangeSelectedItem = function handleChangeSelectedItem(data) {
     setSelectedItem(data);
   };
@@ -7372,6 +7379,7 @@ var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
         return Promise.resolve(getItemsApi(filter)).then(function (res) {
           var responseData = res.data;
           setTotalPages((responseData === null || responseData === void 0 ? void 0 : responseData.totalPages) || 0);
+          setTotalItems((responseData === null || responseData === void 0 ? void 0 : responseData.totalItems) || 0);
           var responseItems = (responseData === null || responseData === void 0 ? void 0 : responseData.items) || [];
           var results = responseItems;
           if (filter !== null && filter !== void 0 && filter.currentPage && filter.currentPage > 1) {
@@ -7388,16 +7396,13 @@ var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
     }
   };
   var handleLoadMore = React.useCallback(function () {
-    if (!filter || !filter.currentPage || filter.currentPage >= totalPages) {
-      return;
-    }
+    if (isLoading) return;
     setFilter(function (state) {
-      var _filter$currentPage;
-      return !state ? state : _extends({}, state, {
-        currentPage: ((_filter$currentPage = filter.currentPage) != null ? _filter$currentPage : 0) + 1
+      return !state || state.currentPage === undefined || state.currentPage >= totalPages ? state : _extends({}, state, {
+        currentPage: state.currentPage + 1
       });
     });
-  }, [filter === null || filter === void 0 ? void 0 : filter.currentPage, totalPages]);
+  }, [totalPages, isLoading]);
   var handleItemAdded = function handleItemAdded(item) {
     var results = [].concat(_$a.uniqBy([item].concat(items), "id"));
     setItems(results);
@@ -7414,7 +7419,13 @@ var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
   var handleChangeFilter = function handleChangeFilter(newFilter) {
     setFilter(newFilter);
   };
+  var resetData = function resetData() {
+    setTotalPages(0);
+    setTotalItems(0);
+    setItems([]);
+  };
   React.useEffect(function () {
+    resetData();
     setFilter(function (state) {
       if (JSON.stringify(state) == JSON.stringify(defaultFilter)) getItems();
       return defaultFilter;
@@ -7429,6 +7440,8 @@ var useVirtualList = function useVirtualList(defaultFilter, getItemsApi) {
     selectedItem: selectedItem,
     items: items,
     isLoading: isLoading,
+    totalItems: totalItems,
+    resetData: resetData,
     handleChangeFilter: handleChangeFilter,
     setItems: setItems,
     handleChangeSelectedItem: handleChangeSelectedItem,
@@ -9630,24 +9643,27 @@ var InputChat = function InputChat(_ref) {
       width: "fit-content"
     }
   }, React__default.createElement("img", {
-    src: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.content,
+    src: selectedFile,
     style: {
       height: "100px",
       objectFit: "contain",
       objectPosition: "center"
     }
-  }), React__default.createElement("div", {
+  }), React__default.createElement(material.IconButton, {
+    size: "small",
+    color: "error",
     style: {
       position: "absolute",
       right: 0,
       top: 0,
-      cursor: "pointer"
+      padding: "8px",
+      cursor: "pointer",
+      background: grey[100]
     },
     onClick: handleDeleteSelectedImage
-  }, React__default.createElement(io5.IoCloseOutline, {
-    color: "#fff",
-    size: 30
-  }))), React__default.createElement(TinyChatEditor, {
+  }, React__default.createElement(fa.FaTrash, {
+    size: 16
+  }))), !selectedFile && React__default.createElement(TinyChatEditor, {
     initValue: text,
     onChange: onChangeInput,
     disabled: isCompleted
@@ -10348,14 +10364,17 @@ var useChatContainer = function useChatContainer(props) {
     selectedConversation = _useState[0],
     setSelectedConversation = _useState[1];
   var _useState2 = React.useState(),
-    selectedFile = _useState2[0],
-    setSelectedFile = _useState2[1];
-  var _useState3 = React.useState(),
-    message = _useState3[0],
-    setMessage = _useState3[1];
-  var _useState4 = React.useState(true),
-    isScrollToEnd = _useState4[0],
-    setScrollToEnd = _useState4[1];
+    file = _useState2[0],
+    setFile = _useState2[1];
+  var _useState3 = React.useState(null),
+    backgroundImage = _useState3[0],
+    setBackgroundImage = _useState3[1];
+  var _useState4 = React.useState(),
+    message = _useState4[0],
+    setMessage = _useState4[1];
+  var _useState5 = React.useState(true),
+    isScrollToEnd = _useState5[0],
+    setScrollToEnd = _useState5[1];
   var isAdmin = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Admin);
   var _useMessageList = useMessageList({
       student: student
@@ -10378,34 +10397,39 @@ var useChatContainer = function useChatContainer(props) {
   };
   var handleAddMessage = function handleAddMessage() {
     try {
-      var _temp6 = function _temp6() {
+      var _temp3 = function _temp3(_result2) {
+        if (_exit) return _result2;
         loadingRef.current = false;
       };
+      var _exit = false;
       if (loadingRef.current) return Promise.resolve();
       loadingRef.current = true;
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
       setScrollToEnd(true);
-      var _temp5 = _catch(function () {
-        function _temp4() {
-          function _temp2() {
-            handleChangeInput('');
-            setSelectedFile(null);
-          }
-          var _temp = function (_message$content) {
+      var _temp2 = _catch(function () {
+        if (file) {
+          return Promise.resolve(handleUploadImageData(file)).then(function (selectedFile) {
+            if (!selectedFile) {
+              _exit = true;
+              return;
+            }
+            return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, selectedFile, {
+              contentType: 1
+            }))).then(function () {
+              setFile(undefined);
+              setBackgroundImage(null);
+            });
+          });
+        } else {
+          var _temp4 = function (_message$content) {
             if (message !== null && message !== void 0 && (_message$content = message.content) !== null && _message$content !== void 0 && _message$content.trim().length) {
-              return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, message))).then(function () {});
+              return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, message))).then(function () {
+                handleChangeInput('');
+              });
             }
           }();
-          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+          if (_temp4 && _temp4.then) return _temp4.then(function () {});
         }
-        var _temp3 = function () {
-          if (selectedFile !== null && selectedFile !== void 0 && selectedFile.content) {
-            return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, selectedFile, {
-              contentType: 1
-            }))).then(function () {});
-          }
-        }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       }, function (error) {
         setMessages(function (state) {
           return [].concat(state.filter(function (i) {
@@ -10414,31 +10438,51 @@ var useChatContainer = function useChatContainer(props) {
         });
         reactToastify.toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var handleUploadImage = function handleUploadImage(file) {
-    return file ? Promise.resolve(_finally(function () {
-      return _catch(function () {
+    try {
+      if (file) {
+        setFile(file);
+        var reader = new FileReader();
+        reader.onload = function () {
+          setBackgroundImage(reader.result);
+        };
+        reader.readAsDataURL(file);
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleUploadImageData = function handleUploadImageData(file) {
+    try {
+      return Promise.resolve(_catch(function () {
         var formData = new FormData();
         formData.append("upload", file);
         return Promise.resolve(apiUploadImageFile(formData)).then(function (res) {
           var _res$data;
-          setSelectedFile({
+          return {
             content: res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.url
-          });
+          };
         });
       }, function (error) {
+        reactToastify.toast.error(t("failed_to_send_the_image_error", {
+          message: getErrorMessage(t, error)
+        }));
         setMessages(function (state) {
           return [].concat(state.filter(function (i) {
             return (i === null || i === void 0 ? void 0 : i.id) !== 0;
           }));
         });
-        reactToastify.toast.error(getErrorMessage(t, error));
-      });
-    }, function () {})) : Promise.resolve();
+        return null;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
   var handleChangeInput = function handleChangeInput(text) {
     setMessage({
@@ -10447,7 +10491,7 @@ var useChatContainer = function useChatContainer(props) {
   };
   var handleNewMessageSent = function handleNewMessageSent(data) {
     try {
-      var _temp7 = function _temp7(_updateLastTimeReadCo) {
+      var _temp5 = function _temp5(_updateLastTimeReadCo) {
         _updateLastTimeReadCo;
       };
       if (!data) return Promise.resolve();
@@ -10456,14 +10500,14 @@ var useChatContainer = function useChatContainer(props) {
         return [].concat(state, [data]);
       });
       var _selectedConversation = selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id;
-      return Promise.resolve(_selectedConversation ? Promise.resolve(updateLastTimeReadConversation(selectedConversation.id)).then(_temp7) : _temp7(_selectedConversation));
+      return Promise.resolve(_selectedConversation ? Promise.resolve(updateLastTimeReadConversation(selectedConversation.id)).then(_temp5) : _temp5(_selectedConversation));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var handleNewConversation = function handleNewConversation(data) {
     try {
-      var _temp8 = function _temp8(_updateLastTimeReadCo2) {
+      var _temp6 = function _temp6(_updateLastTimeReadCo2) {
         _updateLastTimeReadCo2;
       };
       if (!data) return Promise.resolve();
@@ -10473,7 +10517,7 @@ var useChatContainer = function useChatContainer(props) {
         return [].concat(state, [item]);
       });
       var _selectedConversation2 = selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id;
-      return Promise.resolve(_selectedConversation2 ? Promise.resolve(updateLastTimeReadConversation(selectedConversation.id)).then(_temp8) : _temp8(_selectedConversation2));
+      return Promise.resolve(_selectedConversation2 ? Promise.resolve(updateLastTimeReadConversation(selectedConversation.id)).then(_temp6) : _temp6(_selectedConversation2));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -10492,7 +10536,8 @@ var useChatContainer = function useChatContainer(props) {
     }
   };
   var handleDeleteSelectedImage = function handleDeleteSelectedImage() {
-    setSelectedFile(null);
+    setFile(undefined);
+    setBackgroundImage(null);
   };
   var cleanupPusher = function cleanupPusher() {
     pusher === null || pusher === void 0 ? void 0 : pusher.unbind("new-message-event", handleNewMessageSent);
@@ -10578,7 +10623,7 @@ var useChatContainer = function useChatContainer(props) {
       handleDeleteMessage: handleDeleteMessage
     },
     inputProps: {
-      selectedFile: selectedFile,
+      selectedFile: backgroundImage,
       text: (message === null || message === void 0 ? void 0 : message.content) || "",
       onChangeInput: handleChangeInput,
       onSubmit: handleAddMessage,
@@ -10661,10 +10706,11 @@ var useVirtualListView = function useVirtualListView(props) {
       handleLoadMore();
     }
   };
+  var decounceScroll = _$a.debounce(onScroll, 300);
   var rowCount = data.length + (loading ? 1 : 0);
   return {
     rowCount: rowCount,
-    onScroll: onScroll
+    onScroll: decounceScroll
   };
 };
 
@@ -16070,7 +16116,7 @@ var useStudentInfoDrawer = function useStudentInfoDrawer(props) {
         var _temp2 = function _temp2() {
           setLoading(false);
         };
-        if (!studentId) return Promise.resolve();
+        if (!studentId || !open) return Promise.resolve();
         setLoading(true);
         var _temp = _catch(function () {
           return Promise.resolve(getUserByIdApi(studentId)).then(function (res) {
@@ -16083,7 +16129,7 @@ var useStudentInfoDrawer = function useStudentInfoDrawer(props) {
       }
     };
     getStudent();
-  }, [studentId]);
+  }, [open, studentId]);
   React.useEffect(function () {
     if (open && inert) {
       var _document$getElementB;