From 4678deaa8b3b0bcbd4461059a288b288c0f4479f Mon Sep 17 00:00:00 2001
From: ADAMJR <adamjf123@gmail.com>
Date: Sat, 7 Aug 2021 21:36:52 +0100
Subject: [PATCH] Breaking Things

---
 backend/src/ws/events/user-delete.ts          |  2 +
 .../components/channel/text-based-channel.tsx |  4 +-
 .../src/components/modals/create-channel.tsx  |  3 +-
 .../src/components/modals/create-guild.tsx    |  8 ++--
 .../src/components/modals/create-invite.tsx   |  2 +-
 .../src/components/modals/guild-settings.tsx  |  8 ++--
 .../src/components/modals/user-settings.tsx   | 14 +++---
 frontend/src/components/pages/guild-page.tsx  | 22 +++++----
 frontend/src/components/pages/home-page.tsx   |  4 +-
 .../src/components/pages/not-found-page.tsx   |  6 +--
 frontend/src/components/user/member-list.tsx  |  7 ++-
 .../utils/buttons/normal-button.tsx           |  2 +-
 frontend/src/components/utils/category.tsx    |  5 +-
 frontend/src/components/ws-listener.tsx       | 46 +++++++++----------
 types/ws.d.ts                                 |  1 +
 15 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/backend/src/ws/events/user-delete.ts b/backend/src/ws/events/user-delete.ts
index 279f3a0..388b795 100644
--- a/backend/src/ws/events/user-delete.ts
+++ b/backend/src/ws/events/user-delete.ts
@@ -19,6 +19,8 @@ export default class implements WSEvent<'USER_DELETE'> {
     user.locked = true;
     await user.updateOne(payload);
   
+    client.emit('USER_DELETE');
+
     io.to(user.guildIds)
       .emit('USER_UPDATE', { userId, payload } as WSResponse.UserUpdate);
 
diff --git a/frontend/src/components/channel/text-based-channel.tsx b/frontend/src/components/channel/text-based-channel.tsx
index d7c3acc..961bc6f 100644
--- a/frontend/src/components/channel/text-based-channel.tsx
+++ b/frontend/src/components/channel/text-based-channel.tsx
@@ -8,9 +8,9 @@ import TextChannelHeader from './text-channel-header';
 const TextBasedChannel: React.FunctionComponent = () => {
   const dispatch = useDispatch();
   const channel = useSelector((s: Store.AppStore) => s.ui.activeChannel)!;
-  const messages = useSelector(getChannelMessages(channel.id));  
+  const messages = useSelector(getChannelMessages(channel.id));
 
-  useEffect(() => {    
+  useEffect(() => {
     dispatch(fetchMessages(channel.id));
   }, [messages.length]); // only fetches channel messages when not cached
 
diff --git a/frontend/src/components/modals/create-channel.tsx b/frontend/src/components/modals/create-channel.tsx
index 9c5cb11..c8ef269 100644
--- a/frontend/src/components/modals/create-channel.tsx
+++ b/frontend/src/components/modals/create-channel.tsx
@@ -32,7 +32,8 @@ const CreateChannel: React.FunctionComponent = () => {
         </div>
 
         <footer className="bg-bg-secondary">
-          <NormalButton className="float-right">Create</NormalButton>
+          <NormalButton
+            className="float-right m-4">Create</NormalButton>
         </footer>
       </form>
     </Modal>
diff --git a/frontend/src/components/modals/create-guild.tsx b/frontend/src/components/modals/create-guild.tsx
index 4c4c3ee..97552e1 100644
--- a/frontend/src/components/modals/create-guild.tsx
+++ b/frontend/src/components/modals/create-guild.tsx
@@ -1,6 +1,7 @@
 import { useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 import { createGuild, joinGuild } from '../../store/guilds';
+import NormalButton from '../utils/buttons/normal-button';
 import Input from '../utils/input';
 import Modal from './modal';
 
@@ -29,18 +30,17 @@ const CreateGuild: React.FunctionComponent = () => {
           label="Invite Code"
           name="inviteCode"
           register={register} />
-        <button className="background bg-primary heading w-full h-11 rounded-md mt-8">Join</button>
+        <NormalButton className="w-full h-11 mt-8">Join</NormalButton>
       </form>
 
-      <div className="mt-10" />
-      <h3 className="uppercase font-bold">Make Your Own</h3>
+      <h3 className="uppercase font-bold mt-10">Make Your Own</h3>
 
       <form onSubmit={handleSubmit(submitCreate)}>
         <Input
           label="Server Name"
           name="name"
           register={register} />
-        <button className="background bg-primary heading w-full h-11 rounded-md mt-8">Create</button>
+        <NormalButton className="w-full h-11 mt-8">Create</NormalButton>
       </form>
     </Modal>
   );
diff --git a/frontend/src/components/modals/create-invite.tsx b/frontend/src/components/modals/create-invite.tsx
index b1c2c01..649b99e 100644
--- a/frontend/src/components/modals/create-invite.tsx
+++ b/frontend/src/components/modals/create-invite.tsx
@@ -33,7 +33,7 @@ const CreateInvite: React.FunctionComponent = () => {
       <div className="relative">
         <NormalButton
           onClick={copyCode}
-          className="absolute -right-4 top-4">Copy</NormalButton>
+          className="absolute -right-3 top-5 m-4">Copy</NormalButton>
         <Input
           label="Invite Code"
           name="inviteCode"
diff --git a/frontend/src/components/modals/guild-settings.tsx b/frontend/src/components/modals/guild-settings.tsx
index 1fc914c..521103d 100644
--- a/frontend/src/components/modals/guild-settings.tsx
+++ b/frontend/src/components/modals/guild-settings.tsx
@@ -30,7 +30,7 @@ const GuildSettings: React.FunctionComponent = () => {
               <h1 className="text-xl font-bold inline">Server Overview</h1>
             </header>
           
-            <section className="flex-grow">
+            <section>
               <Input
                 label="Name"
                 name="name"
@@ -45,7 +45,9 @@ const GuildSettings: React.FunctionComponent = () => {
                 className="pt-5" />
             </section>
 
-            <Category title="Advanced Settings" />
+            <Category
+              className="py-2 mt-5"
+              title="Advanced Settings" />
 
             <section>
               <NormalButton
@@ -53,7 +55,7 @@ const GuildSettings: React.FunctionComponent = () => {
                 className="bg-danger">Delete</NormalButton>
               <NormalButton
                 onClick={handleSubmit(onUpdate)}
-                className="bg-success m-4">Save</NormalButton>
+                className="bg-success ml-4">Save</NormalButton>
             </section>
           </form>
         </div>
diff --git a/frontend/src/components/modals/user-settings.tsx b/frontend/src/components/modals/user-settings.tsx
index e7034fd..b625f28 100644
--- a/frontend/src/components/modals/user-settings.tsx
+++ b/frontend/src/components/modals/user-settings.tsx
@@ -28,7 +28,7 @@ const UserSettings: React.FunctionComponent = () => {
               <h1 className="text-xl font-bold inline">My Account</h1>
             </header>
           
-            <div className="flex-grow">
+            <section>
               <div className="pt-5">
                 <Input
                   label="Username"
@@ -52,18 +52,20 @@ const UserSettings: React.FunctionComponent = () => {
                   register={register}
                   options={{ value: user.avatarURL }} />
               </div>
-            </div>
+            </section>
 
-            <Category title="Advanced Settings" />
+            <Category
+              className="py-2 mt-5"
+              title="Advanced Settings" />
 
-            <div>
+            <section>
               <NormalButton
                 onClick={handleSubmit(onDelete)}
                 className="bg-danger">Delete</NormalButton>
               <NormalButton
                 onClick={handleSubmit(onUpdate)}
-                className="bg-success">Save</NormalButton>
-            </div>
+                className="bg-success m-4">Save</NormalButton>
+            </section>
           </form>
         </div>
       </div>
diff --git a/frontend/src/components/pages/guild-page.tsx b/frontend/src/components/pages/guild-page.tsx
index 3616c2f..2e1a62b 100644
--- a/frontend/src/components/pages/guild-page.tsx
+++ b/frontend/src/components/pages/guild-page.tsx
@@ -16,6 +16,8 @@ const GuildPage: React.FunctionComponent = () => {
   const guild = useSelector(getGuild(guildId));
   const channel = useSelector(getChannel(guildId, channelId));
 
+  document.title = channel?.name ?? guild?.name ?? 'DClone';
+
   useEffect(() => {
     dispatch(pageSwitched({ channel, guild }));
   }, [guild, channel]);
@@ -30,15 +32,17 @@ const GuildPage: React.FunctionComponent = () => {
   return (ui.activeGuild) ? (
     <PageWrapper>
       <Sidebar />
-      <div className="bg-bg-primary">
-        <AppNavbar />
-        <div
-          style={{ height: 'calc(100vh - 48px)' }}
-          className="flex">
-          {ui.activeChannel && <TextBasedChannel />}
-          {<MemberList users={guild.members} />}
-        </div>
-      </div>
+      {(channel)
+        ? <div className="bg-bg-primary">
+            <AppNavbar />
+            <div
+              style={{ height: 'calc(100vh - 48px)' }}
+              className="flex">
+              <TextBasedChannel />
+              <MemberList users={guild.members} />
+            </div>
+          </div>
+        : <div className="bg-bg-tertiary" />}
     </PageWrapper>
   ) : null;
 }
diff --git a/frontend/src/components/pages/home-page.tsx b/frontend/src/components/pages/home-page.tsx
index 06c0ed5..9f3db91 100644
--- a/frontend/src/components/pages/home-page.tsx
+++ b/frontend/src/components/pages/home-page.tsx
@@ -5,7 +5,9 @@ import PageWrapper from './page-wrapper';
 
 import './home-page.scoped.css';
 
-const HomePage: React.FunctionComponent = () => {  
+const HomePage: React.FunctionComponent = () => {
+  document.title = 'DClone | Discord clone with the essential features';
+
   return (
     <PageWrapper className="bg-bg-tertiary h-full">
       <Navbar />
diff --git a/frontend/src/components/pages/not-found-page.tsx b/frontend/src/components/pages/not-found-page.tsx
index d7c8a52..d8f6f37 100644
--- a/frontend/src/components/pages/not-found-page.tsx
+++ b/frontend/src/components/pages/not-found-page.tsx
@@ -7,9 +7,9 @@ const NotFoundPage: React.FunctionComponent = () => {
     <div className="relative w-screen h-screen">
       <header className="absolute text-center bottom-1/2 right-1/2">
         <h1 className="text-4xl pb-3">Not Found</h1>
-        <CircleButton>
-          <Link to="/">Return Home</Link>
-        </CircleButton>
+        <Link to="/">
+          <CircleButton>Return Home</CircleButton>
+        </Link>
       </header>
       <Particles width="100%" height="100%" />
     </div>
diff --git a/frontend/src/components/user/member-list.tsx b/frontend/src/components/user/member-list.tsx
index db23083..bcbb225 100644
--- a/frontend/src/components/user/member-list.tsx
+++ b/frontend/src/components/user/member-list.tsx
@@ -22,8 +22,11 @@ const MemberList: React.FunctionComponent<MemberListProps> = (props: MemberListP
   ));
 
   return (isActive) ? (
-    <div className="w-80 bg-bg-secondary">
-      <Category title="Members" count={props.users.length} />
+    <div className="bg-bg-secondary w-64">
+      <Category
+        className="pt-6 pr-2 pl-4 h-10"
+        title="Members"
+        count={props.users.length} />
       <div className="mt-2 ml-2">{members}</div>
     </div>
   ) : null;
diff --git a/frontend/src/components/utils/buttons/normal-button.tsx b/frontend/src/components/utils/buttons/normal-button.tsx
index 9e9fb75..76dccdb 100644
--- a/frontend/src/components/utils/buttons/normal-button.tsx
+++ b/frontend/src/components/utils/buttons/normal-button.tsx
@@ -2,7 +2,7 @@ const NormalButton: React.FunctionComponent<any> = (props) => {
   return (
     <button
       {...props}
-      className={`bg-primary heading rounded-md py-1.5 px-4 m-4 ${props.className}`}>
+      className={`bg-primary heading rounded-md py-1.5 px-4 ${props.className}`}>
       {props.children}
     </button>
   );
diff --git a/frontend/src/components/utils/category.tsx b/frontend/src/components/utils/category.tsx
index 4da2937..6c91ef1 100644
--- a/frontend/src/components/utils/category.tsx
+++ b/frontend/src/components/utils/category.tsx
@@ -1,11 +1,12 @@
 export interface CategoryProps {
   title: string;
   count?: number;
+  className?: string;
 }
  
-const Category: React.FunctionComponent<CategoryProps> = ({ title, count }) => {
+const Category: React.FunctionComponent<CategoryProps> = ({ title, count, className }) => {
   return (
-    <h2 className="uppercase font-bold text-xs tracking-wider pt-6 pr-2 pl-4 h-10">
+    <h2 className={`uppercase font-bold text-xs tracking-wider ${className}`}>
       {title} {count !== undefined && `— ${count}`}
     </h2>
   );
diff --git a/frontend/src/components/ws-listener.tsx b/frontend/src/components/ws-listener.tsx
index a59e142..6b99fd5 100644
--- a/frontend/src/components/ws-listener.tsx
+++ b/frontend/src/components/ws-listener.tsx
@@ -15,13 +15,15 @@ const WSListener: React.FunctionComponent = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const store = useStore();
-
   const hasListenedToWS = useSelector((s: Store.AppStore) => s.meta.hasListenedToWS);
 
+  const getState = () => store.getState() as Store.AppStore;
+
   useEffect(() => {
     if (hasListenedToWS) return;
 
     ws.on('error', (error: any) => {
+      // TODO: snackbar error message
       alert(error.data?.message);
     });
 
@@ -29,26 +31,24 @@ const WSListener: React.FunctionComponent = () => {
     ws.on('CHANNEL_CREATE', (args) => {      
       // if we created it, we want to navigate there
       // we'd expect the user to exist, as they should be logged in to receive ws events
-      const state = store.getState() as Store.AppStore;      
-      const weCreated = args.creatorId === state.auth.user!.id;
-      const guild = state.ui.activeGuild;
+      const { auth, ui } = getState();      
+      const selfCreated = args.creatorId === auth.user!.id;
       
       // we cannot go to the channel if not in store 
       dispatch(guilds.channelCreated(args));
 
-      if (weCreated && guild) {
+      if (selfCreated && ui.activeGuild) {
         dispatch(closedModal());
-        history.push(`/channels/${guild.id}/${args.channel.id}`);
+        history.push(`/channels/${ui.activeGuild.id}/${args.channel.id}`);
       }
     });
     ws.on('CHANNEL_DELETE', (args) => {
       // if in channel, go away from it
-      const state = store.getState() as Store.AppStore;
-      const inChannel = args.channelId === state.ui.activeChannel?.id;
-      const guild = state.ui.activeGuild;
+      const { ui } = getState();
+      const inChannel = args.channelId === ui.activeChannel?.id;
 
-      if (inChannel && guild)
-        history.push(`/channels/${guild.id}`);
+      if (inChannel && ui.activeGuild)
+        history.push(`/channels/${ui.activeGuild.id}`);
 
       dispatch(guilds.channelDeleted(args));
     });
@@ -70,8 +70,8 @@ const WSListener: React.FunctionComponent = () => {
       history.push(`/channels/${args.guild.id}`);
     });
     ws.on('GUILD_DELETE', (args) => {
-      const state = store.getState() as Store.AppStore;
-      const guildIsActive = args.guildId === state.ui.activeGuild?.id;
+      const { ui } = getState();
+      const guildIsActive = args.guildId === ui.activeGuild?.id;
       if (guildIsActive)
         dispatch(closedModal());
     });
@@ -85,24 +85,22 @@ const WSListener: React.FunctionComponent = () => {
       dispatch(auth.ready(args));
       dispatch(users.fetched(args.user));
     });
+    ws.on('USER_DELETE', () => {
+      dispatch(logoutUser());
+      history.push('/');
+      ws.disconnect();
+    });
     ws.on('USER_UPDATE', (args) => {
       // update member in guild
-      const state = store.getState() as Store.AppStore;
+      const state = getState();
       const user = state.auth.user!;
-      const wasDeleted = args.payload.discriminator === 0;
       const isSelf = args.userId === user.id;
-      
-      if (isSelf && wasDeleted) {
-        dispatch(logoutUser());
-        history.push('/');
-        return ws.disconnect();
-      } else if (isSelf)
-        dispatch(auth.updatedUser(args));
-      
+
       // make sure user in guilds
+      if (isSelf)
+        dispatch(auth.updatedUser(args));
       if (user.guildIds.length)
         dispatch(guilds.memberUpdated(args));
-
       dispatch(users.updated(args));
     });
 
diff --git a/types/ws.d.ts b/types/ws.d.ts
index a5124b1..43f67f4 100644
--- a/types/ws.d.ts
+++ b/types/ws.d.ts
@@ -37,6 +37,7 @@ declare global {
     'MESSAGE_UPDATE': WSResponse.MessageUpdate;
     'READY': WSResponse.Ready;
     'TYPING_START': WSResponse.TypingStart;
+    'USER_DELETE': WSResponse.UserDelete;
     'USER_UPDATE': WSResponse.UserUpdate;
   }