12937903925

Committed 23 Jan 2025 08:56PM UTC coverage: 5.504% (-1.4%) from 6.953%

Build # 12937903925

Build Type

push

github

Committed by

web-flow

Commit Message

chore: Migrate to tailwind (#1355)

Run Details

43 of 1647 branches covered (2.61%)

Branch coverage included in aggregate %.

6 of 306 new or added lines in 94 files covered. (1.96%)

94 existing lines in 39 files now uncovered.

192 of 2623 relevant lines covered (7.32%)

0.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/app/components/Moderation/Moderation.jsx

import React from 'react'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { Report } from 'styled-icons/octicons'

import { toast } from '@/hooks/use-toast'

import { MIN_REPUTATION_MODERATION } from '../../constants'
import { commentURL } from '../../lib/cf_routes'
import { fetchRandomModeration, postModerationFeedback } from '../../state/moderation/effects'
import { Button } from '../ui/button'
import UserAppellation from '../Users/UserAppellation'
import UserAction from '../UsersActions/UserAction'
import { LoadingFrame } from '../Utils/LoadingFrame'
import Message from '../Utils/Message'
import { withReputationGuard } from '../Utils/ReputationGuard'
import { ModerationForm } from './ModerationForm'

@connect(
  (state) => ({
    isLoading: state.Moderation.isLoading,
    error: state.Moderation.error,
    entry: state.Moderation.entry,
  }),
  { fetchRandomModeration, postModerationFeedback },
)
@withTranslation('moderation')
@withReputationGuard(MIN_REPUTATION_MODERATION)
export default class Moderation extends React.PureComponent {
  componentDidMount() {
    this.props.fetchRandomModeration()
  }

  postFeedback(values) {
    this.props
      .postModerationFeedback(values)
      .then(() => {
        toast({
          variant: 'success',
          title: 'Flag submitted',
          description: 'Thank you for your feedback!',
        })
      })
      .then(() => this.props.fetchRandomModeration())
  }

  render() {
    const { entry, t } = this.props

    if (this.props.isLoading) {
      return <LoadingFrame />
    }

    return (
      <main className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold text-center mb-6">
          {t('title')} <Report className="inline w-8 h-8" />
        </h1>
        <div className="text-center mb-8">
          <p className="mb-2">{t('helpText1')}</p>
          <p className="mb-4">{t('helpText2')}</p>
          <Link className="font-bold hover:underline" to="/help/moderation">
            {t('learnMore')}
          </Link>
        </div>
        {!entry && <Message className="text-center mt-8">{t('emptyModeration')}</Message>}
        {entry && (
          <div>
            {this.renderAction(entry.action)}
            <hr className="my-6" />
            {entry.flags.map(({ source_user, reason }) => (
              <div key={source_user.id} className="text-center mb-2">
                <UserAppellation user={source_user} /> {t('flaggedFor', { reason })}
              </div>
            ))}
          </div>
        )}
      </main>
    )
  }

  renderAction(action) {
    return (
      <div className="bg-white rounded-lg shadow-md p-6">
        <UserAction action={action} defaultExpanded />
        <div className="my-4">
          <div className="bg-gray-50 rounded p-4 text-center">
            <Button variant="outline">
              <Link
                target="_blank"
                to={commentURL(action.videoHashId, action.statementId, action.commentId)}
                className="font-bold hover:underline"
              >
                {this.props.t('seeContext')}
              </Link>
            </Button>
          </div>
        </div>
        <hr className="my-4" />
        <ModerationForm
          action={action}
          initialValues={{ action_id: action.id }}
          onSubmit={(values) => this.postFeedback(values)}
        />
      </div>
    )
  }
}

1	import React from 'react'
2	import { withTranslation } from 'react-i18next'
3	import { connect } from 'react-redux'
4	import { Link } from 'react-router-dom'
5	import { Report } from 'styled-icons/octicons'
6
7	import { toast } from '@/hooks/use-toast'
8
9	import { MIN_REPUTATION_MODERATION } from '../../constants'
10	import { commentURL } from '../../lib/cf_routes'
11	import { fetchRandomModeration, postModerationFeedback } from '../../state/moderation/effects'
12	import { Button } from '../ui/button'
13	import UserAppellation from '../Users/UserAppellation'
14	import UserAction from '../UsersActions/UserAction'
15	import { LoadingFrame } from '../Utils/LoadingFrame'
16	import Message from '../Utils/Message'
17	import { withReputationGuard } from '../Utils/ReputationGuard'
18	import { ModerationForm } from './ModerationForm'
19
20	@connect(
21	(state) => ({	×
22	isLoading: state.Moderation.isLoading,
23	error: state.Moderation.error,
24	entry: state.Moderation.entry,
25	}),
26	{ fetchRandomModeration, postModerationFeedback },
27	)
28	@withTranslation('moderation')
29	@withReputationGuard(MIN_REPUTATION_MODERATION)
30	export default class Moderation extends React.PureComponent {
31	componentDidMount() {
32	this.props.fetchRandomModeration()	×
33	}
34
35	postFeedback(values) {
NEW 36	this.props	×
37	.postModerationFeedback(values)
38	.then(() => {
NEW 39	toast({	×
40	variant: 'success',
41	title: 'Flag submitted',
42	description: 'Thank you for your feedback!',
43	})
44	})
NEW 45	.then(() => this.props.fetchRandomModeration())	×
46	}
47
48	render() {
49	const { entry, t } = this.props	×
50
51	if (this.props.isLoading) {	×
52	return <LoadingFrame />	×
53	}
54
55	return (	×
56	<main className="container mx-auto px-4 py-8">
57	<h1 className="text-4xl font-bold text-center mb-6">
58	{t('title')} <Report className="inline w-8 h-8" />
59	</h1>
60	<div className="text-center mb-8">
61	<p className="mb-2">{t('helpText1')}</p>
62	<p className="mb-4">{t('helpText2')}</p>
63	<Link className="font-bold hover:underline" to="/help/moderation">
64	{t('learnMore')}
65	</Link>
66	</div>
67	{!entry && <Message className="text-center mt-8">{t('emptyModeration')}</Message>}	×
68	{entry && (	×
69	<div>
70	{this.renderAction(entry.action)}
71	<hr className="my-6" />
72	{entry.flags.map(({ source_user, reason }) => (
NEW 73	<div key={source_user.id} className="text-center mb-2">	×
74	<UserAppellation user={source_user} /> {t('flaggedFor', { reason })}
75	</div>
76	))}
77	</div>
78	)}
79	</main>
80	)
81	}
82
83	renderAction(action) {
84	return (	×
85	<div className="bg-white rounded-lg shadow-md p-6">
86	<UserAction action={action} defaultExpanded />
87	<div className="my-4">
88	<div className="bg-gray-50 rounded p-4 text-center">
89	<Button variant="outline">
90	<Link
91	target="_blank"
92	to={commentURL(action.videoHashId, action.statementId, action.commentId)}
93	className="font-bold hover:underline"
94	>
95	{this.props.t('seeContext')}
96	</Link>
97	</Button>
98	</div>
99	</div>
100	<hr className="my-4" />
101	<ModerationForm
102	action={action}
103	initialValues={{ action_id: action.id }}
104	onSubmit={(values) => this.postFeedback(values)}	×
105	/>
106	</div>
107	)
108	}
109	}

CaptainFact / captain-fact-frontend / 12937903925

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous