search

happylolonly / events-free-spa

:shaved_ice: Free events!
https://eventsfree.by
8 stars 5 forks source link

Button for adding event to calendar #3

Closed happylolonly closed 5 years ago

happylolonly commented 5 years ago

Необходимо сделать кнопку добавления ивента в календарь, которая будет подходить под стилистику сайта. Пример есть например тут - https://afisha.tut.by/exhibition/vystavka_reptiliy_tropiki/

image

happylolonly commented 5 years ago

Here some plan to make task easier:

  1. Make fork of repository and create new branch 'calendar-button'
  2. Create component components/CalendarButton It will be statefull component with state: { isDropdownOpen: <bool> }. I think now props not needed here.
  3. Create component components/CalendarButton/Dropdown with props: items(Array)
  4. Use Dropdown in CalendarButton
  5. Create function onClick to change state of CalendarButton and show/hide Dropdown
  6. Create function handleDropdownClick, what allow me add some logic, when server's logic for adding to calendar will be done.
  7. Google some examples of this button and suggest some design, which appropriate to our app.
  8. White this CSS.
  9. You done this!
happylolonly commented 5 years ago

I have thought and find out that server logic for calendar is not needed. We can do all on the client side! Interesting link - https://github.com/jasonsalzman/react-add-to-calendar/blob/master/src/ReactAddToCalendar.js

So, some updates for this task:

  1. Steal code from link above for Google Calendar and blob for .ics (iCal).
  2. Add id prop for button component.
  3. Connect this button to Redux and get data for id's event.
  4. Test all together.
  5. Add Outlook option.
  6. Cool, I think that's all now;)
happylolonly commented 5 years ago

@elenagolovko , thanks)