protocol by env

Author: JaynewDee

client/src/App.css

@@ -117,7 +117,7 @@ header {
   word-break: break-all;
   text-align: left;
   padding-left: 3rem;
-  padding-right: 1rem;
+  padding-right: 3rem;
   padding-top: 6rem;
   padding-bottom: 4rem;
 }
@@ -132,7 +132,16 @@ header {
   color: var(--prime-blue);
 }
 
+.message-content {
+  border: 1px solid var(--prime-blue);
+  border-left: unset;
+  border-bottom: unset;
+  border-radius: 5%;
+  margin: 2rem auto;
+}
+
 .message-username {
+  font-size: 0.77rem;
 }
 
 .message-text::before {

client/src/components/Messages.tsx

@@ -40,7 +40,7 @@ const Messages: React.FC<MessageProps> = ({
     <div className="scroll-wrapper">
       <div ref={scrollRef} className="messages-container">
         {messages.map((message: any, idx: number) => (
-          <div key={message._id}>
+          <div className="message-content" key={message._id}>
             <p className="message-username">{message.author.username}</p>
             <p className="message-text">{message.text}</p>
           </div>

client/src/components/SessionUtils.tsx

@@ -39,13 +39,13 @@ const SessionUtils: React.FC<any> = ({}) => {
     <div className="session-utils-box">
       <button onClick={destroySession}>END SESSION</button>
       {spacer()}
-      <button onClick={getAllRooms}>FETCH ROOMS</button>
+      {/* <button onClick={getAllRooms}>FETCH ROOMS</button>
       {spacer()}
       <button onClick={getOwnUser}>FETCH ME</button>
       {spacer()}
       <button onClick={getRecentMsgs}>FETCH MESSAGES</button>
       {spacer()}
-      <button onClick={deleteAllMessages}>DELETE MESSAGES</button>
+      <button onClick={deleteAllMessages}>DELETE MESSAGES</button> */}
     </div>
   );
 };

client/src/utils/hooks.ts

@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
 import { io, Socket } from "socket.io-client";
-import { API } from "../api/api";
-import { useRoomContext } from "./context";
+
+const currentProto = window.location.protocol;
+const protoByEnv = currentProto === "http:" ? `http://localhost:3001` : ``;
+console.log(protoByEnv);
 
 export type SocketProp = null | Socket<any, any>;
 
 export const useChatSocket = () => {
   const [socket, setSocket] = useState<SocketProp>(null);
   useEffect(() => {
     // Init client-specific socket connection
-    const socket = io();
+    const socket = io(protoByEnv);
     ///////////////////////////////
     setSocket(socket);
     ///////////////////////////////

server/server.js

@@ -30,7 +30,7 @@ io.on("connection", (socket) => {
     if (!msg) return;
 
     try {
-      socket.broadcast.emit("chat message", msg);
+      socket.emit("chat message", msg);
     } catch (err) {
       console.error(err);
     }

start-debug.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+set -e
+
+cd client
+yarn dev &
+cd ../server
+npm run debug