feat(): [Room] added room

chat-server/index.js

@@ -19,12 +19,14 @@ const io = new Server(server, {
 });
 
 app.get('/', (req, res) => {
-  res.send('<h1>Chat Server</h1>');
+  res.send('<h1>Chat Server Example</h1>');
 });
 
 io.on('connection', (socket) => {
-  socket.on('chat', (message) => {
-    socket.broadcast.emit('chat', message);
+  socket.on('create chat', (id) => {
+    socket.on(`chat:${id}`, (message) => {
+      socket.broadcast.emit(`chat:${id}`, message);
+    });
   });
 
   socket.on('disconnect', () => {

chat-server/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chat-server",
+  "name": "websockets-chat-example-server",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

chat-server/vercel.json

@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "index.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "index.js"
+    }
+  ]
+}

chat/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "chat",
-  "version": "0.1.0",
+  "name": "websockets-chat-example",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",

chat/src/App/App.tsx

@@ -1,12 +1,13 @@
 import { Routes, Route } from 'react-router-dom';
 
-import { Home } from 'pages';
+import { Home, Room } from 'pages';
 
 const App = () => {
   return (
     <div className="App">
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/room/:id" element={<Room />} />
       </Routes>
     </div>
   );

chat/src/components/index.ts

@@ -0,0 +1,4 @@
+// pages
+export { default as MyMessage } from './pages/Room/MyMessage';
+export { default as UserMessage } from './pages/Room/UserMessage';
+export { default as RoomForm } from './pages/Room/RoomForm';

chat/src/components/pages/Room/MyMessage/MyMessage.module.scss

@@ -0,0 +1,61 @@
+.my-message-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.my-message {
+  position: relative;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  padding: 10px 10px 20px 10px;
+  background-color: #f8e896;
+  min-width: 20%;
+  max-width: 60%;
+  width: fit-content;
+  text-align: left;
+  font: 400 .9em 'Open Sans', sans-serif;
+  border: 1px solid #dfd087;
+  border-radius: 10px;
+}
+.my-message::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 15px solid #f8e896;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  top: 0;
+  right: -15px;
+}
+.my-message::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 17px solid #dfd087;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  top: -1px;
+  right: -17px;
+}
+
+.my-message__text {
+  padding: 0;
+  margin: 0;
+}
+
+.my-message__date {
+  position: absolute;
+  font-size: 0.85em;
+  font-weight: 300;
+  margin-top: 10px;
+  bottom: 3px;
+  right: 5px;
+}
+
+@media (max-width: 800px) {
+  .my-message {
+    min-width: 60%;
+  }
+}

chat/src/components/pages/Room/MyMessage/MyMessage.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+import { formatMessageDate } from 'helpers';
+
+import { IMyMessageProps } from './types';
+
+import styles from './MyMessage.module.scss';
+
+const MyMessage: FC<IMyMessageProps> = ({ message }) => {
+  return (
+    <div className={styles['my-message-wrapper']}>
+      <div className={styles['my-message']}>
+        <p className={styles['my-message__text']}>
+          {message.message}
+        </p>
+
+        <span className={styles['my-message__date']}>
+          {formatMessageDate(message.date)}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default MyMessage;

chat/src/components/pages/Room/MyMessage/index.ts

@@ -0,0 +1,3 @@
+import MyMessage from './MyMessage';
+
+export default MyMessage;

chat/src/components/pages/Room/MyMessage/types.ts

@@ -0,0 +1,5 @@
+import { IMessage, IMessageWithFrom } from 'types';
+
+export interface IMyMessageProps {
+  message: IMessage | IMessageWithFrom;
+}

chat/src/components/pages/Room/RoomForm/RoomForm.module.scss

@@ -0,0 +1,11 @@
+.room-form {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 12px 20px 16px 20px;
+}
+
+.room-form__input {
+  flex: 1;
+  margin-right: 20px !important;
+}

chat/src/components/pages/Room/RoomForm/RoomForm.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { Button, TextField } from '@material-ui/core';
+
+import { UseRoomFormContainerType } from './useRoomForm';
+
+import styles from './RoomForm.module.scss';
+import { Controller } from 'react-hook-form';
+
+const RoomForm: FC<UseRoomFormContainerType> = ({ control, handleSubmit, handleFormSubmit }) => {
+
+  return (
+    <form
+      autoComplete="off"
+      className={styles['room-form']}
+      onSubmit={handleSubmit(handleFormSubmit)}
+    >
+      <Controller
+        control={control}
+        name="message"
+        render={({ field: { onChange, value } }) => {
+          return (
+            <TextField
+              onChange={onChange}
+              value={value}
+              label="Message"
+              className={styles['room-form__input']}
+            />
+          );
+        }}
+      />
+
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        aria-label="Send"
+      >
+        <svg className="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" fill="#ffffff">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+        </svg>
+      </Button>
+    </form>
+  );
+};
+
+export default RoomForm;

chat/src/components/pages/Room/RoomForm/RoomFormContainer.tsx

@@ -0,0 +1,13 @@
+import RoomForm from './RoomForm';
+
+import useRoomForm from './useRoomForm';
+
+const RoomFormContainer = () => {
+  const props = useRoomForm();
+
+  return (
+    <RoomForm {...props} />
+  );
+};
+
+export default RoomFormContainer;

chat/src/components/pages/Room/RoomForm/index.ts

@@ -0,0 +1,3 @@
+import RoomForm from './RoomFormContainer';
+
+export default RoomForm;

chat/src/components/pages/Room/RoomForm/useRoomForm.ts

@@ -0,0 +1,40 @@
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import { useAppDispatch } from 'store';
+import { sendMessage } from 'store/room/room.actions';
+
+import { roomChatSchema } from 'utilities';
+
+import { IMessageData } from 'types';
+
+const useRoomForm = () => {
+  const dispatch = useAppDispatch();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IMessageData>({
+    defaultValues: {
+      message: '',
+    },
+    resolver: yupResolver(roomChatSchema),
+  });
+
+  const handleFormSubmit = (data: IMessageData) => {
+    reset();
+
+    dispatch(sendMessage(data));
+  };
+
+  return {
+    handleSubmit,
+    handleFormSubmit,
+    control,
+  };
+};
+
+export type UseRoomFormContainerType = ReturnType<typeof useRoomForm>;
+
+export default useRoomForm;

chat/src/components/pages/Room/UserMessage/UserMessage.module.scss

@@ -0,0 +1,75 @@
+.user-message {
+  display: flex;
+}
+
+.user-message__avatar {
+  width: 32px !important;
+  height: 32px !important;
+  background-color: #ff5722 !important;
+  color: #ffffff !important;
+}
+
+.user-message__content-wrapper {
+  width: 100%;
+}
+
+.user-message__content {
+  position: relative;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  padding: 10px 10px 20px 10px;
+  background-color: #A8DDFD;
+  min-width: 20%;
+  max-width: 60%;
+  width: fit-content;
+  text-align: left;
+  font: 400 .9em 'Open Sans', sans-serif;
+  border: 1px solid #97C6E3;
+  border-radius: 10px;
+}
+.user-message__content::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 15px solid #A8DDFD;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  top: 0;
+  left: -15px;
+}
+.user-message__content::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 17px solid #97C6E3;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  top: -1px;
+  left: -17px;
+}
+
+.user-message__display-name {
+  margin-left: 20px;
+}
+
+.user-message__text {
+  padding: 0;
+  margin: 0;
+}
+
+.user-message__date {
+  position: absolute;
+  font-size: 0.85em;
+  font-weight: 300;
+  margin-top: 10px;
+  bottom: 3px;
+  right: 5px;
+}
+
+@media (max-width: 800px) {
+  .user-message__content {
+    min-width: 60%;
+  }
+}