全文検索機能: Front-end

全文検索用APIが作成できたので、フロントエンドを実装していきます。

Front-end

  1. 画面右側の検索用のインタフェースを作成します(Search.js)
  2. 検索画面へアクセスするためのURIhttps://example.com/#/searchを追加します(App.js)
  3. 左側のナビゲーションに検索画面へのリンクを追加します(Sidebar.js)

Search.js

./src/containers/Search.jsを作成し、編集していきます。

touch ./src/containers/Search.js

以下のSearch.jsの中身をコピーし、./src/containers/Search.jsを置き換えてください。

主なポイントは以下です。

const searchPosts = async (type, nextToken = null) => {
  if (query === '') return;

  const res = await API.graphql(graphqlOperation(searchPostsGql, {
    filter: { content: { matchPhrase: query } },
    limit: 20,
    nextToken: nextToken,
  }));

  dispatch({ type: type, posts: res.data.searchPosts.items })
  setNextToken(res.data.searchPosts.nextToken);
  setIsLoading(false);
}
  • queryの中身が空であればクエリを実行しません
  • API.graphql(...では、AppSyncのマネジメントコンソールで試したのと同じ、matchPhraseを利用しています

Searchコンポーネントへのアクセスを追加

App.jsの変更

以下のApp.jsの中身をコピーし、./src/App.jsを置き換えてください。

  • App.js (2 kb)
  • <HashRouter>
      <Switch>
        <Route exact path='/' component={Timeline} />
        <Route exact path='/search' component={Search} />
        <Route exact path='/global-timeline' component={AllPosts} />
        <Route exact path='/:userId' component={PostsBySpecifiedUser}/>
        <Redirect path="*" to="/" />
      </Switch>
    </HashRouter>
    
    • /searchへアクセスがあった場合、先ほど実装したSearchコンポーネントをレンダリングするよう変更しました

    Sidebar.jsの変更

    以下のSidebar.jsの中身をコピーし、./src/containers/Sidebar.jsを置き換えてください。

    ポイントは以下です。

    <ListItem
      button
      selected={activeListItem === 'search'}
      onClick={() => {
        Auth.currentAuthenticatedUser().then((user) => {
          history.push('search');
        })
      }}
      key='search'
    >
      <ListItemIcon>
        <SearchIcon />
      </ListItemIcon>
      <ListItemText primary="Search" />
    </ListItem>
    
    • 新たに/searchへのリンクをサイドバーへ追加しました

    変更の反映

    $ amplify publish
    

    $ amplify mock apiを動かしている状態で$ amplify push$ amplify publishを実行した場合、Parameters: [authRoleName] must have valuesというエラーがでて$ amplify push$ amplify publishが失敗する場合があります。 その場合は、Ctrl + C$ amplify mock apiのプロセスを中断してから、$ amplify push$ amplify publishを実行してください。

    動作確認

    • ホストされたウェブアプリケーションを開き、左側のSearchをクリックします
    • 検索ワードを入力し、SEARCHボタンをクリックします
    • 結果が表示されれば成功です