11602186878

Committed 30 Oct 2024 09:48PM UTC coverage: 97.371% (-0.1%) from 97.518%

Build # 11602186878

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #529 from IQSS/feat/525-rich-text-editor

Rich Text WYSIWYG Editor - Design System

Run Details

1509 of 1574 branches covered (95.87%)

Branch coverage included in aggregate %.

49 of 49 new or added lines in 3 files covered. (100.0%)

9 existing lines in 2 files now uncovered.

3788 of 3866 relevant lines covered (97.98%)

8702.9 hits per line

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

87.5

/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx

import { useEffect, useRef, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
import { CollectionItemsPaginationInfo } from '@/collection/domain/models/CollectionItemsPaginationInfo'
import { CollectionSearchCriteria } from '@/collection/domain/models/CollectionSearchCriteria'
import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
import { useGetAccumulatedItems } from './useGetAccumulatedItems'
import { UseCollectionQueryParamsReturnType } from '../useGetCollectionQueryParams'
import { useLoadMoreOnPopStateEvent } from './useLoadMoreOnPopStateEvent'
import { useLoading } from '@/sections/loading/LoadingContext'
import { QueryParamKey } from '../../Route.enum'
import { CollectionHelper } from '../CollectionHelper'
import { FilterPanel } from './filter-panel/FilterPanel'
import { ItemsList } from './items-list/ItemsList'
import { SearchPanel } from './search-panel/SearchPanel'
import { ItemTypeChange } from './filter-panel/type-filters/TypeFilters'
import styles from './CollectionItemsPanel.module.scss'

interface CollectionItemsPanelProps {
  collectionId: string
  collectionRepository: CollectionRepository
  collectionQueryParams: UseCollectionQueryParamsReturnType
  addDataSlot: JSX.Element | null
}

/**
 * HOW IT WORKS:
 * This component loads items on 5 different scenarios:
 * 1. When the component mounts
 * 2. When the user scrolls to the bottom of the list and there are more items to load
 * 3. When the user submits a search query in the search panel
 * 4. When the user changes the item types in the filter panel
 * 5. When the user navigates back and forward in the browser
 *
 * It initializes the search criteria with the query params in the URL.
 * By default if no query params are present in the URL, the search query is empty and the item types are COLLECTION and DATASET.
 * Every time a load of items is triggered, the pagination info is updated and the URL is updated with the new query params so it can be shared and the user can navigate back and forward in the browser.
 */

export const CollectionItemsPanel = ({
  collectionId,
  collectionRepository,
  collectionQueryParams,
  addDataSlot
}: CollectionItemsPanelProps) => {
  const { setIsLoading } = useLoading()
  const [_, setSearchParams] = useSearchParams()

  useLoadMoreOnPopStateEvent(loadItemsOnBackAndForwardNavigation)

  // This object will update every time we update a query param in the URL with the setSearchParams setter
  const currentSearchCriteria = new CollectionSearchCriteria(
    collectionQueryParams.searchQuery,
    collectionQueryParams.typesQuery || [CollectionItemType.COLLECTION, CollectionItemType.DATASET]
  )

  const [paginationInfo, setPaginationInfo] = useState<CollectionItemsPaginationInfo>(
    new CollectionItemsPaginationInfo()
  )
  const itemsListContainerRef = useRef<HTMLDivElement | null>(null)

  const {
    isLoadingItems,
    accumulatedItems,
    totalAvailable,
    hasNextPage,
    error,
    loadMore,
    isEmptyItems,
    areItemsAvailable,
    accumulatedCount
  } = useGetAccumulatedItems({
    collectionRepository,
    collectionId
  })

  async function handleLoadMoreOnBottomReach(currentPagination: CollectionItemsPaginationInfo) {
    let paginationInfoToSend = currentPagination
    if (totalAvailable !== undefined) {
      paginationInfoToSend = currentPagination.goToNextPage()
    }

    const totalItemsCount = await loadMore(paginationInfoToSend, currentSearchCriteria)

    if (totalItemsCount !== undefined) {
      const paginationInfoUpdated = paginationInfoToSend.withTotal(totalItemsCount)
      setPaginationInfo(paginationInfoUpdated)
    }
  }

  const handleSearchSubmit = async (searchValue: string) => {
    itemsListContainerRef.current?.scrollTo({ top: 0 })

    const resetPaginationInfo = new CollectionItemsPaginationInfo()
    setPaginationInfo(resetPaginationInfo)

    if (searchValue === '') {
      // Update the URL without the search value, keep other querys
      setSearchParams((currentSearchParams) => {
        currentSearchParams.delete(QueryParamKey.QUERY)
        return currentSearchParams
      })
    } else {
      // Update the URL with the search value ,keep other querys and include all item types always
      setSearchParams((currentSearchParams) => ({
        ...currentSearchParams,
        [QueryParamKey.COLLECTION_ITEM_TYPES]: [
          CollectionItemType.COLLECTION,
          CollectionItemType.DATASET,
          CollectionItemType.FILE
        ].join(','),
        [QueryParamKey.QUERY]: searchValue
      }))
    }

    // WHEN SEARCHING, WE RESET THE PAGINATION INFO AND KEEP ALL ITEM TYPES!!
    const newCollectionSearchCriteria = new CollectionSearchCriteria(
      searchValue === '' ? undefined : searchValue,
      [CollectionItemType.COLLECTION, CollectionItemType.DATASET, CollectionItemType.FILE]
    )

    const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)

    if (totalItemsCount !== undefined) {
      const paginationInfoUpdated = resetPaginationInfo.withTotal(totalItemsCount)
      setPaginationInfo(paginationInfoUpdated)
    }
  }

  const handleItemsTypeChange = async (itemTypeChange: ItemTypeChange) => {
    const { type, checked } = itemTypeChange

    // These istanbul comments are only because checking if itemTypes is undefined is not possible is just a good defensive code to have
    const newItemsTypes = checked
      ? [...new Set([...(currentSearchCriteria?.itemTypes ?? /* istanbul ignore next */ []), type])]
      : (currentSearchCriteria.itemTypes ?? /* istanbul ignore next */ []).filter(
          (itemType) => itemType !== type
        )

    // KEEP SEARCH VALUE IF EXISTS
    itemsListContainerRef.current?.scrollTo({ top: 0 })

    const resetPaginationInfo = new CollectionItemsPaginationInfo()
    setPaginationInfo(resetPaginationInfo)

    // Update the URL with the new item types, keep other querys and include the search value if exists
    setSearchParams((currentSearchParams) => ({
      ...currentSearchParams,
      [QueryParamKey.COLLECTION_ITEM_TYPES]: newItemsTypes.join(','),
      ...(currentSearchCriteria.searchText && {
        [QueryParamKey.QUERY]: currentSearchCriteria.searchText
      })
    }))

    const newCollectionSearchCriteria = new CollectionSearchCriteria(
      currentSearchCriteria.searchText,
      newItemsTypes
    )

    const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)

    if (totalItemsCount !== undefined) {
      const paginationInfoUpdated = resetPaginationInfo.withTotal(totalItemsCount)
      setPaginationInfo(paginationInfoUpdated)
    }
  }

  async function loadItemsOnBackAndForwardNavigation() {
    const searchParams = new URLSearchParams(window.location.search)
    const collectionQueryParams = CollectionHelper.defineCollectionQueryParams(searchParams)

    const newCollectionSearchCriteria = new CollectionSearchCriteria(
      collectionQueryParams.searchQuery,
      collectionQueryParams.typesQuery
    )

    const newPaginationInfo = new CollectionItemsPaginationInfo()
    const totalItemsCount = await loadMore(newPaginationInfo, newCollectionSearchCriteria, true)

    if (totalItemsCount !== undefined) {
      const paginationInfoUpdated = newPaginationInfo.withTotal(totalItemsCount)
      setPaginationInfo(paginationInfoUpdated)
    }
  }

  useEffect(() => {
    setIsLoading(isLoadingItems)
  }, [isLoadingItems, setIsLoading])

  return (
    <section className={styles['items-panel']}>
      <header className={styles['top-wrapper']}>
        <SearchPanel
          onSubmitSearch={handleSearchSubmit}
          currentSearchValue={currentSearchCriteria.searchText}
          isLoadingCollectionItems={isLoadingItems}
        />
        <div className={styles['add-data-slot']}>{addDataSlot}</div>
      </header>

      <div className={styles['bottom-wrapper']}>
        <FilterPanel
          currentItemTypes={currentSearchCriteria.itemTypes}
          onItemTypesChange={handleItemsTypeChange}
          isLoadingCollectionItems={isLoadingItems}
        />

        <ItemsList
          items={accumulatedItems}
          error={error}
          accumulatedCount={accumulatedCount}
          isLoadingItems={isLoadingItems}
          areItemsAvailable={areItemsAvailable}
          hasNextPage={hasNextPage}
          isEmptyItems={isEmptyItems}
          hasSearchValue={currentSearchCriteria.hasSearchText()}
          itemsTypesSelected={currentSearchCriteria.itemTypes as CollectionItemType[]}
          paginationInfo={paginationInfo}
          onBottomReach={handleLoadMoreOnBottomReach}
          ref={itemsListContainerRef}
        />
      </div>
    </section>
  )
}

1	import { useEffect, useRef, useState } from 'react'
2	import { useSearchParams } from 'react-router-dom'
3	import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
4	import { CollectionItemsPaginationInfo } from '@/collection/domain/models/CollectionItemsPaginationInfo'
5	import { CollectionSearchCriteria } from '@/collection/domain/models/CollectionSearchCriteria'
6	import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
7	import { useGetAccumulatedItems } from './useGetAccumulatedItems'
8	import { UseCollectionQueryParamsReturnType } from '../useGetCollectionQueryParams'
9	import { useLoadMoreOnPopStateEvent } from './useLoadMoreOnPopStateEvent'
10	import { useLoading } from '@/sections/loading/LoadingContext'
11	import { QueryParamKey } from '../../Route.enum'
12	import { CollectionHelper } from '../CollectionHelper'
13	import { FilterPanel } from './filter-panel/FilterPanel'
14	import { ItemsList } from './items-list/ItemsList'
15	import { SearchPanel } from './search-panel/SearchPanel'
16	import { ItemTypeChange } from './filter-panel/type-filters/TypeFilters'
17	import styles from './CollectionItemsPanel.module.scss'
18
19	interface CollectionItemsPanelProps {
20	collectionId: string
21	collectionRepository: CollectionRepository
22	collectionQueryParams: UseCollectionQueryParamsReturnType
23	addDataSlot: JSX.Element \| null
24	}
25
26	/**
27	* HOW IT WORKS:
28	* This component loads items on 5 different scenarios:
29	* 1. When the component mounts
30	* 2. When the user scrolls to the bottom of the list and there are more items to load
31	* 3. When the user submits a search query in the search panel
32	* 4. When the user changes the item types in the filter panel
33	* 5. When the user navigates back and forward in the browser
34	*
35	* It initializes the search criteria with the query params in the URL.
36	* By default if no query params are present in the URL, the search query is empty and the item types are COLLECTION and DATASET.
37	* Every time a load of items is triggered, the pagination info is updated and the URL is updated with the new query params so it can be shared and the user can navigate back and forward in the browser.
38	*/
39
40	export const CollectionItemsPanel = ({	31✔
41	collectionId,
42	collectionRepository,
43	collectionQueryParams,
44	addDataSlot
45	}: CollectionItemsPanelProps) => {	632✔
46	const { setIsLoading } = useLoading()	632✔
47	const [_, setSearchParams] = useSearchParams()	632✔
48
49	useLoadMoreOnPopStateEvent(loadItemsOnBackAndForwardNavigation)	632✔
50
51	// This object will update every time we update a query param in the URL with the setSearchParams setter
52	const currentSearchCriteria = new CollectionSearchCriteria(	632✔
53	collectionQueryParams.searchQuery,
54	collectionQueryParams.typesQuery \|\| [CollectionItemType.COLLECTION, CollectionItemType.DATASET]	1,138✔
55	)
56
57	const [paginationInfo, setPaginationInfo] = useState<CollectionItemsPaginationInfo>(	632✔
58	new CollectionItemsPaginationInfo()
59	)
60	const itemsListContainerRef = useRef<HTMLDivElement \| null>(null)	632✔
61
62	const {
63	isLoadingItems,
64	accumulatedItems,
65	totalAvailable,
66	hasNextPage,
67	error,
68	loadMore,
69	isEmptyItems,
70	areItemsAvailable,
71	accumulatedCount
72	} = useGetAccumulatedItems({	632✔
73	collectionRepository,
74	collectionId
75	})
76
77	async function handleLoadMoreOnBottomReach(currentPagination: CollectionItemsPaginationInfo) {
78	let paginationInfoToSend = currentPagination	190✔
79	if (totalAvailable !== undefined) {	190✔
80	paginationInfoToSend = currentPagination.goToNextPage()	15✔
81	}
82
83	const totalItemsCount = await loadMore(paginationInfoToSend, currentSearchCriteria)	190✔
84
85	if (totalItemsCount !== undefined) {	190✔
86	const paginationInfoUpdated = paginationInfoToSend.withTotal(totalItemsCount)	172✔
87	setPaginationInfo(paginationInfoUpdated)	172✔
88	}
89	}
90
91	const handleSearchSubmit = async (searchValue: string) => {	632✔
92	itemsListContainerRef.current?.scrollTo({ top: 0 })	10✔
93
94	const resetPaginationInfo = new CollectionItemsPaginationInfo()	10✔
95	setPaginationInfo(resetPaginationInfo)	10✔
96
97	if (searchValue === '') {	10✔
98	// Update the URL without the search value, keep other querys
99	setSearchParams((currentSearchParams) => {	5✔
100	currentSearchParams.delete(QueryParamKey.QUERY)	5✔
101	return currentSearchParams	5✔
102	})
103	} else {
104	// Update the URL with the search value ,keep other querys and include all item types always
105	setSearchParams((currentSearchParams) => ({	5✔
106	...currentSearchParams,
107	[QueryParamKey.COLLECTION_ITEM_TYPES]: [
108	CollectionItemType.COLLECTION,
109	CollectionItemType.DATASET,
110	CollectionItemType.FILE
111	].join(','),
112	[QueryParamKey.QUERY]: searchValue
113	}))
114	}
115
116	// WHEN SEARCHING, WE RESET THE PAGINATION INFO AND KEEP ALL ITEM TYPES!!
117	const newCollectionSearchCriteria = new CollectionSearchCriteria(	10✔
118	searchValue === '' ? undefined : searchValue,	10✔
119	[CollectionItemType.COLLECTION, CollectionItemType.DATASET, CollectionItemType.FILE]
120	)
121
122	const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)	10✔
123
124	if (totalItemsCount !== undefined) {	10✔
125	const paginationInfoUpdated = resetPaginationInfo.withTotal(totalItemsCount)	10✔
126	setPaginationInfo(paginationInfoUpdated)	10✔
127	}
128	}
129
130	const handleItemsTypeChange = async (itemTypeChange: ItemTypeChange) => {	632✔
131	const { type, checked } = itemTypeChange	21✔
132
133	// These istanbul comments are only because checking if itemTypes is undefined is not possible is just a good defensive code to have
134	const newItemsTypes = checked	21✔
135	? [...new Set([...(currentSearchCriteria?.itemTypes ?? /* istanbul ignore next */ []), type])]	7✔
136	: (currentSearchCriteria.itemTypes ?? /* istanbul ignore next */ []).filter(	14✔
137	(itemType) => itemType !== type	28✔
138	)
139
140	// KEEP SEARCH VALUE IF EXISTS
141	itemsListContainerRef.current?.scrollTo({ top: 0 })	21✔
142
143	const resetPaginationInfo = new CollectionItemsPaginationInfo()	21✔
144	setPaginationInfo(resetPaginationInfo)	21✔
145
146	// Update the URL with the new item types, keep other querys and include the search value if exists
147	setSearchParams((currentSearchParams) => ({	21✔
148	...currentSearchParams,
149	[QueryParamKey.COLLECTION_ITEM_TYPES]: newItemsTypes.join(','),
150	...(currentSearchCriteria.searchText && {	30✔
151	[QueryParamKey.QUERY]: currentSearchCriteria.searchText
152	})
153	}))
154
155	const newCollectionSearchCriteria = new CollectionSearchCriteria(	21✔
156	currentSearchCriteria.searchText,
157	newItemsTypes
158	)
159
160	const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)	21✔
161
162	if (totalItemsCount !== undefined) {	21✔
163	const paginationInfoUpdated = resetPaginationInfo.withTotal(totalItemsCount)	21✔
164	setPaginationInfo(paginationInfoUpdated)	21✔
165	}
166	}
167
168	async function loadItemsOnBackAndForwardNavigation() {
UNCOV 169	const searchParams = new URLSearchParams(window.location.search)	×
UNCOV 170	const collectionQueryParams = CollectionHelper.defineCollectionQueryParams(searchParams)	×
171
UNCOV 172	const newCollectionSearchCriteria = new CollectionSearchCriteria(	×
173	collectionQueryParams.searchQuery,
174	collectionQueryParams.typesQuery
175	)
176
UNCOV 177	const newPaginationInfo = new CollectionItemsPaginationInfo()	×
UNCOV 178	const totalItemsCount = await loadMore(newPaginationInfo, newCollectionSearchCriteria, true)	×
179
UNCOV 180	if (totalItemsCount !== undefined) {	×
UNCOV 181	const paginationInfoUpdated = newPaginationInfo.withTotal(totalItemsCount)	×
UNCOV 182	setPaginationInfo(paginationInfoUpdated)	×
183	}
184	}
185
186	useEffect(() => {	632✔
187	setIsLoading(isLoadingItems)	336✔
188	}, [isLoadingItems, setIsLoading])
189
190	return (	632✔
191	<section className={styles['items-panel']}>
192	<header className={styles['top-wrapper']}>
193	<SearchPanel
194	onSubmitSearch={handleSearchSubmit}
195	currentSearchValue={currentSearchCriteria.searchText}
196	isLoadingCollectionItems={isLoadingItems}
197	/>
198	<div className={styles['add-data-slot']}>{addDataSlot}</div>
199	</header>
200
201	<div className={styles['bottom-wrapper']}>
202	<FilterPanel
203	currentItemTypes={currentSearchCriteria.itemTypes}
204	onItemTypesChange={handleItemsTypeChange}
205	isLoadingCollectionItems={isLoadingItems}
206	/>
207
208	<ItemsList
209	items={accumulatedItems}
210	error={error}
211	accumulatedCount={accumulatedCount}
212	isLoadingItems={isLoadingItems}
213	areItemsAvailable={areItemsAvailable}
214	hasNextPage={hasNextPage}
215	isEmptyItems={isEmptyItems}
216	hasSearchValue={currentSearchCriteria.hasSearchText()}
217	itemsTypesSelected={currentSearchCriteria.itemTypes as CollectionItemType[]}
218	paginationInfo={paginationInfo}
219	onBottomReach={handleLoadMoreOnBottomReach}
220	ref={itemsListContainerRef}
221	/>
222	</div>
223	</section>
224	)
225	}	31✔

IQSS / dataverse-frontend / 11602186878

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