@logora/debate 0.3.79 → 0.3.80

package/dist/components/input/argument_input/ArgumentInput.js

@@ -1,163 +1,163 @@
-import { jsxs as M, jsx as s } from "react/jsx-runtime";
-import De from "@rooks/use-sessionstorage-state";
-import { useRef as We, useState as l, useEffect as v, Suspense as Ye, lazy as ke } from "react";
-import { useIntl as Re, FormattedMessage as fe } from "react-intl";
-import { useLocation as je } from "react-router";
-import I from "classnames";
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import qe from "@rooks/use-sessionstorage-state";
+import { useRef as De, useState as c, useEffect as M, Suspense as We, lazy as Ye } from "react";
+import { useIntl as $e, FormattedMessage as ce } from "react-intl";
+import { useLocation as ke } from "react-router";
+import w from "classnames";
 import n from "./ArgumentInput.module.scss.js";
-import { useDataProvider as ze } from "../../data/data_provider/useDataProvider.js";
-import { useList as Oe } from "../../list/list_provider/useList.js";
-import { useConfig as Je } from "../../data/config_provider/useConfig.js";
-import { useInput as Ke } from "../input_provider/useInput.js";
-import { useAuth as Ge } from "../../auth/use_auth/useAuth.js";
-import { useFormValidation as He } from "../../forms/use_form_validation/useFormValidation.js";
-import { useResponsive as Qe } from "../../hooks/use_responsive/useResponsive.js";
-import { useAuthRequired as Xe } from "../../hooks/use_auth_required/useAuthRequired.js";
-import { useModal as Ze } from "../../dialog/modal/useModal.js";
-import { useToast as et } from "../../dialog/toast_provider/useToast.js";
-import { TogglePosition as tt } from "../toggle_position/TogglePosition.js";
-import { Avatar as nt } from "../../user/avatar/Avatar.js";
-import { AuthorBox as at } from "../../user/author_box/AuthorBox.js";
-import { TextEditor as st } from "../text_editor/TextEditor.js";
-import { Icon as it } from "../../icons/icon/Icon.js";
-const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ default: S.SideModal }))), yt = ({
-  argumentListId: S,
-  avatarSize: ge = 48,
+import { useDataProvider as Re } from "../../data/data_provider/useDataProvider.js";
+import { useList as je } from "../../list/list_provider/useList.js";
+import { useConfig as ze } from "../../data/config_provider/useConfig.js";
+import { useInput as Oe } from "../input_provider/useInput.js";
+import { useAuth as Je } from "../../auth/use_auth/useAuth.js";
+import { useFormValidation as Ke } from "../../forms/use_form_validation/useFormValidation.js";
+import { useResponsive as Ge } from "../../hooks/use_responsive/useResponsive.js";
+import { useAuthRequired as He } from "../../hooks/use_auth_required/useAuthRequired.js";
+import { useModal as Qe } from "../../dialog/modal/useModal.js";
+import { useToast as Xe } from "../../dialog/toast_provider/useToast.js";
+import { TogglePosition as Ze } from "../toggle_position/TogglePosition.js";
+import { Avatar as et } from "../../user/avatar/Avatar.js";
+import { AuthorBox as tt } from "../../user/author_box/AuthorBox.js";
+import { TextEditor as nt } from "../text_editor/TextEditor.js";
+import { Icon as at } from "../../icons/icon/Icon.js";
+const it = Ye(() => import("../../modal/side_modal/index.js").then((I) => ({ default: I.SideModal }))), Nt = ({
+  argumentListId: I,
+  avatarSize: me = 48,
   disabled: j = !1,
   positions: a = [],
-  disabledPositions: x = [],
-  groupId: b,
-  groupName: he,
+  disabledPositions: S = [],
+  groupId: v,
+  groupName: fe,
   groupType: z,
-  hideSourceAction: pe = !1,
+  hideSourceAction: ge = !1,
   isReply: r = !1,
   onSubmit: O,
-  parentId: F,
-  placeholder: _e,
-  positionId: A,
-  focusOnInit: Me = !1,
-  activeOnInit: P = !1,
+  parentId: y,
+  placeholder: he,
+  positionId: b,
+  focusOnInit: pe = !1,
+  activeOnInit: F = !1,
   userGuideUrl: J,
-  hideUserGuideLink: ve = !1,
-  hideCharCount: be = !1,
-  disableAutoActivate: Ae = !1
+  hideUserGuideLink: _e = !1,
+  hideCharCount: Me = !1,
+  disableAutoActivate: ve = !1
 }) => {
-  const o = Re(), K = ze(), N = Oe(), h = Je(), {
+  const s = $e(), K = Re(), x = je(), h = ze(), {
     focus: G,
-    setFocus: H,
-    setReset: Ce,
-    inputContent: B,
-    setInputContent: Q,
-    setInputRichContent: we
-  } = Ke(), { isLoggedIn: C, currentUser: u } = Ge(), { errors: E, validate: V } = He(), { isMobile: m } = Qe(), Ie = je(), X = We(null), [U, $] = l([]), [q, D] = l(""), [Z, W] = l(null), [d, p] = l(null), [ee, te] = l(null), [ne, ae] = l(!1), [w, se] = l(!1), [_, ie] = l({}), [Se, oe] = l(!1), [f, xe] = De(
+    setFocus: N,
+    setReset: be,
+    inputContent: P,
+    setInputContent: Ae,
+    setInputRichContent: Ce
+  } = Oe(), { isLoggedIn: A, currentUser: u } = Je(), { errors: B, validate: E } = Ke(), { isMobile: m } = Ge(), we = ke(), H = De(null), [V, U] = c([]), [q, D] = c(""), [Q, W] = c(null), [d, p] = c(null), [X, Z] = c(null), [ee, te] = c(!1), [C, ne] = c(!1), [ae, ie] = c({}), [f, Ie] = qe(
     "userSide",
     {}
-  ), [g, Ne] = l(
-    !C && h?.actions?.disableInputForVisitor
-  ), Y = Xe(), { showModal: Te } = Ze(), { toast: k } = et() || {}, re = new URLSearchParams(
-    typeof window < "u" ? window.location.search : Ie.search
+  ), [g, Se] = c(
+    !A && h?.actions?.disableInputForVisitor
+  ), Y = He(), { showModal: xe } = Qe(), { toast: $ } = Xe() || {}, se = new URLSearchParams(
+    typeof window < "u" ? window.location.search : we.search
   );
-  v(() => {
-    Ne(
-      !C && h?.actions?.disableInputForVisitor
+  M(() => {
+    Se(
+      !A && h?.actions?.disableInputForVisitor
     );
-  }, [C, h]);
-  const R = u?.role === "editor" || u?.role === "moderator", ue = u?.moderation_status === "banned";
-  v(() => {
+  }, [A, h]);
+  const k = u?.role === "editor" || u?.role === "moderator", oe = u?.moderation_status === "banned";
+  M(() => {
     let e = null;
-    typeof window < "u" && (e = re.get("positionId")), A && A != a[2]?.id && a?.find((t) => t.id === A) ? p(A) : e && e != a[2]?.id ? p(e) : f && f.groupId == b && f.positionId != a[2]?.id && p(f.positionId);
-  }, [A]), v(() => {
-    P && (oe(!0), T());
-  }, [P]), v(() => {
+    typeof window < "u" && (e = se.get("positionId")), b && b != a[2]?.id && a?.find((t) => t.id === b) ? p(b) : e && e != a[2]?.id ? p(e) : f && f.groupId == v && f.positionId != a[2]?.id && p(f.positionId);
+  }, [b]), M(() => {
+    F && (R(), N(!0));
+  }, [F]), M(() => {
     if (typeof window < "u") {
-      const e = Me || re.get("initArgument");
-      (e === !0 || e === "true") && (oe(!0), T(), Ue());
+      const e = pe || se.get("initArgument");
+      (e === !0 || e === "true") && (N(!0), Ee());
     }
-  }, []), v(() => {
-    G && (T(), H(!1));
-  }, [G]), v(() => {
-    B?.id && (ye(B), H(!0));
-  }, [B]);
-  const ye = (e) => {
-    ie(e), se(!0), $(e.sources), D(e.content), W(e.rich_content), te(e.id), T(), p(e.position?.id), JSON.parse(e.rich_content).hasOwnProperty("root") ? we(e.rich_content) : Q(e.content);
-  }, T = () => {
-    X.current.scrollIntoView(!1);
-  }, de = () => {
-    D(""), W(null), ie({}), te(null), $([]), Ce(!0), Q(null);
-  }, Le = (e) => {
-    p(e), ce(e);
-  }, Fe = () => {
-    Te(
-      /* @__PURE__ */ s(Ye, { fallback: null, children: /* @__PURE__ */ s(
-        ot,
+  }, []), M(() => {
+    G && (re(), N(!1));
+  }, [G]), M(() => {
+    P?.id && (Ne(P), N(!0));
+  }, [P]);
+  const Ne = (e) => {
+    ie(e), ne(!0), U(e.sources), D(e.content), W(e.rich_content), Z(e.id), re(), p(e.position?.id), JSON.parse(e.rich_content).hasOwnProperty("root") ? Ce(e.rich_content) : Ae(e.content);
+  }, re = () => {
+    H.current.scrollIntoView(!1);
+  }, ue = () => {
+    D(""), W(null), ie({}), Z(null), U([]), be(!0);
+  }, Te = (e) => {
+    p(e), le(e);
+  }, Le = () => {
+    xe(
+      /* @__PURE__ */ i(We, { fallback: null, children: /* @__PURE__ */ i(
+        it,
         {
-          modalTitle: o.formatMessage({
+          modalTitle: s.formatMessage({
             id: "modal.side_modal.modal_title",
             defaultMessage: "Choose your side"
           }),
-          onChooseSide: Le,
+          onChooseSide: Te,
           positions: a,
-          title: he,
-          disabledPositions: !r && x,
-          isNeutral: f && f.groupId == b && f.positionId === a[2]?.id
+          title: fe,
+          disabledPositions: !r && S,
+          isNeutral: f && f.groupId == v && f.positionId === a[2]?.id
         }
       ) })
     );
-  }, Pe = () => {
-    C ? ee ? Ve() : !a || a?.length === 0 || !x?.find((e) => e?.id === d) && d || R && r ? ce(r && R && a[0]?.id) : Fe() : Y({ loginAction: "argument" });
-  }, Be = (e, t) => {
-    g ? Y({ loginAction: "argument" }) : (D(e), W(t), V({ content: e }, [{ content: ["url", null] }]));
-  }, Ee = (e) => {
-    $(e);
-  }, le = [
+  }, ye = () => {
+    A ? X ? Be() : !a || a?.length === 0 || !S?.find((e) => e?.id === d) && d || k && r ? le(r && k && a[0]?.id) : Le() : Y({ loginAction: "argument" });
+  }, Fe = (e, t) => {
+    g ? Y({ loginAction: "argument" }) : (D(e), W(t), E({ content: e }, [{ content: ["url", null] }]));
+  }, Pe = (e) => {
+    U(e);
+  }, de = [
     { content: ["length", 3] },
     { content: ["required", null] },
     { content: ["url", null] },
     ...!a || a?.length === 0 ? [] : [{ position_id: ["required", null] }]
-  ], ce = (e) => {
-    const t = e || d, c = {
+  ], le = (e) => {
+    const t = e || d, l = {
       content: q,
-      rich_content: Z,
-      group_id: b,
+      rich_content: Q,
+      group_id: v,
       ...z && { group_type: z },
       ...t && { position_id: t },
-      is_reply: !!F,
-      message_id: F || null,
-      source_ids: U?.map((i) => i.id)
+      is_reply: !!y,
+      message_id: y || null,
+      source_ids: V?.map((o) => o.id)
     };
-    V(c, le) && (t && a && a.map((i) => i.id).includes(t) && xe({
-      groupId: b,
+    E(l, de) && (t && a && a.map((o) => o.id).includes(t) && Ie({
+      groupId: v,
       positionId: t
-    }), de(), K.create("messages", c).then((i) => {
-      if (i.data.success) {
-        if (F)
-          O(i.data.data.resource), k(
-            o.formatMessage({
+    }), ue(), K.create("messages", l).then((o) => {
+      if (o.data.success) {
+        if (y)
+          O(o.data.data.resource), $(
+            s.formatMessage({
               id: "alert.argument_create",
               defaultMessage: "Your contribution has been sent !"
             }),
             {
               type: "success",
-              points: o.formatMessage({
+              points: s.formatMessage({
                 id: "alert.reply_gain",
                 defaultMessage: " "
               })
             }
           );
         else {
-          const y = i.data.data.resource;
-          let L = S;
-          t && !m && (L = `argumentList${y.position.id}`), O?.(
+          const T = o.data.data.resource;
+          let L = I;
+          t && !m && (L = `argumentList${T.position.id}`), O?.(
             q,
-            a.find((qe) => qe.id === t) || null
-          ), N.add(L, [y]), k(
-            o.formatMessage({
+            a.find((Ue) => Ue.id === t) || null
+          ), x.add(L, [T]), $(
+            s.formatMessage({
               id: "alert.argument_create",
               defaultMessage: "Your contribution has been sent !"
             }),
             {
               type: "success",
-              points: o.formatMessage({
+              points: s.formatMessage({
                 id: "alert.argument_create_gain",
                 defaultMessage: "Up to 10 eloquence points"
               }),
@@ -169,49 +169,49 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
         typeof window < "u" && window.dispatchEvent(
           new CustomEvent("logora:user_content:created", {
             detail: {
-              content: i.data.data?.resource
+              content: o.data.data?.resource
             }
           })
         );
       }
     }));
-  }, Ve = () => {
+  }, Be = () => {
     const e = {
       content: q,
-      rich_content: Z,
-      source_ids: U?.map((t) => t.id),
+      rich_content: Q,
+      source_ids: V?.map((t) => t.id),
       ...d && { position_id: d }
     };
-    V(e, le) && K.update("messages", ee, e).then((t) => {
+    E(e, de) && K.update("messages", X, e).then((t) => {
       if (t.data.success) {
-        const c = t.data.data.resource;
-        let i = S;
-        if (_?.is_reply && _?.message_id ? i = `argument_${_.message_id}_reply_list` : d && !m && (i = `argumentList${c.position?.id}`), !_?.is_reply && _?.position?.id != c.position?.id && !m) {
-          const y = `argumentList${_.position.id}`, L = `argumentList${c.position.id}`;
-          N.remove(y, [c]), N.add(L, [c]);
+        const l = t.data.data.resource;
+        let o = I;
+        if (d && !m && (o = `argumentList${l.position?.id}`), ae?.position?.id != l.position?.id && !m && !l.is_reply) {
+          const T = `argumentList${ae.position.id}`, L = `argumentList${l.position.id}`;
+          x.remove(T, [l]), x.add(L, [l]);
         } else
-          N.update(i, [c]);
-        k(o.formatMessage({ id: "alert.argument_modify" }), {
+          x.update(o, [l]);
+        $(s.formatMessage({ id: "alert.argument_modify" }), {
           type: "success"
-        }), de();
+        }), ue();
       }
     });
-  }, Ue = () => {
-    if (!ne) {
-      ae(!0);
+  }, Ee = () => {
+    if (!ee) {
+      te(!0);
       const e = setTimeout(() => {
-        ae(!1);
+        te(!1);
       }, 2e3);
       return () => clearTimeout(e);
     }
-  }, me = () => {
-    g ? Y({ loginAction: "argument" }) : se(!0);
-  }, $e = () => {
-    const e = x.find(
+  }, R = () => {
+    g ? Y({ loginAction: "argument" }) : ne(!0);
+  }, Ve = () => {
+    const e = S.find(
       (t) => t.id === d
     );
     if (e)
-      return o.formatMessage(
+      return s.formatMessage(
         {
           id: "info.argument_side_limit",
           defaultMessage: "You have reached the argument limit (10) for position {position}."
@@ -219,29 +219,29 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
         { position: e.name }
       );
   };
-  return /* @__PURE__ */ M("div", { className: n.inputContainer, children: [
-    j && /* @__PURE__ */ s("div", { className: n.disabledInputMask, children: ue ? o.formatMessage({
+  return /* @__PURE__ */ _("div", { className: n.inputContainer, children: [
+    j && /* @__PURE__ */ i("div", { className: n.disabledInputMask, children: oe ? s.formatMessage({
       id: "input.argument_input.user_banned",
       defaultMessage: "You are banned from the debate space."
-    }) : o.formatMessage({
+    }) : s.formatMessage({
       id: "info.debate_is_inactive",
       defaultMessage: "Debate is closed"
     }) }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ i(
       "div",
       {
-        className: I(n.argumentInput, {
-          [n.flash]: ne,
+        className: w(n.argumentInput, {
+          [n.flash]: ee,
           [n.replyInputContainer]: r
         }),
-        children: /* @__PURE__ */ s("div", { "data-tid": "action_add_argument", ref: X, children: /* @__PURE__ */ M("div", { className: n.argumentInputBox, children: [
-          a.length > 0 && C && (!r || !R) && /* @__PURE__ */ M("div", { className: n.userPosition, children: [
-            /* @__PURE__ */ s("div", { children: o.formatMessage({
+        children: /* @__PURE__ */ i("div", { "data-tid": "action_add_argument", ref: H, children: /* @__PURE__ */ _("div", { className: n.argumentInputBox, children: [
+          a.length > 0 && A && (!r || !k) && /* @__PURE__ */ _("div", { className: n.userPosition, children: [
+            /* @__PURE__ */ i("div", { children: s.formatMessage({
               id: "input.position",
               defaultMessage: "Your position"
             }) }),
-            /* @__PURE__ */ s(
-              tt,
+            /* @__PURE__ */ i(
+              Ze,
               {
                 activeLabel: d === a[0].id ? 0 : d === a[1].id ? 1 : null,
                 firstLabel: a[0],
@@ -250,32 +250,32 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
               }
             )
           ] }),
-          /* @__PURE__ */ M(
+          /* @__PURE__ */ _(
             "div",
             {
-              className: I(n.argumentTextInputBox, {
+              className: w(n.argumentTextInputBox, {
                 [n.argumentTextInputBoxisTablet]: !m,
                 [n.replyEditorRow]: r
               }),
               children: [
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ i(
                   "div",
                   {
-                    className: I(n.argumentAuthorContainer, {
+                    className: w(n.argumentAuthorContainer, {
                       [n.argumentAuthorContainerMobile]: m,
-                      [n.argumentAuthorContainerActivated]: !m && w || r
+                      [n.argumentAuthorContainerActivated]: !m && C || r
                     }),
-                    children: !m && w || r ? /* @__PURE__ */ s(
-                      nt,
+                    children: !m && C || r ? /* @__PURE__ */ i(
+                      et,
                       {
                         avatarUrl: u.image_url,
                         userName: u.full_name,
-                        size: ge
+                        size: me
                       }
-                    ) : /* @__PURE__ */ s(
-                      at,
+                    ) : /* @__PURE__ */ i(
+                      tt,
                       {
-                        fullName: u?.full_name || o.formatMessage({ id: "default_author.full_name" }),
+                        fullName: u?.full_name || s.formatMessage({ id: "default_author.full_name" }),
                         avatarUrl: u?.image_url,
                         points: u?.points || 0,
                         slug: u?.hash_id
@@ -283,60 +283,59 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
                     )
                   }
                 ),
-                /* @__PURE__ */ M(
+                /* @__PURE__ */ _(
                   "div",
                   {
-                    onClick: me,
+                    onClick: R,
                     "data-testid": "argument-input",
-                    className: I(n.textEditorBox, {
+                    className: w(n.textEditorBox, {
                       [n.replyTextEditorBox]: r
                     }),
                     children: [
-                      /* @__PURE__ */ s(
-                        st,
+                      /* @__PURE__ */ i(
+                        nt,
                         {
                           handleChange: (e, t) => {
-                            Be(e, t);
+                            Fe(e, t);
                           },
                           handleSourcesChange: (e) => {
-                            Ee(e);
+                            Pe(e);
                           },
-                          placeholder: _e,
-                          "aria-label": o.formatMessage({
+                          placeholder: he,
+                          "aria-label": s.formatMessage({
                             id: "input.argument_input.aria_label",
                             defaultMessage: "Message input field"
                           }),
-                          onSubmit: Pe,
-                          sources: U,
-                          hideSourceAction: pe || g,
-                          uid: `Argument${b}`,
-                          onActivation: me,
-                          showStylesControls: w,
-                          disabled: j || g || ue,
+                          onSubmit: ye,
+                          sources: V,
+                          hideSourceAction: ge || g,
+                          uid: `Argument${v}`,
+                          onActivation: R,
+                          showStylesControls: C,
+                          disabled: j || g || oe,
                           maxLength: g ? !1 : h?.actions?.argumentMaxLength,
                           disableRichText: h?.actions?.disableRichText || g,
                           shortBar: r,
                           hideSubmit: g,
                           allowedDomains: h?.allowed_sources,
-                          active: P,
-                          autoFocus: Se,
-                          hideCharCount: be,
-                          disableAutoActivate: Ae
+                          active: F,
+                          hideCharCount: Me,
+                          disableAutoActivate: ve
                         }
                       ),
-                      E?.content && /* @__PURE__ */ s("div", { className: n.argumentInputWarning, children: E && Object.values(E).map((e, t) => /* @__PURE__ */ s("div", { children: e }, t)) }),
-                      w && x?.find(
+                      B?.content && /* @__PURE__ */ i("div", { className: n.argumentInputWarning, children: B && Object.values(B).map((e, t) => /* @__PURE__ */ i("div", { children: e }, t)) }),
+                      C && S?.find(
                         (e) => e.id === d
-                      ) && /* @__PURE__ */ M(
+                      ) && /* @__PURE__ */ _(
                         "div",
                         {
-                          className: I(
+                          className: w(
                             n.argumentInputWarning,
                             n.disabledPositionWarning
                           ),
                           children: [
-                            /* @__PURE__ */ s(
-                              it,
+                            /* @__PURE__ */ i(
+                              at,
                               {
                                 name: "announcement",
                                 className: n.warningIcon,
@@ -344,25 +343,25 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
                                 width: 20
                               }
                             ),
-                            /* @__PURE__ */ s("div", { className: n.argumentInputWarningText, children: $e() })
+                            /* @__PURE__ */ i("div", { className: n.argumentInputWarningText, children: Ve() })
                           ]
                         }
                       ),
-                      w && J && !ve && /* @__PURE__ */ s("div", { className: n.guideMessage, children: /* @__PURE__ */ s(
-                        fe,
+                      C && J && !_e && /* @__PURE__ */ i("div", { className: n.guideMessage, children: /* @__PURE__ */ i(
+                        ce,
                         {
                           id: "alert.guide_message",
                           defaultMessage: "Contributions must comply with our {userCharter}.",
                           values: {
-                            userCharter: /* @__PURE__ */ s(
+                            userCharter: /* @__PURE__ */ i(
                               "a",
                               {
                                 className: n.guideMessage,
                                 href: J,
                                 target: "_blank",
                                 rel: "noreferrer",
-                                children: /* @__PURE__ */ s(
-                                  fe,
+                                children: /* @__PURE__ */ i(
+                                  ce,
                                   {
                                     id: "alert.user_charter",
                                     defaultMessage: "user charter"
@@ -385,5 +384,5 @@ const ot = ke(() => import("../../modal/side_modal/index.js").then((S) => ({ def
   ] });
 };
 export {
-  yt as ArgumentInput
+  Nt as ArgumentInput
 };