10874372455

Committed 15 Sep 2024 09:17PM UTC coverage: 6.986% (-0.06%) from 7.044%

Build # 10874372455

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1307 from CaptainFact/staging

Release

Run Details

58 of 1808 branches covered (3.21%)

Branch coverage included in aggregate %.

0 of 21 new or added lines in 4 files covered. (0.0%)

2 existing lines in 2 files now uncovered.

269 of 2873 relevant lines covered (9.36%)

0.27 hits per line

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

0.0

/app/components/Statements/StatementContainer.jsx

import { Check, X } from '@styled-icons/feather'
import classNames from 'classnames'
import React from 'react'
import { withNamespaces } from 'react-i18next'
import { connect } from 'react-redux'

import { MIN_REPUTATION_REMOVE_STATEMENT, MIN_REPUTATION_UPDATE_STATEMENT } from '../../constants'
import { handleFormEffectResponse } from '../../lib/handle_effect_response'
import { deleteStatement, updateStatement } from '../../state/video_debate/statements/effects'
import * as statementSelectors from '../../state/video_debate/statements/selectors'
import CommentForm from '../Comments/CommentForm'
import { withLoggedInUser } from '../LoggedInUser/UserProvider'
import ModalConfirmDelete from '../Modal/ModalConfirmDelete'
import UnstyledButton from '../StyledUtils/UnstyledButton'
import ReputationGuardTooltip from '../Utils/ReputationGuardTooltip'
import Statement from './Statement'
import StatementComments from './StatementComments'
import { StatementForm } from './StatementForm'

@connect(
  (state, props) => ({
    offset: state.VideoDebate.video.offset,
    speaker: statementSelectors.getStatementSpeaker(state, props),
    isFocused: statementSelectors.isStatementFocused(state, props),
    scrollTo: state.VideoDebate.statements.scrollTo,
    autoscrollEnabled: state.UserPreferences.enableAutoscroll,
    formEnabled: state.VideoDebate.statements.formsCount > 0,
  }),
  { updateStatement, deleteStatement },
)
@withLoggedInUser
@withNamespaces('videoDebate')
export default class StatementContainer extends React.PureComponent {
  state = { isDeleting: false, isEditing: false, replyTo: null, editDraftAction: null }

  componentDidUpdate(prevProps) {
    if (this.shouldScroll(this.props, prevProps)) {
      this.smoothScrollTo()
    }
  }

  setReplyToComment = (replyTo) => {
    this.setState({ replyTo })
  }

  render() {
    const { isDeleting, isEditing, replyTo } = this.state
    const { statement, isFocused, speaker, isAuthenticated, loggedInUser, t } = this.props

    return (
      <div
        className={classNames('statement-container', { 'is-focused': isFocused })}
        ref="container"
      >
        <div className="card statement">
          {this.renderStatementOrEditForm(speaker, statement)}
          {statement.is_draft && !isEditing ? (
            <footer className="card-footer">
              <ReputationGuardTooltip requiredRep={MIN_REPUTATION_UPDATE_STATEMENT} asChild>
                {({ hasReputation }) => (
                  <UnstyledButton
                    className={classNames('card-footer-item', 'submit-button', {
                      'is-loading': this.props.submitting,
                    })}
                    p=".75rem"
                    disabled={Boolean(!hasReputation || this.state.editDraftAction)}
                    onClick={async () => {
                      this.setState({ editDraftAction: 'save' })
                      try {
                        await this.props.updateStatement(statement.set('is_draft', false))
                      } finally {
                        this.setState({ editDraftAction: null })
                      }
                    }}
                  >
                    <Check size={16} className="mr-1" />
                    {t('statement.publish')}
                  </UnstyledButton>
                )}
              </ReputationGuardTooltip>
              <ReputationGuardTooltip requiredRep={MIN_REPUTATION_REMOVE_STATEMENT} asChild>
                {({ hasReputation }) => (
                  <UnstyledButton
                    type="button"
                    p=".75rem"
                    className="card-footer-item"
                    disabled={Boolean(!hasReputation || this.state.editDraftAction)}
                    onClick={async () => {
                      this.setState({ editDraftAction: 'discard' })
                      try {
                        await this.props.deleteStatement({ id: statement.id })
                      } finally {
                        this.setState({ editDraftAction: null })
                      }
                    }}
                  >
                    <X size={16} className="mr-1" />
                    {t('statement.discard')}
                  </UnstyledButton>
                )}
              </ReputationGuardTooltip>
            </footer>
          ) : (
            <React.Fragment>
              <StatementComments
                statement={statement}
                speaker={speaker}
                setReplyToComment={this.setReplyToComment}
              />
              {!statement.is_draft && (
                <CommentForm
                  statementID={statement.id}
                  replyTo={replyTo}
                  setReplyToComment={this.setReplyToComment}
                  user={isAuthenticated ? loggedInUser : null}
                />
              )}
            </React.Fragment>
          )}
          {isDeleting && (
            <ModalConfirmDelete
              title={t('statement.remove')}
              className="is-small"
              isAbsolute
              isRemove
              message={t('statement.confirmRemove')}
              handleAbort={() => this.setState({ isDeleting: false })}
              handleConfirm={() => this.props.deleteStatement({ id: statement.id })}
            />
          )}
        </div>
      </div>
    )
  }

  renderStatementOrEditForm(speaker, statement) {
    return this.state.isEditing ? (
      <StatementForm
        form={`StatementForm-${statement.id}`}
        initialValues={statement.toJS()}
        offset={this.props.offset}
        isBundled
        handleAbort={() => this.setState({ isEditing: false })}
        handleConfirm={(s) =>
          this.props.updateStatement(s).then(
            handleFormEffectResponse({
              onSuccess: (response) => {
                this.setState({ isEditing: false })
                return response
              },
            }),
          )
        }
      />
    ) : (
      <Statement
        statement={statement}
        speaker={speaker}
        handleEdit={() => this.setState({ isEditing: true })}
        handleDelete={() => this.setState({ isDeleting: true })}
        offset={this.props.offset}
      />
    )
  }

  // ---- Autoscroll ----

  shouldScroll = (props, prevProps) => {
    // Return if not ready or if this is not the scroll target and not focused
    if (!this.isAutoScrollReady(props) || !this.isTarget(props)) {
      return false
    }

    // Get previous state
    const wasEnabled = prevProps.autoscrollEnabled
    const wasTarget = this.isTarget(prevProps)
    const wasReady = this.isAutoScrollReady(prevProps)
    const wasActive = wasTarget && wasReady && wasEnabled
    const wasForced = this.isAutoScrollForced(props)

    // Scroll if enabled and wasn't target, wasn't enabled or wasn't ready
    if (props.autoscrollEnabled && !wasActive) {
      return true
    }

    // Only override autoscrollEnabled when we're forced by a scrollTo
    if (!props.autoscrollEnabled && (!wasActive || !wasForced) && this.isAutoScrollForced(props)) {
      return true
    }

    return false
  }

  isAutoScrollReady = (props) => !props.commentsLoading && !props.formEnabled

  isScrollToTarget = (props) => {
    return props.scrollTo && props.scrollTo.id === props.statement.id
  }

  isAutoScrollForced = (props) => {
    return this.isScrollToTarget(props) && props.scrollTo.__forceAutoScroll
  }

  isTarget = (props) => this.isScrollToTarget(props) || props.isFocused

  smoothScrollTo = () => {
    return this.refs.container.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    })
  }
}

1	import { Check, X } from '@styled-icons/feather'
2	import classNames from 'classnames'
3	import React from 'react'
4	import { withNamespaces } from 'react-i18next'
5	import { connect } from 'react-redux'
6
7	import { MIN_REPUTATION_REMOVE_STATEMENT, MIN_REPUTATION_UPDATE_STATEMENT } from '../../constants'
8	import { handleFormEffectResponse } from '../../lib/handle_effect_response'
9	import { deleteStatement, updateStatement } from '../../state/video_debate/statements/effects'
10	import * as statementSelectors from '../../state/video_debate/statements/selectors'
11	import CommentForm from '../Comments/CommentForm'
12	import { withLoggedInUser } from '../LoggedInUser/UserProvider'
13	import ModalConfirmDelete from '../Modal/ModalConfirmDelete'
14	import UnstyledButton from '../StyledUtils/UnstyledButton'
15	import ReputationGuardTooltip from '../Utils/ReputationGuardTooltip'
16	import Statement from './Statement'
17	import StatementComments from './StatementComments'
18	import { StatementForm } from './StatementForm'
19
20	@connect(
21	(state, props) => ({	×
22	offset: state.VideoDebate.video.offset,
23	speaker: statementSelectors.getStatementSpeaker(state, props),
24	isFocused: statementSelectors.isStatementFocused(state, props),
25	scrollTo: state.VideoDebate.statements.scrollTo,
26	autoscrollEnabled: state.UserPreferences.enableAutoscroll,
27	formEnabled: state.VideoDebate.statements.formsCount > 0,
28	}),
29	{ updateStatement, deleteStatement },
30	)
31	@withLoggedInUser
32	@withNamespaces('videoDebate')
33	export default class StatementContainer extends React.PureComponent {
NEW 34	state = { isDeleting: false, isEditing: false, replyTo: null, editDraftAction: null }	×
35
36	componentDidUpdate(prevProps) {
37	if (this.shouldScroll(this.props, prevProps)) {	×
38	this.smoothScrollTo()	×
39	}
40	}
41
42	setReplyToComment = (replyTo) => {	×
43	this.setState({ replyTo })	×
44	}
45
46	render() {
NEW 47	const { isDeleting, isEditing, replyTo } = this.state	×
48	const { statement, isFocused, speaker, isAuthenticated, loggedInUser, t } = this.props	×
49
50	return (	×
51	<div
52	className={classNames('statement-container', { 'is-focused': isFocused })}
53	ref="container"
54	>
55	<div className="card statement">
56	{this.renderStatementOrEditForm(speaker, statement)}
57	{statement.is_draft && !isEditing ? (	×
58	<footer className="card-footer">
59	<ReputationGuardTooltip requiredRep={MIN_REPUTATION_UPDATE_STATEMENT} asChild>
60	{({ hasReputation }) => (
NEW 61	<UnstyledButton	×
62	className={classNames('card-footer-item', 'submit-button', {
63	'is-loading': this.props.submitting,
64	})}
65	p=".75rem"
66	disabled={Boolean(!hasReputation \|\| this.state.editDraftAction)}	×
67	onClick={async () => {
NEW 68	this.setState({ editDraftAction: 'save' })	×
NEW 69	try {	×
NEW 70	await this.props.updateStatement(statement.set('is_draft', false))	×
71	} finally {
NEW 72	this.setState({ editDraftAction: null })	×
73	}
74	}}
75	>
76	<Check size={16} className="mr-1" />
77	{t('statement.publish')}
78	</UnstyledButton>
79	)}
80	</ReputationGuardTooltip>
81	<ReputationGuardTooltip requiredRep={MIN_REPUTATION_REMOVE_STATEMENT} asChild>
82	{({ hasReputation }) => (
NEW 83	<UnstyledButton	×
84	type="button"
85	p=".75rem"
86	className="card-footer-item"
87	disabled={Boolean(!hasReputation \|\| this.state.editDraftAction)}	×
88	onClick={async () => {
NEW 89	this.setState({ editDraftAction: 'discard' })	×
NEW 90	try {	×
NEW 91	await this.props.deleteStatement({ id: statement.id })	×
92	} finally {
NEW 93	this.setState({ editDraftAction: null })	×
94	}
95	}}
96	>
97	<X size={16} className="mr-1" />
98	{t('statement.discard')}
99	</UnstyledButton>
100	)}
101	</ReputationGuardTooltip>
102	</footer>
103	) : (
104	<React.Fragment>
105	<StatementComments
106	statement={statement}
107	speaker={speaker}
108	setReplyToComment={this.setReplyToComment}
109	/>
110	{!statement.is_draft && (	×
111	<CommentForm
112	statementID={statement.id}
113	replyTo={replyTo}
114	setReplyToComment={this.setReplyToComment}
115	user={isAuthenticated ? loggedInUser : null}	×
116	/>
117	)}
118	</React.Fragment>
119	)}
120	{isDeleting && (	×
121	<ModalConfirmDelete
122	title={t('statement.remove')}
123	className="is-small"
124	isAbsolute
125	isRemove
126	message={t('statement.confirmRemove')}
127	handleAbort={() => this.setState({ isDeleting: false })}	×
128	handleConfirm={() => this.props.deleteStatement({ id: statement.id })}	×
129	/>
130	)}
131	</div>
132	</div>
133	)
134	}
135
136	renderStatementOrEditForm(speaker, statement) {
137	return this.state.isEditing ? (	×
138	<StatementForm
139	form={`StatementForm-${statement.id}`}
140	initialValues={statement.toJS()}
141	offset={this.props.offset}
142	isBundled
143	handleAbort={() => this.setState({ isEditing: false })}	×
144	handleConfirm={(s) =>
145	this.props.updateStatement(s).then(	×
146	handleFormEffectResponse({
147	onSuccess: (response) => {
148	this.setState({ isEditing: false })	×
149	return response	×
150	},
151	}),
152	)
153	}
154	/>
155	) : (
156	<Statement
157	statement={statement}
158	speaker={speaker}
159	handleEdit={() => this.setState({ isEditing: true })}	×
160	handleDelete={() => this.setState({ isDeleting: true })}	×
161	offset={this.props.offset}
162	/>
163	)
164	}
165
166	// ---- Autoscroll ----
167
168	shouldScroll = (props, prevProps) => {	×
169	// Return if not ready or if this is not the scroll target and not focused
170	if (!this.isAutoScrollReady(props) \|\| !this.isTarget(props)) {	×
171	return false	×
172	}
173
174	// Get previous state
175	const wasEnabled = prevProps.autoscrollEnabled	×
176	const wasTarget = this.isTarget(prevProps)	×
177	const wasReady = this.isAutoScrollReady(prevProps)	×
178	const wasActive = wasTarget && wasReady && wasEnabled	×
179	const wasForced = this.isAutoScrollForced(props)	×
180
181	// Scroll if enabled and wasn't target, wasn't enabled or wasn't ready
182	if (props.autoscrollEnabled && !wasActive) {	×
183	return true	×
184	}
185
186	// Only override autoscrollEnabled when we're forced by a scrollTo
187	if (!props.autoscrollEnabled && (!wasActive \|\| !wasForced) && this.isAutoScrollForced(props)) {	×
188	return true	×
189	}
190
191	return false	×
192	}
193
194	isAutoScrollReady = (props) => !props.commentsLoading && !props.formEnabled	×
195
196	isScrollToTarget = (props) => {	×
197	return props.scrollTo && props.scrollTo.id === props.statement.id	×
198	}
199
200	isAutoScrollForced = (props) => {	×
201	return this.isScrollToTarget(props) && props.scrollTo.__forceAutoScroll	×
202	}
203
204	isTarget = (props) => this.isScrollToTarget(props) \|\| props.isFocused	×
205
206	smoothScrollTo = () => {	×
207	return this.refs.container.scrollIntoView({	×
208	behavior: 'smooth',
209	block: 'center',
210	})
211	}
212	}

CaptainFact / captain-fact-frontend / 10874372455

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