8286443529

Committed 14 Mar 2024 07:22PM UTC coverage: 66.204% (-0.03%) from 66.23%

Build # 8286443529

Build Type

push

github

Committed by

web-flow

Commit Message

fix: Linting rules (no-floating-promises) (#2187)

* fix: no-floating-promises

* fix: explicit-module-boundary-types

Run Details

2543 of 4959 branches covered (51.28%)

Branch coverage included in aggregate %.

33 of 56 new or added lines in 15 files covered. (58.93%)

3 existing lines in 2 files now uncovered.

7467 of 10161 relevant lines covered (73.49%)

73.05 hits per line

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

7.96

/webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.tsx

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Box, Loader, useTabletAndBelowMediaQuery } from 'decentraland-ui'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import ProfilesCache from '../../../lib/profiles'
import { Pill } from '../../AssetTopbar/SelectedFilters/Pill/Pill'
import { InfoTooltip } from '../../InfoTooltip'
import { Props } from './CreatorsFilter.types'
import { profileToCreatorAccount } from './utils'
import './CreatorsFilter.css'

export type Creator = {
  name: string
  address: string
}

export const CreatorsFilter = ({
  isLoading,
  creators,
  fetchedCreators,
  defaultCollapsed = false,
  onChange,
  onFetchCreators
}: Props): JSX.Element => {
  const [isFetchingNames, setIsFetchingNames] = useState(false)
  const isMobileOrTablet = useTabletAndBelowMediaQuery()
  const [searchTerm, setSearchTerm] = useState('')
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [selectedCreators, setSelectedCreators] = useState<Creator[]>(
    creators?.length && fetchedCreators ? fetchedCreators.filter(creator => creators.includes(creator.address)) : []
  )

  useEffect(() => {
    const fetchCreators = async () => {
      if (creators?.length) {
        setIsFetchingNames(true)
        const profiles = await ProfilesCache.fetchProfile(creators)
        setSelectedCreators(profileToCreatorAccount(profiles))
        setIsFetchingNames(false)
      } else if (!creators?.length) {
        setSelectedCreators([])
      }
    }
    void fetchCreators()
  }, [creators])

  const handleCreatorsChange = useCallback(
    (value: string) => {
      const creator = fetchedCreators.find(creator => creator.address === value)
      if (creator && !selectedCreators.find(c => c.address === creator.address)) {
        const newCreators = [...selectedCreators, creator]
        setSelectedCreators(newCreators)
        onChange(newCreators.map(creator => creator.address))
        setShowSuggestions(false)
        setSearchTerm('')
      }
    },
    [fetchedCreators, onChange, selectedCreators]
  )

  const handleFetchTopCreators = useCallback(() => {
    if (!searchTerm && !isLoading) {
      onFetchCreators('')
      setShowSuggestions(true)
    }
  }, [isLoading, onFetchCreators, searchTerm])

  useEffect(() => {
    if (!searchTerm) {
      return
    }
    setShowSuggestions(false)
    const delayedDebounceFn = setTimeout(() => {
      setShowSuggestions(true)
      onFetchCreators(searchTerm)
    }, 500)
    return () => clearTimeout(delayedDebounceFn)
  }, [onFetchCreators, searchTerm])

  const header = useMemo(
    () =>
      isMobileOrTablet ? (
        <div className="mobile-box-header">
          <span className="box-filter-name">{t('nft_filters.creators.title')}</span>
          <span className="box-filter-value">
            {isFetchingNames ? (
              <Loader inline size="mini" />
            ) : selectedCreators.length ? (
              selectedCreators.map(creator => creator.name).join(', ')
            ) : (
              t('nft_filters.creators.all_creators')
            )}
          </span>
        </div>
      ) : (
        <>
          {t('nft_filters.creators.title')}
          <InfoTooltip content={t('nft_filters.creators.tooltip')} />
        </>
      ),
    [isFetchingNames, isMobileOrTablet, selectedCreators]
  )

  const handleDeleteCreator = useCallback(
    (creatorAddressToDelete: string) => {
      const updatedArray = selectedCreators.filter(creator => creator.address !== creatorAddressToDelete)
      setSelectedCreators(updatedArray)
      onChange(updatedArray.map(creator => creator.address))
    },
    [onChange, selectedCreators]
  )

  const dropdownContainerRef = useRef<HTMLDivElement>(null)

  // tracks the click outside the main div and close suggestions if needed
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(event.target as Node)) {
        setShowSuggestions(false)
      }
    }
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [])

  const clearAndShowSuggestions = useCallback(() => {
    setSearchTerm('')
    onFetchCreators('')
    setShowSuggestions(true)
  }, [onFetchCreators])

  const handleSearchInputChange = useCallback(
    e => {
      const value = e.target.value
      if (!value) {
        clearAndShowSuggestions()
      } else {
        setSearchTerm(value)
      }
    },
    [clearAndShowSuggestions]
  )

  const handleClearSearchInput = useCallback(() => {
    clearAndShowSuggestions()
  }, [clearAndShowSuggestions])

  return (
    <Box header={header} collapsible className="CreatorsFilter filters-sidebar-box" defaultCollapsed={defaultCollapsed || isMobileOrTablet}>
      <div ref={dropdownContainerRef} className="creators-filter-dropdown-container">
        <input
          className="creators-filter-dropdown"
          placeholder={t('nft_filters.creators.search')}
          onFocus={handleFetchTopCreators}
          onChange={handleSearchInputChange}
          value={searchTerm}
        />
        {isLoading ? (
          <Loader active size={'small'} />
        ) : searchTerm ? (
          <i aria-hidden="true" className="search icon clear" onClick={handleClearSearchInput}></i>
        ) : (
          <i aria-hidden="true" className="search icon"></i>
        )}
        {showSuggestions && !isLoading ? (
          <div className="menu">
            {!searchTerm ? <div className="header">{t('nft_filters.creators.dropdown_header')} </div> : null}
            {searchTerm && !fetchedCreators.length ? <div className="item no-results">{t('filters.no_results')}</div> : null}
            {fetchedCreators.map(creator => (
              <div key={creator.address} className="item" onClick={() => handleCreatorsChange(creator.address)}>
                {creator.name}
              </div>
            ))}
          </div>
        ) : null}
      </div>
      <div className="pill-container">
        {selectedCreators.map(creator => (
          <Pill id={creator.address} key={creator.address} label={creator.name} onDelete={() => handleDeleteCreator(creator.address)} />
        ))}
      </div>
    </Box>
  )
}

1	import { useCallback, useEffect, useMemo, useRef, useState } from 'react'	2✔
2	import { Box, Loader, useTabletAndBelowMediaQuery } from 'decentraland-ui'	2✔
3	import { t } from 'decentraland-dapps/dist/modules/translation/utils'	2✔
4	import ProfilesCache from '../../../lib/profiles'	2✔
5	import { Pill } from '../../AssetTopbar/SelectedFilters/Pill/Pill'	2✔
6	import { InfoTooltip } from '../../InfoTooltip'	2✔
7	import { Props } from './CreatorsFilter.types'
8	import { profileToCreatorAccount } from './utils'	2✔
9	import './CreatorsFilter.css'	2✔
10
11	export type Creator = {
12	name: string
13	address: string
14	}
15
16	export const CreatorsFilter = ({	2✔
17	isLoading,
18	creators,
19	fetchedCreators,
20	defaultCollapsed = false,	×
21	onChange,
22	onFetchCreators
23	}: Props): JSX.Element => {
24	const [isFetchingNames, setIsFetchingNames] = useState(false)	×
25	const isMobileOrTablet = useTabletAndBelowMediaQuery()	×
26	const [searchTerm, setSearchTerm] = useState('')	×
27	const [showSuggestions, setShowSuggestions] = useState(false)	×
28	const [selectedCreators, setSelectedCreators] = useState<Creator[]>(	×
29	creators?.length && fetchedCreators ? fetchedCreators.filter(creator => creators.includes(creator.address)) : []	×
30	)
31
32	useEffect(() => {	×
NEW 33	const fetchCreators = async () => {	×
NEW 34	if (creators?.length) {	×
NEW 35	setIsFetchingNames(true)	×
NEW 36	const profiles = await ProfilesCache.fetchProfile(creators)	×
37	setSelectedCreators(profileToCreatorAccount(profiles))	×
38	setIsFetchingNames(false)	×
NEW 39	} else if (!creators?.length) {	×
NEW 40	setSelectedCreators([])	×
41	}
42	}
NEW 43	void fetchCreators()	×
44	}, [creators])
45
46	const handleCreatorsChange = useCallback(	×
47	(value: string) => {
48	const creator = fetchedCreators.find(creator => creator.address === value)	×
49	if (creator && !selectedCreators.find(c => c.address === creator.address)) {	×
50	const newCreators = [...selectedCreators, creator]	×
51	setSelectedCreators(newCreators)	×
52	onChange(newCreators.map(creator => creator.address))	×
53	setShowSuggestions(false)	×
54	setSearchTerm('')	×
55	}
56	},
57	[fetchedCreators, onChange, selectedCreators]
58	)
59
60	const handleFetchTopCreators = useCallback(() => {	×
61	if (!searchTerm && !isLoading) {	×
62	onFetchCreators('')	×
63	setShowSuggestions(true)	×
64	}
65	}, [isLoading, onFetchCreators, searchTerm])
66
67	useEffect(() => {	×
68	if (!searchTerm) {	×
69	return	×
70	}
71	setShowSuggestions(false)	×
72	const delayedDebounceFn = setTimeout(() => {	×
73	setShowSuggestions(true)	×
74	onFetchCreators(searchTerm)	×
75	}, 500)
76	return () => clearTimeout(delayedDebounceFn)	×
77	}, [onFetchCreators, searchTerm])
78
79	const header = useMemo(	×
80	() =>
81	isMobileOrTablet ? (	×
82	<div className="mobile-box-header">
83	<span className="box-filter-name">{t('nft_filters.creators.title')}</span>
84	<span className="box-filter-value">
85	{isFetchingNames ? (	×
86	<Loader inline size="mini" />
87	) : selectedCreators.length ? (	×
88	selectedCreators.map(creator => creator.name).join(', ')	×
89	) : (
90	t('nft_filters.creators.all_creators')
91	)}
92	</span>
93	</div>
94	) : (
95	<>
96	{t('nft_filters.creators.title')}
97	<InfoTooltip content={t('nft_filters.creators.tooltip')} />
98	</>
99	),
100	[isFetchingNames, isMobileOrTablet, selectedCreators]
101	)
102
103	const handleDeleteCreator = useCallback(	×
104	(creatorAddressToDelete: string) => {
105	const updatedArray = selectedCreators.filter(creator => creator.address !== creatorAddressToDelete)	×
106	setSelectedCreators(updatedArray)	×
107	onChange(updatedArray.map(creator => creator.address))	×
108	},
109	[onChange, selectedCreators]
110	)
111
112	const dropdownContainerRef = useRef<HTMLDivElement>(null)	×
113
114	// tracks the click outside the main div and close suggestions if needed
115	useEffect(() => {	×
116	const handleClickOutside = (event: MouseEvent) => {	×
117	if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(event.target as Node)) {	×
118	setShowSuggestions(false)	×
119	}
120	}
121	document.addEventListener('click', handleClickOutside, true)	×
122	return () => {	×
123	document.removeEventListener('click', handleClickOutside, true)	×
124	}
125	}, [])
126
127	const clearAndShowSuggestions = useCallback(() => {	×
128	setSearchTerm('')	×
129	onFetchCreators('')	×
130	setShowSuggestions(true)	×
131	}, [onFetchCreators])
132
133	const handleSearchInputChange = useCallback(	×
134	e => {
135	const value = e.target.value	×
136	if (!value) {	×
137	clearAndShowSuggestions()	×
138	} else {
139	setSearchTerm(value)	×
140	}
141	},
142	[clearAndShowSuggestions]
143	)
144
145	const handleClearSearchInput = useCallback(() => {	×
146	clearAndShowSuggestions()	×
147	}, [clearAndShowSuggestions])
148
149	return (
150	<Box header={header} collapsible className="CreatorsFilter filters-sidebar-box" defaultCollapsed={defaultCollapsed \|\| isMobileOrTablet}>	×
151	<div ref={dropdownContainerRef} className="creators-filter-dropdown-container">
152	<input
153	className="creators-filter-dropdown"
154	placeholder={t('nft_filters.creators.search')}
155	onFocus={handleFetchTopCreators}
156	onChange={handleSearchInputChange}
157	value={searchTerm}
158	/>
159	{isLoading ? (
160	<Loader active size={'small'} />	×
161	) : searchTerm ? (
162	<i aria-hidden="true" className="search icon clear" onClick={handleClearSearchInput}></i>	×
163	) : (
164	<i aria-hidden="true" className="search icon"></i>
165	)}
166	{showSuggestions && !isLoading ? (	×
167	<div className="menu">
168	{!searchTerm ? <div className="header">{t('nft_filters.creators.dropdown_header')} </div> : null}	×
169	{searchTerm && !fetchedCreators.length ? <div className="item no-results">{t('filters.no_results')}</div> : null}	×
170	{fetchedCreators.map(creator => (
171	<div key={creator.address} className="item" onClick={() => handleCreatorsChange(creator.address)}>	×
172	{creator.name}
173	</div>
174	))}
175	</div>
176	) : null}
177	</div>
178	<div className="pill-container">
179	{selectedCreators.map(creator => (
180	<Pill id={creator.address} key={creator.address} label={creator.name} onDelete={() => handleDeleteCreator(creator.address)} />	×
181	))}
182	</div>
183	</Box>
184	)
185	}

decentraland / marketplace / 8286443529

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