[FEATURE] Improve Timeline / Events App

[ArkadiK94]

Detailed description

🔨Installation Guide

• From main menu , Opportunities tab > TheCyberEvents tab
• TheCyberEvents
• Current Design

TODO: make it fit for community timeline

example events:

• [x] fix design
• [x] remove unwanted things
• [x] rename to community events/events only
• [x] build and connect with backend

Context

The timeline events app is important to the user stay updated with current events so make it fit to the site.

Possible implementation

No response

Additional information

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

It's great having you contribute to this project

🌟 Welcome to the community 🌟

• If you would like to continue contributing to open source and would like to do it with an awesome inclusive community.
• You should join our Discord chat and our GitHub Organisation.
• We help and encourage each other to contribute to open source little and often 😄.
• Any questions let us know.

[ArkadiK94]

• [ ] make the actions in DisplayCommunityEvents and ManageCommunityEvents to be functional
• [x] readux with backend for CommunityEvents
• [x] get user type from backend and make the admin dashboard to be visibale only for admins

[ArkadiK94]

• [x] discuss the right way to store users events for now it was temporarily added in separate state in the userDetails file
• [x] pick more suitable colors for the buttons or leave current colors
• [x] add community events in back-end

[ArkadiK94]

• [x] show more data about an event when the user joins it
• [x] add event router - when user clicks on even a new page should render of event , link etc things will keep after register.
• [x] when the user was "joined" and click again on this button, popup a message to ask the users if they want to remove their registration from the event, and act accordingly

[ArkadiK94]

• [x] follow this declaration of type: there are only two statuses values one is "active" the other is "canceled". The "past" tab is for events which have "active" status but the date has pasted, and "upcoming" tab is for "active" status events with future date.

[ArkadiK94]

• [ ] add different event types : private / public - private we can keep for teams and interns
• [x] don't show how much space left only show if the event is full or not , and how much registered to this event already
• [ ] show all the event in a calendar - fullcalendar-react
• [x] add a filter of full events and events that have some space left
• [x] when someone will join an event there will be an option to add to their google calendar - add-to-calendar-button
• [x] check (with Kabir) if we need to use here web socket or instead toast an message when this event if full and after it will change to right status.
• [x] when someone joined an event and clicks again toast a message asking if they sure that they want to unregister from this event, and add warning that if there unregister maybe they could not register again later depends on the space left in an event

[ArkadiK94]

• [x] some events can go on next day - add option to pick startDate and endDate. Display it properly. Max 48 hours, two days.

[ArkadiK94]

• [x] add tab for on going events and display the relevant events there

[ArkadiK94]

• [x] display and manage list of speakers and activities which will be included in the event

[ArkadiK94]

• [x] make sure the time is adjusted to each user's time zone

[ArkadiK94]

• [ ] invite all, button, we will send that link to join to all of the users those accepted event notifications

• [ ] copy invite link, invite, on clicking invite, we can show connected user, if someone click on any users displayed over there, we can send email or direct message to this user with invite link : UserName is inviting you to join this event ,

• [ ] we don't need to add notification on/off buttons in event page, but we could toast message for users that join an event to tell them to go to settings page to turn on the notifications so they will get notified.

when click the button:

• [ ] as a admin we can invite all users
• [ ] as a user, they can invite friends and non register friends,

like with username also with search bar and check box

[ArkadiK94]

• [ ] make it adaptable to mobile

[ArkadiK94]

• when there is ongoing event:
  • [x] when user opens the page the tab of ongoing events will open first.
  • [ ] The tab of ongoing events will have different color
  • [ ] add bar under main header for news/notifications/updates and show there also ongoing events. as example:

https://github.com/thecyberworld/TheCyberHUB/assets/76536506/12398328-d2f1-4ac7-9c10-c5120e9a38ca

• [x] add logic of how many participants have joined the event the real number.
  91 have joined the event

[ArkadiK94]

• [ ] add a reminder for admin/ team member, when they post on social media about event, they need to add event link in profile/bio

[ArkadiK94]

• [ ] add event image

[ArkadiK94]

timeline :

• [x] handle day 1 / day 2
• [x] handle multi-select of topics
• [ ] @ use it like in github when they write first @ it will auto complete user by username
• [x] in backend add to schema the timeline as one whole obj , don't need new route can use updateEvent route

[ArkadiK94]

• [ ] set in backend, after some specific time (months / years) events will be removed automatically

[ArkadiK94]

• [x] display timeline:

we will keep the sub-event cards in columns instead of rows:

• right side user logo(will get from user details)
• topic
• description
• time

---

• [ ] if one sub-event is done now, will move to the end with opacity 70%
  • ongoing
  • upcoming
  • done

[ArkadiK94]

• [ ] add dummy avatars for activities as well , we can have for every topic different activity avatar or one for all activities, add in the main s3:
  • we can have 2-3 avatars one for each general subject : development, security, operations
  • when we will choose one of the topics it will map to the right avatar automatically

[ArkadiK94]

• [ ] in UserInfo component, have an option to get only "name" or "username" (with @ symbol before the name) check to see if this name/username is a user:
  • if it is a registered user use the avatar (avatarDummy for non avatar) ,username and name as needed.
  • if it is not a registered user, we assume that this is an activity so only display the "name" (without "username" field) and the avatar (use one from the activity avatars depends on the sub-event topic )

[ArkadiK94]

• [x] sort the sub-events , by start-time/end-time

[ArkadiK94]

• [ ] make a show details button with expand hight instead of scroll inside the displayed timeline item

[ArkadiK94]

• [ ] fix: when we edit the event , the timeline edit screen will open as well , in this way if the start date / end date of event will change , we will have to change the start date/end date of the sub-events as well so there will be adjustment of sub-events with main event

[ArkadiK94]

• [ ] fix: when change the startDate and endDate of the main event , the sub-event startDate and endDate are still as were before, need to fix it because it don't give us an option to save , only if we manually pick the date again of the subevent, it is confusing