17798235160

Committed 17 Sep 2025 12:52PM UTC coverage: 24.961%. First build

Build # 17798235160

Build Type

Pull #1669

github

Committed by

web-flow

Commit Message

Merge 2bcdb0b76 into a4bd76139

Pull Request Pull Request #1669: Remplace Geist toast par react-toastify

Coverage Stats

326 of 498 branches covered (65.46%)

Branch coverage included in aggregate %.

18 of 152 new or added lines in 19 files covered. (11.84%)

2546 of 11008 relevant lines covered (23.13%)

2.78 hits per line

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

0.0

/front/src/components/ArticleCreate.jsx

import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { toast } from 'react-toastify'

import { useGraphQLClient } from '../helpers/graphQL'

import { fromFormData } from '../helpers/forms.js'
import { useUserTags } from '../hooks/user.js'
import { useWorkspaces } from '../hooks/workspace.js'

import Checkbox from './Checkbox.jsx'
import Field from './Field.jsx'
import Alert from './molecules/Alert.jsx'
import FormActions from './molecules/FormActions.jsx'
import Loading from './molecules/Loading.jsx'

import { createArticle } from './Articles.graphql'

import checkboxStyles from './Checkbox.module.scss'
import formStyles from './field.module.scss'

/**
 * @typedef {object} ArticleCreateProps
 * @property {Function=} onSubmit
 * @property {string=} workspaceId
 */

/**
 * @param {object} props
 * @param {Function} props.onSubmit
 * @param {Function} props.onCancel
 * @param {string|null} props.workspaceId
 * @returns {React.ReactHTMLElement}
 */
export default function ArticleCreate({
  onSubmit,
  onCancel,
  workspaceId = null,
}) {
  const { t } = useTranslation()

  const { query } = useGraphQLClient()

  const handleSubmit = useCallback(async (event) => {
    event.preventDefault()
    try {
      const createArticleInput = fromFormData(event.target)
      const { createArticle: createdArticle } = await query({
        query: createArticle,
        variables: { createArticleInput },
      })
      onSubmit(createdArticle)
      toast(t('article.create.successNotification'), {
        type: 'info',
      })
    } catch (err) {
      toast(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}
        />

        <TagsField />
        <WorkspacesField workspaceId={workspaceId} />

        <FormActions
          onCancel={onCancel}
          submitButton={{
            text: t('article.createForm.buttonText'),
            title: t('article.createForm.buttonText'),
          }}
        />
      </form>
    </section>
  )
}

function WorkspacesField({ workspaceId }) {
  const { t } = useTranslation()
  const { workspaces, error, isLoading } = useWorkspaces()
  if (error) {
    return <Alert message={error.message} />
  }
  if (isLoading) {
    return <Loading />
  }

  if (workspaces.length > 0) {
    return (
      <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>
    )
  }

  return <></>
}

function TagsField() {
  const { t } = useTranslation()
  const { tags, error, isLoading } = useUserTags()
  if (error) {
    return <Alert message={error.message} />
  }
  if (isLoading) {
    return <Loading />
  }

  if (tags.length > 0) {
    return (
      <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>
    )
  }

  return <></>
}

1	import React, { useCallback } from 'react'	×
2	import { useTranslation } from 'react-i18next'	×
NEW 3	import { toast } from 'react-toastify'	×
4
5	import { useGraphQLClient } from '../helpers/graphQL'	×
6
7	import { fromFormData } from '../helpers/forms.js'	×
8	import { useUserTags } from '../hooks/user.js'	×
9	import { useWorkspaces } from '../hooks/workspace.js'	×
10
11	import Checkbox from './Checkbox.jsx'	×
12	import Field from './Field.jsx'	×
13	import Alert from './molecules/Alert.jsx'	×
14	import FormActions from './molecules/FormActions.jsx'	×
15	import Loading from './molecules/Loading.jsx'	×
16
17	import { createArticle } from './Articles.graphql'	×
18
19	import checkboxStyles from './Checkbox.module.scss'	×
20	import formStyles from './field.module.scss'	×
21
22	/**
23	* @typedef {object} ArticleCreateProps
24	* @property {Function=} onSubmit
25	* @property {string=} workspaceId
26	*/
27
28	/**
29	* @param {object} props
30	* @param {Function} props.onSubmit
31	* @param {Function} props.onCancel
32	* @param {string\|null} props.workspaceId
33	* @returns {React.ReactHTMLElement}
34	*/
35	export default function ArticleCreate({	×
36	onSubmit,	×
37	onCancel,	×
38	workspaceId = null,	×
39	}) {	×
40	const { t } = useTranslation()	×
41
42	const { query } = useGraphQLClient()	×
43
44	const handleSubmit = useCallback(async (event) => {	×
45	event.preventDefault()	×
46	try {	×
47	const createArticleInput = fromFormData(event.target)	×
48	const { createArticle: createdArticle } = await query({	×
49	query: createArticle,	×
50	variables: { createArticleInput },	×
51	})	×
52	onSubmit(createdArticle)	×
NEW 53	toast(t('article.create.successNotification'), {	×
NEW 54	type: 'info',	×
55	})	×
56	} catch (err) {	×
NEW 57	toast(t('article.create.errorNotification', { errMessage: err }), {	×
58	type: 'error',	×
59	})	×
60	}	×
61	}, [])	×
62
63	return (	×
64	<section>	×
65	<form onSubmit={handleSubmit} className={formStyles.form}>	×
66	<Field	×
67	autoFocus={true}	×
68	label={t('article.createForm.titleField')}	×
69	type="text"	×
70	name="title"	×
71	required={true}	×
72	/>	×
73
74	<TagsField />	×
75	<WorkspacesField workspaceId={workspaceId} />	×
76
77	<FormActions	×
78	onCancel={onCancel}	×
79	submitButton={{	×
80	text: t('article.createForm.buttonText'),	×
81	title: t('article.createForm.buttonText'),	×
82	}}	×
83	/>	×
84	</form>	×
85	</section>	×
86	)
87	}	×
88
89	function WorkspacesField({ workspaceId }) {	×
90	const { t } = useTranslation()	×
91	const { workspaces, error, isLoading } = useWorkspaces()	×
92	if (error) {	×
93	return <Alert message={error.message} />	×
94	}	×
95	if (isLoading) {	×
96	return <Loading />	×
97	}	×
98
99	if (workspaces.length > 0) {	×
100	return (	×
101	<div>	×
102	<span className={formStyles.fieldLabel}>{t('workspace.title')}</span>	×
103
104	<ul className={checkboxStyles.inlineList}>	×
105	{workspaces.map((workspace) => (	×
106	<li key={`selectWorkspace-${workspace._id}`}>	×
107	<Checkbox	×
108	name="workspaces[]"	×
109	value={workspace._id}	×
110	color={workspace.color}	×
111	defaultChecked={workspaceId === workspace._id}	×
112	>
113	{workspace.name}	×
114	</Checkbox>	×
115	</li>	×
116	))}	×
117	</ul>	×
118	</div>	×
119	)
120	}	×
121
122	return <></>	×
123	}	×
124
125	function TagsField() {	×
126	const { t } = useTranslation()	×
127	const { tags, error, isLoading } = useUserTags()	×
128	if (error) {	×
129	return <Alert message={error.message} />	×
130	}	×
131	if (isLoading) {	×
132	return <Loading />	×
133	}	×
134
135	if (tags.length > 0) {	×
136	return (	×
137	<div>	×
138	<span className={formStyles.fieldLabel}>	×
139	{t('article.createForm.tagsField')}	×
140	</span>	×
141
142	<ul className={checkboxStyles.inlineList}>	×
143	{tags.map((t) => (	×
144	<li key={`selectTag-${t._id}`}>	×
145	<Checkbox name="tags[]" value={t._id} color={t.color}>	×
146	{t.name}	×
147	</Checkbox>	×
148	</li>	×
149	))}	×
150	</ul>	×
151	</div>	×
152	)
153	}	×
154
155	return <></>	×
156	}	×

EcrituresNumeriques / stylo / 17798235160

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