13987938500

Committed 21 Mar 2025 08:48AM UTC coverage: 31.659% (+0.6%) from 31.087%

Build # 13987938500

Build Type

push

github

Committed by

web-flow

Commit Message

chore: remplace les modales Geist (#1358)

Remplace aussi <Loading> par notre composant.

Coverage Stats

464 of 686 branches covered (67.64%)

Branch coverage included in aggregate %.

42 of 569 new or added lines in 36 files covered. (7.38%)

27 existing lines in 18 files now uncovered.

4396 of 14665 relevant lines covered (29.98%)

2.26 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 } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'

import { useGraphQLClient } from '../helpers/graphQL'
import { createArticle } from './Articles.graphql'
import Field from './Field.jsx'
import FormActions from './molecules/FormActions.jsx'
import { getTags } from './Tag.graphql'
import Checkbox from './Checkbox.jsx'

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 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 { setToast } = useToasts()

  const [tags, setTags] = useState([])
  const { query } = useGraphQLClient()
  const workspaces = useSelector((state) => state.activeUser.workspaces)

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

  const handleSubmit = useCallback(async (event) => {
    event.preventDefault()
    try {
      const createArticleInput = fromFormData(event.target)
      const { createArticle: createdArticle } = await query({
        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>
        )}
        <FormActions
          onCancel={onCancel}
          submitButton={{
            text: t('article.createForm.buttonText'),
            title: t('article.createForm.buttonText'),
          }}
        />
      </form>
    </section>
  )
}

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

EcrituresNumeriques / stylo / 13987938500

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