15923223059

Committed 27 Jun 2025 09:39AM UTC coverage: 39.249% (+0.008%) from 39.241%

Build # 15923223059

Build Type

push

github

Committed by

ggrossetie

Commit Message

fix: Utilise useSearchParams pour basculer d'un mode à un autre

Coverage Stats

570 of 800 branches covered (71.25%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

5638 of 15017 relevant lines covered (37.54%)

2.66 hits per line

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

0.0

/front/src/components/collaborative/CollaborativeEditorArticleHeader.jsx

import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSearchParams } from 'react-router'

import { Toggle } from '@geist-ui/core'

import useFetchData from '../../hooks/graphql.js'

import Loading from '../molecules/Loading.jsx'
import CollaborativeEditorActiveVersion from './CollaborativeEditorActiveVersion.jsx'
import CollaborativeEditorWriters from './CollaborativeEditorWriters.jsx'

import { getArticleInfo } from '../Article.graphql'

import styles from './CollaborativeEditorArticleHeader.module.scss'

/**
 * @param props
 * @param {string} props.articleId
 * @param {string?} props.versionId
 * @returns {import('react').ReactElementElement}
 */
export default function CollaborativeEditorArticleHeader({
  articleId,
  versionId,
}) {
  const { t } = useTranslation()

  const [searchParams, setSearchParams] = useSearchParams()
  const [mode, setMode] = useState('edit')

  const { data, isLoading } = useFetchData(
    { query: getArticleInfo, variables: { articleId } },
    {
      revalidateIfStale: false,
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
      fallbackData: {
        article: {},
      },
    }
  )

  useEffect(() => {
    if (mode === 'preview' && searchParams.get('mode') !== 'preview') {
      setSearchParams({ mode: 'preview' })
    } else if (searchParams.get('mode') === 'preview') {
      setSearchParams({})
    }
  }, [mode])

  if (isLoading) {
    return <Loading />
  }

  return (
    <header className={styles.header}>
      <h1 className={styles.title}>{data.article.title}</h1>

      <div className={styles.row}>
        <div
          className={styles.mode}
          onClick={() => setMode(mode === 'preview' ? 'edit' : 'preview')}
        >
          <Toggle
            id="preview-mode"
            checked={mode === 'preview'}
            title={t('article.editor.preview')}
            onChange={(e) => setMode(e.target.checked ? 'preview' : 'edit')}
          />
          <label htmlFor="preview-mode">{t('article.editor.preview')}</label>
        </div>

        <div className={styles.writers}>
          <CollaborativeEditorWriters />
        </div>
      </div>
      <CollaborativeEditorActiveVersion versionId={versionId} />
    </header>
  )
}

1	import React, { useEffect, useState } from 'react'	×
2	import { useTranslation } from 'react-i18next'	×
NEW 3	import { useSearchParams } from 'react-router'	×
4
5	import { Toggle } from '@geist-ui/core'	×
6
7	import useFetchData from '../../hooks/graphql.js'	×
8
9	import Loading from '../molecules/Loading.jsx'	×
10	import CollaborativeEditorActiveVersion from './CollaborativeEditorActiveVersion.jsx'	×
11	import CollaborativeEditorWriters from './CollaborativeEditorWriters.jsx'	×
12
13	import { getArticleInfo } from '../Article.graphql'	×
14
15	import styles from './CollaborativeEditorArticleHeader.module.scss'	×
16
17	/**
18	* @param props
19	* @param {string} props.articleId
20	* @param {string?} props.versionId
21	* @returns {import('react').ReactElementElement}
22	*/
23	export default function CollaborativeEditorArticleHeader({	×
24	articleId,	×
25	versionId,	×
26	}) {	×
27	const { t } = useTranslation()	×
28
NEW 29	const [searchParams, setSearchParams] = useSearchParams()	×
30	const [mode, setMode] = useState('edit')	×
31
UNCOV 32	const { data, isLoading } = useFetchData(	×
33	{ query: getArticleInfo, variables: { articleId } },	×
34	{	×
35	revalidateIfStale: false,	×
36	revalidateOnFocus: false,	×
37	revalidateOnReconnect: false,	×
38	fallbackData: {	×
39	article: {},	×
40	},	×
41	}	×
42	)	×
43
44	useEffect(() => {	×
NEW 45	if (mode === 'preview' && searchParams.get('mode') !== 'preview') {	×
NEW 46	setSearchParams({ mode: 'preview' })	×
NEW 47	} else if (searchParams.get('mode') === 'preview') {	×
NEW 48	setSearchParams({})	×
49	}	×
50	}, [mode])	×
51
52	if (isLoading) {	×
53	return <Loading />	×
54	}	×
55
56	return (	×
57	<header className={styles.header}>	×
58	<h1 className={styles.title}>{data.article.title}</h1>	×
59
60	<div className={styles.row}>	×
61	<div	×
62	className={styles.mode}	×
63	onClick={() => setMode(mode === 'preview' ? 'edit' : 'preview')}	×
64	>
65	<Toggle	×
66	id="preview-mode"	×
67	checked={mode === 'preview'}	×
68	title={t('article.editor.preview')}	×
69	onChange={(e) => setMode(e.target.checked ? 'preview' : 'edit')}	×
70	/>	×
71	<label htmlFor="preview-mode">{t('article.editor.preview')}</label>	×
72	</div>	×
73
74	<div className={styles.writers}>	×
75	<CollaborativeEditorWriters />	×
76	</div>	×
77	</div>	×
78	<CollaborativeEditorActiveVersion versionId={versionId} />	×
79	</header>	×
80	)
81	}	×

EcrituresNumeriques / stylo / 15923223059

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