refs #23 Add search feature for hashtags

h3poteto · Aug 28, 2023 · f61b160 · f61b160
1 parent f0af758
commit f61b160
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -156,6 +156,7 @@
  "placeholder": "Search or paste URL",
  "results": {
  "accounts": "People",
+ "hashtags": "Hashtags",
  "more": "Load more"
  }
  },

diff --git a/src/components/search/Results.tsx b/src/components/search/Results.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@rsuite/icons'
 import { Entity, MegalodonInterface } from 'megalodon'
 import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
-import { BsSearch, BsPeople } from 'react-icons/bs'
+import { BsSearch, BsPeople, BsHash } from 'react-icons/bs'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Input, InputGroup, List, Avatar } from 'rsuite'
 import { Server } from 'src/entities/server'
@@ -19,21 +19,32 @@ export default function Results(props: Props) {
 
  const [word, setWord] = useState<string>('')
  const [accounts, setAccounts] = useState<Array<Entity.Account>>([])
+ const [hashtags, setHashtags] = useState<Array<Entity.Tag>>([])
 
  const search = async (word: string) => {
  const res = await props.client.search(word, { limit: 5 })
  setAccounts(res.data.accounts)
+ setHashtags(res.data.hashtags)
  }
 
  const loadMoreAccount = useCallback(async () => {
  const res = await props.client.search(word, { type: 'accounts', limit: 5, offset: accounts.length })
  setAccounts(prev => prev.concat(res.data.accounts))
  }, [word, accounts])
 
- const open = (user: Entity.Account) => {
+ const loadMoreHashtag = useCallback(async () => {
+ const res = await props.client.search(word, { type: 'hashtags', limit: 5, offset: hashtags.length })
+ setHashtags(prev => prev.concat(res.data.hashtags))
+ }, [word, hashtags])
+
+ const openUser = (user: Entity.Account) => {
  router.push({ query: { user_id: user.id, server_id: props.server.id, account_id: props.server.account_id } })
  }
 
+ const openTag = (tag: Entity.Tag) => {
+ router.push({ query: { tag: tag.name, server_id: props.server.id, account_id: props.server.account_id } })
+ }
+
  return (
  <>
  <div style={{ margin: '12px 0' }}>
@@ -47,14 +58,14 @@ export default function Results(props: Props) {
  {/* accounts */}
  {accounts.length > 0 && (
  <div style={{ width: '100%' }}>
- <div style={{ fontSize: '1.2em', marginBottom: '0.4em' }}>
+ <div style={{ fontSize: '1.2em', margin: '0.4em 0' }}>
  <Icon as={BsPeople} style={{ fontSize: '1.2em', marginRight: '0.2em' }} />
  <FormattedMessage id="search.results.accounts" />
  </div>
  <List>
  {accounts.map((account, index) => (
  <List.Item key={index} style={{ backgroundColor: 'var(--rs-border-primary)', padding: '4px 0' }}>
- <User user={account} open={open} />
+ <User user={account} open={openUser} />
  </List.Item>
  ))}
  <List.Item
@@ -67,6 +78,31 @@ export default function Results(props: Props) {
  </List>
  </div>
  )}
+ {/* hashtags */}
+ {hashtags.length > 0 && (
+ <div style={{ width: '100%' }}>
+ <div style={{ fontSize: '1.2em', margin: '0.4em 0' }}>
+ <Icon as={BsHash} style={{ fontSize: '1.2em', marginRight: '0.2em' }} />
+ <FormattedMessage id="search.results.hashtags" />
+ </div>
+ <List>
+ {hashtags.map((tag, index) => (
+ <List.Item key={index} style={{ backgroundColor: 'var(--rs-border-primary)', padding: '4px 0' }}>
+ <div style={{ padding: '12px 8px', cursor: 'pointer' }} onClick={() => openTag(tag)}>
+ #{tag.name}
+ </div>
+ </List.Item>
+ ))}
+ <List.Item
+ key="more"
+ style={{ backgroundColor: 'var(--rs-border-primary)', padding: '1em 0', textAlign: 'center', cursor: 'pointer' }}
+ onClick={() => loadMoreHashtag()}
+ >
+ <FormattedMessage id="search.results.more" />
+ </List.Item>
+ </List>
+ </div>
+ )}
  </>
  )
 }