Create Search

[vogelino]

• [x] Create Search field component in Header
• [x] Perform search query when typing
• [x] Show loading state while querying
• [x] Create search results parent component
  • [x] Create tabs component
  • [x] Create tab help info
  • [x] Listen on tab key event and change active tab accordingly
• [x] Create search result line with icons
  • [x] Listen on arrow keys events and highlight result accordingly
  • [x] Listen on hover event and highlight result accordingly
• [x] Create loading search results components
• [x] Create no result page
• [x] Highlight the search query on titles

[vogelino]

Here is the graphcool query we should use for the search:

query Search($searchQuery: String!) {
  allEvents(
    filter: {
      OR: [
        { eventTitle_contains: $searchQuery }
        { eventDescription_contains: $searchQuery }
        { eventStakeholders_some: {
          stakeholderFullName_contains: $searchQuery
        } }
      ]
    }
    orderBy: eventStartDate_ASC
  ) {
    id
    eventTitle
  }
  allDocuments(
    filter: {
      OR: [
        { documentTitle_contains: $searchQuery }
        { documentDescription_contains: $searchQuery }
        { mentionedStakeholders_some: {
          stakeholderFullName_contains: $searchQuery
        } }
      ]
    }
    orderBy: documentCreationDate_ASC
  ) {
    id
    documentTitle
  }
  allStakeholders(
    filter: {
      OR: [
        { stakeholderFullName_contains: $searchQuery }
        { stakeholderDescription_contains: $searchQuery }
      ]
    }
    orderBy: stakeholderFullName_ASC
  ) {
    id
    stakeholderFullName
  }
}

[vogelino]

The pull request #35 is ready to be reviewed @flozia.