12885280842

Committed 21 Jan 2025 10:45AM UTC coverage: 30.403% (-0.07%) from 30.469%

Build # 12885280842

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1183 from EcrituresNumeriques/fix/875b

Coverage Stats

397 of 623 branches covered (63.72%)

Branch coverage included in aggregate %.

43 of 245 new or added lines in 5 files covered. (17.55%)

72 existing lines in 1 file now uncovered.

4109 of 14198 relevant lines covered (28.94%)

1.61 hits per line

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

0.0

/front/src/components/ArticleCreate.jsx

import { useToasts } from '@geist-ui/core'
import React, { useState, useCallback, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'

import { useGraphQL } from '../helpers/graphQL'
import { createArticle } from './Articles.graphql'
import Field from './Field.jsx'
import { getTags } from './Tag.graphql'
import Button from './Button.jsx'
import Checkbox from './Checkbox.jsx'

import styles from './articleCreate.module.scss'
import formStyles from './field.module.scss'
import checkboxStyles from './Checkbox.module.scss'
import { fromFormData } from '../helpers/forms.js'

/**
 * @typedef {Object} ArticleCreateProps
 * @property {function=} onSubmit
 * @property {string=} workspaceId
 */

/**
 * @param {ArticleCreateProps} props
 * @returns {React.ReactHTMLElement}
 */
export default function ArticleCreate({ onSubmit, workspaceId = null }) {
  const { t } = useTranslation()
  const { setToast } = useToasts()

  const [tags, setTags] = useState([])
  const runQuery = useGraphQL()
  const workspaces = useSelector((state) => state.activeUser.workspaces)

  useEffect(() => {
    // Self invoking async function
    ;(async () => {
      try {
        const {
          user: { tags },
        } = await runQuery({ query: getTags, variables: {} })
        setTags(tags)
      } catch (err) {
        setToast({
          text: t('article.getTags.error', { errMessage: err }),
          type: 'error',
        })
      }
    })()
  }, [])

  const handleSubmit = useCallback(async (event) => {
    try {
      event.preventDefault()
      const createArticleInput = fromFormData(event.target)
      const { createArticle: createdArticle } = await runQuery({
        query: createArticle,
        variables: { createArticleInput },
      })
      onSubmit(createdArticle)
      setToast({
        text: t('article.create.successNotification'),
        type: 'default',
      })
    } catch (err) {
      setToast({
        text: t('article.create.errorNotification', { errMessage: err }),
        type: 'error',
      })
    }
  }, [])

  return (
    <section>
      <form onSubmit={handleSubmit} className={formStyles.form}>
        <Field
          autoFocus={true}
          label={t('article.createForm.titleField')}
          type="text"
          name="title"
          required={true}
        />

        {tags.length > 0 && (
          <div>
            <span className={formStyles.fieldLabel}>
              {t('article.createForm.tagsField')}
            </span>

            <ul className={checkboxStyles.inlineList}>
              {tags.map((t) => (
                <li key={`selectTag-${t._id}`}>
                  <Checkbox name="tags[]" value={t._id} color={t.color}>
                    {t.name}
                  </Checkbox>
                </li>
              ))}
            </ul>
          </div>
        )}

        {workspaces.length > 0 && (
          <div>
            <span className={formStyles.fieldLabel}>
              {t('workspace.title')}
            </span>

            <ul className={checkboxStyles.inlineList}>
              {workspaces.map((workspace) => (
                <li key={`selectWorkspace-${workspace._id}`}>
                  <Checkbox
                    name="workspaces[]"
                    value={workspace._id}
                    color={workspace.color}
                    defaultChecked={workspaceId === workspace._id}
                  >
                    {workspace.name}
                  </Checkbox>
                </li>
              ))}
            </ul>
          </div>
        )}
        <ul className={styles.actions}>
          <li>
            <Button primary className={styles.button}>
              {t('article.createForm.buttonText')}
            </Button>
          </li>
        </ul>
      </form>
    </section>
  )
}

NEW 1	import { useToasts } from '@geist-ui/core'	×
2	import React, { useState, useCallback, useEffect, useRef } from 'react'
3	import { useTranslation } from 'react-i18next'
4	import { useSelector } from 'react-redux'
5
6	import { useGraphQL } from '../helpers/graphQL'
7	import { createArticle } from './Articles.graphql'
8	import Field from './Field.jsx'
9	import { getTags } from './Tag.graphql'
10	import Button from './Button.jsx'
11	import Checkbox from './Checkbox.jsx'
12
13	import styles from './articleCreate.module.scss'
14	import formStyles from './field.module.scss'
15	import checkboxStyles from './Checkbox.module.scss'
16	import { fromFormData } from '../helpers/forms.js'
17
18	/**
19	* @typedef {Object} ArticleCreateProps
20	* @property {function=} onSubmit
21	* @property {string=} workspaceId
22	*/
23
24	/**
25	* @param {ArticleCreateProps} props
26	* @returns {React.ReactHTMLElement}
27	*/
NEW 28	export default function ArticleCreate({ onSubmit, workspaceId = null }) {	×
29	const { t } = useTranslation()	×
30	const { setToast } = useToasts()	×
31
32	const [tags, setTags] = useState([])	×
33	const runQuery = useGraphQL()	×
NEW 34	const workspaces = useSelector((state) => state.activeUser.workspaces)	×
35
36	useEffect(() => {	×
37	// Self invoking async function
38	;(async () => {	×
39	try {	×
40	const {	×
41	user: { tags },	×
42	} = await runQuery({ query: getTags, variables: {} })	×
43	setTags(tags)	×
44	} catch (err) {	×
45	setToast({	×
46	text: t('article.getTags.error', { errMessage: err }),	×
47	type: 'error',	×
48	})	×
49	}	×
50	})()	×
51	}, [])	×
52
NEW 53	const handleSubmit = useCallback(async (event) => {	×
NEW 54	try {	×
NEW 55	event.preventDefault()	×
NEW 56	const createArticleInput = fromFormData(event.target)	×
NEW 57	const { createArticle: createdArticle } = await runQuery({	×
NEW 58	query: createArticle,	×
NEW 59	variables: { createArticleInput },	×
NEW 60	})	×
NEW 61	onSubmit(createdArticle)	×
NEW 62	setToast({	×
NEW 63	text: t('article.create.successNotification'),	×
NEW 64	type: 'default',	×
NEW 65	})	×
NEW 66	} catch (err) {	×
NEW 67	setToast({	×
NEW 68	text: t('article.create.errorNotification', { errMessage: err }),	×
NEW 69	type: 'error',	×
NEW 70	})	×
NEW 71	}	×
NEW 72	}, [])	×
73
74	return (	×
75	<section>	×
NEW 76	<form onSubmit={handleSubmit} className={formStyles.form}>	×
77	<Field	×
NEW 78	autoFocus={true}	×
79	label={t('article.createForm.titleField')}	×
80	type="text"	×
NEW 81	name="title"	×
NEW 82	required={true}	×
83	/>	×
84
85	{tags.length > 0 && (	×
NEW 86	<div>	×
NEW 87	<span className={formStyles.fieldLabel}>	×
NEW 88	{t('article.createForm.tagsField')}	×
NEW 89	</span>	×
90
NEW 91	<ul className={checkboxStyles.inlineList}>	×
92	{tags.map((t) => (	×
93	<li key={`selectTag-${t._id}`}>	×
NEW 94	<Checkbox name="tags[]" value={t._id} color={t.color}>	×
NEW 95	{t.name}	×
NEW 96	</Checkbox>	×
NEW 97	</li>	×
NEW 98	))}	×
NEW 99	</ul>	×
NEW 100	</div>	×
101	)}
102
NEW 103	{workspaces.length > 0 && (	×
NEW 104	<div>	×
NEW 105	<span className={formStyles.fieldLabel}>	×
NEW 106	{t('workspace.title')}	×
NEW 107	</span>	×
108
NEW 109	<ul className={checkboxStyles.inlineList}>	×
NEW 110	{workspaces.map((workspace) => (	×
NEW 111	<li key={`selectWorkspace-${workspace._id}`}>	×
NEW 112	<Checkbox	×
NEW 113	name="workspaces[]"	×
NEW 114	value={workspace._id}	×
NEW 115	color={workspace.color}	×
NEW 116	defaultChecked={workspaceId === workspace._id}	×
117	>
NEW 118	{workspace.name}	×
NEW 119	</Checkbox>	×
120	</li>	×
121	))}	×
122	</ul>	×
123	</div>	×
124	)}
125	<ul className={styles.actions}>	×
126	<li>	×
NEW 127	<Button primary className={styles.button}>	×
128	{t('article.createForm.buttonText')}	×
129	</Button>	×
130	</li>	×
131	</ul>	×
132	</form>	×
133	</section>	×
134	)
135	}	×

EcrituresNumeriques / stylo / 12885280842

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