\n
\n \n #12 \n \n \n new_notification \n \n
\n
A new message notification, published to all guild members. Additionally sends the channelId to members that currently view the guild.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n channelId \n \n \n \n
\n\n \n \n
\n \n
\n \n guildId \n \n \n \n
\n\n \n \n
\n \n #13 \n \n \n toggle_online \n \n
\n
A notification that the user went online. Gets emited to guild members that currently view the guild and friends of the user.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n userId \n \n \n \n
\n\n \n \n
\n
\n \n #14 \n \n \n toggle_offline \n \n
\n
A notification that the user went offline. Gets emited to guild members that currently view the guild and friends of the user.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n userId \n \n \n \n
\n\n \n \n
\n
\n \n #15 \n \n \n addToTyping \n \n
\n
Emits the username to the channel the user is currently typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n
\n \n #16 \n \n \n removeFromTyping \n \n
\n
Emits the username to the channel the user was typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n
\n \n #17 \n \n \n send_request \n \n
\n
Emits a notification that a friends request was received
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n
\n
\n \n #18 \n \n \n add_friend \n \n
\n
Adds the added person to the friends list.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n
member \n \n
\n \n \n \n \n \n\n \n\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n
\n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n\n\n
\n \n #19 \n \n \n remove_friend \n \n
\n
Removes the former friend from the friends list.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #20 \n \n \n requestCount \n \n
\n
The amount of friends requests the user has
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n count \n \n \n \n
\n\n \n \n
\n \n
\n\n\n\n \n\n\n\n
Examples \n\n \n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n\n
\n\n\n \n \n
Messages \n\n\n
\n
\n \n
\n \n\n
\n
\n \n #1 \n \n \n toggleOnline \n \n
\n
Changes the users status to online and broadcasts it to all friends and guilds they are part of.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n
\n\n\n \n
\n \n\n
\n
\n \n #2 \n \n \n toggleOffline \n \n
\n
Changes the users status to offline and broadcasts it to all friends and guilds they are part of. Leaves all connected rooms.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n
\n\n\n \n
\n \n\n
\n
\n \n #3 \n \n \n joinUser \n \n
\n
Joins the users room. This room receives guild, DM & friend notifications
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n userId \n \n \n \n
\n\n \n \n
\n\n \n\n \n\n\n \n \n
\n \n
\n
\n
\n \n #4 \n \n \n joinChannel \n \n
\n
Joins the channels room. Checks if the user is a member of said channel. Receives message & typing events.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n channelId \n \n \n \n
\n\n \n \n
\n
\n \n #5 \n \n \n joinGuild \n \n
\n
Joins the guilds room. Requires member access. Receives guild member & channel events.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n guildId \n \n \n \n
\n\n \n \n
\n
\n \n #6 \n \n \n startTyping \n \n
\n
Emits the username to the channel they are typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n channelId \n \n \n \n
\n\n \n \n
\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n \n #7 \n \n \n stopTyping \n \n
\n
Removes the username from the channel they were typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n channelId \n \n \n \n
\n\n \n \n
\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n \n #8 \n \n \n getRequestCount \n \n
\n
Gets the amount of friend requests the user has.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n
\n
\n \n #9 \n \n \n leaveGuild \n \n
\n
Leaves the guild room.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n guildId \n \n \n \n
\n\n \n \n
\n
\n \n #10 \n \n \n leaveRoom \n \n
\n
Leaves the room.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n roomId \n \n \n \n
\n\n \n \n
\n
\n \n #11 \n \n \n addChannel \n \n
\n
A channel was created.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n\n \n \n
\n \n
\n \n name \n \n
\n\n \n \n \n
\n \n isPublic \n \n
\n\n \n \n \n
\n \n createdAt \n \n
\n\n \n \n \n
\n \n updatedAt \n \n
\n\n \n \n \n
\n \n hasNotification \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #12 \n \n \n deleteChannel \n \n
\n
A channel was deleted.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #13 \n \n \n editChannel \n \n
\n
A channel was edited
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n\n \n \n
\n \n
\n \n name \n \n
\n\n \n \n \n
\n \n isPublic \n \n
\n\n \n \n \n
\n \n createdAt \n \n
\n\n \n \n \n
\n \n updatedAt \n \n
\n\n \n \n \n
\n \n hasNotification \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #14 \n \n \n editGuild \n \n
\n
A guild was edited
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n name \n \n
\n\n \n \n
\n \n
\n \n icon \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #15 \n \n \n deleteGuild \n \n
\n
A guild was deleted.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #16 \n \n \n addMember \n \n
\n
A member got added to the guild.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n\n \n \n
\n \n
\n \n username \n \n
\n\n \n \n \n
\n \n image \n \n
\n\n \n \n \n
\n \n isOnline \n \n
\n\n \n \n \n
\n \n createdAt \n \n
\n\n \n \n \n
\n \n updatedAt \n \n
\n\n \n \n \n
\n \n isFriend \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #17 \n \n \n removeMember \n \n
\n
A member was removed from the guild.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #18 \n \n \n new_message \n \n
\n
A new message was sent to a channel.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n\n \n \n \n\n \n\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n
\n \n\n \n \n\n\n \n\n\n \n
\n \n text \n \n
\n\n \n \n \n
\n \n url \n \n
\n\n \n \n \n
\n \n filetype \n \n
\n\n \n \n \n
\n \n createdAt \n \n
\n\n \n \n \n
\n \n updatedAt \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #19 \n \n \n edit_message \n \n
\n
A message in this channel was edited.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n\n \n \n \n\n \n\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n
\n \n\n \n \n\n\n \n\n\n \n
\n \n text \n \n
\n\n \n \n \n
\n \n url \n \n
\n\n \n \n \n
\n \n filetype \n \n
\n\n \n \n \n
\n \n createdAt \n \n
\n\n \n \n \n
\n \n updatedAt \n \n
\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #20 \n \n \n delete_message \n \n
\n
A message in this channel was deleted.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #21 \n \n \n push_to_top \n \n
\n
A notification that pushes the DM to the top of the list.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n dmChannelId \n \n \n \n
\n\n \n \n
\n
\n \n #22 \n \n \n new_notification \n \n
\n
A new message notification, published to all guild members. Additionally sends the channelId to members that currently view the guild.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n channelId \n \n \n \n
\n\n \n \n
\n \n
\n \n guildId \n \n \n \n
\n\n \n \n
\n \n #23 \n \n \n toggle_online \n \n
\n
A notification that the user went online. Gets emited to guild members that currently view the guild and friends of the user.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n userId \n \n \n \n
\n\n \n \n
\n
\n \n #24 \n \n \n toggle_offline \n \n
\n
A notification that the user went offline. Gets emited to guild members that currently view the guild and friends of the user.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n userId \n \n \n \n
\n\n \n \n
\n
\n \n #25 \n \n \n addToTyping \n \n
\n
Emits the username to the channel the user is currently typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n
\n \n #26 \n \n \n removeFromTyping \n \n
\n
Emits the username to the channel the user was typing in.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n username \n \n \n \n
\n\n \n \n
\n
\n \n #27 \n \n \n send_request \n \n
\n
Emits a notification that a friends request was received
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n
\n
\n \n #28 \n \n \n add_friend \n \n
\n
Adds the added person to the friends list.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n
member \n \n
\n \n \n \n \n \n\n \n\n\n \n \n Additional properties are allowed.\n
\n \n \n \n \n
\n Additional properties are allowed.\n
\n \n \n \n \n \n\n\n\n\n\n \n \n\n \n\n \n\n\n \n\n \n\n\n\n\n\n\n\n \n \n
\n \n #29 \n \n \n remove_friend \n \n
\n
Removes the former friend from the friends list.
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n id \n \n \n \n
\n\n \n \n
\n
\n \n #30 \n \n \n requestCount \n \n
\n
The amount of friends requests the user has
\n \n \n\n
\n \n
\n\n\n\n\n \n \n\n
\n \n \n
\n \n\n
\n \n
\n \n
Payload \n \n
\n \n \n \n \n \n\n\n \n
\n \n count \n \n \n \n
\n\n \n \n
\n \n \n \n \n \n\n\n"
},
{
"path": "server/static/js/main.js",
"content": "/* eslint-disable */\n\nfunction bindExpanders() {\n var props = document.querySelectorAll('.js-prop');\n for (let index = 0; index < props.length; index++) {\n const prop = props[index];\n prop.addEventListener('click', function (ev) {\n ev.stopPropagation();\n ev.currentTarget.parentElement.classList.toggle('is-open');\n });\n }\n}\n\nfunction highlightCode() {\n var blocks = document.querySelectorAll('.hljs code');\n\n for (var i = 0; i < blocks.length; i++) {\n hljs.highlightBlock(blocks[i]);\n }\n}\n\nfunction bindMenuItems() {\n var items = document.querySelectorAll('.js-menu-item');\n\n for (var i = 0; i < items.length; i++) {\n items[i].addEventListener('click', function () {\n document.getElementById(\"burger-menu\").checked = false;\n });\n }\n}\n\nwindow.addEventListener('load', highlightCode);\nwindow.addEventListener('load', bindExpanders);\nwindow.addEventListener('load', bindMenuItems);\n"
},
{
"path": "server/ws/actions.go",
"content": "package ws\n\n// Subscribed Messages\nconst (\n\tJoinUserAction = \"joinUser\"\n\tJoinGuildAction = \"joinGuild\"\n\tJoinChannelAction = \"joinChannel\"\n\tJoinVoiceAction = \"joinVoice\"\n\tLeaveGuildAction = \"leaveGuild\"\n\tLeaveRoomAction = \"leaveRoom\"\n\tLeaveVoiceAction = \"leaveVoice\"\n\tStartTypingAction = \"startTyping\"\n\tStopTypingAction = \"stopTyping\"\n\tToggleOnlineAction = \"toggleOnline\"\n\tToggleOfflineAction = \"toggleOffline\"\n\tGetRequestCountAction = \"getRequestCount\"\n)\n\n// Emitted Messages\nconst (\n\tNewMessageAction = \"new_message\"\n\tEditMessageAction = \"edit_message\"\n\tDeleteMessageAction = \"delete_message\"\n\tAddChannelAction = \"add_channel\"\n\tAddPrivateChannelAction = \"add_private_channel\"\n\tEditChannelAction = \"edit_channel\"\n\tDeleteChannelAction = \"delete_channel\"\n\tEditGuildAction = \"edit_guild\"\n\tDeleteGuildAction = \"delete_guild\"\n\tRemoveFromGuildAction = \"remove_from_guild\"\n\tAddMemberAction = \"add_member\"\n\tRemoveMemberAction = \"remove_member\"\n\tNewDMNotificationAction = \"new_dm_notification\"\n\tNewNotificationAction = \"new_notification\"\n\tToggleOnlineEmission = \"toggle_online\"\n\tToggleOfflineEmission = \"toggle_offline\"\n\tAddToTypingAction = \"addToTyping\"\n\tRemoveFromTypingAction = \"removeFromTyping\"\n\tSendRequestAction = \"send_request\"\n\tAddRequestAction = \"add_request\"\n\tAddFriendAction = \"add_friend\"\n\tRemoveFriendAction = \"remove_friend\"\n\tPushToTopAction = \"push_to_top\"\n\tRequestCountEmission = \"requestCount\"\n\tVoiceSignal = \"voice-signal\"\n\tToggleMute = \"toggle-mute\"\n\tToggleDeafen = \"toggle-deafen\"\n)\n"
},
{
"path": "server/ws/client.go",
"content": "package ws\n\nimport (\n\t\"encoding/json\"\n\t\"github.com/gin-gonic/gin\"\n\t\"github.com/sentrionic/valkyrie/model\"\n\t\"log\"\n\t\"net/http\"\n\t\"time\"\n\n\t\"github.com/gorilla/websocket\"\n)\n\nconst (\n\t// Max wait time when writing message to peer\n\twriteWait = 10 * time.Second\n\n\t// Max time till next pong from peer\n\tpongWait = 60 * time.Second\n\n\t// Send ping interval, must be less then pong wait time\n\tpingPeriod = (pongWait * 9) / 10\n\n\t// Maximum message size allowed from peer.\n\tmaxMessageSize = 10000\n)\n\nvar newline = []byte{'\\n'}\n\nvar upgrader = websocket.Upgrader{\n\tReadBufferSize: 4096,\n\tWriteBufferSize: 4096,\n\tCheckOrigin: func(r *http.Request) bool {\n\t\treturn true\n\t},\n}\n\n// Client represents the websockets client at the server\ntype Client struct {\n\t// The actual websockets connection.\n\tID string\n\tconn *websocket.Conn\n\thub *Hub\n\tsend chan []byte\n\trooms map[*Room]bool\n}\n\nfunc newClient(conn *websocket.Conn, hub *Hub, id string) *Client {\n\treturn &Client{\n\t\tID: id,\n\t\tconn: conn,\n\t\thub: hub,\n\t\tsend: make(chan []byte, 256),\n\t\trooms: make(map[*Room]bool),\n\t}\n}\n\nfunc (client *Client) readPump() {\n\tdefer func() {\n\t\tclient.disconnect()\n\t}()\n\n\tclient.conn.SetReadLimit(maxMessageSize)\n\n\t_ = client.conn.SetReadDeadline(time.Now().Add(pongWait))\n\n\tclient.conn.SetPongHandler(func(string) error {\n\t\t_ = client.conn.SetReadDeadline(time.Now().Add(pongWait))\n\t\treturn nil\n\t})\n\n\t// Start endless read loop, waiting for messages from client\n\tfor {\n\t\t_, jsonMessage, err := client.conn.ReadMessage()\n\t\tif err != nil {\n\t\t\tbreak\n\t\t}\n\t\tclient.handleNewMessage(jsonMessage)\n\t}\n\n}\n\nfunc (client *Client) writePump() {\n\tticker := time.NewTicker(pingPeriod)\n\tdefer func() {\n\t\tticker.Stop()\n\t\t_ = client.conn.Close()\n\t}()\n\tfor {\n\t\tselect {\n\t\tcase message, ok := <-client.send:\n\t\t\t_ = client.conn.SetWriteDeadline(time.Now().Add(writeWait))\n\t\t\tif !ok {\n\t\t\t\t// The hub closed the channel.\n\t\t\t\t_ = client.conn.WriteMessage(websocket.CloseMessage, []byte{})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tw, err := client.conn.NextWriter(websocket.TextMessage)\n\t\t\tif err != nil {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t_, _ = w.Write(message)\n\n\t\t\t// Attach queued chat messages to the current websockets message.\n\t\t\tn := len(client.send)\n\t\t\tfor i := 0; i < n; i++ {\n\t\t\t\t_, _ = w.Write(newline)\n\t\t\t\t_, _ = w.Write(<-client.send)\n\t\t\t}\n\n\t\t\tif err := w.Close(); err != nil {\n\t\t\t\treturn\n\t\t\t}\n\t\tcase <-ticker.C:\n\t\t\t_ = client.conn.SetWriteDeadline(time.Now().Add(writeWait))\n\t\t\tif err := client.conn.WriteMessage(websocket.PingMessage, nil); err != nil {\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunc (client *Client) disconnect() {\n\tclient.hub.unregister <- client\n\tfor room := range client.rooms {\n\t\troom.unregister <- client\n\t}\n\tclose(client.send)\n\t_ = client.conn.Close()\n}\n\n// ServeWs handles websockets requests from clients requests.\nfunc ServeWs(hub *Hub, ctx *gin.Context) {\n\n\tuserId := ctx.MustGet(\"userId\").(string)\n\tconn, err := upgrader.Upgrade(ctx.Writer, ctx.Request, nil)\n\tif err != nil {\n\t\tlog.Println(err)\n\t\treturn\n\t}\n\n\tclient := newClient(conn, hub, userId)\n\n\tgo client.writePump()\n\tgo client.readPump()\n\n\thub.register <- client\n}\n\nfunc (client *Client) handleNewMessage(jsonMessage []byte) {\n\n\tvar message model.ReceivedMessage\n\tif err := json.Unmarshal(jsonMessage, &message); err != nil {\n\t\tlog.Printf(\"Error on unmarshal JSON message %s\", err)\n\t}\n\n\tswitch message.Action {\n\t// Join Room Actions\n\tcase JoinChannelAction:\n\t\tclient.handleJoinChannelMessage(message)\n\tcase JoinGuildAction:\n\t\tclient.handleJoinGuildMessage(message)\n\tcase JoinUserAction:\n\t\tclient.handleJoinRoomMessage(message)\n\tcase JoinVoiceAction:\n\t\tclient.handleJoinVoiceMessage(message)\n\n\t// Leave Room Actions\n\tcase LeaveRoomAction:\n\t\tclient.handleLeaveRoomMessage(message)\n\tcase LeaveGuildAction:\n\t\tclient.handleLeaveGuildMessage(message)\n\tcase LeaveVoiceAction:\n\t\tclient.handleLeaveVoiceMessage(message)\n\n\t// Chat Typing Actions\n\tcase StartTypingAction:\n\t\tclient.handleTypingEvent(message, AddToTypingAction)\n\tcase StopTypingAction:\n\t\tclient.handleTypingEvent(message, RemoveFromTypingAction)\n\n\t// Online Status Actions\n\tcase ToggleOnlineAction:\n\t\tclient.toggleOnlineStatus(true)\n\tcase ToggleOfflineAction:\n\t\tclient.toggleOnlineStatus(false)\n\n\t// Other\n\tcase GetRequestCountAction:\n\t\tclient.handleGetRequestCount()\n\n\t// Voice Chat\n\tcase VoiceSignal:\n\t\tclient.handleVoiceSignal(message)\n\n\tcase ToggleMute:\n\t\tfallthrough\n\tcase ToggleDeafen:\n\t\tclient.updateVCMember(message)\n\t}\n}\n\n// handleJoinChannelMessage joins the given room if the user is a member in it\nfunc (client *Client) handleJoinChannelMessage(message model.ReceivedMessage) {\n\troomName := message.Room\n\n\tcs := client.hub.channelService\n\tchannel, err := cs.Get(roomName)\n\n\tif err != nil {\n\t\treturn\n\t}\n\n\t// Check if the user has access to the given channel\n\tif err = cs.IsChannelMember(channel, client.ID); err != nil {\n\t\treturn\n\t}\n\n\tclient.handleJoinRoomMessage(message)\n}\n\n// handleJoinGuildMessage joins the given guild if the user is member in it\nfunc (client *Client) handleJoinGuildMessage(message model.ReceivedMessage) {\n\troomName := message.Room\n\n\tgs := client.hub.guildService\n\tguild, err := gs.GetGuild(roomName)\n\n\tif err != nil {\n\t\treturn\n\t}\n\n\t// Check if the user is member of the given guild\n\tif !isMember(guild, client.ID) {\n\t\treturn\n\t}\n\n\tclient.handleJoinRoomMessage(message)\n}\n\n// handleJoinRoomMessage joins the given room\nfunc (client *Client) handleJoinRoomMessage(message model.ReceivedMessage) {\n\troomName := message.Room\n\n\troom := client.hub.findRoomById(roomName)\n\tif room == nil {\n\t\troom = client.hub.createRoom(roomName)\n\t}\n\n\tclient.rooms[room] = true\n\n\troom.register <- client\n}\n\n// handleLeaveGuildMessage leaves the room and updates the members last seen date\nfunc (client *Client) handleLeaveGuildMessage(message model.ReceivedMessage) {\n\t_ = client.hub.guildService.UpdateMemberLastSeen(client.ID, message.Room)\n\tclient.handleLeaveRoomMessage(message)\n}\n\n// handleLeaveRoomMessage leaves the room\nfunc (client *Client) handleLeaveRoomMessage(message model.ReceivedMessage) {\n\troom := client.hub.findRoomById(message.Room)\n\tdelete(client.rooms, room)\n\n\tif room != nil {\n\t\troom.unregister <- client\n\t}\n}\n\n// handleGetRequestCount returns the users incoming friend request count\nfunc (client *Client) handleGetRequestCount() {\n\tif room := client.hub.findRoomById(client.ID); room != nil {\n\t\tcount, err := client.hub.userService.GetRequestCount(client.ID)\n\n\t\tif err != nil {\n\t\t\treturn\n\t\t}\n\n\t\tmsg := model.WebsocketMessage{\n\t\t\tAction: RequestCountEmission,\n\t\t\tData: count,\n\t\t}\n\t\troom.broadcast <- &msg\n\t}\n}\n\n// handleTypingEvent emits the username of the currently typing user to the room\nfunc (client *Client) handleTypingEvent(message model.ReceivedMessage, action string) {\n\troomID := message.Room\n\tif room := client.hub.findRoomById(roomID); room != nil {\n\t\tmsg := model.WebsocketMessage{\n\t\t\tAction: action,\n\t\t\tData: message.Message,\n\t\t}\n\t\troom.broadcast <- &msg\n\t}\n}\n\n// toggleOnlineStatus updates the users online status and emits it to all\n// guilds the user is a member of and all of their friends\nfunc (client *Client) toggleOnlineStatus(isOnline bool) {\n\tuid := client.ID\n\tus := client.hub.userService\n\n\tuser, err := us.Get(uid)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not find user: %v\", err)\n\t\treturn\n\t}\n\n\tuser.IsOnline = isOnline\n\n\tif err := us.UpdateAccount(user); err != nil {\n\t\tlog.Printf(\"could not update user: %v\", err)\n\t\treturn\n\t}\n\n\tids, err := us.GetFriendAndGuildIds(uid)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not find ids: %v\", err)\n\t\treturn\n\t}\n\n\taction := ToggleOfflineEmission\n\tif isOnline {\n\t\taction = ToggleOnlineEmission\n\t}\n\n\tfor _, id := range *ids {\n\t\tif room := client.hub.findRoomById(id); room != nil {\n\t\t\tmsg := model.WebsocketMessage{\n\t\t\t\tAction: action,\n\t\t\t\tData: uid,\n\t\t\t}\n\t\t\troom.broadcast <- &msg\n\t\t}\n\t}\n}\n\n// handleJoinGuildMessage joins the given guild's voice chat if the user is a member in it\nfunc (client *Client) handleJoinVoiceMessage(message model.ReceivedMessage) {\n\troomName := message.Room\n\n\troom := client.hub.findRoomById(roomName)\n\tif room == nil {\n\t\troom = client.hub.createRoom(roomName)\n\t}\n\n\tclient.rooms[room] = true\n\n\troom.register <- client\n\n\tuid := client.ID\n\tus := client.hub.userService\n\n\tuser, err := us.Get(uid)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not find user: %v\", err)\n\t\treturn\n\t}\n\n\tguild, err := client.hub.guildService.GetGuild(room.GetId())\n\n\tif err != nil {\n\t\tlog.Printf(\"could not find guild: %v\", err)\n\t\treturn\n\t}\n\n\tif !isMember(guild, user.ID) {\n\t\treturn\n\t}\n\n\tguild.VCMembers = append(guild.VCMembers, *user)\n\n\t_ = client.hub.guildService.UpdateGuild(guild)\n\n\tclients, err := client.hub.guildService.GetVCMembers(guild.ID)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not get vc members: %v\", err)\n\t\treturn\n\t}\n\n\tmsg := model.WebsocketMessage{\n\t\tAction: message.Action,\n\t\tData: gin.H{\n\t\t\t\"userId\": user.ID,\n\t\t\t\"clients\": clients,\n\t\t},\n\t}\n\n\troom.broadcast <- &msg\n}\n\n// handleVoiceSignal exchanges the messages needed to setup WebRTC\nfunc (client *Client) handleVoiceSignal(message model.ReceivedMessage) {\n\tdata := (*message.Message).(map[string]any)\n\treceiver := data[\"userId\"]\n\n\tif receiver == \"\" {\n\t\treturn\n\t}\n\n\tdata[\"userId\"] = client.ID\n\n\tif room := client.hub.findRoomById(message.Room); room != nil {\n\t\tfor c := range room.clients {\n\t\t\tif c.ID == receiver {\n\t\t\t\tmsg := model.WebsocketMessage{\n\t\t\t\t\tAction: message.Action,\n\t\t\t\t\tData: data,\n\t\t\t\t}\n\t\t\t\troom.broadcast <- &msg\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n}\n\n// handleLeaveVoiceMessage leaves the voice chat and the room\nfunc (client *Client) handleLeaveVoiceMessage(message model.ReceivedMessage) {\n\n\tif room := client.hub.findRoomById(message.Room); room != nil {\n\n\t\t_ = client.hub.guildService.RemoveVCMember(client.ID, message.Room)\n\t\tclient.handleLeaveRoomMessage(message)\n\n\t\tguild, err := client.hub.guildService.GetGuild(room.GetId())\n\n\t\tif err != nil {\n\t\t\tlog.Printf(\"could not find guild: %v\", err)\n\t\t\treturn\n\t\t}\n\n\t\tclients, err := client.hub.guildService.GetVCMembers(guild.ID)\n\n\t\tif err != nil {\n\t\t\tlog.Printf(\"could not get vc members: %v\", err)\n\t\t\treturn\n\t\t}\n\n\t\tmsg := model.WebsocketMessage{\n\t\t\tAction: message.Action,\n\t\t\tData: gin.H{\n\t\t\t\t\"userId\": client.ID,\n\t\t\t\t\"clients\": clients,\n\t\t\t},\n\t\t}\n\n\t\troom.broadcast <- &msg\n\n\t}\n}\n\n// updateVCMember updates the values of the user in the voice chat\nfunc (client *Client) updateVCMember(message model.ReceivedMessage) {\n\tdata := (*message.Message).(map[string]any)\n\tvalue := data[\"value\"].(bool)\n\n\tuser, err := client.hub.guildService.GetVCMember(client.ID, message.Room)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not find vc member: %v\", err)\n\t\treturn\n\t}\n\n\tif message.Action == ToggleMute {\n\t\tuser.IsMuted = value\n\t} else if message.Action == ToggleDeafen {\n\t\tuser.IsDeafened = value\n\t}\n\n\terr = client.hub.guildService.UpdateVCMember(user.IsMuted, user.IsDeafened, client.ID, message.Room)\n\n\tif err != nil {\n\t\tlog.Printf(\"could not update vc member: %v\", err)\n\t\treturn\n\t}\n\n\tif room := client.hub.findRoomById(message.Room); room != nil {\n\t\tmsg := model.WebsocketMessage{\n\t\t\tAction: message.Action,\n\t\t\tData: message.Message,\n\t\t}\n\t\troom.broadcast <- &msg\n\t}\n}\n\n// isMember checks if the user is member of the given guild\nfunc isMember(guild *model.Guild, userId string) bool {\n\tfor _, v := range guild.Members {\n\t\tif v.ID == userId {\n\t\t\treturn true\n\t\t}\n\t}\n\treturn false\n}\n"
},
{
"path": "server/ws/hub.go",
"content": "package ws\n\nimport (\n\t\"github.com/redis/go-redis/v9\"\n\t\"github.com/sentrionic/valkyrie/model\"\n)\n\n// Hub contains all rooms and clients\ntype Hub struct {\n\tclients map[*Client]bool\n\tregister chan *Client\n\tunregister chan *Client\n\tbroadcast chan []byte\n\trooms map[*Room]bool\n\tchannelService model.ChannelService\n\tguildService model.GuildService\n\tuserService model.UserService\n\tredisClient *redis.Client\n}\n\n// Config will hold services that will eventually be injected into this\n// service layer\ntype Config struct {\n\tUserService model.UserService\n\tGuildService model.GuildService\n\tChannelService model.ChannelService\n\tRedis *redis.Client\n}\n\n// NewWebsocketHub creates a new Hub\nfunc NewWebsocketHub(c *Config) *Hub {\n\treturn &Hub{\n\t\tclients: make(map[*Client]bool),\n\t\tregister: make(chan *Client),\n\t\tunregister: make(chan *Client),\n\t\tbroadcast: make(chan []byte),\n\t\trooms: make(map[*Room]bool),\n\t\tchannelService: c.ChannelService,\n\t\tguildService: c.GuildService,\n\t\tuserService: c.UserService,\n\t\tredisClient: c.Redis,\n\t}\n}\n\n// Run our websocket server, accepting various requests\nfunc (hub *Hub) Run() {\n\tfor {\n\t\tselect {\n\n\t\tcase client := <-hub.register:\n\t\t\thub.registerClient(client)\n\n\t\tcase client := <-hub.unregister:\n\t\t\thub.unregisterClient(client)\n\n\t\tcase message := <-hub.broadcast:\n\t\t\thub.broadcastToClients(message)\n\t\t}\n\t}\n}\n\nfunc (hub *Hub) registerClient(client *Client) {\n\thub.clients[client] = true\n}\n\nfunc (hub *Hub) unregisterClient(client *Client) {\n\tdelete(hub.clients, client)\n}\n\nfunc (hub *Hub) broadcastToClients(message []byte) {\n\tfor client := range hub.clients {\n\t\tclient.send <- message\n\t}\n}\n\n// BroadcastToRoom sends the given message to all clients connected to the given room\nfunc (hub *Hub) BroadcastToRoom(message []byte, roomId string) {\n\tif room := hub.findRoomById(roomId); room != nil {\n\t\troom.publishRoomMessage(message)\n\t}\n}\n\nfunc (hub *Hub) findRoomById(id string) *Room {\n\tvar foundRoom *Room\n\tfor room := range hub.rooms {\n\t\tif room.GetId() == id {\n\t\t\tfoundRoom = room\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn foundRoom\n}\n\nfunc (hub *Hub) createRoom(id string) *Room {\n\troom := NewRoom(id, hub.redisClient)\n\tgo room.RunRoom()\n\thub.rooms[room] = true\n\n\treturn room\n}\n"
},
{
"path": "server/ws/room.go",
"content": "package ws\n\nimport (\n\t\"context\"\n\t\"github.com/redis/go-redis/v9\"\n\t\"github.com/sentrionic/valkyrie/model\"\n\t\"log\"\n)\n\n// Room represents a websocket room\ntype Room struct {\n\tid string\n\tclients map[*Client]bool\n\tregister chan *Client\n\tunregister chan *Client\n\tbroadcast chan *model.WebsocketMessage\n\tredis *redis.Client\n}\n\nvar ctx = context.Background()\n\n// NewRoom creates a new Room\nfunc NewRoom(id string, rds *redis.Client) *Room {\n\treturn &Room{\n\t\tid: id,\n\t\tclients: make(map[*Client]bool),\n\t\tregister: make(chan *Client),\n\t\tunregister: make(chan *Client),\n\t\tbroadcast: make(chan *model.WebsocketMessage),\n\t\tredis: rds,\n\t}\n}\n\n// RunRoom runs our room, accepting various requests\nfunc (room *Room) RunRoom() {\n\n\tgo room.subscribeToRoomMessages()\n\n\tfor {\n\t\tselect {\n\n\t\tcase client := <-room.register:\n\t\t\troom.registerClientInRoom(client)\n\n\t\tcase client := <-room.unregister:\n\t\t\troom.unregisterClientInRoom(client)\n\n\t\tcase message := <-room.broadcast:\n\t\t\troom.publishRoomMessage(message.Encode())\n\t\t}\n\t}\n}\n\n// registerClientInRoom adds the client to the room\nfunc (room *Room) registerClientInRoom(client *Client) {\n\troom.clients[client] = true\n}\n\n// unregisterClientInRoom removes the client from the room\nfunc (room *Room) unregisterClientInRoom(client *Client) {\n\tdelete(room.clients, client)\n}\n\n// broadcastToClientsInRoom sends the given message to all members in the room\nfunc (room *Room) broadcastToClientsInRoom(message []byte) {\n\tfor client := range room.clients {\n\t\tclient.send <- message\n\t}\n}\n\n// GetId returns the ID of the room\nfunc (room *Room) GetId() string {\n\treturn room.id\n}\n\n// publishRoomMessage publishes the message to all clients subscribing to the room\nfunc (room *Room) publishRoomMessage(message []byte) {\n\terr := room.redis.Publish(ctx, room.GetId(), message).Err()\n\n\tif err != nil {\n\t\tlog.Println(err)\n\t}\n}\n\n// subscribeToRoomMessages subscribes to messages in this room\nfunc (room *Room) subscribeToRoomMessages() {\n\tpubsub := room.redis.Subscribe(ctx, room.GetId())\n\n\tch := pubsub.Channel()\n\n\tfor msg := range ch {\n\t\troom.broadcastToClientsInRoom([]byte(msg.Payload))\n\t}\n}\n"
},
{
"path": "web/.eslintrc.json",
"content": "{\n \"env\": {\n \"browser\": true,\n \"es2021\": true\n },\n \"extends\": [\"plugin:react/recommended\", \"airbnb\", \"airbnb-typescript\", \"prettier\"],\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"jsx\": true\n },\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\",\n \"project\": \"./tsconfig.json\"\n },\n \"plugins\": [\"react\", \"@typescript-eslint\", \"react-hooks\", \"prettier\"],\n \"rules\": {\n \"linebreak-style\": 0,\n \"no-undef\": \"off\",\n \"no-empty\": \"off\",\n \"no-use-before-define\": \"off\",\n \"@typescript-eslint/no-use-before-define\": [\"off\"],\n \"react/jsx-filename-extension\": [\n \"warn\",\n {\n \"extensions\": [\".tsx\"]\n }\n ],\n \"import/extensions\": [\n \"error\",\n \"ignorePackages\",\n {\n \"ts\": \"never\",\n \"tsx\": \"never\"\n }\n ],\n \"@typescript-eslint/explicit-function-return-type\": [\n \"error\",\n {\n \"allowExpressions\": true\n }\n ],\n \"no-unused-vars\": \"off\",\n \"@typescript-eslint/no-unused-vars\": [\n \"error\", // or error\n {\n \"argsIgnorePattern\": \"^_\",\n \"varsIgnorePattern\": \"^_\",\n \"caughtErrorsIgnorePattern\": \"^_\"\n }\n ],\n \"react/jsx-no-useless-fragment\": \"off\",\n \"react-hooks/rules-of-hooks\": \"error\",\n \"react-hooks/exhaustive-deps\": \"warn\",\n \"react/require-default-props\": \"off\",\n \"react/prop-types\": \"off\",\n \"import/prefer-default-export\": \"off\",\n \"max-len\": [\n \"error\",\n {\n \"code\": 120\n }\n ],\n \"react/function-component-definition\": [\n 2,\n {\n \"namedComponents\": \"arrow-function\",\n \"unnamedComponents\": \"arrow-function\"\n }\n ]\n },\n \"settings\": {\n \"import/resolver\": {\n \"typescript\": {}\n }\n },\n \"ignorePatterns\": [\"*.css\", \"*.html\"]\n}\n"
},
{
"path": "web/.gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.development\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n.eslintcache\n\n/cypress/downloads\n"
},
{
"path": "web/.prettierrc",
"content": "{\n \"printWidth\": 120,\n \"semi\": true,\n \"tabWidth\": 2,\n \"singleQuote\": true\n}\n"
},
{
"path": "web/cypress/e2e/account.cy.ts",
"content": "import { uuid } from '../support/utils';\n\n// Covers the account routes\ndescribe('Account related pages', () => {\n const id = uuid();\n const email = `${id}@example.com`;\n\n it('redirects an unauthenticated user', () => {\n cy.visit('/channels/me');\n cy.url().should('include', '/login');\n });\n\n it('registers the user', () => {\n cy.registerUser(email, id);\n });\n\n it('signs in the user', () => {\n cy.loginUser(email);\n });\n\n it(\"checks the user's settings page\", () => {\n cy.loginUser(email);\n cy.get('[aria-label=settings]').click();\n\n // Confirm account page got user's info\n cy.url().should('include', '/account');\n cy.contains('My Account'.toUpperCase());\n cy.get('input[name=\"email\"]').should('have.value', email);\n cy.get('input[name=\"username\"]').should('have.value', id);\n });\n\n it(\"updates the user's info\", () => {\n cy.loginUser(email);\n cy.get('[aria-label=settings]').click();\n\n // Update the user's info and check for confirmation toast\n cy.url().should('include', '/account');\n cy.contains('My Account'.toUpperCase());\n cy.get('input[name=\"email\"]').should('have.value', email);\n cy.get('input[name=\"username\"]').clear().type('Test').should('have.value', 'Test');\n cy.get('[type=submit]').click();\n\n cy.wait(200);\n cy.contains('Account Updated.');\n });\n\n it(\"updates the user's password\", () => {\n cy.loginUser(email);\n cy.get('[aria-label=settings]').click();\n\n cy.url().should('include', '/account');\n cy.contains('Change Password').click();\n\n // Change the user's password\n cy.contains('Change your password');\n cy.get('input[name=\"currentPassword\"]').type('password').should('have.value', 'password');\n cy.get('input[name=\"newPassword\"]').type('password').should('have.value', 'password');\n cy.get('input[name=\"confirmNewPassword\"]').type('password').should('have.value', 'password');\n cy.contains('Done').click();\n\n cy.wait(200);\n cy.contains('Changed Password');\n });\n\n it('signs out the user', () => {\n cy.loginUser(email);\n cy.get('[aria-label=settings]').click();\n cy.url().should('include', '/account');\n\n cy.contains('Logout').click();\n\n cy.url().should('include', '');\n });\n});\n"
},
{
"path": "web/cypress/e2e/channel.cy.ts",
"content": "import { uuid } from '../support/utils';\n\ndescribe('Channels related actions', () => {\n // The user's values\n const id = uuid().toString();\n const email = `${id}@example.com`;\n let guildId = '';\n let channelId = '';\n\n it('registers the user', () => {\n cy.registerUser(email, id);\n });\n\n it('creates a guild', () => {\n cy.loginUser(email);\n\n cy.intercept({\n method: 'POST',\n pathname: '/api/guilds/create',\n }).as('create');\n\n cy.createGuild(id);\n\n // Confirm the user got sent to the guild and default channel\n cy.wait('@create').then((interception) => {\n const body = interception.response.body;\n const url = `channels/${body.id}/${body.default_channel_id}`;\n cy.url().should('include', url);\n guildId = body.id;\n });\n });\n\n it('creates a channel for the guild', () => {\n cy.loginUser(email);\n\n cy.clickOnFirstGuild();\n cy.openGuildMenu();\n\n cy.intercept({\n method: 'POST',\n pathname: `/api/channels/${guildId}`,\n }).as('create');\n\n cy.contains('Create Channel').click();\n cy.get('input[name=\"name\"]').type('random').should('have.value', 'random');\n cy.get('[type=submit]').click();\n\n // Confirm the user got sent to the newly created channel\n cy.wait('@create').then((interception) => {\n const body = interception.response.body;\n channelId = body.id;\n const url = `channels/${guildId}/${channelId}`;\n cy.url().should('include', url);\n cy.contains('random').should('exist');\n });\n });\n\n it('should successfully switch between channels', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n cy.contains('Welcome to #general').should('exist');\n\n // Check the other channel is the correct one\n cy.get(`a[href^=\"/channels/${guildId}/\"]`).last().click();\n cy.contains('Welcome to #random').should('exist');\n });\n\n it('should successfully edit the channel', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.contains('random').trigger('mouseover');\n cy.get('[aria-label=\"edit channel\"]').click();\n\n cy.intercept({\n method: 'PUT',\n pathname: `/api/channels/${channelId}`,\n }).as('update');\n\n // Edit the values\n cy.get('input[name=\"name\"]').clear().type('secret').should('have.value', 'secret');\n cy.get('input[type=\"checkbox\"]').check({ force: true });\n cy.get('[type=submit]').click();\n\n // Check that the edited channel exists\n cy.wait('@update').then((_) => {\n cy.contains('secret').should('exist');\n });\n });\n\n it('should successfully delete the channel', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.get(`a[href^=\"/channels/${guildId}/\"]`).last().click();\n cy.contains('secret').last().trigger('mouseover');\n cy.get('[aria-label=\"edit channel\"]').last().click();\n\n cy.intercept({\n method: 'DELETE',\n pathname: `/api/channels/${channelId}`,\n }).as('delete');\n\n cy.contains('Delete Channel').click();\n cy.get('button').contains('Delete Channel').click();\n\n cy.wait('@delete').then((interception) => {\n // Check that the channel is gone and that the user got moved\n cy.contains('secret').should('have.length.lte', 1);\n cy.contains('Welcome to #general').should('exist');\n });\n });\n});\n"
},
{
"path": "web/cypress/e2e/friend.cy.ts",
"content": "import { uuid } from '../support/utils';\n\ndescribe('Friends related actions', () => {\n // Friend values\n const friendName = uuid();\n const friendEmail = `${friendName}@example.com`;\n let friendId = '';\n\n // AuthUser values\n const authName = uuid();\n const email = `${authName}@example.com`;\n\n it('registers the friend and gets the id', () => {\n cy.registerUser(friendEmail, friendName);\n\n // Get the friend's ID and store it\n cy.contains('Add Friend').click();\n cy.get('input')\n .first()\n .invoke('val')\n .then((text) => {\n friendId = text.toString();\n });\n });\n\n it('signs up the user and gets the id', () => {\n cy.registerUser(email, authName);\n });\n\n it('sends a friend request to the member', () => {\n cy.loginUser(email);\n cy.sendRequest(friendId);\n\n // Confirm the 'Pending' tab got an outgoing friend request\n cy.contains('Pending').click();\n cy.contains(friendName);\n cy.contains('Outgoing Friend Request');\n });\n\n it('cancels the outgoing request', () => {\n cy.loginUser(email);\n\n cy.contains('Pending').click();\n cy.contains(friendName);\n // Confirm the accept button does not exist\n cy.get('[aria-label=\"accept request\"]').should('not.exist');\n cy.get('[aria-label=\"decline request\"]').click();\n\n // Confirm the user got removed and is not a friend.\n cy.contains(friendName).should('not.exist');\n cy.get('button').contains('Friends').click();\n cy.contains(friendName).should('not.exist');\n });\n\n it('sends another friend request to the member to be checked', () => {\n cy.loginUser(email);\n cy.sendRequest(friendId);\n });\n\n it('checks the incoming friend request and declines it', () => {\n cy.loginUser(friendEmail);\n\n // Confirm the user got a request and has the accept button\n cy.contains('Pending').click();\n cy.contains(authName);\n cy.contains('Incoming Friend Request');\n cy.get('[aria-label=\"accept request\"]').should('exist');\n\n // Decline request\n cy.get('[aria-label=\"decline request\"]').click();\n cy.contains(authName).should('not.exist');\n\n // Confirm the user got removed and is not a friend.\n cy.get('button').contains('Friends').click();\n cy.wait(100);\n cy.contains(authName).should('not.exist');\n });\n\n it('sends another friend request to the member to be accepted', () => {\n cy.loginUser(email);\n cy.sendRequest(friendId);\n });\n\n it('accepts the friend request', () => {\n cy.loginUser(friendEmail);\n\n // Accept request\n cy.contains('Pending').click();\n cy.contains(authName);\n cy.get('[aria-label=\"accept request\"]').click();\n cy.contains(authName).should('not.exist');\n\n // Confirm the user is in the 'Friends' tab\n cy.get('button').contains('Friends').click();\n cy.wait(100);\n cy.contains(authName).should('exist');\n });\n\n it('directs to the friends dms when clicked', () => {\n cy.loginUser(email);\n\n cy.intercept({\n method: 'POST',\n pathname: `/api/channels/${friendId}/dm`,\n }).as('getDM');\n\n // Open the DM\n cy.contains(friendName).should('exist').click();\n\n // Confirm it's the friend's DM\n cy.contains(friendName).should('exist');\n cy.contains(`This is the beginning of your direct message history with @${friendName}`).should('exist');\n cy.get('textarea[name=\"text\"]').invoke('attr', 'placeholder').should('contain', `@${friendName}`);\n\n // Confirm the DM's url is the correct one\n cy.wait('@getDM').then((interception) => {\n const body = interception.response.body;\n const url = `/channels/me/${body.id}`;\n cy.url().should('include', url);\n });\n });\n\n it('should successfully go to the DM when clicked on the item', () => {\n cy.loginUser(email);\n cy.get('ul[id=\"dm-list\"]').children().contains(friendName).click();\n\n // Confirm it's the friend's DM\n cy.contains(friendName).should('exist');\n cy.contains(`This is the beginning of your direct message history with @${friendName}`).should('exist');\n cy.get('textarea[name=\"text\"]').invoke('attr', 'placeholder').should('contain', `@${friendName}`);\n\n // Check that messaging is possible and the message gets added to the chat\n cy.get('textarea[name=\"text\"]').type('Hello World{enter}').should('have.value', '');\n cy.wait(50);\n cy.contains('Hello World');\n });\n\n it('closes the dm when the close button is pressed', () => {\n cy.loginUser(email);\n\n // Check that the DM exists\n cy.get('ul[id=\"dm-list\"]').children().contains(friendName).should('exist');\n cy.get('ul[id=\"dm-list\"] li:first').trigger('mouseover');\n\n // Close the DM and confirm it's gone\n cy.get('[aria-label=\"close dm\"]').click();\n cy.get('ul[id=\"dm-list\"]').children().contains(friendName).should('not.exist');\n });\n\n it('removes the friend', () => {\n cy.loginUser(email);\n\n // Check that the friend exists in the tab\n cy.get('ul[id=\"friend-list\"]').children().contains(friendName).should('exist');\n\n // Confirm and remove friend\n cy.get('[aria-label=\"remove friend\"]').click();\n cy.contains('Remove Friend').click();\n\n // Confirm the friend got removed\n cy.get('ul[id=\"friend-list\"]').should('not.exist');\n });\n});\n"
},
{
"path": "web/cypress/e2e/guild.cy.ts",
"content": "import { uuid } from '../support/utils';\n\ndescribe('Guild related actions', () => {\n // The user's values\n const id = uuid().toString();\n const email = `${id}@example.com`;\n\n // The mock members values\n const memberId = uuid().toString();\n const memberEmail = `${memberId}@example.com`;\n\n // The invite link and guildId\n let invite = '';\n let guildId = '';\n\n it('registers the user', () => {\n cy.registerUser(email, id);\n });\n\n it('creates a guild', () => {\n cy.loginUser(email);\n\n cy.intercept({\n method: 'POST',\n pathname: '/api/guilds/create',\n }).as('create');\n\n cy.createGuild(id);\n\n // Confirm the user got sent to the guild and default channel\n cy.wait('@create').then((interception) => {\n const body = interception.response.body;\n const url = `channels/${body.id}/${body.default_channel_id}`;\n cy.url().should('include', url);\n guildId = body.id;\n });\n });\n\n it('should update the server after it got edited', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.openGuildMenu();\n cy.contains('Server Settings').click();\n\n cy.intercept({\n method: 'PUT',\n pathname: `/api/guilds/${guildId}`,\n }).as('update');\n\n // Updates the values and saves them\n cy.get('input[name=\"name\"]').clear().type('Valkyrie').should('have.value', 'Valkyrie');\n cy.contains('Save Changes').click();\n\n // Check the updates were applied\n cy.wait('@update').then((_) => {\n cy.contains('Valkyrie').should('exist');\n });\n });\n\n it('should successfully clear the invites', () => {\n cy.loginUser(email);\n\n cy.clickOnFirstGuild();\n cy.openGuildMenu();\n cy.contains('Server Settings').click();\n\n cy.intercept({\n method: 'DELETE',\n pathname: `/api/guilds/${guildId}/invite`,\n }).as('clear');\n\n cy.contains('Invalidate Links').click();\n\n // Check the invites succesfully got cleared\n cy.wait('@clear').then((interception) => {\n const body = interception.response.body;\n expect(body).eq(true);\n });\n });\n\n it('should delete the server and go to home', () => {\n cy.loginUser(email);\n\n cy.clickOnFirstGuild();\n\n // Delete server and confirm the request\n cy.openGuildMenu();\n cy.contains('Server Settings').click();\n cy.contains('Delete Server').click();\n cy.contains('Delete Server').click();\n\n // Confirm the user is back at home and the guild is gone\n // Not working due to websocket connection problems\n // cy.url().should('include', '/channels/me');\n // cy.get('a[href*=\"channels\"]').not('a[href*=\"channels/me\"]').should('have.length', 0);\n });\n\n it('creates another guild to get an invite', () => {\n cy.loginUser(email);\n\n cy.intercept({\n method: 'POST',\n pathname: '/api/guilds/create',\n }).as('create');\n\n cy.createGuild(id);\n\n // Confirm the user got sent to the guild and default channel\n cy.wait('@create').then((interception) => {\n const body = interception.response.body;\n const url = `channels/${body.id}/${body.default_channel_id}`;\n cy.url().should('include', url);\n guildId = body.id;\n });\n\n // get the invite for the other user\n cy.openGuildMenu();\n cy.contains('Invite People').click();\n\n // Check unlimited invites\n cy.get('input[type=\"checkbox\"]').check({ force: true });\n cy.wait(50);\n\n // Store the invite in the variable\n cy.get('input[id=\"invite-link\"]')\n .first()\n .invoke('val')\n .then((text) => {\n invite = text.toString();\n });\n });\n\n it('joins the guild for the given link', () => {\n cy.registerUser(memberEmail, memberId);\n\n cy.intercept({\n method: 'POST',\n pathname: '/api/guilds/join',\n }).as('join');\n\n cy.joinGuild(invite);\n\n // Confirm the user got sent to the guild and default channel\n cy.wait('@join').then((interception) => {\n const body = interception.response.body;\n const url = `channels/${body.id}/${body.default_channel_id}`;\n cy.url().should('include', url);\n });\n\n cy.contains(`${id}'s server`).should('exist');\n cy.contains(`Welcome to #general`).should('exist');\n });\n\n it('should not show \"Server Settings\" and \"Create Channel\" to the non owner', () => {\n cy.loginUser(memberEmail);\n\n cy.clickOnFirstGuild();\n\n cy.openGuildMenu();\n cy.contains('Server Settings').should('not.exist');\n cy.contains('Create Channel').should('not.exist');\n });\n\n it('should leave the server', () => {\n cy.loginUser(memberEmail);\n\n cy.clickOnFirstGuild();\n\n cy.openGuildMenu();\n cy.contains('Leave Server').click();\n\n // Confirm the user is back at home and the guild is gone\n cy.url().should('include', '/channels/me');\n cy.get('a[href*=\"channels\"]').not('a[href*=\"channels/me\"]').should('have.length', 0);\n });\n\n it('creates a third guild to test switching', () => {\n cy.loginUser(email);\n cy.createGuild('Test');\n });\n\n it('successfully switches between the guilds', () => {\n cy.loginUser(email);\n\n cy.clickOnFirstGuild();\n cy.url().should('include', guildId);\n cy.contains(`${id}'s server`).should('exist');\n\n // Click on the second server and confirm it's the second one created\n cy.get('a[href*=\"channels\"]').eq(2).click();\n cy.contains(`Test's server`).should('exist');\n });\n});\n"
},
{
"path": "web/cypress/e2e/member.cy.ts",
"content": "import { uuid } from '../support/utils';\n\ndescribe('Members related actions', () => {\n // Member values\n const memberName = uuid();\n const memberEmail = `${memberName}@example.com`;\n let invite = '';\n\n // AuthUser values\n const authName = uuid();\n const email = `${authName}@example.com`;\n\n it('registers the user', () => {\n cy.registerUser(email, authName);\n });\n\n it('creates a guild and get the invite', () => {\n cy.loginUser(email);\n cy.createGuild(authName);\n\n // get the invite for the other user\n cy.openGuildMenu();\n cy.contains('Invite People').click();\n\n // Check unlimited invites\n cy.get('input[type=\"checkbox\"]').check({ force: true });\n cy.wait(50);\n\n // Store the invite in the variable\n cy.get('input[id=\"invite-link\"]')\n .first()\n .invoke('val')\n .then((text) => {\n invite = text.toString();\n });\n });\n\n it('successfully changes the members settings', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.openGuildMenu();\n cy.contains('Change Appearance').click();\n\n // Sets the member values\n cy.get('input[name=\"nickname\"]').clear().type('Tester').should('have.value', 'Tester');\n cy.get('div[title=\"#0693E3\"]').click();\n cy.wait(100);\n\n cy.contains('Save').click();\n });\n\n it('joins the guild for the given link', () => {\n cy.registerUser(memberEmail, memberName);\n cy.joinGuild(invite);\n\n // Confirm the above changes\n cy.wait(100);\n cy.contains('Tester').should('exist');\n\n // Check that the two members + two labels are there\n cy.get('ul[id=\"member-list\"]').children().should('have.length', 4);\n });\n\n it('should not show \"Kick\" and \"Ban\" options to the non owner', () => {\n cy.loginUser(memberEmail);\n cy.clickOnFirstGuild();\n\n cy.get('ul[id=\"member-list\"]').contains('Tester').rightclick();\n cy.contains('Ban').should('not.exist');\n cy.contains('Kick').should('not.exist');\n });\n\n it('successfully resets the members settings', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.openGuildMenu();\n cy.contains('Change Appearance').click();\n\n // Reset the values\n cy.contains('Reset Nickname').click();\n cy.contains('Reset Color').click();\n cy.wait(100);\n\n cy.contains('Save').click();\n });\n\n it('should go to the members DMs on click', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.contains(memberName).rightclick();\n cy.contains('Message').click();\n\n // Confirm the user got moved to the correct DM\n cy.contains(memberName).should('exist');\n cy.contains(`This is the beginning of your direct message history with @${memberName}`).should('exist');\n cy.get('textarea[name=\"text\"]').invoke('attr', 'placeholder').should('contain', `@${memberName}`);\n });\n\n it('should successfully sent a friends request', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.contains(memberName).rightclick();\n cy.contains('Add Friend').click();\n\n // Go to the pending tab to confirm the request\n cy.get('a[href=\"/channels/me\"]').click();\n cy.contains('Pending').click();\n cy.contains(memberName).should('exist');\n cy.contains('Outgoing Friend Request').should('exist');\n });\n\n it('should kick and remove the member', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Kick the user\n cy.contains(memberName).rightclick();\n cy.contains(`Kick ${memberName}`).click();\n cy.get('button').contains('Kick').click();\n\n // Confirm the member is gone\n cy.get('ul[id=\"member-list\"]').children().should('have.length', 3);\n cy.contains(memberName).should('not.exist');\n });\n\n it('should successfully rejoin the server', () => {\n cy.loginUser(memberEmail);\n cy.joinGuild(invite);\n });\n\n it('should ban and remove the member', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Ban the user\n cy.contains(memberName).rightclick();\n cy.contains(`Ban ${memberName}`).click();\n cy.get('button').contains('Ban').click();\n\n // Confirm the member is gone\n cy.get('ul[id=\"member-list\"]').children().should('have.length', 3);\n cy.contains(memberName).should('not.exist');\n });\n\n it('should not be able to rejoin the server', () => {\n cy.loginUser(memberEmail);\n cy.joinGuild(invite);\n\n // Confirm the user did not join the guild\n cy.contains('You are banned from this server').should('exist');\n cy.url().should('include', '/channels/me');\n });\n\n it('should contain the member in the ban list', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Go to the ban list modal\n cy.openGuildMenu();\n cy.contains('Server Settings').click();\n cy.contains('Bans').click();\n\n // Check the member exists there\n cy.wait(100);\n cy.contains(memberName).should('exist');\n cy.get('button[aria-label=\"unban user\"]').click();\n\n // Confirm the member got unbanned\n cy.contains(memberName).should('not.exist');\n });\n\n it('should not display a context menu when clicking on oneself', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.contains(authName).rightclick();\n cy.contains('Add Friend').should('not.exist');\n });\n\n it('should toggle the member list on click', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Toggle the member list\n cy.get('ul[id=\"member-list\"]').should('be.visible');\n cy.get('[aria-label=\"toggle member list\"]').click();\n cy.get('ul[id=\"member-list\"]').should('not.exist');\n cy.get('[aria-label=\"toggle member list\"]').click();\n cy.get('ul[id=\"member-list\"]').should('be.visible');\n });\n});\n"
},
{
"path": "web/cypress/e2e/message.cy.ts",
"content": "import { uuid } from '../support/utils';\n\nconst waitTime = 1000;\n\ndescribe('Message related actions', () => {\n // The user's values\n const id = uuid().toString();\n const email = `${id}@example.com`;\n\n // The mock members values\n const memberName = uuid().toString();\n const memberEmail = `${memberName}@example.com`;\n\n let userId = '';\n\n // The invite link and guildId\n let invite = '';\n\n it('should register the user and create a guild', () => {\n cy.intercept({\n method: 'POST',\n pathname: '/api/account/register',\n }).as('register');\n\n cy.registerUser(email, id);\n\n cy.wait('@register').then((interception) => {\n const body = interception.response.body;\n userId = body.id;\n });\n\n cy.createGuild(id);\n });\n\n it('should successfully post a message', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Send message\n cy.get('textarea[name=\"text\"]').type('Hello, World{enter}').should('have.value', '');\n\n // Confirm it got added to the chat\n // cy.wait(100);\n // cy.getChat().should('exist');\n // cy.getChat().children().should('have.length', 1);\n // cy.firstMessage().contains('Hello, World');\n });\n\n it('should confirm that the message got sent', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.wait(waitTime);\n cy.getChat().should('exist');\n cy.getChat().children().should('have.length', 1);\n cy.firstMessage().contains('Hello, World');\n });\n\n it('should post another message', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.get('textarea[name=\"text\"]').type('Hello, Server{enter}').should('have.value', '');\n });\n\n it('should display newer messages under older', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Confirm it got added under the first one\n cy.wait(waitTime);\n cy.getChat().children().should('have.length', 2);\n cy.firstMessage().contains('Hello, Server');\n cy.getChat().children().last().contains('Hello, World');\n });\n\n it('should successfully delete the message', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.firstMessage().rightclick();\n cy.contains('Delete Message').click();\n cy.get('button').contains('Delete').click();\n });\n\n // Manually check the message is gone because of websocket problems\n it('should confirm that the message got deleted', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.wait(waitTime);\n cy.getChat().children().should('have.length', 1);\n cy.getChat().children().contains('Hello, Server').should('not.exist');\n });\n\n it('should successfully edit the message', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.firstMessage().rightclick();\n cy.contains('Edit Message').click();\n cy.wait(waitTime);\n\n cy.get('input[id=\"editMessage\"]').clear().type('Hello, Update');\n cy.get('button').contains('Save').click();\n\n // // Confirm it got edited and got the edit span\n // cy.firstMessage().contains('Hello, Update');\n // cy.firstMessage().contains('(edited)');\n });\n\n it('should confirm the message got edited', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Confirm it got edited and got the edit span\n cy.firstMessage().contains('Hello, Update');\n cy.firstMessage().contains('(edited)');\n });\n\n it('should not display \"Add Friend\" or \"Message\" for own avatar', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n cy.wait(waitTime);\n cy.firstMessage().get('img').eq(1).rightclick();\n cy.contains('Add Friend').should('not.exist');\n cy.contains('Message').should('not.exist');\n });\n\n it('should get an invite for the other member', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // get the invite for the other user\n cy.openGuildMenu();\n cy.contains('Invite People').click();\n\n // Check unlimited invites\n cy.get('input[type=\"checkbox\"]').check({ force: true });\n cy.wait(waitTime);\n\n // Store the invite in the variable\n cy.get('input[id=\"invite-link\"]')\n .first()\n .invoke('val')\n .then((text) => {\n invite = text.toString();\n });\n });\n\n it('should register the other member and join the guild', () => {\n cy.registerUser(memberEmail, memberName);\n cy.joinGuild(invite);\n });\n\n it('should not display message options for the member context menu when clicking on the owners message', () => {\n cy.loginUser(memberEmail);\n cy.clickOnFirstGuild();\n\n cy.getChat().children().last().rightclick();\n cy.contains('Edit Message').should('not.exist');\n cy.contains('Delete Message').should('not.exist');\n });\n\n it('should successfully add the user', () => {\n cy.loginUser(memberEmail);\n cy.clickOnFirstGuild();\n\n cy.intercept({\n method: 'POST',\n pathname: `/api/account/${userId}/friend`,\n }).as('addFriend');\n\n cy.wait(waitTime);\n cy.firstMessage().get('img').eq(1).rightclick();\n cy.contains('Add Friend').click();\n\n cy.wait('@addFriend').then((_) => {\n // Go to the pending tab to confirm the request\n cy.get('a[href=\"/channels/me\"]').click();\n cy.contains('Pending').click();\n cy.contains(memberName).should('exist');\n cy.contains('Outgoing Friend Request').should('exist');\n });\n });\n\n it('should successfully go to the DMs with the user', () => {\n cy.loginUser(memberEmail);\n cy.clickOnFirstGuild();\n\n cy.intercept({\n method: 'POST',\n pathname: `/api/channels/${userId}/dm`,\n }).as('create');\n\n cy.wait(waitTime);\n cy.firstMessage().get('img').eq(1).rightclick();\n cy.contains('Message').click();\n\n cy.wait('@create').then(() => {\n // Confirm the user got moved to the correct DM\n cy.contains(id).should('exist');\n cy.contains(`This is the beginning of your direct message history with @${id}`).should('exist');\n cy.get('textarea[name=\"text\"]').invoke('attr', 'placeholder').should('contain', `@${id}`);\n });\n });\n\n it('should successfully post a message', () => {\n cy.loginUser(memberEmail);\n cy.clickOnFirstGuild();\n\n cy.get('textarea[name=\"text\"]').type('Hello, Owner{enter}').should('have.value', '');\n });\n\n it(\"should be able to delete the member's message as the owner\", () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Owner can delete the other person's message, but cannot edit it\n cy.firstMessage().rightclick();\n cy.contains('Edit Message').should('not.exist');\n\n cy.contains('Delete Message').click();\n cy.get('button').contains('Delete').click();\n });\n\n it('should confirm that the message got deleted', () => {\n cy.loginUser(email);\n cy.clickOnFirstGuild();\n\n // Confirm the message got deleted\n cy.wait(100);\n cy.getChat().children().should('have.length', 1);\n cy.getChat().children().contains('Hello, Owner').should('not.exist');\n });\n});\n"
},
{
"path": "web/cypress/fixtures/example.json",
"content": "{\n \"name\": \"Using fixtures to represent data\",\n \"email\": \"hello@cypress.io\",\n \"body\": \"Fixtures are a great way to mock data for responses to routes\"\n}\n"
},
{
"path": "web/cypress/plugins/index.js",
"content": "/// ;\n loginUser(email: string): Chainable;\n sendRequest(id: string): Chainable;\n createGuild(id: string): Chainable;\n joinGuild(invite: string): Chainable;\n clickOnFirstGuild(): Chainable;\n openGuildMenu(): Chainable;\n getChat(): Chainable;\n firstMessage(): Chainable;\n }\n}\n"
},
{
"path": "web/cypress/support/utils.ts",
"content": "export const uuid = (): string => Cypress._.random(0, 1e6).toString();\n"
},
{
"path": "web/cypress/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"es5\", \"dom\"],\n \"types\": [\"cypress\"]\n },\n \"include\": [\"**/*.ts\", \"support/index.js\"]\n}\n"
},
{
"path": "web/cypress.config.ts",
"content": "import { defineConfig } from 'cypress';\n\nexport default defineConfig({\n video: false,\n screenshotOnRunFailure: false,\n retries: 2,\n e2e: {\n baseUrl: 'http://localhost:3000',\n },\n defaultCommandTimeout: 8000,\n});\n"
},
{
"path": "web/package.json",
"content": "{\n \"name\": \"valkyrie\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\",\n \"lint\": \"npx eslint src/**\",\n \"prettier\": \"npx prettier --write **/*.{ts,js,css,html,tsx}\",\n \"compile\": \"tsc\",\n \"workflow\": \"yarn compile && yarn prettier && yarn lint && yarn test --watchAll=false\",\n \"cypress\": \"npx cypress open\"\n },\n \"dependencies\": {\n \"@chakra-ui/react\": \"^2.7.1\",\n \"@chakra-ui/theme-tools\": \"^2.0.18\",\n \"@emotion/react\": \"^11.11.1\",\n \"@emotion/styled\": \"^11.11.0\",\n \"@tanstack/react-query\": \"^4.29.15\",\n \"@testing-library/jest-dom\": \"^5.16.5\",\n \"axios\": \"^1.4.0\",\n \"chakra-ui-autocomplete\": \"^1.4.5\",\n \"dayjs\": \"^1.11.8\",\n \"formik\": \"^2.4.2\",\n \"framer-motion\": \"^10.12.17\",\n \"msw\": \"^1.2.2\",\n \"react\": \"^18.2.0\",\n \"react-color\": \"^2.19.3\",\n \"react-contexify\": \"^5.0.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-easy-crop\": \"^4.7.5\",\n \"react-icons\": \"4.10.1\",\n \"react-infinite-scroll-component\": \"^6.1.0\",\n \"react-router-dom\": \"^6.14.0\",\n \"react-scripts\": \"5.0.1\",\n \"react-textarea-autosize\": \"^8.5.0\",\n \"reconnecting-websocket\": \"^4.4.0\",\n \"yup\": \"^1.2.0\",\n \"zustand\": \"^4.3.8\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^9.3.1\",\n \"@testing-library/react\": \"^14.0.0\",\n \"@testing-library/react-hooks\": \"^8.0.1\",\n \"@testing-library/user-event\": \"^14.4.3\",\n \"@types/node\": \"^20.3.1\",\n \"@types/react\": \"^18.2.14\",\n \"@types/react-color\": \"^3.0.6\",\n \"@types/react-dom\": \"^18.2.6\",\n \"@types/react-router-dom\": \"^5.3.3\",\n \"@typescript-eslint/eslint-plugin\": \"^5.60.0\",\n \"@typescript-eslint/parser\": \"^5.60.0\",\n \"cypress\": \"12.15.0\",\n \"eslint\": \"^8.43.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.0.0\",\n \"eslint-config-prettier\": \"^8.8.0\",\n \"eslint-import-resolver-typescript\": \"^3.5.5\",\n \"eslint-plugin-import\": \"^2.27.5\",\n \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n \"eslint-plugin-prettier\": \"^4.2.1\",\n \"eslint-plugin-react\": \"^7.32.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"prettier\": \"^2.8.8\",\n \"react-test-renderer\": \"^18.2.0\",\n \"typescript\": \"^5.1.3\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"jest\": {\n \"transform\": {\n \"^.+\\\\.[t|j]sx?$\": \"babel-jest\"\n },\n \"transformIgnorePatterns\": [\n \"node_modules/(?!axios)/\"\n ]\n }\n}\n"
},
{
"path": "web/public/_redirects",
"content": "/* /index.html 200"
},
{
"path": "web/public/index.html",
"content": "\n\n \n Valkyrie \n \n \n You need to enable JavaScript to run this app. \n
\n \n\n"
},
{
"path": "web/public/manifest.json",
"content": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n"
},
{
"path": "web/public/robots.txt",
"content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "web/src/App.tsx",
"content": "import * as React from 'react';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { AppRoutes } from './routes/Routes';\nimport { GlobalState } from './components/sections/GlobalState';\n\nconst client = new QueryClient({\n defaultOptions: {\n queries: {\n refetchOnWindowFocus: false,\n staleTime: Infinity,\n cacheTime: 0,\n },\n },\n});\n\nexport const App: React.FC = () => (\n \n \n \n \n);\n"
},
{
"path": "web/src/components/common/GuildPills.tsx",
"content": "import { Box } from '@chakra-ui/react';\nimport React from 'react';\n\nexport const NotificationIndicator: React.FC = () => (\n & {\n label: string;\n name: string;\n};\n\nexport const InputField: React.FC = ({ label, ...props }) => {\n const [field, { error, touched }] = useField(props);\n return (\n \n \n \n {label}\n \n \n {/* @ts-ignore */}\n {error} \n \n );\n};\n"
},
{
"path": "web/src/components/common/Logo.tsx",
"content": "import { Box, Image, Text } from '@chakra-ui/react';\nimport React from 'react';\n\nexport const Logo: React.FC = () => (\n \n \n \n \n);\n"
},
{
"path": "web/src/components/common/NotificationIcon.tsx",
"content": "import { Flex, Text } from '@chakra-ui/react';\nimport React from 'react';\n\ninterface NotificationIconProps {\n count: number;\n}\n\nexport const NotificationIcon: React.FC = ({ count }) => (\n \n \n {count}\n \n \n);\n\nexport const PingIcon: React.FC = ({ count }) => (\n \n \n {count}\n \n \n);\n"
},
{
"path": "web/src/components/items/ChannelListItem.tsx",
"content": "import React, { useEffect, useState } from 'react';\nimport { Flex, Icon, ListItem, Text, useDisclosure } from '@chakra-ui/react';\nimport { FaHashtag, FaUserLock } from 'react-icons/fa';\nimport { MdSettings } from 'react-icons/md';\nimport { Link, useLocation } from 'react-router-dom';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { userStore } from '../../lib/stores/userStore';\nimport { ChannelSettingsModal } from '../modals/ChannelSettingsModal';\nimport { useGetCurrentGuild } from '../../lib/utils/hooks/useGetCurrentGuild';\nimport { ChannelNotificationIndicator } from '../common/GuildPills';\nimport { cKey } from '../../lib/utils/querykeys';\nimport { Channel } from '../../lib/models/channel';\n\ninterface ChannelListItemProps {\n channel: Channel;\n guildId: string;\n}\n\nexport const ChannelListItem: React.FC = ({ channel, guildId }) => {\n const currentPath = `/channels/${guildId}/${channel.id}`;\n const location = useLocation();\n const isActive = location.pathname === currentPath;\n const [showSettings, setShowSettings] = useState(false);\n\n const current = userStore((state) => state.current);\n const guild = useGetCurrentGuild(guildId);\n\n const { isOpen, onOpen, onClose } = useDisclosure();\n\n const cache = useQueryClient();\n\n useEffect(() => {\n if (channel.hasNotification && isActive) {\n cache.setQueryData([cKey, guildId], (d) => {\n if (!d) return [];\n return d.map((c) => (c.id === channel.id ? { ...c, hasNotification: false } : c));\n });\n }\n });\n\n return (\n setShowSettings(false)}\n onMouseEnter={() => setShowSettings(true)}\n >\n {channel.hasNotification && \n \n \n {channel.name}\n \n \n {current?.id === guild?.ownerId && (showSettings || isOpen) && (\n <>\n {\n e.preventDefault();\n onOpen();\n }}\n />\n {isOpen && (\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/items/DMListItem.tsx",
"content": "import React, { useState } from 'react';\nimport { Avatar, AvatarBadge, Flex, Icon, ListItem, Text } from '@chakra-ui/react';\nimport { Link, useNavigate, useLocation } from 'react-router-dom';\nimport { IoMdClose } from 'react-icons/io';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { closeDirectMessage } from '../../lib/api/handler/dm';\nimport { dmKey } from '../../lib/utils/querykeys';\nimport { DMChannel } from '../../lib/models/dm';\n\ninterface DMListItemProps {\n dm: DMChannel;\n}\n\nexport const DMListItem: React.FC = ({ dm }) => {\n const currentPath = `/channels/me/${dm.id}`;\n const location = useLocation();\n const isActive = location.pathname === currentPath;\n const [showCloseButton, setShowButton] = useState(false);\n const navigate = useNavigate();\n const cache = useQueryClient();\n\n const closeDM = async (): Promise => {\n try {\n await closeDirectMessage(dm.id);\n cache.setQueryData([dmKey], (d) => d?.filter((c) => c.id !== dm.id) ?? []);\n if (isActive) {\n navigate('/channels/me', { replace: true });\n }\n } catch (err) {}\n };\n\n return (\n setShowButton(false)}\n onMouseEnter={() => setShowButton(true)}\n >\n \n \n \n \n \n {dm.user.username}\n \n \n {showCloseButton && (\n {\n e.preventDefault();\n await closeDM();\n }}\n />\n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/items/FriendsListItem.tsx",
"content": "import { Avatar, AvatarBadge, Flex, IconButton, ListItem, Text, useDisclosure } from '@chakra-ui/react';\nimport React from 'react';\nimport { FaEllipsisV } from 'react-icons/fa';\nimport { useNavigate } from 'react-router-dom';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getOrCreateDirectMessage } from '../../lib/api/handler/dm';\nimport { RemoveFriendModal } from '../modals/RemoveFriendModal';\nimport { dmKey } from '../../lib/utils/querykeys';\nimport { Friend } from '../../lib/models/friend';\nimport { DMChannel } from '../../lib/models/dm';\n\ninterface FriendsListItemProp {\n friend: Friend;\n}\n\nexport const FriendsListItem: React.FC = ({ friend }) => {\n const navigate = useNavigate();\n const { isOpen, onOpen, onClose } = useDisclosure();\n const cache = useQueryClient();\n\n const getDMChannel = async (): Promise => {\n try {\n const { data } = await getOrCreateDirectMessage(friend.id);\n if (data) {\n cache.setQueryData([dmKey], (d) => {\n const queryData = d ?? [];\n const index = queryData.findIndex((dm) => dm.id === data.id);\n if (index === -1) return [data, ...queryData];\n return queryData;\n });\n navigate(`/channels/me/${data.id}`);\n }\n } catch (err) {}\n };\n\n return (\n \n \n \n \n \n {friend.username} \n \n \n {isOpen && = ({ guild }) => {\n const location = useLocation();\n const isActive = location.pathname.includes(guild.id);\n const [isHover, setHover] = useState(false);\n const cache = useQueryClient();\n\n useEffect(() => {\n if (guild.hasNotification && isActive) {\n cache.setQueryData([gKey], (data) => {\n if (!data) return [];\n return data.map((g) => (g.id === guild.id ? { ...g, hasNotification: false } : g));\n });\n }\n });\n\n return (\n \n {isActive && \n setHover(false)}\n onMouseEnter={() => setHover(true)}\n />\n ) : (\n setHover(false)}\n onMouseEnter={() => setHover(true)}\n >\n {guild.name[0]}\n \n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/items/MemberListItem.tsx",
"content": "import React from 'react';\nimport { Avatar, AvatarBadge, Flex, ListItem, Text } from '@chakra-ui/react';\nimport { useContextMenu } from 'react-contexify';\nimport { useParams } from 'react-router-dom';\nimport { useGetCurrentGuild } from '../../lib/utils/hooks/useGetCurrentGuild';\nimport { userStore } from '../../lib/stores/userStore';\nimport { MemberContextMenu } from '../menus/MemberContextMenu';\nimport { RouterProps } from '../../lib/models/routerProps';\nimport { Member } from '../../lib/models/member';\n\ninterface MemberListItemProps {\n member: Member;\n}\n\nexport const MemberListItem: React.FC = ({ member }) => {\n const current = userStore((state) => state.current);\n const { guildId } = useParams() as RouterProps;\n const guild = useGetCurrentGuild(guildId);\n const isOwner = guild !== undefined && guild.ownerId === current?.id;\n\n const { show } = useContextMenu({\n id: member.id,\n });\n\n return (\n <>\n \n \n \n \n \n {member.nickname ?? member.username}\n \n \n \n {member.id !== current?.id && = ({ notification }) => {\n const location = useLocation();\n const isActive = location.pathname.includes(notification.id);\n const [isHover, setHover] = useState(false);\n const cache = useQueryClient();\n\n useEffect(() => {\n if (isActive) {\n cache.setQueryData([nKey], (d) => d?.filter((c) => c.id !== notification.id) ?? []);\n }\n });\n\n const handleClick = (): void => {\n if (window.location.pathname.includes('/channels/me')) {\n const newChannel: DMChannel = {\n id: notification.id,\n user: notification.user,\n };\n\n cache.setQueryData([dmKey], (d) => {\n const data = d ?? [];\n const index = d!.findIndex((dm) => dm.id === notification.id);\n if (index === -1) return [newChannel, ...data];\n return data;\n });\n }\n };\n\n return (\n \n {isActive && \n setHover(false)}\n onMouseEnter={() => setHover(true)}\n onClick={() => handleClick()}\n >\n \n \n );\n};\n"
},
{
"path": "web/src/components/items/RequestListItem.tsx",
"content": "import { Avatar, Box, Flex, IconButton, ListItem, Text } from '@chakra-ui/react';\nimport React from 'react';\nimport { BiCheck } from 'react-icons/bi';\nimport { AiOutlineClose } from 'react-icons/ai';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { StyledTooltip } from '../sections/StyledTooltip';\nimport { acceptFriendRequest, declineFriendRequest } from '../../lib/api/handler/account';\nimport { fKey, rKey } from '../../lib/utils/querykeys';\nimport { FriendRequest, RequestType } from '../../lib/models/friend';\n\ninterface RequestListItemProps {\n request: FriendRequest;\n}\n\nexport const RequestListItem: React.FC = ({ request }) => {\n const cache = useQueryClient();\n\n const acceptRequest = async (): Promise => {\n try {\n const { data } = await acceptFriendRequest(request.id);\n if (data) {\n cache.setQueryData([rKey], (d) => d?.filter((r) => r.id !== request.id) ?? []);\n await cache.invalidateQueries([fKey]);\n }\n } catch (err) {}\n };\n\n const declineRequest = async (): Promise => {\n try {\n const { data } = await declineFriendRequest(request.id);\n if (data) {\n cache.setQueryData([rKey], (d) => d?.filter((r) => r.id !== request.id) ?? []);\n }\n } catch (err) {}\n };\n\n return (\n \n \n \n \n {request.username} \n \n {request.type === RequestType.INCOMING ? 'Incoming Friend Request' : 'Outgoing Friend Request'}\n \n \n \n \n {request.type === 1 && (\n \n \n )}\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/items/VoiceChannelItem.tsx",
"content": "import { Avatar, Flex, Icon, Text } from '@chakra-ui/react';\nimport React, { useCallback } from 'react';\nimport { MdHeadsetOff, MdMicOff } from 'react-icons/md';\n\ninterface VoiceUserVisualProps {\n username: string;\n image: string;\n isMuted: boolean;\n isDeafened: boolean;\n}\n\nconst VoiceUserVisual: React.FC = ({ username, image, isMuted, isDeafened }) => (\n \n \n \n {username}\n \n \n {isDeafened && = ({\n username,\n image,\n stream,\n muted = false,\n controls = false,\n isMuted,\n isDeafened,\n}) => {\n const refAudio = useCallback(\n (node: HTMLAudioElement) => {\n if (node && stream) {\n const audio = node;\n audio.srcObject = stream;\n }\n },\n [stream]\n );\n\n if (!stream) return = ({ message, isCompact = false }) => {\n const [showSettings, setShowSettings] = useState(false);\n const current = userStore((state) => state.current);\n const isAuthor = current?.id === message.user.id;\n const { guildId } = useParams() as RouterProps;\n const guild = useGetCurrentGuild(guildId);\n const isOwner = guild !== undefined && guild.ownerId === current?.id;\n const showMenu = isAuthor || isOwner || message.attachment?.url;\n\n const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();\n const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure();\n const id = `${message.user.id}-${Math.random().toString(36).substr(2, 5)}`;\n\n const { show } = useContextMenu({\n id: message.id,\n });\n\n const { show: profileShow } = useContextMenu({ id });\n\n const openInNewTab = (url: string): void => {\n const newWindow = window.open(url, '_blank', 'noopener,noreferrer');\n if (newWindow) newWindow.opener = null;\n };\n\n return (\n <>\n setShowSettings(false)}\n onMouseEnter={() => setShowSettings(true)}\n >\n \n {isCompact ? (\n <>\n \n \n {getShortenedTime(message.createdAt)}\n \n \n\n \n \n {showSettings && showMenu ? (\n \n \n ) : (\n \n {\n if (!isAuthor) profileShow(e);\n }}\n />\n \n \n \n \n \n {message.user.nickname ?? message.user.username}\n \n \n {getTime(message.createdAt)}\n \n \n {showSettings && showMenu && (\n \n \n )}\n \n \n \n )}\n \n \n {showMenu && (\n <>\n \n {message.attachment?.filetype ? (\n {\n if (message.attachment?.url) openInNewTab(message.attachment.url);\n }}\n >\n \n Open Link \n \n \n ) : (\n isAuthor && (\n - \n
\n Edit Message \n \n \n )\n )}\n {(isAuthor || isOwner) && (\n - \n
\n Delete Message \n \n \n )}\n \n {isDeleteOpen && = ({ message: { attachment, text, createdAt, updatedAt } }) => {\n if (attachment) {\n const { filetype, url } = attachment;\n if (filetype.startsWith('image/')) {\n return (\n \n \n );\n }\n if (filetype.startsWith('audio/')) {\n return (\n \n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n \n \n \n );\n }\n }\n return (\n \n {text} \n {createdAt !== updatedAt && (\n \n (edited)\n \n )}\n \n );\n};\n"
},
{
"path": "web/src/components/layouts/AccountBar.tsx",
"content": "import { Avatar, Flex, IconButton, Text, Tooltip, useClipboard } from '@chakra-ui/react';\nimport React from 'react';\nimport { MdHeadset, MdHeadsetOff, MdMic, MdMicOff } from 'react-icons/md';\nimport { RiSettings5Fill } from 'react-icons/ri';\nimport { Link } from 'react-router-dom';\nimport { userStore } from '../../lib/stores/userStore';\nimport { voiceStore } from '../../lib/stores/voiceStore';\n\nexport const AccountBar: React.FC = () => {\n const user = userStore((state) => state.current);\n const [isMuted, isDeafened, setIsMuted, setIsDeafened] = voiceStore((state) => [\n state.isMuted,\n state.isDeafened,\n state.setIsMuted,\n state.setIsDeafened,\n ]);\n const { hasCopied, onCopy } = useClipboard(user?.id || '');\n\n const handleMute = (): void => {\n setIsMuted(!isMuted);\n // socket.send(\n // JSON.stringify({\n // action: 'toggle-mute',\n // room: guildId,\n // message: { id: user?.id, value: !isMuted },\n // })\n // );\n };\n\n const handleDeafen = (): void => {\n setIsDeafened(!isDeafened);\n // socket.send(\n // JSON.stringify({\n // action: 'toggle-deafen',\n // room: guildId,\n // message: { id: user?.id, value: !isDeafened },\n // })\n // );\n };\n\n return (\n \n \n \n \n {user?.username}\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/AppLayout.tsx",
"content": "import { Grid } from '@chakra-ui/react';\nimport React from 'react';\n\ninterface AppLayoutProps {\n showLastColumn?: boolean | null;\n children: React.ReactNode;\n}\n\nexport const AppLayout: React.FC = ({ showLastColumn = false, children }) => (\n // Col Chat: GuildList ChannelList Chat [MemberList]\n // Col Home: GuildList DMList Chat/FriendsList\n \n {children}\n \n);\n"
},
{
"path": "web/src/components/layouts/LandingLayout.tsx",
"content": "import React from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { NavBar } from '../sections/NavBar';\nimport { Footer } from '../sections/Footer';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\nexport const LandingLayout: React.FC = ({ children }) => (\n \n \n);\n"
},
{
"path": "web/src/components/layouts/VoiceBar.tsx",
"content": "import { Box, Flex, Icon, IconButton, Text, Tooltip } from '@chakra-ui/react';\nimport React from 'react';\nimport { AiFillSignal } from 'react-icons/ai';\nimport { HiPhoneMissedCall } from 'react-icons/hi';\nimport { voiceStore } from '../../lib/stores/voiceStore';\nimport { useGetCurrentGuild } from '../../lib/utils/hooks/useGetCurrentGuild';\n\nexport const VoiceBar: React.FC = () => {\n const [voiceChatID, inVC, leaveVoice] = voiceStore((state) => [state.voiceChatID, state.inVC, state.leaveVoice]);\n const guild = useGetCurrentGuild(voiceChatID);\n\n if (!inVC) return \n \n \n \n Voice Connected\n \n \n \n General / {guild?.name}\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/ChannelHeader.tsx",
"content": "import React from 'react';\nimport { Flex, GridItem, Icon, Text } from '@chakra-ui/react';\nimport { FaHashtag } from 'react-icons/fa';\nimport { BsPeopleFill } from 'react-icons/bs';\nimport { useParams } from 'react-router-dom';\nimport { settingsStore } from '../../../lib/stores/settingsStore';\nimport { useGetCurrentChannel } from '../../../lib/utils/hooks/useGetCurrentChannel';\nimport { RouterProps } from '../../../lib/models/routerProps';\n\nexport const ChannelHeader: React.FC = () => {\n const toggleMemberList = settingsStore((state) => state.toggleShowMembers);\n const { guildId, channelId } = useParams() as RouterProps;\n const channel = useGetCurrentChannel(channelId, guildId);\n\n return (\n \n \n \n \n {channel?.name}\n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/Channels.tsx",
"content": "import React from 'react';\nimport { Box, GridItem, UnorderedList, useDisclosure } from '@chakra-ui/react';\nimport { useParams } from 'react-router-dom';\nimport { useQuery } from '@tanstack/react-query';\nimport { AccountBar } from '../AccountBar';\nimport { CreateChannelModal } from '../../modals/CreateChannelModal';\nimport { GuildMenu } from '../../menus/GuildMenu';\nimport { InviteModal } from '../../modals/InviteModal';\nimport { ChannelListItem } from '../../items/ChannelListItem';\nimport { cKey } from '../../../lib/utils/querykeys';\nimport { channelScrollbarCss } from './css/ChannelScrollerCSS';\nimport { useChannelSocket } from '../../../lib/api/ws/useChannelSocket';\nimport { getChannels } from '../../../lib/api/handler/channel';\nimport { RouterProps } from '../../../lib/models/routerProps';\nimport { VoiceChat } from './VoiceChat';\nimport { VoiceBar } from '../VoiceBar';\n\nexport const Channels: React.FC = () => {\n const { isOpen: inviteIsOpen, onOpen: inviteOpen, onClose: inviteClose } = useDisclosure();\n const { isOpen: channelIsOpen, onOpen: channelOpen, onClose: channelClose } = useDisclosure();\n\n const { guildId } = useParams() as RouterProps;\n\n const { data } = useQuery([cKey, guildId], () => getChannels(guildId).then((response) => response.data));\n\n useChannelSocket(guildId);\n\n return (\n <>\n \n {inviteIsOpen && \n {data?.map((c) => (\n \n ([nKey], () => [], {\n cacheTime: Infinity,\n });\n\n useGuildSocket();\n\n return (\n \n \n {dmData?.map((dm) => (\n \n \n \n \n {data?.map((g) => (\n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/MemberList.tsx",
"content": "import React from 'react';\nimport { GridItem, UnorderedList } from '@chakra-ui/react';\nimport { useParams } from 'react-router-dom';\nimport { useQuery } from '@tanstack/react-query';\nimport { MemberListItem } from '../../items/MemberListItem';\nimport { getGuildMembers } from '../../../lib/api/handler/guilds';\nimport { mKey } from '../../../lib/utils/querykeys';\nimport { memberScrollbarCss } from './css/MemberScrollerCSS';\nimport { useMemberSocket } from '../../../lib/api/ws/useMemberSocket';\nimport { OnlineLabel } from '../../sections/OnlineLabel';\nimport { RouterProps } from '../../../lib/models/routerProps';\nimport { Member } from '../../../lib/models/member';\n\nexport const MemberList: React.FC = () => {\n const { guildId } = useParams() as RouterProps;\n const key = [mKey, guildId];\n\n const { data } = useQuery(key, () => getGuildMembers(guildId).then((response) => response.data));\n\n const online: Member[] = [];\n const offline: Member[] = [];\n\n if (data) {\n data.forEach((m) => {\n if (m.isOnline) {\n online.push(m);\n } else {\n offline.push(m);\n }\n });\n }\n\n useMemberSocket(guildId);\n\n return (\n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/VoiceChat.tsx",
"content": "import { Box, Flex, Icon, ListItem, Text } from '@chakra-ui/react';\nimport React from 'react';\nimport { FaVolumeUp } from 'react-icons/fa';\nimport { useQuery } from '@tanstack/react-query';\nimport { useParams } from 'react-router-dom';\nimport { getVCMembers } from '../../../lib/api/handler/guilds';\nimport { useVoiceSocket } from '../../../lib/api/ws/useVoiceSocket';\nimport { RouterProps } from '../../../lib/models/routerProps';\nimport { userStore } from '../../../lib/stores/userStore';\nimport { voiceStore } from '../../../lib/stores/voiceStore';\nimport { useSetupVoiceChat } from '../../../lib/utils/hooks/useVoiceChat';\nimport { vcKey } from '../../../lib/utils/querykeys';\nimport { VoiceChannelItem } from '../../items/VoiceChannelItem';\n\nexport const VoiceChat: React.FC<{}> = () => {\n const { guildId } = useParams() as RouterProps;\n const current = userStore((state) => state.current);\n const key = [vcKey, guildId];\n\n const [voiceChatID, setVoiceID] = voiceStore((state) => [state.voiceChatID, state.setVoiceID]);\n const [inVC, setIsInVC] = voiceStore((state) => [state.inVC, state.setInVC]);\n const voiceClients = voiceStore((state) => state.voiceClients);\n\n const [localStream, setLocalStream] = voiceStore((state) => [state.localStream, state.setLocalStream]);\n\n const [isMuted, isDeafened] = voiceStore((state) => [state.isMuted, state.isDeafened]);\n const leaveVoice = voiceStore((state) => state.leaveVoice);\n\n const { data } = useQuery(key, () => getVCMembers(guildId).then((response) => response.data));\n\n useVoiceSocket();\n useSetupVoiceChat(guildId);\n\n const joinVoice = async (): Promise => {\n if (guildId === voiceChatID) return;\n if (voiceChatID !== '') {\n leaveVoice();\n }\n await openMic();\n setIsInVC(true);\n setVoiceID(guildId);\n };\n\n const openMic = async (): Promise => {\n try {\n // Get audio device and set better audio settings\n const result = await navigator.mediaDevices.getUserMedia({\n audio: {\n autoGainControl: false,\n channelCount: 2,\n echoCancellation: false,\n noiseSuppression: false,\n sampleRate: 48000,\n sampleSize: 16,\n },\n });\n setLocalStream(result);\n } catch (err) {}\n };\n\n return (\n \n joinVoice()}\n >\n \n \n General \n \n \n \n \n {/* Current user */}\n {inVC && localStream && guildId === voiceChatID && (\n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/chat/ChatGrid.tsx",
"content": "import React from 'react';\nimport { GridItem } from '@chakra-ui/react';\nimport { scrollbarCss } from '../../../../lib/utils/theme';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\nexport const ChatGrid: React.FC = ({ children }) => (\n \n {children}\n \n);\n"
},
{
"path": "web/src/components/layouts/guild/chat/ChatScreen.tsx",
"content": "import React, { useState } from 'react';\nimport { Box, Flex, Spinner } from '@chakra-ui/react';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { useInfiniteQuery } from '@tanstack/react-query';\nimport { useParams } from 'react-router-dom';\nimport { Message } from '../../../items/message/Message';\nimport { StartMessages } from '../../../sections/StartMessages';\nimport { getMessages } from '../../../../lib/api/handler/messages';\nimport { checkNewDay, getTimeDifference } from '../../../../lib/utils/dateUtils';\nimport { guildScrollbarCss } from '../css/GuildScrollerCSS';\nimport { useMessageSocket } from '../../../../lib/api/ws/useMessageSocket';\nimport { DateDivider } from '../../../sections/DateDivider';\nimport { ChatGrid } from './ChatGrid';\nimport { RouterProps } from '../../../../lib/models/routerProps';\nimport { Message as MessageResponse } from '../../../../lib/models/message';\nimport { msgKey } from '../../../../lib/utils/querykeys';\n\nexport const ChatScreen: React.FC = () => {\n const { channelId } = useParams() as RouterProps;\n const [hasMore, setHasMore] = useState(true);\n\n const { data, isLoading, fetchNextPage } = useInfiniteQuery(\n [msgKey, channelId],\n async ({ pageParam = null }) => {\n const { data: messageData } = await getMessages(channelId, pageParam);\n if (messageData.length !== 35) setHasMore(false);\n return messageData;\n },\n {\n staleTime: 0,\n cacheTime: 0,\n getNextPageParam: (lastPage) => (hasMore && lastPage.length ? lastPage[lastPage.length - 1].createdAt : ''),\n }\n );\n\n useMessageSocket(channelId);\n\n if (isLoading) {\n return (\n \n \n \n \n );\n }\n\n const checkIfWithinTime = (message1: MessageResponse, message2: MessageResponse): boolean => {\n if (message1.user.id !== message2.user.id) return false;\n if (message1.createdAt === message2.createdAt) return false;\n return getTimeDifference(message1.createdAt, message2.createdAt) <= 5;\n };\n\n const messages = data ? data!.pages.map((p) => p.map((mr) => mr)).flat() : [];\n\n return (\n \n fetchNextPage()}\n style={{\n display: 'flex',\n flexDirection: 'column-reverse',\n }}\n inverse\n hasMore={hasMore}\n loader={\n messages.length > 0 && (\n \n \n )\n }\n scrollableTarget=\"chatGrid\"\n >\n {messages.map((m, i) => (\n \n \n ))}\n \n {!hasMore && \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/chat/FileUploadButton.tsx",
"content": "import {\n Icon,\n InputLeftElement,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalHeader,\n ModalOverlay,\n Progress,\n Text,\n useDisclosure,\n} from '@chakra-ui/react';\nimport React, { useRef, useState } from 'react';\nimport { MdAddCircle } from 'react-icons/md';\nimport { useParams } from 'react-router-dom';\nimport { sendMessage } from '../../../../lib/api/handler/messages';\nimport { FileSchema } from '../../../../lib/utils/validation/message.schema';\nimport { StyledTooltip } from '../../../sections/StyledTooltip';\nimport { RouterProps } from '../../../../lib/models/routerProps';\n\nexport const FileUploadButton: React.FC = () => {\n const { channelId } = useParams() as RouterProps;\n const { isOpen, onOpen, onClose } = useDisclosure();\n\n const inputFile: any = useRef(null);\n const [isSubmitting, setSubmitting] = useState(false);\n const [progress, setProgress] = useState(0);\n const [errors, setErrors] = useState({});\n const disable = process.env.NODE_ENV === 'production';\n\n const closeModal = (): void => {\n setErrors({});\n setProgress(0);\n onClose();\n };\n\n const handleSubmit = async (file: File): Promise => {\n if (!file) return;\n setSubmitting(true);\n\n try {\n await FileSchema.validate({ file });\n } catch (err: any) {\n setErrors(err.errors);\n onOpen();\n return;\n }\n\n const data = new FormData();\n data.append('file', file);\n await sendMessage(channelId, data, (event: any) => {\n const loaded = Math.round((100 * event.loaded) / event.total);\n setProgress(loaded);\n if (loaded >= 100) setProgress(0);\n });\n };\n\n return (\n \n inputFile.current.click()}\n >\n {\n if (!e.currentTarget.files) return;\n handleSubmit(e.currentTarget.files[0]).then(() => {\n setSubmitting(false);\n e.target.value = '';\n });\n }}\n />\n {errors && (\n \n \n Error Uploading File \n \n \n Reason: <>{errors}\n \n Max file size is 5.00 MB \n Only Images and mp3 allowed \n \n \n \n )}\n {progress > 0 && (\n 0} closeOnOverlayClick={false} onClose={closeModal} isCentered>\n \n Upload Progress \n \n \n \n \n )}\n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/chat/MessageInput.tsx",
"content": "import React, { useRef, useState } from 'react';\nimport { Flex, GridItem, InputGroup, Text, Textarea } from '@chakra-ui/react';\nimport ResizeTextarea from 'react-textarea-autosize';\nimport { useParams } from 'react-router-dom';\nimport { useQuery } from '@tanstack/react-query';\nimport { FileUploadButton } from './FileUploadButton';\nimport { sendMessage } from '../../../../lib/api/handler/messages';\nimport { getSameSocket } from '../../../../lib/api/getSocket';\nimport { userStore } from '../../../../lib/stores/userStore';\nimport { channelStore } from '../../../../lib/stores/channelStore';\nimport { cKey, dmKey } from '../../../../lib/utils/querykeys';\nimport { RouterProps } from '../../../../lib/models/routerProps';\nimport '../css/MessageInput.css';\n\nexport const MessageInput: React.FC = () => {\n const [text, setText] = useState('');\n const [isSubmitting, setSubmitting] = useState(false);\n const [currentlyTyping, setCurrentlyTyping] = useState(false);\n const inputRef: any = useRef();\n\n const { guildId, channelId } = useParams() as RouterProps;\n const qKey = guildId === undefined ? [dmKey] : [cKey, guildId];\n const { data } = useQuery(qKey);\n const channel = data?.find((c) => c.id === channelId);\n\n const socket = getSameSocket();\n const current = userStore((state) => state.current);\n const isTyping = channelStore((state) => state.typing);\n\n const handleSubmit = async (): Promise => {\n if (!text || !text.trim()) {\n return;\n }\n\n socket.send(\n JSON.stringify({\n action: 'stopTyping',\n room: channelId,\n message: current?.username,\n })\n );\n\n try {\n setSubmitting(true);\n setCurrentlyTyping(false);\n const formData = new FormData();\n formData.append('text', text.trim());\n await sendMessage(channelId, formData);\n } catch (err) {}\n };\n\n const getTypingString = (members: string[]): string => {\n switch (members.length) {\n case 1:\n return members[0];\n case 2:\n return `${members[0]} and ${members[1]}`;\n case 3:\n return `${members[0]}, ${members[1]} and ${members[2]}`;\n default:\n return 'Several people';\n }\n };\n\n const getPlaceholder = (): string => {\n if (!channel) return '';\n\n if (channel?.user) {\n return `Message @${channel?.user.username}`;\n }\n return `Message #${channel?.name}`;\n };\n\n return (\n 0 ? '0' : '26px'} bg=\"brandGray.light\">\n \n {\n const { value } = e.target;\n if (value.trim().length === 1 && !currentlyTyping) {\n socket.send(\n JSON.stringify({\n action: 'startTyping',\n room: channelId,\n message: current?.username,\n })\n );\n setCurrentlyTyping(true);\n } else if (value.length === 0) {\n socket.send(\n JSON.stringify({\n action: 'stopTyping',\n room: channelId,\n message: current?.username,\n })\n );\n setCurrentlyTyping(false);\n }\n if (value.length <= 2000) setText(value);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleSubmit().then(() => {\n setText('');\n setSubmitting(false);\n inputRef?.current?.focus();\n });\n }\n }}\n />\n \n {isTyping.length > 0 && (\n \n \n
\n \n {getTypingString(isTyping)}\n \n {isTyping.length === 1 ? 'is' : 'are'} typing... \n \n )}\n \n );\n};\n"
},
{
"path": "web/src/components/layouts/guild/css/ChannelScrollerCSS.ts",
"content": "export const channelScrollbarCss = {\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '&::-webkit-scrollbar-track': {\n width: '4px',\n },\n '&::-webkit-scrollbar-thumb': {\n background: 'brandGray.darker',\n borderRadius: '18px',\n },\n};\n"
},
{
"path": "web/src/components/layouts/guild/css/GuildScrollerCSS.ts",
"content": "export const guildScrollbarCss = {\n '&::-webkit-scrollbar': {\n width: '0',\n },\n};\n"
},
{
"path": "web/src/components/layouts/guild/css/MemberScrollerCSS.ts",
"content": "export const memberScrollbarCss = {\n '&::-webkit-scrollbar': {\n width: '4px',\n },\n '&::-webkit-scrollbar-track': {\n width: '4px',\n },\n '&::-webkit-scrollbar-thumb': {\n background: 'brandGray.darker',\n borderRadius: '18px',\n },\n};\n"
},
{
"path": "web/src/components/layouts/guild/css/MessageInput.css",
"content": ".typing-indicator {\n border-radius: 50px;\n display: table;\n position: relative;\n -webkit-animation: 2s bulge infinite ease-out;\n animation: 2s bulge infinite ease-out;\n}\n\n.typing-indicator span {\n height: 7px;\n width: 7px;\n float: left;\n margin: 0 1px;\n background-color: #fff;\n display: block;\n border-radius: 50%;\n opacity: 0.4;\n}\n.typing-indicator span:nth-of-type(1) {\n -webkit-animation: 1s blink infinite 0.3333s;\n animation: 1s blink infinite 0.3333s;\n}\n.typing-indicator span:nth-of-type(2) {\n -webkit-animation: 1s blink infinite 0.6666s;\n animation: 1s blink infinite 0.6666s;\n}\n.typing-indicator span:nth-of-type(3) {\n -webkit-animation: 1s blink infinite 0.9999s;\n animation: 1s blink infinite 0.9999s;\n}\n\n@-webkit-keyframes blink {\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes blink {\n 50% {\n opacity: 1;\n }\n}\n@-webkit-keyframes bulge {\n 50% {\n -webkit-transform: scale(1.05);\n transform: scale(1.05);\n }\n}\n@keyframes bulge {\n 50% {\n -webkit-transform: scale(1.05);\n transform: scale(1.05);\n }\n}\n"
},
{
"path": "web/src/components/layouts/home/DMHeader.tsx",
"content": "import React from 'react';\nimport { Box, Flex, GridItem, Icon, Text } from '@chakra-ui/react';\nimport { FaAt } from 'react-icons/fa';\nimport { useParams } from 'react-router-dom';\nimport { useGetCurrentDM } from '../../../lib/utils/hooks/useGetCurrentDM';\nimport { RouterProps } from '../../../lib/models/routerProps';\n\nexport const DMHeader: React.FC = () => {\n const { channelId } = useParams() as RouterProps;\n const channel = useGetCurrentDM(channelId);\n\n return (\n \n \n \n {channel?.user.username}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/home/DMSidebar.tsx",
"content": "import React from 'react';\nimport { GridItem, Box, Text, UnorderedList } from '@chakra-ui/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { AccountBar } from '../AccountBar';\nimport { FriendsListButton } from '../../sections/FriendsListButton';\nimport { DMListItem } from '../../items/DMListItem';\nimport { getUserDMs } from '../../../lib/api/handler/dm';\nimport { dmKey } from '../../../lib/utils/querykeys';\nimport { dmScrollerCss } from './css/dmScrollerCSS';\nimport { useDMSocket } from '../../../lib/api/ws/useDMSocket';\nimport { DMPlaceholder } from '../../sections/DMPlaceholder';\n\nexport const DMSidebar: React.FC = () => {\n const { data } = useQuery([dmKey], () => getUserDMs().then((result) => result.data));\n\n useDMSocket();\n\n return (\n \n \n DIRECT MESSAGES\n \n \n {data?.map((dm) => (\n \n \n )}\n \n \n {isPending ? \n No one here yet \n \n );\n }\n\n return (\n \n \n );\n};\n"
},
{
"path": "web/src/components/layouts/home/dashboard/FriendsListHeader.tsx",
"content": "import React from 'react';\nimport { Button, Flex, GridItem, Icon, LightMode, Text, useDisclosure } from '@chakra-ui/react';\nimport { FiUsers } from 'react-icons/fi';\nimport { AddFriendModal } from '../../../modals/AddFriendModal';\nimport { homeStore } from '../../../../lib/stores/homeStore';\nimport { PingIcon } from '../../../common/NotificationIcon';\n\nexport const FriendsListHeader: React.FC = () => {\n const { isOpen, onOpen, onClose } = useDisclosure();\n const toggle = homeStore((state) => state.toggleDisplay);\n const isPending = homeStore((state) => state.isPending);\n const requests = homeStore((state) => state.requestCount);\n\n return (\n \n \n \n \n Friends\n \n {\n if (isPending) toggle();\n }}\n variant={!isPending ? 'solid' : 'ghost'}\n _focus={{ boxShadow: 'none' }}\n >\n Friends\n \n {\n if (!isPending) toggle();\n }}\n _focus={{ boxShadow: 'none' }}\n >\n Pending\n {requests > 0 && \n \n \n Add Friend\n \n \n \n {isOpen && \n );\n};\n"
},
{
"path": "web/src/components/layouts/home/dashboard/PendingList.tsx",
"content": "import React, { useEffect } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { Flex, UnorderedList, Text } from '@chakra-ui/react';\nimport { rKey } from '../../../../lib/utils/querykeys';\nimport { getPendingRequests } from '../../../../lib/api/handler/account';\nimport { OnlineLabel } from '../../../sections/OnlineLabel';\nimport { RequestListItem } from '../../../items/RequestListItem';\nimport { homeStore } from '../../../../lib/stores/homeStore';\nimport { useRequestSocket } from '../../../../lib/api/ws/useRequestSocket';\n\nexport const PendingList: React.FC = () => {\n const { data } = useQuery([rKey], () => getPendingRequests().then((response) => response.data), {\n staleTime: 0,\n });\n\n useRequestSocket();\n\n const reset = homeStore((state) => state.resetRequest);\n\n useEffect(() => {\n reset();\n });\n\n if (!data) return null;\n\n if (data.length === 0) {\n return (\n \n There are no pending friend requests \n \n );\n }\n\n return (\n \n \n );\n};\n"
},
{
"path": "web/src/components/menus/GuildMenu.tsx",
"content": "import React from 'react';\nimport { Flex, GridItem, Heading, Icon, Menu, MenuButton, MenuDivider, useDisclosure } from '@chakra-ui/react';\nimport { FiChevronDown, FiX } from 'react-icons/fi';\nimport { FaUserEdit, FaUserPlus } from 'react-icons/fa';\nimport { MdAddCircle } from 'react-icons/md';\nimport { HiLogout } from 'react-icons/hi';\nimport { RiSettings5Fill } from 'react-icons/ri';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { StyledMenuList } from './StyledMenuList';\nimport { StyledMenuItem, StyledRedMenuItem } from './StyledMenuItem';\nimport { leaveGuild } from '../../lib/api/handler/guilds';\nimport { userStore } from '../../lib/stores/userStore';\nimport { useGetCurrentGuild } from '../../lib/utils/hooks/useGetCurrentGuild';\nimport { GuildSettingsModal } from '../modals/GuildSettingsModal';\nimport { EditMemberModal } from '../modals/EditMemberModal';\nimport { gKey } from '../../lib/utils/querykeys';\nimport { RouterProps } from '../../lib/models/routerProps';\nimport { Guild } from '../../lib/models/guild';\n\ninterface GuildMenuProps {\n channelOpen: () => void;\n inviteOpen: () => void;\n}\n\nexport const GuildMenu: React.FC = ({ channelOpen, inviteOpen }) => {\n const { guildId } = useParams() as RouterProps;\n const guild = useGetCurrentGuild(guildId);\n const navigate = useNavigate();\n const cache = useQueryClient();\n\n const user = userStore((state) => state.current);\n const isOwner = guild?.ownerId === user?.id;\n\n const { isOpen, onOpen, onClose } = useDisclosure();\n const { isOpen: memberOpen, onOpen: memberOnOpen, onClose: memberOnClose } = useDisclosure();\n\n const handleLeave = async (): Promise => {\n try {\n const { data } = await leaveGuild(guildId);\n if (data) {\n cache.setQueryData([gKey], (d) => d?.filter((g) => g.id !== guild?.id) ?? []);\n navigate('/channels/me', { replace: true });\n }\n } catch (err) {}\n };\n\n return (\n \n \n {({ isOpen: menuIsOpen }) => (\n <>\n \n \n {guild?.name}\n \n \n \n \n \n \n \n )}\n \n {isOpen && \n );\n};\n"
},
{
"path": "web/src/components/menus/MemberContextMenu.tsx",
"content": "import React, { useState } from 'react';\nimport { Divider, Flex, Text, useDisclosure } from '@chakra-ui/react';\nimport { Item, Menu, theme } from 'react-contexify';\nimport { useNavigate } from 'react-router-dom';\nimport { getOrCreateDirectMessage } from '../../lib/api/handler/dm';\nimport { sendFriendRequest } from '../../lib/api/handler/account';\nimport { RemoveFriendModal } from '../modals/RemoveFriendModal';\nimport { ModActionModal } from '../modals/ModActionModal';\nimport { Member } from '../../lib/models/member';\n\ninterface MemberContextMenuProps {\n member: Member;\n isOwner: boolean;\n id: string;\n}\n\nexport const MemberContextMenu: React.FC = ({ member, isOwner, id }) => {\n const navigate = useNavigate();\n const { isOpen, onOpen, onClose } = useDisclosure();\n const { isOpen: modIsOpen, onOpen: modOnOpen, onClose: modOnClose } = useDisclosure();\n const [isBan, setIsBan] = useState(false);\n\n const getOrCreateDM = async (): Promise => {\n try {\n const { data } = await getOrCreateDirectMessage(member.id);\n if (data) {\n navigate(`/channels/me/${data.id}`);\n }\n } catch (err) {}\n };\n\n const handleFriendClick = async (): Promise => {\n if (!member.isFriend) {\n try {\n await sendFriendRequest(member.id);\n } catch (err) {}\n } else {\n onOpen();\n }\n };\n\n return (\n <>\n \n - getOrCreateDM()} className=\"menu-item\">\n
\n Message \n \n \n - \n
\n {member.isFriend ? 'Remove' : 'Add'} Friend \n \n \n {isOwner && (\n <>\n \n \n {\n setIsBan(false);\n modOnOpen();\n }}\n className=\"delete-item\"\n >\n \n Kick {member.username} \n \n \n {\n setIsBan(true);\n modOnOpen();\n }}\n className=\"delete-item\"\n >\n \n Ban {member.username} \n \n \n \n )}\n \n {isOpen && = ({ label, icon, handleClick }) => (\n \n \n {label} \n \n \n);\n\nexport const StyledRedMenuItem: React.FC = ({ label, icon, handleClick }) => (\n \n \n {label} \n \n \n);\n"
},
{
"path": "web/src/components/menus/StyledMenuList.tsx",
"content": "import { MenuList } from '@chakra-ui/react';\nimport React from 'react';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\nexport const StyledMenuList: React.FC = ({ children }) => (\n \n {children}\n \n);\n"
},
{
"path": "web/src/components/modals/AddFriendModal.tsx",
"content": "import React from 'react';\nimport {\n Button,\n Input,\n InputGroup,\n InputLeftAddon,\n InputRightElement,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n useClipboard,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { userStore } from '../../lib/stores/userStore';\nimport { InputField } from '../common/InputField';\nimport { sendFriendRequest } from '../../lib/api/handler/account';\nimport { rKey } from '../../lib/utils/querykeys';\n\ninterface AddFriendModalProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const AddFriendModal: React.FC = ({ isOpen, onClose }) => {\n const current = userStore((state) => state.current);\n const cache = useQueryClient();\n const { hasCopied, onCopy } = useClipboard(current?.id || '');\n\n return (\n \n \n {\n if (values.id === '' && values.id.length !== 20) {\n setErrors({ id: 'Enter a valid ID' });\n } else {\n try {\n const { data } = await sendFriendRequest(values.id);\n if (data) {\n onClose();\n await cache.invalidateQueries([rKey]);\n }\n } catch (err: any) {\n if (err?.response?.data?.error) {\n const error = err?.response?.data?.error?.message;\n setErrors({ id: error });\n }\n }\n }\n }}\n >\n {({ isSubmitting }) => (\n \n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/AddGuildModal.tsx",
"content": "import {\n Button,\n Divider,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n VStack,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React, { useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useNavigate } from 'react-router-dom';\nimport { InputField } from '../common/InputField';\nimport { GuildSchema } from '../../lib/utils/validation/guild.schema';\nimport { createGuild, joinGuild } from '../../lib/api/handler/guilds';\nimport { userStore } from '../../lib/stores/userStore';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { gKey } from '../../lib/utils/querykeys';\nimport { Guild } from '../../lib/models/guild';\n\ninterface IProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nenum AddGuildScreen {\n START,\n INVITE,\n CREATE,\n}\n\nexport const AddGuildModal: React.FC = ({ isOpen, onClose }) => {\n const [screen, setScreen] = useState(AddGuildScreen.START);\n\n const goBack = (): void => setScreen(AddGuildScreen.START);\n const submitClose = (): void => {\n setScreen(AddGuildScreen.START);\n onClose();\n };\n\n return (\n \n \n \n Create a server\n \n \n \n \n Your server is where you and your friends hang out. Make yours and start talking.\n \n\n setScreen(AddGuildScreen.CREATE)}\n >\n Create My Own\n \n\n Have an invite already? \n\n setScreen(AddGuildScreen.INVITE)}\n >\n Join a Server\n \n \n \n \n )}\n \n );\n};\n\ninterface IScreenProps {\n goBack: () => void;\n submitClose: () => void;\n}\n\nconst JoinServerModal: React.FC = ({ goBack, submitClose }) => {\n const cache = useQueryClient();\n const navigate = useNavigate();\n\n return (\n \n {\n if (values.link === '') {\n setErrors({ link: 'Enter a valid link' });\n } else {\n try {\n const { data } = await joinGuild(values);\n if (data) {\n cache.setQueryData([gKey], (old) => [...(old ?? []), data]);\n submitClose();\n navigate(`/channels/${data.id}/${data.default_channel_id}`);\n }\n } catch (err: any) {\n const status = err?.response?.status;\n if (status === 400 || status === 500) {\n setErrors({ link: err?.response?.data?.error.message });\n }\n }\n }\n }}\n >\n {({ isSubmitting }) => (\n \n )}\n \n \n );\n};\n\nconst CreateServerModal: React.FC = ({ goBack, submitClose }) => {\n const user = userStore((state) => state.current);\n const cache = useQueryClient();\n const navigate = useNavigate();\n\n return (\n \n {\n try {\n const { data } = await createGuild(values);\n if (data) {\n cache.setQueryData([gKey], (old) => [...(old ?? []), data]);\n submitClose();\n navigate(`/channels/${data.id}/${data.default_channel_id}`);\n }\n } catch (err: any) {\n if (err?.response?.status === 400) {\n setErrors({ name: 'The server limit is 100' });\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting, values }) => (\n \n )}\n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/ChangePasswordModal.tsx",
"content": "import {\n Button,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n useToast,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React from 'react';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { ChangePasswordSchema } from '../../lib/utils/validation/auth.schema';\nimport { InputField } from '../common/InputField';\nimport { changePassword } from '../../lib/api/handler/auth';\n\ninterface IProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const ChangePasswordModal: React.FC = ({ isOpen, onClose }) => {\n const toast = useToast();\n\n return (\n \n \n {\n try {\n const { data } = await changePassword(values);\n if (data) {\n toast({\n title: 'Changed Password',\n status: 'success',\n duration: 5000,\n isClosable: true,\n });\n onClose();\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toast({\n title: 'Server Error',\n description: 'Try again later',\n status: 'error',\n duration: 3000,\n isClosable: true,\n });\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting }) => (\n \n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/ChannelSettingsModal.tsx",
"content": "import {\n Avatar,\n Box,\n Button,\n Divider,\n Flex,\n FormControl,\n FormLabel,\n LightMode,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Switch,\n Text,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React, { useState } from 'react';\nimport { AiOutlineLock } from 'react-icons/ai';\nimport { FaRegTrashAlt } from 'react-icons/fa';\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete';\nimport { useQuery } from '@tanstack/react-query';\nimport { InputField } from '../common/InputField';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { getGuildMembers } from '../../lib/api/handler/guilds';\nimport { ChannelSchema } from '../../lib/utils/validation/channel.schema';\nimport { useGetCurrentChannel } from '../../lib/utils/hooks/useGetCurrentChannel';\nimport { mKey } from '../../lib/utils/querykeys';\nimport { deleteChannel, editChannel, getPrivateChannelMembers } from '../../lib/api/handler/channel';\n\ninterface IProps {\n guildId: string;\n channelId: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\ninterface Item {\n // eslint-disable-next-line react/no-unused-prop-types\n value: string;\n label: string;\n image: string;\n}\n\nenum ChannelScreen {\n START,\n CONFIRM,\n}\n\nconst ListItem = ({ image, label }: Item): JSX.Element => (\n \n {label} \n \n);\n\nexport const ChannelSettingsModal: React.FC = ({ guildId, channelId, isOpen, onClose }) => {\n const key = [mKey, guildId];\n const { data } = useQuery(key, () => getGuildMembers(guildId).then((response) => response.data));\n\n const channel = useGetCurrentChannel(channelId, guildId);\n\n const members: Item[] = [];\n const [selectedItems, setSelectedItems] = useState([]);\n const [screen, setScreen] = useState(ChannelScreen.START);\n const [showError, toggleShow] = useState(false);\n\n const goBack = (): void => setScreen(ChannelScreen.START);\n const submitClose = (): void => {\n setScreen(ChannelScreen.START);\n onClose();\n };\n\n data?.map((m) =>\n members.push({\n label: m.username,\n value: m.id,\n image: m.image,\n })\n );\n\n // eslint-disable-next-line\n const { data: _ } = useQuery(['pcmembers', channelId], async () => {\n const { data: memberData } = await getPrivateChannelMembers(channelId);\n const current = members.filter((m) => memberData.includes(m.value));\n setSelectedItems(current);\n return current;\n });\n\n const handleCreateItem = (item: Item): void => {\n setSelectedItems((curr) => [...curr, item]);\n };\n\n const handleSelectedItemsChange = (changedItems?: Item[]): void => {\n if (changedItems) {\n setSelectedItems(changedItems);\n }\n };\n\n if (!channel) return null;\n\n return (\n \n \n {\n try {\n const ids: string[] = [];\n selectedItems.map((i) => ids.push(i.value));\n const { data: responseData } = await editChannel(channelId, {\n ...values,\n members: ids,\n });\n if (responseData) {\n resetForm();\n onClose();\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toggleShow(true);\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting, setFieldValue, values }) => (\n \n )}\n \n \n )}\n {screen === ChannelScreen.CONFIRM && (\n \n );\n};\n\ninterface IScreenProps {\n goBack: () => void;\n submitClose: () => void;\n name: string;\n channelId: string;\n}\n\nconst DeleteChannelModal: React.FC = ({ goBack, submitClose, name, channelId }) => {\n const [showError, toggleShow] = useState(false);\n const handleDelete = async (): Promise => {\n try {\n const { data } = await deleteChannel(channelId);\n if (data) {\n submitClose();\n }\n } catch (err) {\n toggleShow(true);\n }\n };\n\n return (\n \n \n Delete Channel\n \n \n Are you sure you want to delete #{name}? This cannot be undone. \n\n {showError && (\n \n Server Error. Try again later\n \n )}\n \n\n \n \n Cancel\n \n \n handleDelete()}>\n Delete Channel\n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/CreateChannelModal.tsx",
"content": "import {\n Avatar,\n Box,\n Button,\n Flex,\n FormControl,\n FormLabel,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Switch,\n Text,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React, { useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { AiOutlineLock } from 'react-icons/ai';\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete';\nimport { useNavigate } from 'react-router-dom';\nimport { InputField } from '../common/InputField';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { getGuildMembers } from '../../lib/api/handler/guilds';\nimport { ChannelSchema } from '../../lib/utils/validation/channel.schema';\nimport { mKey } from '../../lib/utils/querykeys';\nimport { createChannel } from '../../lib/api/handler/channel';\n\ninterface IProps {\n guildId: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\ninterface Item {\n // eslint-disable-next-line react/no-unused-prop-types\n value: string;\n label: string;\n image: string;\n}\n\nconst ListItem = ({ image, label }: Item): JSX.Element => (\n \n {label} \n \n);\n\nexport const CreateChannelModal: React.FC = ({ guildId, isOpen, onClose }) => {\n const key = [mKey, guildId];\n const navigate = useNavigate();\n const { data } = useQuery(key, () => getGuildMembers(guildId).then((response) => response.data));\n const [showError, toggleError] = useState(false);\n\n const members: Item[] = [];\n const [selectedItems, setSelectedItems] = useState([]);\n\n data?.map((m) =>\n members.push({\n label: m.username,\n value: m.id,\n image: m.image,\n })\n );\n\n const handleCreateItem = (item: Item): void => {\n setSelectedItems((curr) => [...curr, item]);\n };\n\n const handleSelectedItemsChange = (changedItems?: Item[]): void => {\n if (changedItems) {\n setSelectedItems(changedItems);\n }\n };\n\n return (\n \n \n {\n try {\n const ids: string[] = [];\n selectedItems.map((i) => ids.push(i.value));\n const { data: responseData } = await createChannel(guildId, {\n ...values,\n members: ids,\n });\n if (responseData) {\n resetForm();\n onClose();\n navigate(`/channels/${guildId}/${responseData.id}`);\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toggleError(true);\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting, setFieldValue, values }) => (\n \n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/CropImageModal.tsx",
"content": "import {\n Box,\n Button,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Slider,\n SliderFilledTrack,\n SliderThumb,\n SliderTrack,\n} from '@chakra-ui/react';\nimport React, { useCallback, useState } from 'react';\nimport Cropper from 'react-easy-crop';\nimport getCroppedImg from '../../lib/utils/cropImage';\n\ninterface IProps {\n isOpen: boolean;\n initialImage: string;\n applyCrop: (image: Blob) => void;\n onClose: () => void;\n}\n\nexport const CropImageModal: React.FC = ({ isOpen, onClose, applyCrop, initialImage }) => {\n const [crop, setCrop] = useState({\n x: 0,\n y: 0,\n });\n const [zoom, setZoom] = useState(1);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n\n const onCropComplete = useCallback((_: any, croppedAreaPixelsResult: any) => {\n setCroppedAreaPixels(croppedAreaPixelsResult);\n }, []);\n\n const showCroppedImage = useCallback(async () => {\n try {\n const croppedImage = await getCroppedImg(initialImage, croppedAreaPixels);\n applyCrop(croppedImage);\n } catch (e) {}\n }, [croppedAreaPixels, initialImage, applyCrop]);\n\n return (\n \n \n EDIT MEDIA \n \n \n \n setZoom(value)}\n my=\"4\"\n >\n \n \n \n\n \n \n Cancel\n \n \n Apply\n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/DeleteMessageModal.tsx",
"content": "import {\n Avatar,\n Box,\n Button,\n Flex,\n LightMode,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n} from '@chakra-ui/react';\nimport React, { useState } from 'react';\nimport { deleteMessage } from '../../lib/api/handler/messages';\nimport { getTime } from '../../lib/utils/dateUtils';\nimport { Message } from '../../lib/models/message';\n\ninterface IProps {\n message: Message;\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const DeleteMessageModal: React.FC = ({ message, isOpen, onClose }) => {\n const [showError, toggleShow] = useState(false);\n\n const handleDelete = async (): Promise => {\n try {\n const { data } = await deleteMessage(message.id);\n if (data) {\n onClose();\n }\n } catch (err) {\n toggleShow(true);\n }\n };\n\n return (\n \n \n \n Delete Message\n \n \n Are you sure you want to delete this message? \n\n \n \n \n \n {message.user.username} \n \n {getTime(message.createdAt)}\n \n \n {message.attachment?.filename ?? message.text} \n \n \n \n\n {showError && (\n \n Server Error. Try again later\n \n )}\n \n\n \n \n Cancel\n \n \n handleDelete()}>\n Delete\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/EditMemberModal.tsx",
"content": "import {\n Button,\n Divider,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React, { useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { ColorResult, TwitterPicker } from 'react-color';\nimport { InputField } from '../common/InputField';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { userStore } from '../../lib/stores/userStore';\nimport { MemberSchema } from '../../lib/utils/validation/member.schema';\nimport { changeGuildMemberSettings, getGuildMemberSettings } from '../../lib/api/handler/members';\n\ninterface IProps {\n guildId: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const EditMemberModal: React.FC = ({ guildId, isOpen, onClose }) => {\n const current = userStore((state) => state.current);\n const { data } = useQuery(['settings', guildId], () =>\n getGuildMemberSettings(guildId).then((response) => response.data)\n );\n const [showError, toggleShow] = useState(false);\n\n if (!data) return null;\n\n return (\n \n \n {\n try {\n // Default color --> Reset\n if (values.color === '#fff') setFieldValue('color', null);\n\n const { data: responseData } = await changeGuildMemberSettings(guildId, values);\n if (responseData) {\n onClose();\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toggleShow(true);\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting, setFieldValue, values }) => (\n \n )}\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/EditMessageModal.tsx",
"content": "import {\n Avatar,\n Box,\n Button,\n Flex,\n Input,\n LightMode,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n} from '@chakra-ui/react';\nimport React, { useState } from 'react';\nimport { editMessage } from '../../lib/api/handler/messages';\nimport { getTime } from '../../lib/utils/dateUtils';\nimport { Message } from '../../lib/models/message';\n\ninterface IProps {\n message: Message;\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const EditMessageModal: React.FC = ({ message, isOpen, onClose }) => {\n const [text, setNewText] = useState(message.text!);\n const [showError, toggleShow] = useState(false);\n\n const handleSubmit = async (): Promise => {\n if (!text || !text.trim()) return;\n\n try {\n await editMessage(message.id, text.trim());\n onClose();\n } catch (err) {\n toggleShow(true);\n }\n };\n\n return (\n \n \n \n Edit Message\n \n \n \n \n \n \n {message.user.username} \n \n {getTime(message.createdAt)}\n \n \n setNewText(e.target.value)}\n bg=\"brandGray.dark\"\n borderColor=\"black\"\n borderRadius=\"3px\"\n focusBorderColor=\"none\"\n />\n \n \n \n\n {showError && (\n \n Server Error. Try again later\n \n )}\n \n\n \n \n Cancel\n \n \n \n Save\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/GuildSettingsModal.tsx",
"content": "import {\n Avatar,\n Box,\n Button,\n Divider,\n Flex,\n IconButton,\n LightMode,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n Tooltip,\n useDisclosure,\n} from '@chakra-ui/react';\nimport { Form, Formik } from 'formik';\nimport React, { useRef, useState } from 'react';\nimport { FaRegTrashAlt } from 'react-icons/fa';\nimport { IoCheckmarkCircle, IoPersonRemove } from 'react-icons/io5';\nimport { ImHammer2 } from 'react-icons/im';\nimport { BiUnlink } from 'react-icons/bi';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { InputField } from '../common/InputField';\nimport { toErrorMap } from '../../lib/utils/toErrorMap';\nimport { useGetCurrentGuild } from '../../lib/utils/hooks/useGetCurrentGuild';\nimport { GuildSchema } from '../../lib/utils/validation/guild.schema';\nimport { deleteGuild, editGuild, invalidateInviteLinks } from '../../lib/api/handler/guilds';\nimport { CropImageModal } from './CropImageModal';\nimport { channelScrollbarCss } from '../layouts/guild/css/ChannelScrollerCSS';\nimport { getBanList, unbanMember } from '../../lib/api/handler/members';\nimport { Member } from '../../lib/models/member';\n\ninterface IProps {\n guildId: string;\n isOpen: boolean;\n onClose: () => void;\n}\n\nenum SettingsScreen {\n START,\n CONFIRM,\n BANLIST,\n}\n\nexport const GuildSettingsModal: React.FC = ({ guildId, isOpen, onClose }) => {\n const guild = useGetCurrentGuild(guildId);\n\n const [screen, setScreen] = useState(SettingsScreen.START);\n const [isReset, setIsReset] = useState(false);\n const [showError, toggleShow] = useState(false);\n\n const goBack = (): void => setScreen(SettingsScreen.START);\n const submitClose = (): void => {\n setScreen(SettingsScreen.START);\n onClose();\n };\n\n const { isOpen: cropperIsOpen, onOpen: cropperOnOpen, onClose: cropperOnClose } = useDisclosure();\n\n const inputFile: any = useRef(null);\n const [imageUrl, setImageUrl] = useState(guild?.icon || '');\n const [cropImage, setCropImage] = useState('');\n const [croppedImage, setCroppedImage] = useState(null);\n\n const applyCrop = (file: Blob): void => {\n setImageUrl(URL.createObjectURL(file));\n setCroppedImage(new File([file], 'icon', { type: 'image/jpeg' }));\n cropperOnClose();\n };\n\n if (!guild) return null;\n\n const invalidateInvites = async (): Promise => {\n try {\n const { data } = await invalidateInviteLinks(guild!.id);\n if (data) {\n setIsReset(true);\n }\n } catch (err) {}\n };\n\n return (\n \n \n {\n try {\n const formData = new FormData();\n formData.append('name', values.name);\n if (cropImage) {\n formData.append('image', croppedImage);\n } else if (imageUrl) {\n formData.append('icon', imageUrl);\n }\n\n const { data } = await editGuild(guildId, formData);\n if (data) {\n resetForm();\n onClose();\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toggleShow(true);\n }\n if (err?.response?.data?.errors) {\n const errors = err?.response?.data?.errors;\n setErrors(toErrorMap(errors));\n }\n }\n }}\n >\n {({ isSubmitting }) => (\n \n )}\n \n {cropperIsOpen && (\n \n )}\n {screen === SettingsScreen.CONFIRM && (\n \n );\n};\n\ninterface IScreenProps {\n goBack: () => void;\n submitClose: () => void;\n name: string;\n guildId: string;\n}\n\nconst DeleteGuildModal: React.FC = ({ goBack, submitClose, name, guildId }) => {\n const [showError, toggleShow] = useState(false);\n\n const handleDelete = async (): Promise => {\n try {\n const { data } = await deleteGuild(guildId);\n if (data) {\n submitClose();\n }\n } catch (err: any) {\n if (err?.response?.status === 500) {\n toggleShow(true);\n }\n }\n };\n\n return (\n \n \n Delete {name}\n \n \n \n Are you sure you want to delete {name} ? This cannot be undone.\n \n\n {showError && (\n \n Server Error. Try again later\n \n )}\n \n\n \n \n Cancel\n \n \n handleDelete()}>\n Delete Server\n \n \n \n \n );\n};\n\ninterface IBanScreenProps {\n goBack: () => void;\n guildId: string;\n}\n\nconst BanListModal: React.FC = ({ goBack, guildId }) => {\n const key = ['bans', guildId];\n const { data } = useQuery(key, () => getBanList(guildId).then((response) => response.data));\n const cache = useQueryClient();\n\n const unbanUser = async (id: string): Promise => {\n try {\n const { data: responseData } = await unbanMember(guildId, id);\n if (responseData) {\n cache.setQueryData(key, (d) => d?.filter((b) => b.id !== id) ?? []);\n }\n } catch (err) {}\n };\n\n return (\n \n \n {data?.length} Bans\n \n \n Bans are by account. Click on the icon to unban. \n\n {data?.map((m) => (\n \n \n {m.username} \n \n No bans yet. }\n \n\n \n \n Back\n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/InviteModal.tsx",
"content": "import {\n Button,\n Checkbox,\n Input,\n InputGroup,\n InputRightElement,\n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n useClipboard,\n} from '@chakra-ui/react';\nimport React, { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { getInviteLink } from '../../lib/api/handler/guilds';\nimport { RouterProps } from '../../lib/models/routerProps';\n\ninterface InviteModalProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const InviteModal: React.FC = ({ isOpen, onClose }) => {\n const { guildId } = useParams() as RouterProps;\n const [inviteLink, setInviteLink] = useState('');\n const { hasCopied, onCopy } = useClipboard(inviteLink);\n const [isPermanent, setPermanent] = useState(false);\n\n useEffect(() => {\n if (isOpen) {\n const fetchLink = async (): Promise => {\n try {\n const { data } = await getInviteLink(guildId, isPermanent);\n if (data) setInviteLink(data);\n } catch (err) {}\n };\n fetchLink();\n }\n }, [isOpen, setInviteLink, guildId, isPermanent]);\n\n return (\n \n \n \n Invite Link\n \n \n Share this link with others to grant access to this server \n\n setPermanent(e.target.checked)} mb={4}>\n Make it unlimited / Never reset\n \n\n \n \n \n {hasCopied ? 'Copied' : 'Copy'}\n \n \n \n\n \n {isPermanent\n ? \"Your invite link won't expire\"\n : 'Your invite link expires in 1 day and can only be used once'}\n \n \n\n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/ModActionModal.tsx",
"content": "import {\n Button,\n LightMode,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n} from '@chakra-ui/react';\nimport React from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useParams } from 'react-router-dom';\nimport { mKey } from '../../lib/utils/querykeys';\nimport { Member } from '../../lib/models/member';\nimport { RouterProps } from '../../lib/models/routerProps';\nimport { banMember, kickMember } from '../../lib/api/handler/members';\n\ninterface IProps {\n member: Member;\n isOpen: boolean;\n isBan: boolean;\n onClose: () => void;\n}\n\nexport const ModActionModal: React.FC = ({ member, isOpen, onClose, isBan }) => {\n const cache = useQueryClient();\n const action = isBan ? 'Ban ' : 'Kick ';\n const { guildId } = useParams() as RouterProps;\n\n return (\n \n \n \n {action}'{member.username}'\n \n \n \n Are you sure you want to {action.toLocaleLowerCase()} @{member.username}?\n {!isBan && ' They will be able to rejoin again with a new invite.'}\n \n \n\n \n \n Cancel\n \n \n {\n onClose();\n try {\n const { data } = isBan ? await banMember(guildId, member.id) : await kickMember(guildId, member.id);\n if (data) {\n cache.setQueryData([mKey, guildId], (d) => d!.filter((f) => f.id !== member.id) ?? []);\n }\n } catch (err) {}\n }}\n >\n {action}\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/modals/RemoveFriendModal.tsx",
"content": "import {\n Button,\n LightMode,\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Text,\n} from '@chakra-ui/react';\nimport React from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { removeFriend } from '../../lib/api/handler/account';\nimport { fKey } from '../../lib/utils/querykeys';\nimport { Friend } from '../../lib/models/friend';\n\ninterface IProps {\n member: Friend;\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport const RemoveFriendModal: React.FC = ({ member, isOpen, onClose }) => {\n const cache = useQueryClient();\n\n return (\n \n \n \n Remove '{member?.username}'\n \n \n \n Are you sure you want to permanently remove {member?.username} from your friends?\n \n \n\n \n \n Cancel\n \n \n {\n onClose();\n try {\n const { data } = await removeFriend(member.id);\n if (data) {\n cache.setQueryData([fKey], (d) => d?.filter((f) => f.id !== member.id) ?? []);\n }\n } catch (err) {}\n }}\n >\n Remove Friend\n \n \n \n \n \n );\n};\n"
},
{
"path": "web/src/components/sections/AddGuildIcon.tsx",
"content": "import React, { useState } from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { AiOutlinePlus } from 'react-icons/ai';\nimport { StyledTooltip } from './StyledTooltip';\nimport { HoverGuildPill } from '../common/GuildPills';\n\ninterface AddGuildIconProps {\n onOpen: () => void;\n}\n\nexport const AddGuildIcon: React.FC = ({ onOpen }) => {\n const [isHover, setHover] = useState(false);\n\n return (\n <>\n {isHover && \n setHover(false)}\n onMouseEnter={() => setHover(true)}\n >\n \n \n );\n};\n"
},
{
"path": "web/src/components/sections/DMPlaceholder.tsx",
"content": "import React from 'react';\nimport { Box, Flex } from '@chakra-ui/react';\n\nexport const DMPlaceholder: React.FC = () => (\n \n \n);\n"
},
{
"path": "web/src/components/sections/DateDivider.tsx",
"content": "import { Divider, Flex, Text } from '@chakra-ui/react';\nimport React from 'react';\nimport { formatDivider } from '../../lib/utils/dateUtils';\n\ninterface DateDividerProps {\n date: string;\n}\n\nexport const DateDivider: React.FC = ({ date }) => (\n \n \n {formatDivider(date)}\n \n \n);\n"
},
{
"path": "web/src/components/sections/Footer.tsx",
"content": "import React from 'react';\nimport { Box, Flex, Link, Stack, Text } from '@chakra-ui/react';\nimport { AiOutlineApi, AiOutlineGithub } from 'react-icons/ai';\nimport { SiSocketdotio } from 'react-icons/si';\nimport { IconType } from 'react-icons';\nimport { StyledTooltip } from './StyledTooltip';\n\ntype FooterLinkProps = {\n icon?: IconType;\n href?: string;\n label?: string;\n};\n\nconst FooterLink: React.FC = ({ icon, href, label }) => (\n \n \n);\n\nconst links = [\n {\n icon: AiOutlineGithub,\n label: 'GitHub',\n href: 'https://github.com/sentrionic/Valkyrie',\n },\n {\n icon: AiOutlineApi,\n label: 'REST API',\n href: `${process.env.REACT_APP_API!}/swagger/index.html`,\n },\n {\n icon: SiSocketdotio,\n label: 'Websocket',\n href: `${process.env.REACT_APP_API!}`,\n },\n];\n\nexport const Footer: React.FC = () => (\n \n \n \n Valkyrie | 2022 \n \n This is not a real commercial app. \n \n {links.map((link) => (\n // eslint-disable-next-line react/jsx-props-no-spreading\n \n \n \n);\n"
},
{
"path": "web/src/components/sections/FriendsListButton.tsx",
"content": "import React from 'react';\nimport { Flex, Icon, Text } from '@chakra-ui/react';\nimport { FiUsers } from 'react-icons/fi';\nimport { Link, useLocation } from 'react-router-dom';\nimport { PingIcon } from '../common/NotificationIcon';\nimport { homeStore } from '../../lib/stores/homeStore';\n\nexport const FriendsListButton: React.FC = () => {\n const currentPath = '/channels/me';\n const location = useLocation();\n const isActive = location.pathname === currentPath;\n const requests = homeStore((state) => state.requestCount);\n\n return (\n \n \n \n Friends\n \n \n {requests > 0 && = ({ children }) => {\n const current = userStore((state) => state.current);\n const inc = homeStore((state) => state.increment);\n const cache = useQueryClient();\n\n // eslint-disable-next-line consistent-return\n useEffect(() => {\n if (current) {\n const disconnect = (): void => {\n socket.send(JSON.stringify({ action: 'toggleOffline' }));\n socket.close();\n };\n\n const socket = getSocket();\n socket.send(JSON.stringify({ action: 'toggleOnline' }));\n socket.send(\n JSON.stringify({\n action: 'joinUser',\n room: current?.id,\n })\n );\n\n socket.addEventListener('message', (event) => {\n const response: WSMessage = JSON.parse(event.data);\n switch (response.action) {\n case 'new_dm_notification': {\n const channel = response.data;\n if (channel.user.id !== current.id) {\n cache.setQueryData([nKey], (data) => {\n if (!data) return [{ ...channel, count: 1 }];\n\n const index = data.findIndex((c) => c.id === channel.id);\n\n // DM exists, increment message count\n if (index !== -1 && index !== undefined) {\n return [\n {\n ...channel,\n count: data[index].count + 1,\n },\n ...data.filter((c) => c.id !== channel.id),\n ];\n }\n // Add the new DM to the list\n return [\n {\n ...channel,\n count: 1,\n },\n ...data,\n ];\n });\n }\n break;\n }\n\n case 'send_request': {\n if (!window.location.pathname.includes('/channels/me')) {\n inc();\n }\n break;\n }\n\n default:\n break;\n }\n });\n\n window.addEventListener('beforeunload', disconnect);\n\n return () => disconnect();\n }\n }, [current, inc, cache]);\n\n /* eslint-disable-next-line react/jsx-no-useless-fragment */\n return <>{children};\n};\n"
},
{
"path": "web/src/components/sections/Hero.tsx",
"content": "/* eslint-disable react/jsx-props-no-spreading */\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Box, Button, Flex, Heading, Image, Link as CLink, Stack, Text } from '@chakra-ui/react';\n\ninterface HeroProps {\n title: string;\n subtitle: string;\n image: string;\n ctaLink: string;\n ctaText: string;\n}\n\nexport const Hero: React.FC = ({ title, subtitle, image, ctaLink, ctaText, ...rest }) => (\n \n \n \n {title}\n \n \n {subtitle}\n \n \n {ctaText}\n \n \n \n Got an account already?{' '}\n \n Sign in\n \n \n \n \n \n \n {isActive && setHover(false)}\n onMouseEnter={() => setHover(true)}\n >\n \n \n \n \n );\n};\n\nconst Logo: React.FC = () => {\n const fill = useColorModeValue('#2D3748', '#fff');\n return (\n \n \n {/* eslint-disable-next-line max-len */}\n \n \n );\n};\n"
},
{
"path": "web/src/components/sections/NavBar.tsx",
"content": "import { Button, Flex } from '@chakra-ui/react';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { userStore } from '../../lib/stores/userStore';\nimport { Logo } from '../common/Logo';\n\nexport const NavBar: React.FC = () => {\n const current = userStore((state) => state.current);\n\n return (\n \n \n \n\n \n {current ? (\n \n Open App\n \n \n ) : (\n <>\n \n Login\n \n \n\n \n Register\n \n \n \n )}\n \n \n );\n};\n"
},
{
"path": "web/src/components/sections/OnlineLabel.tsx",
"content": "import React from 'react';\nimport { Text } from '@chakra-ui/react';\n\ninterface LabelProps {\n label: string;\n}\n\nexport const OnlineLabel: React.FC = ({ label }) => (\n \n {label}\n \n);\n"
},
{
"path": "web/src/components/sections/StartMessages.tsx",
"content": "import { Avatar, Box, Divider, Flex, Heading, Text } from '@chakra-ui/react';\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useGetCurrentChannel } from '../../lib/utils/hooks/useGetCurrentChannel';\nimport { useGetCurrentDM } from '../../lib/utils/hooks/useGetCurrentDM';\nimport { RouterProps } from '../../lib/models/routerProps';\n\nexport const StartMessages: React.FC = () => {\n const { guildId } = useParams() as RouterProps;\n return guildId === undefined ? () as RouterProps;\n const channel = useGetCurrentChannel(channelId, guildId);\n\n return (\n \n \n Welcome to #{channel?.name} \n This is the start of the #{channel?.name} channel \n \n \n );\n};\n\nconst DMStartMessages: React.FC = () => {\n const { channelId } = useParams() as RouterProps;\n const channel = useGetCurrentDM(channelId);\n\n return (\n \n {channel?.user.username} \n \n This is the beginning of your direct message history with @{channel?.user.username}\n \n \n );\n};\n"
},
{
"path": "web/src/components/sections/StyledTooltip.tsx",
"content": "import React from 'react';\nimport { Tooltip } from '@chakra-ui/react';\n\ntype Placement = 'top' | 'right';\n\ninterface StyledTooltipProps {\n label: string;\n position: Placement;\n disabled?: boolean;\n children: React.ReactNode;\n}\n\nexport const StyledTooltip: React.FC = ({ label, position, disabled = false, children }) => (\n \n {children}\n \n);\n"
},
{
"path": "web/src/components/sections/UserPopover.tsx",
"content": "import {\n Avatar,\n AvatarBadge,\n Box,\n Flex,\n Popover,\n PopoverContent,\n PopoverFooter,\n PopoverHeader,\n PopoverTrigger,\n Text,\n} from '@chakra-ui/react';\nimport React from 'react';\nimport { Member } from '../../lib/models/member';\n\ninterface UserPopoverProps {\n member: Member;\n children: React.ReactNode;\n}\n\nexport const UserPopover: React.FC = ({ member, children }) => (\n \n {children} \n \n \n \n \n \n \n \n {member.nickname ?? member.username}\n \n {member.nickname && {member.username} }\n \n \n \n \n \n Right click user for more actions\n \n \n \n \n);\n"
},
{
"path": "web/src/index.tsx",
"content": "import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { App } from './App';\nimport customTheme from './lib/utils/theme';\n\nconst container = document.getElementById('root')!;\nconst root = createRoot(container);\n\nroot.render(\n \n \n \n \n);\n"
},
{
"path": "web/src/lib/api/dtos/AuthInput.ts",
"content": "// eslint-disable-next-line max-classes-per-file\nexport interface LoginDTO {\n email: string;\n password: string;\n\n [key: string]: any;\n}\n\nexport interface RegisterDTO extends LoginDTO {\n username: string;\n}\n\nexport class ChangePasswordInput {\n currentPassword!: string;\n\n newPassword!: string;\n\n confirmNewPassword!: string;\n}\n\nexport class ResetPasswordInput {\n token!: string;\n\n newPassword!: string;\n\n confirmNewPassword!: string;\n}\n"
},
{
"path": "web/src/lib/api/dtos/ChannelInput.ts",
"content": "export type ChannelInput = {\n name: string;\n isPublic: boolean;\n members?: string[];\n};\n"
},
{
"path": "web/src/lib/api/dtos/GuildInput.ts",
"content": "export type GuildInput = {\n name: string;\n image?: any;\n};\n"
},
{
"path": "web/src/lib/api/dtos/GuildMemberInput.ts",
"content": "export type GuildMemberInput = {\n nickname?: string;\n color?: string;\n};\n"
},
{
"path": "web/src/lib/api/dtos/InviteInput.ts",
"content": "export type InviteInput = {\n link: string;\n};\n"
},
{
"path": "web/src/lib/api/dtos/UserInput.ts",
"content": "export type UpdateInput = Partial<{\n email: string;\n image: any;\n username: string;\n}>;\n"
},
{
"path": "web/src/lib/api/getSocket.ts",
"content": "import ReconnectingWebSocket from 'reconnecting-websocket';\n\nexport const getSocket = (): ReconnectingWebSocket => new ReconnectingWebSocket(process.env.REACT_APP_WS!);\n\nlet socket: ReconnectingWebSocket | null = null;\nexport const getSameSocket = (): ReconnectingWebSocket => {\n if (!socket) {\n socket = new ReconnectingWebSocket(process.env.REACT_APP_WS!);\n }\n\n return socket;\n};\n"
},
{
"path": "web/src/lib/api/handler/account.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { Account } from '../../models/account';\nimport { Member } from '../../models/member';\nimport { FriendRequest } from '../../models/friend';\n\nexport const getAccount = (): Promise> => request.get('/account');\n\nexport const updateAccount = (body: FormData): Promise> =>\n request.put('/account', body, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n });\n\nexport const getFriends = (): Promise> => request.get('/account/me/friends');\n\nexport const getPendingRequests = (): Promise> => request.get('/account/me/pending');\n\nexport const sendFriendRequest = (id: string): Promise> => request.post(`/account/${id}/friend`);\n\nexport const acceptFriendRequest = (id: string): Promise> =>\n request.post(`/account/${id}/friend/accept`);\n\nexport const declineFriendRequest = (id: string): Promise> =>\n request.post(`/account/${id}/friend/cancel`);\n\nexport const removeFriend = (id: string): Promise> => request.delete(`/account/${id}/friend`);\n"
},
{
"path": "web/src/lib/api/handler/auth.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { ChangePasswordInput, LoginDTO, RegisterDTO, ResetPasswordInput } from '../dtos/AuthInput';\nimport { Account } from '../../models/account';\n\nexport const register = (body: RegisterDTO): Promise> => request.post('/account/register', body);\n\nexport const login = (body: LoginDTO): Promise> => request.post('/account/login', body);\n\nexport const logout = (): Promise => request.post('/account/logout');\n\nexport const forgotPassword = (email: string): Promise> =>\n request.post('/account/forgot-password', { email });\n\nexport const changePassword = (body: ChangePasswordInput): Promise =>\n request.put('/account/change-password', body);\n\nexport const resetPassword = (body: ResetPasswordInput): Promise> =>\n request.post('/account/reset-password', body);\n"
},
{
"path": "web/src/lib/api/handler/channel.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { ChannelInput } from '../dtos/ChannelInput';\nimport { Channel } from '../../models/channel';\n\nexport const getChannels = (id: string): Promise> => request.get(`channels/${id}`);\n\nexport const createChannel = (id: string, input: ChannelInput): Promise> =>\n request.post(`channels/${id}`, input);\n\nexport const editChannel = (channelId: string, input: ChannelInput): Promise> =>\n request.put(`channels/${channelId}`, input);\n\nexport const deleteChannel = (channelId: string): Promise> =>\n request.delete(`channels/${channelId}`);\n\nexport const getPrivateChannelMembers = (channelId: string): Promise> =>\n request.get(`channels/${channelId}/members`);\n"
},
{
"path": "web/src/lib/api/handler/dm.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { DMChannel } from '../../models/dm';\n\nexport const getUserDMs = (): Promise> => request.get('/channels/me/dm');\n\nexport const getOrCreateDirectMessage = (id: string): Promise> =>\n request.post(`/channels/${id}/dm`);\n\nexport const closeDirectMessage = (id: string): Promise> => request.delete(`/channels/${id}/dm`);\n"
},
{
"path": "web/src/lib/api/handler/guilds.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { GuildInput } from '../dtos/GuildInput';\nimport { InviteInput } from '../dtos/InviteInput';\nimport { Guild } from '../../models/guild';\nimport { Member } from '../../models/member';\nimport { VCMember } from '../../models/voice';\n\nexport const getUserGuilds = (): Promise> => request.get('/guilds');\n\nexport const createGuild = (input: GuildInput): Promise> => request.post('guilds/create', input);\n\nexport const joinGuild = (input: InviteInput): Promise> => request.post('guilds/join', input);\n\nexport const getInviteLink = (id: string, isPermanent: boolean = false): Promise> =>\n request.get(`guilds/${id}/invite${isPermanent ? '?isPermanent=true' : ''}`);\n\nexport const invalidateInviteLinks = (id: string): Promise> =>\n request.delete(`guilds/${id}/invite`);\n\nexport const getGuildMembers = (id: string): Promise> => request.get(`guilds/${id}/members`);\n\nexport const getVCMembers = (id: string): Promise> => request.get(`guilds/${id}/vcmembers`);\n\nexport const leaveGuild = (id: string): Promise> => request.delete(`guilds/${id}`);\n\nexport const editGuild = (id: string, input: FormData): Promise> =>\n request.put(`guilds/${id}`, input, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n });\n\nexport const deleteGuild = (id: string): Promise> => request.delete(`guilds/${id}/delete`);\n"
},
{
"path": "web/src/lib/api/handler/members.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { GuildMemberInput } from '../dtos/GuildMemberInput';\nimport { request } from '../setupAxios';\nimport { Member } from '../../models/member';\n\nexport const getGuildMemberSettings = (id: string): Promise> =>\n request.get(`guilds/${id}/member`);\n\nexport const changeGuildMemberSettings = (id: string, input: GuildMemberInput): Promise> =>\n request.put(`guilds/${id}/member`, input);\n\nexport const getBanList = (id: string): Promise> => request.get(`guilds/${id}/bans`);\n\nexport const kickMember = (guildId: string, memberId: string): Promise> =>\n request.post(`guilds/${guildId}/kick`, { memberId });\n\nexport const banMember = (guildId: string, memberId: string): Promise> =>\n request.post(`guilds/${guildId}/bans`, { memberId });\n\nexport const unbanMember = (guildId: string, memberId: string): Promise> =>\n request.delete(`guilds/${guildId}/bans`, { data: { memberId } });\n"
},
{
"path": "web/src/lib/api/handler/messages.ts",
"content": "import { AxiosResponse } from 'axios';\nimport { request } from '../setupAxios';\nimport { Message } from '../../models/message';\n\nexport const getMessages = (id: string, cursor?: string): Promise> =>\n request.get(`messages/${id}${cursor ? `?cursor=${cursor}` : ''}`);\n\nexport const sendMessage = (\n channelId: string,\n data: FormData,\n onUploadProgress?: (e: any) => void\n): Promise> =>\n request.post(`messages/${channelId}`, data, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n onUploadProgress,\n });\n\nexport const deleteMessage = (id: string): Promise> => request.delete(`messages/${id}`);\n\nexport const editMessage = (id: string, text: string): Promise> =>\n request.put(`messages/${id}`, { text });\n"
},
{
"path": "web/src/lib/api/setupAxios.ts",
"content": "import Axios from 'axios';\n\nexport const request = Axios.create({\n baseURL: `${process.env.REACT_APP_API!}/api`,\n withCredentials: true,\n});\n"
},
{
"path": "web/src/lib/api/ws/useChannelSocket.ts",
"content": "import { useEffect } from 'react';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getSocket } from '../getSocket';\nimport { useGetCurrentGuild } from '../../utils/hooks/useGetCurrentGuild';\nimport { userStore } from '../../stores/userStore';\nimport { Channel } from '../../models/channel';\nimport { VCMember, VoiceResponse } from '../../models/voice';\nimport { cKey, vcKey } from '../../utils/querykeys';\n\ntype WSMessage =\n | { action: 'delete_channel' | 'new_notification'; data: string }\n | { action: 'add_channel' | 'add_private_channel' | 'edit_channel'; data: Channel }\n | { action: 'joinVoice' | 'leaveVoice'; data: VoiceResponse };\n\nexport function useChannelSocket(guildId: string): void {\n const location = useLocation();\n const navigate = useNavigate();\n const cache = useQueryClient();\n const guild = useGetCurrentGuild(guildId);\n const current = userStore((state) => state.current);\n\n useEffect((): any => {\n const socket = getSocket();\n\n socket.send(\n JSON.stringify({\n action: 'joinGuild',\n room: guildId,\n })\n );\n socket.send(\n JSON.stringify({\n action: 'joinUser',\n room: current?.id,\n })\n );\n\n const disconnect = (): void => {\n socket.send(\n JSON.stringify({\n action: 'leaveGuild',\n room: guildId,\n })\n );\n socket.send(\n JSON.stringify({\n action: 'leaveRoom',\n room: current?.id,\n })\n );\n socket.close();\n };\n\n socket.addEventListener('message', (event) => {\n const response: WSMessage = JSON.parse(event.data);\n switch (response.action) {\n case 'add_channel': {\n cache.setQueryData([cKey, guildId], (data) => [...(data ?? []), response.data]);\n break;\n }\n\n case 'add_private_channel': {\n cache.setQueryData([cKey, guildId], (data) => [...(data ?? []), response.data]);\n break;\n }\n\n case 'edit_channel': {\n const editedChannel = response.data;\n cache.setQueryData([cKey, guildId], (d) => {\n const data = d ?? [];\n\n const contains = data.includes(editedChannel);\n\n // Channel used to be private and is public now\n if (!contains && editedChannel.isPublic) {\n return [...data, editedChannel];\n }\n\n return data.map((c) => (c.id === editedChannel.id ? editedChannel : c));\n });\n break;\n }\n\n case 'delete_channel': {\n const deleteId = response.data;\n cache.setQueryData([cKey, guildId], (d) => {\n const currentPath = `/channels/${guildId}/${deleteId}`;\n\n // The deleted channel is the channel the user is currently in\n if (location.pathname === currentPath && guild) {\n // If it's the default channel, redirect to home\n if (deleteId === guild.default_channel_id) {\n navigate('/channels/me', { replace: true });\n // Redirect the user to the default channel\n } else {\n navigate(`/channels/${guild.id}/${guild.default_channel_id}`, { replace: true });\n }\n }\n return d?.filter((c) => c.id !== deleteId) ?? [];\n });\n break;\n }\n\n case 'new_notification': {\n const id = response.data;\n const currentPath = `/channels/${guildId}/${id}`;\n if (location.pathname !== currentPath) {\n cache.setQueryData(\n [cKey, guildId],\n (d) => d?.map((c) => (c.id === id ? { ...c, hasNotification: true } : c)) ?? []\n );\n }\n break;\n }\n\n case 'joinVoice': {\n const { data } = response;\n // Remove the current user from the list\n cache.setQueryData([vcKey, guildId], (_) => data.clients.filter((e) => e.id !== current?.id));\n break;\n }\n\n case 'leaveVoice': {\n const { data } = response;\n // Remove the current user from the list\n cache.setQueryData([vcKey, guildId], (_) => data.clients.filter((e) => e.id !== current?.id));\n break;\n }\n\n default:\n break;\n }\n });\n\n window.addEventListener('beforeunload', disconnect);\n\n return () => disconnect();\n }, [guildId, cache, navigate, location, guild, current]);\n}\n"
},
{
"path": "web/src/lib/api/ws/useDMSocket.ts",
"content": "import { useEffect } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getSocket } from '../getSocket';\nimport { userStore } from '../../stores/userStore';\nimport { dmKey } from '../../utils/querykeys';\nimport { DMChannel } from '../../models/dm';\n\ntype WSMessage = { action: 'push_to_top'; data: string };\n\nexport function useDMSocket(): void {\n const current = userStore((state) => state.current);\n const cache = useQueryClient();\n\n useEffect(() => {\n const socket = getSocket();\n\n socket.send(\n JSON.stringify({\n action: 'joinUser',\n room: current?.id,\n })\n );\n\n socket.addEventListener('message', (event) => {\n const response: WSMessage = JSON.parse(event.data);\n\n switch (response.action) {\n case 'push_to_top': {\n const dmId = response.data;\n cache.setQueryData([dmKey], (d) => {\n const data = d ?? [];\n const index = data.findIndex((dm) => dm.id === dmId);\n\n // If no DM exists or it's already the top one, do nothing\n if (index === 0 || index === -1) return [...data];\n\n // Push the DM to the top\n const dm = data[index];\n return [dm, ...data.filter((dc) => dc.id !== dmId)];\n });\n break;\n }\n\n default:\n break;\n }\n });\n\n return () => {\n socket.send(\n JSON.stringify({\n action: 'leaveRoom',\n room: current?.id,\n })\n );\n socket.close();\n };\n }, [current, cache]);\n}\n"
},
{
"path": "web/src/lib/api/ws/useFriendSocket.ts",
"content": "import { useEffect } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { getSocket } from '../getSocket';\nimport { userStore } from '../../stores/userStore';\nimport { fKey } from '../../utils/querykeys';\nimport { homeStore } from '../../stores/homeStore';\nimport { Friend } from '../../models/friend';\n\ntype WSMessage =\n | { action: 'toggle_online' | 'toggle_offline' | 'remove_friend'; data: string }\n | { action: 'requestCount'; data: number }\n | { action: 'add_friend'; data: Friend };\n\nexport function useFriendSocket(): void {\n const current = userStore((state) => state.current);\n const setRequests = homeStore((state) => state.setRequests);\n const cache = useQueryClient();\n\n useEffect((): any => {\n const socket = getSocket();\n socket.send(\n JSON.stringify({\n action: 'joinUser',\n room: current?.id,\n })\n );\n\n socket.send(JSON.stringify({ action: 'getRequestCount' }));\n\n socket.addEventListener('message', (event) => {\n const response: WSMessage = JSON.parse(event.data);\n switch (response.action) {\n case 'toggle_online': {\n cache.setQueryData([fKey], (d) => {\n if (!d) return [];\n return d.map((f) => (f.id === response.data ? { ...f, isOnline: true } : f));\n });\n break;\n }\n\n case 'toggle_offline': {\n cache.setQueryData([fKey], (d) => {\n if (!d) return [];\n return d.map((f) => (f.id === response.data ? { ...f, isOnline: false } : f));\n });\n break;\n }\n\n case 'requestCount': {\n setRequests(response.data);\n break;\n }\n\n case 'add_friend': {\n cache.setQueryData([fKey], (data) =>\n [...(data ?? []), response.data].sort((a, b) => a.username.localeCompare(b.username))\n );\n break;\n }\n\n case 'remove_friend': {\n cache.setQueryData ![](\"https://harmony-cdn.s3.eu-central-1.amazonaws.com/logo.png\"){kind=logo}
\n