Skip to content

Commit

Permalink
Merge pull request #15 from tryanzu/feature/flag-post
Browse files Browse the repository at this point in the history 
Feature/flag post
  • Loading branch information
@fernandez14
fernandez14 authored Jun 13, 2019
2 parents 9bbb5d9 + b7c2a47 commit dcb8ae1
Show file tree
Hide file tree
Showing 10 changed files with 2,366 additions and 2,196 deletions.
4,327 changes: 2,173 additions & 2,154 deletions package-lock.json
View file

Large diffs are not rendered by default.

88 changes: 88 additions & 0 deletions src/board/components/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,94 @@ export function ConfirmWithReasonLink(props) {
),
]);
}
export function Flag(props) {
const [open, setOpen] = useState(false);
const [reason, setReason] = useState('');
const reasons = ['spam', 'rude', 'duplicate', 'needs_review', 'other'];
const [content, setContent] = useState('');
const [sending, setSending] = useState(false);
const disabled = !reason.length || (reason === 'other' && !content.length);

async function onSubmit(event) {
event.preventDefault();
if (disabled || sending) {
return;
}
setSending(true);
await Promise.resolve(props.onFlag({ 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 }),
}),
]),
]),
]
),
]);
}

export function BanWithReason(props) {
const [open, setOpen] = useState(false);
Expand Down
63 changes: 42 additions & 21 deletions src/board/components/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ErrorBoundary } from '../errors';
import { MemoizedMarkdown } from '../utils';
import { t } from '../../i18n';
import { ConfirmWithReasonLink } from './actions';
import { Flag } from './actions';

const tags = helpers(h);
const { article, div, a, span, i, h5, ul, li } = tags;
Expand Down Expand Up @@ -90,26 +91,28 @@ function CommentView({ comment, effects, ui, hashtables, ...props }) {
noAvatar: nested,
}),
]),
div('.flex-shrink-0', [
a(
'.v-mid.pointer.reply-to',
{
className: classNames({
dn: isCurrentUsersComment,
dib: !isCurrentUsersComment,
}),
onClick: () =>
effects.replyFocus(
'comment',
noPadding ? comment.reply_to : comment.id
),
},
[
i('.icon-reply-outline'),
span('.pl2.dn.dib-ns', ['Responder']),
]
),
props.auth.user !== false &&
props.auth.user !== false &&
div('.flex-shrink-0', [
a(
'.v-mid.pointer.reply-to',
{
className: classNames({
dn: isCurrentUsersComment,
dib: !isCurrentUsersComment,
}),
onClick: () =>
effects.replyFocus(
'comment',
noPadding
? comment.reply_to
: comment.id
),
},
[
i('.icon-reply-outline'),
span('.pl2.dn.dib-ns', ['Responder']),
]
),
div('.dib.v-mid.dropdown.dropdown-right', [
a(
{
Expand Down Expand Up @@ -159,9 +162,27 @@ function CommentView({ comment, effects, ui, hashtables, ...props }) {
]
)
),
li(
'.menu-item',
{},
h(
Flag,
{
title: t`Reportar un comentario`,
comment,
onFlag: form =>
effects.requestFlag({
...form,
related_id: comment.id,
related_to: 'comment',
}),
},
[i('.mr1.icon-warning-empty'), t`Reportar`]
)
),
]),
]),
]),
]),
]),
div('.comment-body', { className: updating ? 'dn' : '' }, [
h(
Expand Down
2 changes: 1 addition & 1 deletion src/board/components/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ function DesktopVersion({ user, image, state, effects }) {
);
}

function NeedAccountValidation({ effects }) {
export function NeedAccountValidation({ effects }) {
const [sending, setSending] = useState(false);
function onClick() {
if (sending) {
Expand Down
20 changes: 15 additions & 5 deletions src/board/components/post.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Link } from 'react-router-dom';
import { ReplyView } from './reply';
import { adminTools } from '../../acl';
import { ConfirmWithReasonLink } from './actions';
import { Flag } from './actions';

const tags = helpers(h);
const { form, label, select, optgroup, option, input } = tags;
Expand Down Expand Up @@ -136,12 +137,21 @@ function PostActionsView({ state, effects, updating, setUpdating }) {
]),
]);
}

return div([
a('.dib.btn-icon', [
i('.icon-warning-empty'),
span('.ml1.dn.dib-ns', t`Reportar`),
]),
h(
Flag,
{
title: t`Reportar una publicación`,
post,
onFlag: form =>
effects.requestFlag({
...form,
related_id: post.id,
related_to: 'post',
}),
},
[span('.dib.btn-icon.icon-warning-empty', t`Reportar`)]
),
]);
}

Expand Down
24 changes: 24 additions & 0 deletions src/board/fractals/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,29 @@ function postNewAvatar(effects, form) {
}));
}

function requestFlag(effects, form) {
const body = {
related_to: form.related_to,
related_id: form.related_id,
category: form.reason,
content: form.content,
};
return jsonReq(request(`flags`, { method: 'POST', body }))
.then(res => {
if (res.status === 'error') {
throw res.message;
}
toast.success(
t`Tu solicitud ha sido enviada. Alguien la revisará pronto.`
);
return state => state;
})
.catch(message => {
toast.error(t`${message}`);
return state => state;
});
}

function requestUserBan(effects, form) {
const body = {
related_to: 'site',
Expand Down Expand Up @@ -560,6 +583,7 @@ export default provideState({
change,
requestValidationEmail,
requestPasswordReset,
requestFlag,
requestUserBan,
fetchRequest,
fetchGamification,
Expand Down
2 changes: 2 additions & 0 deletions src/i18n.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export const i18n = new Jed({
rude: ['Comportamiento agresivo'],
abuse: ['Abuso del sitio'],
spoofing: ['Suplantación de identidad'],
duplicate: ['Contenido duplicado'],
needs_review: ['Necesita revisión'],
other: ['Otros'],
upvote: ['Me gusta'],
downvote: ['No me gusta'],
Expand Down
10 changes: 5 additions & 5 deletions src/themes/autumn/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ p.md p:last-child {

.avatar {
border-radius: 4px;

& img {
border-radius: inherit;
}
Expand Down Expand Up @@ -85,12 +85,12 @@ p.md p:last-child {

&:hover {
border-color: $primary-color;
text-decoration: none;
text-decoration: none;
}
}

.modal.active .modal-container, .modal:target .modal-container {
padding: 0
padding: 0;
}

.form-input:not(:placeholder-shown):invalid {
Expand Down Expand Up @@ -139,7 +139,7 @@ p.md p:last-child {
@media (--breakpoint-medium){
.feed{
display: flex;
}
}
.post-active .feed{
display: none;
}
Expand All @@ -149,4 +149,4 @@ p.md p:last-child {
.post-active .post{
display: flex;
}
}
}
10 changes: 5 additions & 5 deletions src/themes/autumn/components/_feed.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
& .ago {
font-size: 0.6rem;
}

& article {
padding: 0.5rem 1rem;
border-left: 2px solid transparent;
Expand Down Expand Up @@ -131,7 +131,7 @@
font-size: 0.6rem;
}



& .new-comments {
background: #38C172;
Expand Down Expand Up @@ -168,7 +168,7 @@ a[rel="author"], .author {
&:hover {
text-decoration: none;
}

& > div:first-child {
min-width: 32px;
}
Expand All @@ -185,7 +185,7 @@ a[rel="author"], .author {
& small.ago {
font-size: 14px;
}

& small.ago, & span.ago {
color: $gray-color-dark;
}
Expand Down Expand Up @@ -217,4 +217,4 @@ a[rel="author"], .author {
.feed-sidebar .category-selector #actions {
background-color: transparent;
border-bottom: 0;
}
}
16 changes: 11 additions & 5 deletions src/themes/autumn/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
width: 640px;
max-width: 100%;
margin: 2rem auto;

&:focus {
outline-color: $light-shade;
}
Expand Down Expand Up @@ -51,7 +51,7 @@
&.active {
font-weight: 500;
}
}
}
}

& .flex > div {
Expand All @@ -62,7 +62,7 @@
& .header {
margin: 0 0 1rem;
}

& h2 {
font-size: 1.2rem;
font-weight: 500;
Expand All @@ -87,7 +87,13 @@
padding: 0.8rem;
}

& .form-group:not(:last-child) {
& .form-group:not(:last-child) {
margin-bottom: 0.8rem;
}
}
}

.modal-body-flagpost {
max-height: 50vh;
overflow-y: auto;
position: relative;
}

0 comments on commit dcb8ae1

Please sign in to comment.