0

I have the sample array of doctors who has the dates when they are available.

"items": [
  {
    "id": 1,
    "name": "Fonzie Althrop",
    "speciality": "Thoracic Surgery",
    "offline_available": "12/20/2020",
    "price": 3600
  },
  {
    "id": 2,
    "name": "Nerte Brodley",
    "speciality": "Pediatric Hematology-Oncology",
    "offline_available": "11/20/2020",
    "price": 500
  },
  {
    "id": 3,
    "name": "Row Lindholm",
    "speciality": "Radiologist",
    "offline_available": "11/12/2020",
    "price": 3000
  },
  {
    "id": 4,
    "name": "Davidson Houliston",
    "speciality": "Neurological Surgery",
    "offline_available": "11/10/2020",
    "price": 8300
  }, ... ]

I need to filter them by dates when they are available. I think I managed to solve how to filter doctors who available today. But I have additional filters that show doctors who available within next 3 days and within 2 weeks. My current code looks this way:

function App () {

  const [data, setData] = useState(importedJSON)
  const [dataToRender, setDataToRender] = useState(importedJSON)
  const [filters, setFilters] = useState([]) // other filters
  const [dateFilters, setDateFilters] = useState('')

  useEffect(() => {
    let copyArr = [...data]

    if (filters.length) {
      filters.forEach(item => {
        copyArr = copyArr.filter(dataItem => {
          return dataItem[item] === true
        })
      })
    }

    if (dateFilters) {
      switch (dateFilters) {
        case 'today':
          copyArr = copyArr.filter(item => {
            let today = new Date().toLocaleDateString()
            console.log(item.offline_available.toString() === today.toString())
            return item.offline_available.toString() === today.toString()
          })
          break
        // case 'next3days':
        //   copyArr = copyArr.filter(item => {
        //     let date = new Date(item.offline_available)
        //     let today = new Date()
        //     // console.log(date.toString() == today.toString() )
        //     // console.log(item.offline_available)
        //     // return item.offline_available.toString() === today.toString()
        //   })
        //   break
        default:
          console.log('noooo')
      }
    }

    setDataToRender(copyArr)
  }, [filters, dateFilters, data])

  const handleFilters = (value) => {
    setFilters(value)
  }

  const handleDateFilters = (val) => {
    if (val) {
      setDateFilters(val)
    } else {
      setDateFilters('')
    }
  }

  return (
    <div className='App'>
      <div className='container'>
        <ul className='filters-list'>
          <Availability filter={handleFilters} dateFilter={handleDateFilters} />
        ...
        </ul>
        <div className='app__title'>Doctors List</div>
        ...
        <ul className='list'>
          {dataToRender.map(item =>
            <Doctor item={item} key={item.id} />
          )}
        </ul>
      </div>
    </div>
  )
}

export default App

As you could see I tried to solve filtering within 3 days, but I struggle with dates.

Please give me a hint how to filter within 3 days and 2 weeks. If you have additional comments to my code, please mention it as well, will appreciate so much.

jakhando
  • 113
  • 1
  • 9
  • `item.offline_available` is already a string, so there's no need to call `.toString()` on it. As far as getting the date in 3 days or 2 weeks, we have questions about that: [Add days to JavaScript Date](https://stackoverflow.com/q/563406/215552), and of course weeks are just 7 days. – Heretic Monkey Nov 09 '20 at 17:01
  • Does this answer your question? [How to filter the data using date from JSON format](https://stackoverflow.com/questions/23650065/how-to-filter-the-data-using-date-from-json-format) – Heretic Monkey Nov 09 '20 at 17:03

1 Answers1

0

You can do something like this:-

// 1. date createdAt - should be the date you want to compare
// 2. get date now
const now = Date.now()
// 3. get duration of time(in milliseconds) for 1 day
const ONE_DAY = 1000 * 60 * 60 * 24 // in milliseconds

// do something for the next three days
if(now < createdAt + (ONE_DAY * 3)) {
// do something
}
lala
  • 1,309
  • 9
  • 21