Skip to content

Latest commit

 

History

History
157 lines (124 loc) · 4.51 KB

Workshop.md

File metadata and controls

157 lines (124 loc) · 4.51 KB

Build a React Search Bar that Queries a Database Workshop

Outline


Workshop Sections

Step 1 - Download the code & install dependencies

  • git clone https://github.com/kintone-workshops/kintone-react-search-bar
  • Inside Kintone_React_Search_Bar, run npm install
  • npm install -g @kintone/customize-uploader

Step 2 - Kintone Setup

  • Log into your Kintone Subdomain
  • Create a Kintone App
    • Add text fields for title and author
    • Create a Custom View
    • Get the View ID
  • Input sample data

Step 3 - Project Setup

  • Create .env using .env.example as a template
  • Fill out the .env file
  • Update customize-manifest.json with App ID

Step 4 - Code Overview & Complete the Code

  • src/index.js
  • src/components/SearchBar.js
  • src/components/ResultList.js

See Complete the Code section for details

Step 5 - Build & Upload to Kintone

  • Run npm run start

Step 6 - Next Step

Some ideas to further build out the project:

  • Production build -> Package.json
  • Click on the search result -> go to record detailed view
  • Button to clear search results
  • Include Alternative title field data

Complete the Code

src/index.js

  • The handleChange function takes in the browser-generated event object and the listItems.
  • The user input stored in the event object is used to compare with the title field.
  • filter() accepts a function as a parameter.
    • That function acts as a condition to evaluate each item in the array as true-or-false.
    • filter() then returns an array of items passing that condition.
  • Conclude by setting setSearchResults(filterResults)

Incomplete Version

const handleChange = e => { // e is a typical way to name the browser-generated event object
  let filterResults;

  console.log('filterResults: \n', filterResults);

  setSearchResults(filterResults);
};

Completed Version

const handleChange = e => { // e is a typical way to name the browser-generated event object
  let filterResults = listItems.filter(record =>
    record.title.toLowerCase().includes(e.target.value.toLowerCase()) // filter condition
  );

  console.log('filterResults: \n', filterResults);

  setSearchResults(filterResults);
};

src/components/SearchBar.js

  • Complete the <input /> element to build the search bar
  • className='SearchBar'
  • onChange={props.handleChange}

Incomplete Version

className=''
...
onChange={props.handleChange}

Completed Version

className='SearchBar'
type='text'
id='header-search'
placeholder='Search Manga Titles'
name='Search Bar for Manga Titles'
onChange={props.handleChange}

src/components/ResultList.js

  • Finishing the ResultList component to output the list of records by using map function on searchResults
  • {props.searchResults.map(function (resultRecord) {})}
  • Inside we would return JSX: return <li key={resultRecord.uniqueKey}>{resultRecord.title} written by {resultRecord.author}</li>

Incomplete Version

export default function ResultList(props) {
  return (
    <div className='ResultList'>

    </div>
  );
};

Completed Version

export default function ResultList(props) {
  return (
    <div className='ResultList'>
      <ul>
        {props.searchResults.map(function (resultRecord) {
          return (
            <li key={resultRecord.uniqueKey}>
              {resultRecord.title} written by {resultRecord.author}
            </li>
          )
        })}
      </ul>
    </div>
  );
};