按月过滤计划列表

Question

I want to list plans by month, but my code is not working. I want to set a header, for example September, and then list all plans for that month.

My data:

const plans =  [
    {
        "done": true,
        "datetime": "2020-01-22T01:00:00+00:00",

    },
    {
        "done": true,
        "datetime": "2020-01-25T03:00:00+00:00",
        "name": "Read a book",
    },
    {
        "done": false,
        "datetime": "2020-01-29T01:00:00+00:00",
        "name": "Travel",

    },
    {
        "done": false,
        "datetime": "2020-02-02T02:00:00+00:00",
        "name": "Vaccations",
    },
    {
      "done": false,
      "datetime": "2020-03-02T01:00:00+00:00",
      "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-04-02T01:00:00+00:00",
    "name": "Do excersice",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Work",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Watch netflix",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "No plans",
  }
]

And this is in my App.js (React):

return (
    <div className="App">
      {
      plans.map((todo, idx) => {
        const currentMonth = moment(todo.datetime).format('MM')
        const anotherMonth = plans[idx + 1] ? plans[idx + 1].datetime : undefined
        const anotherMonthConverted = moment(anotherMonth).format('MM') 

        console.log(anotherMonthConverted)
        return(
          <div key={idx}>
            <div>
            {
              currentMonth <= anotherMonth ? (
                <div>                 
                  <div>{moment(currentMonth).format('MMM')}</div>
                </div>
              ):(
                <div>
                </div>
              )
            }
            <div >{todo.name}</div>
            </div>
          </div>
        )
      })
      }
    </div>
  );
}

image output example

Answer 1

You could use moment for this, it works well with date. So you could sort yur array this way:

const App = () => {
  const plans =  [
    {
        "done": false,
        "datetime": "2020-05-04T01:00:00+00:00", // May as first item
        "name": "Watch netflix",
    },
    {
        "done": true,
        "datetime": "2020-01-22T01:00:00+00:00",

    },
    {
        "done": true,
        "datetime": "2020-01-25T03:00:00+00:00",
        "name": "Read a book",
    },
    {
        "done": false,
        "datetime": "2020-01-29T01:00:00+00:00",
        "name": "Travel",

    },
    {
        "done": false,
        "datetime": "2020-02-02T02:00:00+00:00",
        "name": "Vaccations",
    },
    {
      "done": false,
      "datetime": "2020-03-02T01:00:00+00:00",
      "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "No plans",
  },
  {
    "done": false,
    "datetime": "2020-04-02T01:00:00+00:00",
    "name": "Do excersice",
  },
  {
    "done": false,
    "datetime": "2020-05-04T01:00:00+00:00",
    "name": "Work",
  },

];
const orderedPlans = () => {
  return plans.sort((a, b) => {
    return moment(a.datetime) > moment(b.datetime)? 1 : -1; // handle the 0 case if you need, not done here
  });
}
  return <div>{orderedPlans().map(plan => <div>{plan.datetime}</div>)}</div>
}

render(<App />, document.getElementById('root'));

Here is a repro on stackblitz

Answer 2

I would suggest grouping your plans to make it easier to render them in a clean way.

const groupedPlans = plans.reduce((acc, val) => {
  const valMonth = moment(val.datetime).format('MMM');
  const planGroup = acc.find(plan => plan.month === valMonth);

  if (!planGroup) {
    acc.push({ month: valMonth, plans: [val] })
  } else {
    planGroup.plans = [...planGroup.plans, val];
  }

  return acc;
}, [])

This would make your data look like this.

[
  {
    month: 'Jan',
    plans: [
      {
        done: true,
        datetime: '2020-01-22T01:00:00+00:00'
      },
      {
        done: true,
        datetime: '2020-01-25T03:00:00+00:00',
        name: 'Read a book'
      },
      {
        done: false,
        datetime: '2020-01-29T01:00:00+00:00',
        name: 'Travel'
      }
    ]
  },
  {
    month: 'Feb',
    plans: [
      {
        done: false,
        datetime: '2020-02-02T02:00:00+00:00',
        name: 'Vaccations'
      }
    ]
  },
  {
    month: 'Mar',
    plans: [
      {
        done: false,
        datetime: '2020-03-02T01:00:00+00:00',
        name: 'No plans'
      }
    ]
  },
  {
    month: 'Apr',
    plans: [
      {
        done: false,
        datetime: '2020-04-02T01:00:00+00:00',
        name: 'Do excersice'
      }
    ]
  },
  {
    month: 'May',
    plans: [
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'Work'
      },
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'Watch netflix'
      },
      {
        done: false,
        datetime: '2020-05-04T01:00:00+00:00',
        name: 'No plans'
      }
    ]
  }
]

And you can render it like this, or however you like.

return (
    <div className="App">
      {
      groupedPlans.map((todo, idx) => {
        return(
          <div key={idx}>
            <div>
                <div>                 
                  <div>{todo.month}</div>
                </div>
                {todo.plans.map(plan => <div>{plan.name}</div>)}
            </div>
          </div>
        )
      })
      }
    </div>
  );
}