12925854411

Committed 23 Jan 2025 09:11AM UTC coverage: 25.831% (-4.7%) from 30.523%

Build # 12925854411

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1192 from EcrituresNumeriques/feat/vite6

Run Details

322 of 518 branches covered (62.16%)

Branch coverage included in aggregate %.

3448 of 14077 relevant lines covered (24.49%)

1.66 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>
  )
}

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	*/
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()	×
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
53	const handleSubmit = useCallback(async (event) => {	×
54	try {	×
55	event.preventDefault()	×
56	const createArticleInput = fromFormData(event.target)	×
57	const { createArticle: createdArticle } = await runQuery({	×
58	query: createArticle,	×
59	variables: { createArticleInput },	×
60	})	×
61	onSubmit(createdArticle)	×
62	setToast({	×
63	text: t('article.create.successNotification'),	×
64	type: 'default',	×
65	})	×
66	} catch (err) {	×
67	setToast({	×
68	text: t('article.create.errorNotification', { errMessage: err }),	×
69	type: 'error',	×
70	})	×
71	}	×
72	}, [])	×
73
74	return (	×
75	<section>	×
76	<form onSubmit={handleSubmit} className={formStyles.form}>	×
77	<Field	×
78	autoFocus={true}	×
79	label={t('article.createForm.titleField')}	×
80	type="text"	×
81	name="title"	×
82	required={true}	×
83	/>	×
84
85	{tags.length > 0 && (	×
86	<div>	×
87	<span className={formStyles.fieldLabel}>	×
88	{t('article.createForm.tagsField')}	×
89	</span>	×
90
91	<ul className={checkboxStyles.inlineList}>	×
92	{tags.map((t) => (	×
93	<li key={`selectTag-${t._id}`}>	×
94	<Checkbox name="tags[]" value={t._id} color={t.color}>	×
95	{t.name}	×
96	</Checkbox>	×
97	</li>	×
98	))}	×
99	</ul>	×
100	</div>	×
101	)}
102
103	{workspaces.length > 0 && (	×
104	<div>	×
105	<span className={formStyles.fieldLabel}>	×
106	{t('workspace.title')}	×
107	</span>	×
108
109	<ul className={checkboxStyles.inlineList}>	×
110	{workspaces.map((workspace) => (	×
111	<li key={`selectWorkspace-${workspace._id}`}>	×
112	<Checkbox	×
113	name="workspaces[]"	×
114	value={workspace._id}	×
115	color={workspace.color}	×
116	defaultChecked={workspaceId === workspace._id}	×
117	>
118	{workspace.name}	×
119	</Checkbox>	×
120	</li>	×
121	))}	×
122	</ul>	×
123	</div>	×
124	)}
125	<ul className={styles.actions}>	×
126	<li>	×
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 / 12925854411

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