All files / client/components/SearchPage SearchResult.tsx

0% Statements 0/25
0% Branches 0/14
0% Functions 0/8
0% Lines 0/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122                                                                                                                                                                                                                                                   
import React from 'react'
import Page from 'components/PageList/Page'
import Icon from 'components/Common/Icon'
import SearchResultList from './SearchResultList'
import { Page as PageType } from 'client/types/crowi'
 
interface Props {
  tree: string
  pages: PageType[]
  searchingKeyword: string
  searchResultMeta: {
    took?: number
    total?: number
  }
  searchError: Error | null
}
 
interface State {
  active: string | null
}
 
// Search.SearchResult
export default class SearchResult extends React.Component<Props, State> {
  static defaultProps = {
    tree: '',
    pages: [],
    searchingKeyword: '',
    searchResultMeta: {},
    searchError: null,
  }
 
  constructor(props: Props) {
    super(props)
 
    this.state = { active: null }
  }
 
  updateActivePage(pageId: string) {
    if (this.state.active !== pageId) {
      this.setState({ active: pageId })
    }
  }
 
  isNotSearchedYet() {
    return this.props.searchResultMeta.took === undefined
  }
 
  isNotFound() {
    return this.props.searchingKeyword !== '' && this.props.pages.length === 0
  }
 
  isError() {
    if (this.props.searchError !== null) {
      return true
    }
    return false
  }
 
  render() {
    const excludePathString = this.props.tree
 
    // console.log(this.props.searchError);
    // console.log(this.isError());
    if (this.isError()) {
      return (
        <div>
          <Icon name="alert" /> Error on searching.
        </div>
      )
    }
 
    if (this.isNotSearchedYet()) {
      return <div />
    }
 
    if (this.isNotFound()) {
      let under = ''
      if (this.props.tree !== '') {
        under = ` under "${this.props.tree}"`
      }
      return (
        <div>
          <Icon name="emoticonSad" /> No page found with &quot;{this.props.searchingKeyword}&quot;{under}
        </div>
      )
    }
 
    const listView = this.props.pages.map(page => {
      const pageId = '#' + page._id
      return (
        <Page
          page={page}
          linkTo={pageId}
          key={page._id}
          excludePathString={excludePathString}
          isActive={this.state.active === page._id}
          onClick={() => this.updateActivePage(page._id)}
        >
          <div className="page-list-option">
            <a href={page.path}>
              <Icon name="arrowRightCircle" />
            </a>
          </div>
        </Page>
      )
    })
 
    return (
      <div className="search-result row" id="search-result">
        <div className="col-md-4 d-none d-md-block page-list search-result-list" id="search-result-list">
          <nav>
            <ul className="page-list-ul nav">{listView}</ul>
          </nav>
        </div>
        <div className="col-md-8 search-result-content" id="search-result-content">
          <SearchResultList pages={this.props.pages} searchingKeyword={this.props.searchingKeyword} />
        </div>
      </div>
    )
  }
}