Merge pull request #13 from tryanzu/feature/BanUser

Feature/ban user

.jshintrc

@@ -0,0 +1,3 @@
+{
+    "esversion": 6
+}

src/board/components/actions.js

@@ -1,9 +1,12 @@
 import h from 'react-hyperscript';
 import Modal from 'react-modal';
+import classNames from 'classnames';
 import helpers from 'hyperscript-helpers';
 import { Fragment, useState } from 'react';
+import { t } from '../../i18n';
+
 const tags = helpers(h);
-const { div, a, form, input } = tags;
+const { div, a, p, form, input, select, option, textarea } = tags;
 
 export function ConfirmWithReasonLink(props) {
     const [open, setOpen] = useState(false);
@@ -53,7 +56,7 @@ export function ConfirmWithReasonLink(props) {
                                     type: 'text',
                                     placeholder:
                                         props.placeholder ||
-                                        'Escribe el motivo de esta acción...',
+                                        t`Escribe el motivo de esta acción...`,
                                     required: true,
                                     autoFocus: true,
                                 }),
@@ -69,3 +72,93 @@ export function ConfirmWithReasonLink(props) {
             ),
     ]);
 }
+
+export function BanWithReason(props) {
+    const [open, setOpen] = useState(false);
+    const [reason, setReason] = useState('');
+    const [content, setContent] = useState('');
+    const [sending, setSending] = useState(false);
+
+    const reasons = ['spam', 'rude', 'abuse', 'spoofing', 'other'];
+    const disabled = !reason.length || (reason === 'other' && !content.length);
+
+    async function onSubmit(event) {
+        event.preventDefault();
+        if (disabled || sending) {
+            return;
+        }
+        setSending(true);
+        await Promise.resolve(props.onBan({ reason, content }));
+        setSending(false);
+        setOpen(false);
+    }
+
+    return h(Fragment, [
+        a(
+            '.pointer.post-action',
+            {
+                onClick: () => setOpen(true),
+            },
+            props.children || []
+        ),
+        open === true &&
+            h(
+                Modal,
+                {
+                    isOpen: open,
+                    onRequestClose: () => setOpen(false),
+                    ariaHideApp: false,
+                    contentLabel: props.action || 'Feedback',
+                    className: 'feedback-modal',
+                    style: {
+                        overlay: {
+                            zIndex: 301,
+                            backgroundColor: 'rgba(0, 0, 0, 0.30)',
+                        },
+                    },
+                },
+                [
+                    div('.modal-container', { style: { width: '360px' } }, [
+                        form('.modal-body', { onSubmit }, [
+                            props.title && p(props.title),
+                            select(
+                                '.form-select.w-100.mb2',
+                                {
+                                    value: reason,
+                                    onChange: event =>
+                                        setReason(event.target.value),
+                                },
+                                [
+                                    option(
+                                        { value: '' },
+                                        t`Selecciona una opcion`
+                                    ),
+                                ].concat(
+                                    reasons.map(reason =>
+                                        option({ value: reason }, t`${reason}`)
+                                    )
+                                )
+                            ),
+                            reason == 'other' &&
+                                div('.form-group', [
+                                    textarea('.form-input', {
+                                        name: 'description',
+                                        placeholder: t`Escribe el motivo...`,
+                                        value: content,
+                                        onChange: event =>
+                                            setContent(event.target.value),
+                                        rows: 3,
+                                    }),
+                                ]),
+                            input('.btn.btn-primary.btn-block', {
+                                disabled,
+                                type: 'submit',
+                                value: props.action || 'Continuar',
+                                className: classNames({ loading: sending }),
+                            }),
+                        ]),
+                    ]),
+                ]
+            ),
+    ]);
+}

src/board/components/usersModal.js

@@ -5,6 +5,7 @@ import helpers from 'hyperscript-helpers';
 import { t, ago } from '../../i18n';
 import { throttle } from 'lodash';
 import { Link } from 'react-router-dom';
+import { BanWithReason } from './actions';
 
 const tags = helpers(h);
 const { div, img, figure, ul, li, a } = tags;
@@ -24,12 +25,14 @@ export function UsersModal({ state, effects, setOpen }) {
     useEffect(() => {
         effects.fetchUsers();
     }, []);
+
     function onScroll(e) {
         const bottomReached =
             e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight <
             1;
         throttledScroll(bottomReached, effects, users);
     }
+
     return h(
         Modal,
         {
@@ -137,10 +140,22 @@ export function UsersModal({ state, effects, setOpen }) {
                                     li(
                                         '.menu-item',
                                         {},
-                                        a('.pointer.post-action', [
-                                            i('.mr1.icon-edit'),
-                                            t`Banear cuenta`,
-                                        ])
+                                        h(
+                                            BanWithReason,
+                                            {
+                                                title: t`¿Por qué quieres banear este usuario?`,
+                                                user,
+                                                onBan: form =>
+                                                    effects.requestUserBan({
+                                                        ...form,
+                                                        user_id: user.id,
+                                                    }),
+                                            },
+                                            [
+                                                i('.mr1.icon-edit'),
+                                                t`Banear cuenta`,
+                                            ]
+                                        )
                                     ),
                                 ]),
                             ]),

src/board/fractals/auth.js

@@ -379,6 +379,27 @@ function postNewAvatar(effects, form) {
     }));
 }
 
+function requestUserBan(effects, form) {
+    const body = {
+        related_to: 'site',
+        user_id: form.user_id,
+        reason: form.reason,
+        content: form.content,
+    };
+    return jsonReq(request('ban', { method: 'POST', body }))
+        .then(res => {
+            if (res.status === 'error') {
+                throw res.message;
+            }
+            toast.success(t`La solicitud de baneo ha sido procesada.`);
+            return state => state;
+        })
+        .catch(message => {
+            toast.error(t`${message}`);
+            return state => state;
+        });
+}
+
 function updateProfile(effects, form) {
     return jsonReq(
         request(`user/my`, {
@@ -539,6 +560,7 @@ export default provideState({
         change,
         requestValidationEmail,
         requestPasswordReset,
+        requestUserBan,
         fetchRequest,
         fetchGamification,
         postNewAvatar,

src/i18n.js

@@ -58,6 +58,11 @@ export const i18n = new Jed({
             'Not allowed to perform this operation': [
                 'No tienes permiso para realizar esta acción.',
             ],
+            spam: ['Spam'],
+            rude: ['Comportamiento agresivo'],
+            abuse: ['Abuso del sitio'],
+            spoofing: ['Suplantación de identidad'],
+            other: ['Otros'],
             upvote: ['Me gusta'],
             downvote: ['No me gusta'],
             useful: ['Ùtil'],