@logora/debate 0.4.42 → 0.4.44

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

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