[feature]: Further enhance the Event component

[gbowne1]

Is your feature request related to a problem? Please describe.

Some minor enhancements to the Event component are needed

• No way to set event as Private or Public Event
• No Start and End time set
• Check mark for reoccurring event
• Google Maps pin location
• Some way to edit or reschedule events. Would close the event but push notications to event subscribers that the event was changed.
• Some way to cancel events with or without rescheduing.
• Some way of marking the events as personal timeline events [Birthday, Anniversary, Birth, etc.]
• That is still quite a bit of white space between the event picture and the buttons on the right side of the event

Describe the solution you would like

Not sure at this point but we should make use of the browsers internals for some things that do not require extensive security.

Describe the alternatives you have tried

Facebook and Nextdoor have similar workflows but still leave a lot to be desired.

Additional context

Other ideas welcome

[gbowne1]

We need to plan this pretty soon to finish and round out the current Events feature.

[gbowne1]

@manuel12 some timeline for adding these?

[manuel12]

I really have no ideas on how to implement most of this points at the moment, hence why I didn't assign to myself.
Feel free to assign to anyone interested in adding these :)

[gbowne1]

@manuel12 here are some thoughts I have on this, most of these would probably require modifications to the SingleEvent.jsx

To add the features mentioned to the Events component, we need to make changes to the existing code. Here are the steps to add each feature:

1. Set event as Private or Public Event

   Add a new field to the event object in the database called isPrivate with a boolean value.
   In the CreateEventModal component, add a checkbox input for the isPrivate field.
   In the handleSubmit function of CreateEventModal, pass the isPrivate value to the API call to create a new event.

2. Set Start and End time

   Add two new fields to the event object in the database called startTime and endTime with date-time values.
   In the CreateEventModal component, add two input fields for the startTime and endTime fields.
   In the handleSubmit function of CreateEventModal, pass the startTime and endTime values to the API call to create a new event.

3. Check mark for recurring event

   Add a new field to the event object in the database called isRecurring with a boolean value.
   In the CreateEventModal component, add a checkbox input for the isRecurring field.
   In the handleSubmit function of CreateEventModal, pass the isRecurring value to the API call to create a new event.

4. Google Maps pin location

   Add a new field to the event object in the database called location with a string value.
   In the CreateEventModal component, add an input field for the location field.
   In the handleSubmit function of CreateEventModal, pass the location value to the API call to create a new event.

5. Edit or reschedule events

   Add an "Edit" button to the SingleEvent component.
   Create a new EditEventModal component that is similar to the CreateEventModal component, but pre-populates the input fields with the existing event data.
   In the SingleEvent component, add an onClick function to the Edit button that opens the EditEventModal component.
   In the EditEventModal component, add a handleSubmit function that sends a PUT request to the API to update the existing event data.

6. Cancel events with or without rescheduling

   Add a "Cancel" button to the SingleEvent component.
   In the SingleEvent component, add an onClick function to the Cancel button that sends a DELETE request to the API to delete the event.

7. Mark events as personal timeline events

   Add a new field to the event object in the database called eventType with a string value.
   In the CreateEventModal component, add a dropdown input for the eventType field with options for Birthday, Anniversary, Birth, etc.
   In the handleSubmit function of CreateEventModal, pass the eventType value to the API call to create a new event.

8. Reduce white space

   Adjust the CSS of the Events__content and Events__stack classes to reduce the padding and margin.

9. Subscribe to a particular user's public events

   Create a new User component that displays the user's public events.
   In the User component, fetch the user's public events from the API and display them using the SingleEvent component.

10. Push events to a Google Calendar or a shareable note. I would probably install and import the gapi package

    Add a "Add to Google Calendar" button to the SingleEvent component.
    In the SingleEvent component, add an onClick function to the "Add to Google Calendar" button that opens a new window with a Google Calendar link pre-populated with the event data.

[gbowne1]

@balajik any ideas?

[balajik]

@gbowne1 - I don't much idea about this. Will have a look.