[FEATURE] Improve Timeline / Events App

th3cyb3rhub / TheCyberHUB

Welcome to TheCyberHUB, a community-driven platform for hackers, cybersecurity enthusiasts, and IT professionals. Our platform provides a variety of free resources, including Capture The Flag (CTF) challenges, courses, blogs, forums, and much more.

http://www.thecyberhub.org/

MIT License

149 stars 170 forks source link

[FEATURE] Improve Timeline / Events App #564

Open ArkadiK94 opened 9 months ago

ArkadiK94 commented 9 months ago

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] commented 9 months ago

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](https://discord.gg/QHBPq6xP5p) chat and our [GitHub Organisation](https://github.com/thecyberworld). - We help and encourage each other to contribute to open source little and often 😄. - Any questions let us know.

ArkadiK94 commented 9 months ago

[ ] 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 commented 9 months ago

[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 commented 9 months ago

[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 commented 9 months ago

[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 commented 8 months ago

[ ] 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 commented 8 months ago

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

ArkadiK94 commented 8 months ago

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

ArkadiK94 commented 8 months ago

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

ArkadiK94 commented 8 months ago

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

ArkadiK94 commented 8 months ago

[ ] 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 commented 8 months ago

[ ] make it adaptable to mobile

ArkadiK94 commented 8 months ago

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 commented 8 months ago

[ ] 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 commented 8 months ago

[ ] add event image

ArkadiK94 commented 8 months ago

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 commented 7 months ago

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

ArkadiK94 commented 7 months ago

[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 commented 7 months ago

[ ] 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 commented 7 months ago

[ ] 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 commented 7 months ago

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

ArkadiK94 commented 7 months ago

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

ArkadiK94 commented 7 months ago

[ ] 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 commented 6 months ago

[ ] 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