reactsocialnetwork
reactsocialnetwork copied to clipboard
gbowne1
[feature]: Further enhance the Event component
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
We need to plan this pretty soon to finish and round out the current Events feature.
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 :)
@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:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
Reduce white space
Adjust the CSS of the Events__content and Events__stack classes to reduce the padding and margin.
-
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.
-
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.
