@ludo.ninja/components 1.1.2 → 1.1.3

package/dist/components/editProfile/UserPicProfile/index.jsx

@@ -1,510 +1,254 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React, { useEffect, useState } from 'react';
-
 import Dropzone from 'react-dropzone';
 import styled from 'styled-components';
-
 import { useUserStore } from '@/modules/user/store';
-
 import { useUiStore } from '@/store/ui';
-
 import useDeleteUserpic from '@/api/server-medias/mutations/useDeleteUserpic';
 import useUploadUserpic from '@/api/server-medias/mutations/useUploadUserpic';
-
 import { rotate } from '@/styles/animations';
-import {
-  AccentColor,
-  BorderColorLight,
-  ErrorColor,
-  TextGrayColor,
-} from '@/styles/colors';
-
+import { AccentColor, BorderColorLight, ErrorColor, TextGrayColor, } from '@/styles/colors';
 import NoSsr from '@/components/base/NoSSR';
-
 import MainButton from '@/system/Buttons/MainButton';
-
 import { H5 } from '@system';
-
 import BasicCropper from '../Cropper';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-var __awaiter =
-  (this && this.__awaiter) ||
-  function (thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P
-        ? value
-        : new P(function (resolve) {
-            resolve(value);
-          });
-    }
-    return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator['throw'](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done
-          ? resolve(result.value)
-          : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-var __generator =
-  (this && this.__generator) ||
-  function (thisArg, body) {
-    var _ = {
-        label: 0,
-        sent: function () {
-          if (t[0] & 1) throw t[1];
-          return t[1];
-        },
-        trys: [],
-        ops: [],
-      },
-      f,
-      y,
-      t,
-      g;
-    return (
-      (g = { next: verb(0), throw: verb(1), return: verb(2) }),
-      typeof Symbol === 'function' &&
-        (g[Symbol.iterator] = function () {
-          return this;
-        }),
-      g
-    );
-    function verb(n) {
-      return function (v) {
-        return step([n, v]);
-      };
-    }
-    function step(op) {
-      if (f) throw new TypeError('Generator is already executing.');
-      while ((g && ((g = 0), op[0] && (_ = 0)), _))
-        try {
-          if (
-            ((f = 1),
-            y &&
-              (t =
-                op[0] & 2
-                  ? y['return']
-                  : op[0]
-                  ? y['throw'] || ((t = y['return']) && t.call(y), 0)
-                  : y.next) &&
-              !(t = t.call(y, op[1])).done)
-          )
-            return t;
-          if (((y = 0), t)) op = [op[0] & 2, t.value];
-          switch (op[0]) {
-            case 0:
-            case 1:
-              t = op;
-              break;
-            case 4:
-              _.label++;
-              return { value: op[1], done: false };
-            case 5:
-              _.label++;
-              y = op[1];
-              op = [0];
-              continue;
-            case 7:
-              op = _.ops.pop();
-              _.trys.pop();
-              continue;
-            default:
-              if (
-                !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
-                (op[0] === 6 || op[0] === 2)
-              ) {
-                _ = 0;
-                continue;
-              }
-              if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                _.label = op[1];
-                break;
-              }
-              if (op[0] === 6 && _.label < t[1]) {
-                _.label = t[1];
-                t = op;
-                break;
-              }
-              if (t && _.label < t[2]) {
-                _.label = t[2];
-                _.ops.push(op);
-                break;
-              }
-              if (t[2]) _.ops.pop();
-              _.trys.pop();
-              continue;
-          }
-          op = body.call(thisArg, _);
-        } catch (e) {
-          op = [6, e];
-          y = 0;
-        } finally {
-          f = t = 0;
-        }
-      if (op[0] & 5) throw op[1];
-      return { value: op[0] ? op[1] : void 0, done: true };
-    }
-  };
-
-var StyledUserpic = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ',
-        ';\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ',
-        ';\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ',
-        ';\n    width: 50px;\n    height: 50px;\n    border: 6px solid ',
-        ';\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ',
-        " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n",
-      ],
-      [
-        '\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ',
-        ';\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ',
-        ';\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ',
-        ';\n    width: 50px;\n    height: 50px;\n    border: 6px solid ',
-        ';\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ',
-        " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n",
-      ]
-    )),
-  function (props) {
-    return props.isLoading ? 'blur(4px)' : 'none';
-  },
-  BorderColorLight,
-  function (props) {
-    return props.isLoading ? 'inline-block' : 'none';
-  },
-  AccentColor,
-  rotate
-);
-var SWrapper = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n',
-      ],
-      [
-        '\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n',
-      ]
-    ))
-);
+var StyledUserpic = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"], ["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"])), function (props) { return (props.isLoading ? 'blur(4px)' : 'none'); }, BorderColorLight, function (props) { return (props.isLoading ? 'inline-block' : 'none'); }, AccentColor, rotate);
+var SWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"])));
 var cropperStyles = {
-  height: 430,
-  width: '100%',
-  maxWidth: 721,
-  margin: '40px 0 20px 0',
+    height: 430,
+    width: '100%',
+    maxWidth: 721,
+    margin: '40px 0 20px 0',
 };
 var errorTypes = {
-  imageIsUpOfSize: {
-    isError: true,
-    size: 1024 * 10,
-    currentMessage: '',
-    message: 'Image size size over 10 MB',
-  },
-  imageIsUpOfDimensions: {
-    isError: true,
-    size: 20,
-    currentMessage: '',
-    message: '(Max 1200 px x 1200 px)',
-  },
+    imageIsUpOfSize: {
+        isError: true,
+        size: 1024 * 10,
+        currentMessage: '',
+        message: 'Image size size over 10 MB',
+    },
+    imageIsUpOfDimensions: {
+        isError: true,
+        size: 20,
+        currentMessage: '',
+        message: '(Max 1200 px x 1200 px)',
+    },
 };
 var UserPicProfile = function (_a) {
-  var defaultImage = _a.defaultImage;
-  var _b = useState(null),
-    imgFile = _b[0],
-    setImgFile = _b[1];
-  var _c = useState(null),
-    userpic = _c[0],
-    setUserPic = _c[1];
-  var _d = useState(false),
-    isDefaultImage = _d[0],
-    setDefaultImage = _d[1];
-  var _e = useState(false),
-    isImageLoading = _e[0],
-    setImageLoading = _e[1];
-  var _f = useState(null),
-    error = _f[0],
-    setIsError = _f[1];
-  var _g = useUiStore(function (state) {
-      return {
+    var defaultImage = _a.defaultImage;
+    var _b = useState(null), imgFile = _b[0], setImgFile = _b[1];
+    var _c = useState(null), userpic = _c[0], setUserPic = _c[1];
+    var _d = useState(false), isDefaultImage = _d[0], setDefaultImage = _d[1];
+    var _e = useState(false), isImageLoading = _e[0], setImageLoading = _e[1];
+    var _f = useState(null), error = _f[0], setIsError = _f[1];
+    var _g = useUiStore(function (state) { return ({
         openModal: state.openModal,
         closeModal: state.closeModal,
-      };
-    }),
-    openModal = _g.openModal,
-    closeModal = _g.closeModal;
-  var uploadUserpic = useUploadUserpic().uploadUserpic;
-  var updateProfileData = useUserStore(function (state) {
-    return {
-      updateProfileData: state.updateProfileData,
-    };
-  }).updateProfileData;
-  useEffect(
-    function () {
-      if (defaultImage && !defaultImage.includes('default_')) {
-        setUserPic(defaultImage);
-        setDefaultImage(true);
-      }
-    },
-    [defaultImage]
-  );
-  var deleteUserpic = useDeleteUserpic().deleteUserpic;
-  var renderAcceptDeclineButtons = function () {
-    if (imgFile) {
-      return (
-        <div className={'acceptDecline_buttons'}>
+    }); }), openModal = _g.openModal, closeModal = _g.closeModal;
+    var uploadUserpic = useUploadUserpic().uploadUserpic;
+    var updateProfileData = useUserStore(function (state) { return ({
+        updateProfileData: state.updateProfileData,
+    }); }).updateProfileData;
+    useEffect(function () {
+        if (defaultImage && !defaultImage.includes('default_')) {
+            setUserPic(defaultImage);
+            setDefaultImage(true);
+        }
+    }, [defaultImage]);
+    var deleteUserpic = useDeleteUserpic().deleteUserpic;
+    var renderAcceptDeclineButtons = function () {
+        if (imgFile) {
+            return (<div className={'acceptDecline_buttons'}>
           {renderAcceptButton()}
-          <button className={'decline_btn'} onClick={clearFiles} />
-        </div>
-      );
-    }
-  };
-  var renderDeleteBtn = function () {
-    if (isDefaultImage && userpic) {
-      return (
-        <div className={'delete_button'}>
-          <MainButton
-            onClick={deleteRequest}
-            variant="secondary"
-            text={'Delete'}
-          />
-        </div>
-      );
-    }
-  };
-  var renderAcceptButton = function () {
-    if (!error) {
-      return <button className={'accept_btn'} onClick={uploadRequest} />;
-    }
-  };
-  var hideWithReset = function () {
-    clearFiles();
-    closeModal();
-  };
-  var clearFiles = function () {
-    setImgFile(null);
-    setUserPic(null);
-    setIsError(null);
-    setDefaultImage(false);
-  };
-  var deleteRequest = function () {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            setImageLoading(true);
-            return [
-              4 /*yield*/,
-              deleteUserpic().then(function (res) {
-                var data = res.data;
-                if (
-                  data === null || data === void 0 ? void 0 : data.deleteUserpic
-                ) {
-                  setImageLoading(false);
-                  setDefaultImage(false);
-                  clearFiles();
-                } else {
-                  setImageLoading(true);
-                }
-              }),
-            ];
-          case 1:
-            _a.sent();
-            return [2 /*return*/];
+          <button className={'decline_btn'} onClick={clearFiles}/>
+        </div>);
         }
-      });
-    });
-  };
-  var uploadRequest = function () {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var result;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            setImageLoading(true);
-            return [
-              4 /*yield*/,
-              uploadUserpic(imgFile)
-                .catch(function (reason) {
-                  // console.log('reason', reason);
-                  setIsError({
-                    size: 20,
-                    currentMessage: reason.message,
-                  });
-                })
-                .finally(function () {
-                  setImgFile(null);
-                  setImageLoading(false);
-                  setDefaultImage(true);
-                }),
-            ];
-          case 1:
-            result = _a.sent();
-            if (
-              result === null || result === void 0
-                ? void 0
-                : result.data.uploadUserpic
-            ) {
-              updateProfileData({
-                userpic: result.data.uploadUserpic,
-              });
+    };
+    var renderDeleteBtn = function () {
+        if (isDefaultImage && userpic) {
+            return (<div className={'delete_button'}>
+          <MainButton onClick={deleteRequest} variant="secondary" text={'Delete'}/>
+        </div>);
+        }
+    };
+    var renderAcceptButton = function () {
+        if (!error) {
+            return <button className={'accept_btn'} onClick={uploadRequest}/>;
+        }
+    };
+    var hideWithReset = function () {
+        clearFiles();
+        closeModal();
+    };
+    var clearFiles = function () {
+        setImgFile(null);
+        setUserPic(null);
+        setIsError(null);
+        setDefaultImage(false);
+    };
+    var deleteRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setImageLoading(true);
+                    return [4 /*yield*/, deleteUserpic().then(function (res) {
+                            var data = res.data;
+                            if (data === null || data === void 0 ? void 0 : data.deleteUserpic) {
+                                setImageLoading(false);
+                                setDefaultImage(false);
+                                clearFiles();
+                            }
+                            else {
+                                setImageLoading(true);
+                            }
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var uploadRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setImageLoading(true);
+                    return [4 /*yield*/, uploadUserpic(imgFile)
+                            .catch(function (reason) {
+                            // console.log('reason', reason);
+                            setIsError({
+                                size: 20,
+                                currentMessage: reason.message,
+                            });
+                        })
+                            .finally(function () {
+                            setImgFile(null);
+                            setImageLoading(false);
+                            setDefaultImage(true);
+                        })];
+                case 1:
+                    result = _a.sent();
+                    if (result === null || result === void 0 ? void 0 : result.data.uploadUserpic) {
+                        updateProfileData({
+                            userpic: result.data.uploadUserpic,
+                        });
+                    }
+                    return [2 /*return*/];
             }
-            return [2 /*return*/];
+        });
+    }); };
+    var reader = new FileReader();
+    var onDropHandler = function (files) {
+        files.map(function (file) {
+            reader.readAsDataURL(file);
+        });
+    };
+    var imageContent = function () {
+        if (userpic) {
+            return (<>
+          <img src={userpic} className="userpic" alt={'userpic'} onError={function () { return setUserPic(null); }}/>
+          <div className={'loading'}/>
+        </>);
         }
-      });
-    });
-  };
-  var reader = new FileReader();
-  var onDropHandler = function (files) {
-    files.map(function (file) {
-      reader.readAsDataURL(file);
-    });
-  };
-  var imageContent = function () {
-    if (userpic) {
-      return (
-        <>
-          <img
-            src={userpic}
-            className="userpic"
-            alt={'userpic'}
-            onError={function () {
-              return setUserPic(null);
-            }}
-          />
-          <div className={'loading'} />
-        </>
-      );
-    }
-    return (
-      <div className="noImage">
-        <img
-          style={{ width: '25px', height: '25px', marginBottom: '15px' }}
-          src={'/settings_page/upload.svg'}
-        />
-        <span
-          style={{ color: TextGrayColor, fontSize: '13px', fontWeight: 400 }}
-        >
+        return (<div className="noImage">
+        <img style={{ width: '25px', height: '25px', marginBottom: '15px' }} src={'/settings_page/upload.svg'}/>
+        <span style={{ color: TextGrayColor, fontSize: '13px', fontWeight: 400 }}>
           Upload profile <br /> picture
         </span>
-      </div>
-    );
-  };
-  var renderUserPicText = function () {
-    if (!error) {
-      // if (imgFile || userpic) return;
-      return (
-        <H5
-          color={TextGrayColor}
-          style={{ maxWidth: '275px', margin: '0 auto', textAlign: 'center' }}
-        >
+      </div>);
+    };
+    var renderUserPicText = function () {
+        if (!error) {
+            // if (imgFile || userpic) return;
+            return (<H5 color={TextGrayColor} style={{ maxWidth: '275px', margin: '0 auto', textAlign: 'center' }}>
           File types supported:
           <br />
           SVG, JPG, PNG, GIF. <br />
           Up to 1 MB
           <br />
           (Max 1200 px x 1200 px)
-        </H5>
-      );
-    } else {
-      return (
-        <p style={{ color: ErrorColor }}>
+        </H5>);
+        }
+        else {
+            return (<p style={{ color: ErrorColor }}>
           {error.currentMessage}
           <br />
           {/*{error.message}*/}
-        </p>
-      );
-    }
-  };
-  return (
-    <StyledUserpic isLoading={isImageLoading}>
-      <div
-        style={{
-          paddingBottom: '2rem',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 12,
-        }}
-      >
-        <Dropzone
-          accept={{ 'image/*': [] }}
-          multiple={false}
-          onDrop={function (files) {
-            return __awaiter(void 0, void 0, void 0, function () {
-              return __generator(this, function (_a) {
+        </p>);
+        }
+    };
+    return (<StyledUserpic isLoading={isImageLoading}>
+      <div style={{
+            paddingBottom: '2rem',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+        }}>
+        <Dropzone accept={{ 'image/*': [] }} multiple={false} onDrop={function (files) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
                 onDropHandler(files);
                 reader.onload = function (event) {
-                  var _a;
-                  openModal(
-                    <BasicCropper
-                      defaultSrc={
-                        (_a =
-                          event === null || event === void 0
-                            ? void 0
-                            : event.target) === null || _a === void 0
-                          ? void 0
-                          : _a.result
-                      }
-                      cropperStyles={cropperStyles}
-                      setFile={setImgFile}
-                      hide={closeModal}
-                      hideWithReset={hideWithReset}
-                      setUserPic={setUserPic}
-                      errorTypes={errorTypes}
-                      setIsError={setIsError}
-                    />
-                  );
+                    var _a;
+                    openModal(<BasicCropper defaultSrc={(_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result} cropperStyles={cropperStyles} setFile={setImgFile} hide={closeModal} hideWithReset={hideWithReset} setUserPic={setUserPic} errorTypes={errorTypes} setIsError={setIsError}/>);
                 };
                 return [2 /*return*/];
-              });
             });
-          }}
-        >
+        }); }}>
           {function (_a) {
-            var getRootProps = _a.getRootProps,
-              getInputProps = _a.getInputProps;
-            return (
-              <SWrapper
-                style={{ pointerEvents: userpic ? 'none' : 'auto' }}
-                {...getRootProps()}
-              >
-                <input {...getInputProps()} />
-                <NoSsr>
-                  <div className="content-wrapper">{imageContent()}</div>
-                </NoSsr>
-              </SWrapper>
-            );
-          }}
+            var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
+            return (<SWrapper style={{ pointerEvents: userpic ? 'none' : 'auto' }} {...getRootProps()}>
+              <input {...getInputProps()}/>
+              <NoSsr>
+                <div className="content-wrapper">{imageContent()}</div>
+              </NoSsr>
+            </SWrapper>);
+        }}
         </Dropzone>
         {renderAcceptDeclineButtons()}
         {renderDeleteBtn()}
         <div className="userpic_text">{renderUserPicText()}</div>
       </div>
-    </StyledUserpic>
-  );
+    </StyledUserpic>);
 };
 export default UserPicProfile;
 var templateObject_1, templateObject_2;