#100DAYSOFCODE Day95

#100DAYSOFCODE Day95

Haorong Li's photo
Haorong Li

Improve Assessment - Student Profiles

Screen Shot 2021-06-06 at 1.24.53 AM.png

Todos:

  • IDs
  • use useCallback and useMemo
  • memorize the average number

unable to search by full name

The fetching data has first name and last name, and I never thought about someone will search the full name. I used || statement check first name and last name, so I check it to full name and use the includes method to check it. However, should I make it also working as the first name with double space and last name?

else if (nameQuery && nameQuery.length > 0) {
      return data.filter(
        //(item) => item.firstName.toLowerCase().includes(nameQuery) || item.lastName.toLowerCase().includes(nameQuery)
        (item) => `${item.firstName} ${item.lastName}`.toLowerCase().includes(nameQuery)
      )
    }

I counted the wrong average number.

I thought the array stating at 0, so it needs to plus 1 to make it start at 1.

    //data.grades.reduce((accumulator, currentValue) => 
    //Number(accumulator)+Number(currentValue)) / (data.grades.length + 1)
    (data.grades.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue)) / data.grades.length).toFixed(3)

Instead of storing the search results in the state, you could just do the filtering in render.

I used useEffect and useState to observe data, filterQuery if they are changed. Actually, it can make a filter before "map" data.

new way:


  const queryFilter = (data, nameQuery, tagQuery) => {
    if (tagQuery && tagQuery.length > 0 && nameQuery && nameQuery.length > 0) {
      return data.filter(
        (item) =>
          (item.firstName.toLowerCase().includes(nameQuery) || item.lastName.toLowerCase().includes(nameQuery)) &&
          item?.tags?.toString().includes(tagQuery)
      )
    } else if (nameQuery && nameQuery.length > 0) {
      return data.filter(
        //(item) => item.firstName.toLowerCase().includes(nameQuery) || item.lastName.toLowerCase().includes(nameQuery)
        (item) => `${item.firstName} ${item.lastName}`.toLowerCase().includes(nameQuery)
      )
    } else if (tagQuery && tagQuery.length > 0) {
      return data.filter((item) => {
        return item?.tags?.toString().includes(tagQuery)
      })
    }
    return data
  }

  //if (!searchData) return <div>Loading..</div>
  if (!studentData) return <div>Loading..</div>

  return (
    <div className='student-profile-view-container'>
      <Search setNameQuery={setNameQuery} setTagQuery={setTagQuery} />
      <div className='student-profile-list'>
        {queryFilter(studentData, nameQuery, tagQuery).map((student) => (
          <StudentCard data={student} key={student.id} setStudentData={setStudentData} />
        ))}
      </div>
    </div>
  )
100DaysOfCode