Add a searchbar over all folds
This commit is contained in:
		
							parent
							
								
									eaa1a26af4
								
							
						
					
					
						commit
						917e066a45
					
				| 
						 | 
				
			
			@ -59,7 +59,24 @@ export default function Folds(props: {
 | 
			
		|||
        }
 | 
			
		||||
      )
 | 
			
		||||
    }
 | 
			
		||||
  })
 | 
			
		||||
  }, [curatorsDict])
 | 
			
		||||
 | 
			
		||||
  const [query, setQuery] = useState('')
 | 
			
		||||
  // Copied from contracts-list.tsx; extract if we copy this again
 | 
			
		||||
  const queryWords = query.toLowerCase().split(' ')
 | 
			
		||||
  function check(corpus: String) {
 | 
			
		||||
    return queryWords.every((word) => corpus.toLowerCase().includes(word))
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const matches = folds.filter(
 | 
			
		||||
    (f) =>
 | 
			
		||||
      check(f.name) ||
 | 
			
		||||
      check(f.about || '') ||
 | 
			
		||||
      check(curatorsDict[f.curatorId].username) ||
 | 
			
		||||
      check(f.lowercaseTags.map((tag) => `#${tag}`).join(' '))
 | 
			
		||||
  )
 | 
			
		||||
  // Not strictly necessary, but makes the "hold delete" experience less laggy
 | 
			
		||||
  const debouncedQuery = _.debounce(setQuery, 50)
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Page>
 | 
			
		||||
| 
						 | 
				
			
			@ -76,10 +93,17 @@ export default function Folds(props: {
 | 
			
		|||
              markets. Follow a community to personalize your feed and receive
 | 
			
		||||
              relevant updates.
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <input
 | 
			
		||||
              type="text"
 | 
			
		||||
              onChange={(e) => debouncedQuery(e.target.value)}
 | 
			
		||||
              placeholder="Search communities"
 | 
			
		||||
              className="input input-bordered mb-4 w-full"
 | 
			
		||||
            />
 | 
			
		||||
          </Col>
 | 
			
		||||
 | 
			
		||||
          <Col className="gap-4">
 | 
			
		||||
            {folds.map((fold) => (
 | 
			
		||||
            {matches.map((fold) => (
 | 
			
		||||
              <FoldCard
 | 
			
		||||
                key={fold.id}
 | 
			
		||||
                fold={fold}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue
	
	Block a user