Feat/socketConnections

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 
 *dev.log
 *prod.log
+packages/scrum-server/dist/*

packages/scrum-client/src/components/TeamList/TeamList.js

@@ -1,8 +1,49 @@
 import React from 'react';
 import { Badge, Row, Col, Figure } from 'react-bootstrap';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, LabelList, Label } from 'recharts';
 import PropTypes from 'prop-types';
 import './TeamList.css';
 
+const data = [
+  {
+    name: 'S',
+    numberOfVotes: 2,
+    voters: 'Carlos, Pedro, Luis',
+  },
+  {
+    name: 'M',
+    numberOfVotes: 5,
+    voters: 'Carlos, Miguel',
+  },
+  {
+    name: 'L',
+    numberOfVotes: 3,
+    voters: 'Jose, Juan',
+  },
+  {
+    name: 'XL',
+    numberOfVotes: 1,
+    voters: 'El chavito seguia bailando',
+  },
+  {
+    name: 'XS',
+    numberOfVotes: 2,
+    voters: 'A, B, C',
+  },
+];
+// const CustomTooltip = ({ active, payload, label }) => {
+//   if (active && payload && payload.length) {
+//     return (
+//       <div className="custom-tooltip">
+//         <p className="label">{`${label} : ${payload[0].value}`}</p>
+//         <p className="desc" />
+//       </div>
+//     );
+//   }
+
+//   return null;
+// };
+
 const getUserVote = (storyVotes, user) => {
   // eslint-disable-next-line
   const storyVote = storyVotes.find(([id]) => id === user._id);
@@ -28,7 +69,35 @@ const TeamList = props => {
           </strong>
         </Col>
       </Row>
-
+      <Row>
+        <Col sm={8} className="d-flex justify-content-center">
+          <BarChart
+            width={800}
+            height={400}
+            data={data}
+            margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name">
+              <Label value="Pages of my website" offset={0} position="insideBottom" />
+            </XAxis>
+            <Tooltip />
+            <YAxis label={{ value: '# of votes', angle: -90, position: 'insideLeft' }} />
+            <Bar dataKey="numberOfVotes" fill="#8884d8" background={{ fill: '#eee' }}>
+              {' '}
+              <LabelList dataKey="voters" position="top" />
+            </Bar>
+          </BarChart>
+        </Col>
+        <Col sm={4}>
+          <Row>
+            <Col>Fastest responder: Luis</Col>
+          </Row>
+          <Row>
+            <Col>Most accurate responder so far: Luis</Col>
+          </Row>
+        </Col>
+      </Row>
       <Row>
         <Col xs={6} md={4} lg={2}>
           Average [{summaryVotes.avgVote}]

packages/scrum-client/src/content/ParticipateSession/ParticipateSession.js

@@ -62,11 +62,7 @@ export default function ParticipateSession() {
   useEffect(() => {
     if (!!sessionInformation && sessionInformation.cardDeck !== undefined) {
       const cardDeck = DECKS.byLabels(sessionInformation.cardDeck);
-      if (JSON.stringify(storyVotes) !== '{}') {
-        setSummaryVotes(cardDeck.getSummaryVote(storyVotes));
-      } else {
-        console.log('storyVotes', storyVotes);
-      }
+      setSummaryVotes(cardDeck.getSummaryVote(storyVotes));
     }
   }, [sessionInformation, storyVotes]);
 

packages/scrum-client/src/content/VotingCards/VotingCards.js

@@ -33,7 +33,6 @@ export default function VotingCards() {
   const { roomId } = useParams();
   const [cardDeck, setCardDeck] = useState([]);
   const [sessionInformation, setSessionInformation] = useState({});
-  // TODO remove next line and keep this
   const { story, socketEvents } = useSocket(roomId);
   const userDetails = useAuthState();
 

packages/scrum-client/src/hooks/ClientSocketEvents.js

@@ -8,8 +8,17 @@ import { API_CONSTANTS } from '../constants';
  * @param {string} uri The uri of the IO server, default value is ${API_BASE_URL}
  */
 const ClientSocketEvents = (ioUri = API_CONSTANTS.API_BASE_URL) => {
+  console.log('client--connectionSocket: ');
   const socket = io(ioUri);
-  console.log('client--connectionSocket: ', ioUri);
+
+  const connectSocket = () => {
+    console.log('client--connectSocket', socket.id);
+  };
+
+  const disconnectSocket = () => {
+    console.log('client--disconnectSocket', socket.id);
+    if (socket) socket.disconnect();
+  };
   /**
    * Joins a user to a room.
    * @param {Object} data The data sent to the event.
@@ -19,10 +28,7 @@ const ClientSocketEvents = (ioUri = API_CONSTANTS.API_BASE_URL) => {
   const joinToRoom = data => {
     socket.emit(EVENT.JOIN, data);
   };
-  const disconnectSocket = () => {
-    console.log('client--disconnectSocket');
-    if (socket) socket.disconnect();
-  };
+
   const onRoomMessages = cb => {
     console.log('onRoomMessages');
     socket.on(EVENT.SEND_MESSAGE, data => {
@@ -41,8 +47,6 @@ const ClientSocketEvents = (ioUri = API_CONSTANTS.API_BASE_URL) => {
   const onStoryVotesUpdate = cb => {
     console.log('onStoryVotesUpdate');
     socket.on(EVENT.STORY_VOTES_UPDATE, data => {
-      console.log('data', data);
-      console.log('data.storyVote', data.storyVotes);
       return cb(data.storyVotes);
     });
   };
@@ -62,9 +66,10 @@ const ClientSocketEvents = (ioUri = API_CONSTANTS.API_BASE_URL) => {
 
   return {
     socket,
+    connectSocket,
+    disconnectSocket,
     onUserJoined,
     joinToRoom,
-    disconnectSocket,
     onRoomMessages,
     sendMessageToRoom,
     onStoryUpdate,

packages/scrum-client/src/hooks/useSocket.js

@@ -12,10 +12,12 @@ const useSocket = (roomId, socketServerURL = API_CONSTANTS.API_BASE_URL) => {
   const userDetails = useAuthState();
 
   useEffect(() => {
+    // eslint-disable-next-line
+    console.log('WARNING!!! creating new connection?. ');
     const socketEventsRef = ClientSocketEvents();
     const {
-      joinToRoom,
       disconnectSocket,
+      joinToRoom,
       onRoomMessages,
       onUserJoined,
       onStoryUpdate,
@@ -31,6 +33,8 @@ const useSocket = (roomId, socketServerURL = API_CONSTANTS.API_BASE_URL) => {
 
     setSocketEvents(socketEventsRef);
     return () => {
+      // eslint-disable-next-line
+      console.log('WARNING!!!  executing disconnection. ');
       disconnectSocket();
     };
   }, [roomId, socketServerURL, userDetails.user, story, storyVotes]);

packages/scrum-server/locales/en.json

@@ -1,4 +1,5 @@
 {
+    "TODO": "MOVE this file into src?",
     "lblWelcome": "Welcome!",
     "apiWorking": "API is working properly",
     "apiPasswordDoNotMatch": "password do not match",

packages/scrum-server/src/app.js

@@ -35,7 +35,7 @@ i18n.configure({
 });
 
 
-const CLIENT_PATH = '/../scrum-client/build/';
+const CLIENT_PATH = '/../../scrum-client/build/';
 app.use(cors(corsOptions));
 app.use(i18n.init);
 app.use(httpLogger(keys.httpLogging.httpLogFormat, { skip: (req, res) => keys.httpLogging.httpLoggingEnabled === 'false' }));

packages/scrum-server/src/locales/en.json

@@ -1 +1,18 @@
-{}
+{
+	"lblWelcome": "Welcome!",
+	"apiWorking": "API is working properly",
+	"apiPasswordDoNotMatch": "password do not match",
+	"apiEmailExist": "email exits",
+	"apiEmailNotFound": "Auth failed ,email not found",
+	"apiUserAlreadyLoggedIn": "You are already logged in",
+	"apiFillTheFields": "Please fill in all fields",
+	"apiPasswordMinLength": "Password must be at least 6 characters",
+	"apiEmailAlreadyRegistered": "Email already ",
+	"apiSuccessRegister": "You have now ",
+	"apiNowLoggedOut": "Now logged out",
+	"serviceSaveError": "Error while saving",
+	"serviceFindError": "Object not found",
+	"serviceInvalidId": "Invalid id",
+	"apiPlanningSessionInvalidId": "Invalid session id",
+	"apiPlanningSessionNotFound": "Planning session not found."
+}

packages/scrum-server/src/services/socket/ServerSocketService.js

@@ -1,6 +1,5 @@
 /* eslint-disable */
 // TODO fix eslint
-// TODO Is this really used?
 const socketIo = require('socket.io');
 const { EVENT } = require('scrum-common');
 const {Logger} = require('../../utils/Logger');
@@ -14,14 +13,14 @@ class ServerSocketService {
     const socketEventIO = ServerSocketEvents(this.io);
 
     this.io.on(EVENT.CONNECTION, socket => {
-      this.logger.info('socket connected');
+      this.logger.info(`socket  connected [${socket.id}]`);
       const socketEvent  = socketEventIO(socket);
       socket.on(EVENT.JOIN, socketEvent.onJoinUserToRoom);
       socket.on(EVENT.SEND_MESSAGE, socketEvent.onSendMessageToRoom);
       socket.on(EVENT.STORY_UPDATE, socketEvent.onStoryUpdate);
       socket.on(EVENT.STORY_VOTES_UPDATE, socketEvent.onStoryVotesUpdate);
       socket.on(EVENT.DISCONNECT, () => {
-        this.logger.info("socket  disconnected");
+        this.logger.info(`socket  disconnected [${socket.id}]`);
       });
     });
   }

packages/scrum-server/src/services/socket/ServerSocketState.js

@@ -11,12 +11,12 @@ const buildRoom = ({ id, users = new Map(), storyVotes = new Map(), story = '' }
 const ServerSocketState = (initialState = []) => {
   const logger = Logger(__filename);
   const rooms = new Map(...initialState);
-  logger.info(`Initializing rooms`);
+  logger.info(`Initializing rooms ${JSON.stringify(rooms)}`);
 
   const addRoomIfDoesNotExists = (room) => {
     if (!rooms.has(room.id)) {
       rooms.set(room.id, buildRoom(room.id));
-      logger.debug(`addRoom building room {${room.id}}`);
+      logger.debug(`addRoom building room {${room.id}} resulting in  ${JSON.stringify(rooms)}`);
     }
     return rooms.get(room.id);
   };
@@ -27,14 +27,17 @@ const ServerSocketState = (initialState = []) => {
     if (!_room.users.has(userId)) {
       logger.debug(`assignUserToRoom adding user {${userId}} to the room {${room.id}}`);
       _room.users.set(userId, user);
+      logger.silly(`assignUserToRoom adding user {${userId}} to the room {${room.id}} resulting in ${JSON.stringify(_room.users)}`);
     }
     return rooms.get(room.id);
   };
 
   const setRoomStory = (room, story) => {
     logger.debug(`setRoomStory on ${room.id} with ${story.storyTitle}`);
     const _room = rooms.get(room.id);
-    _room.story = story;
+    if (_room !== undefined) {
+      _room.story = story;
+    }
     return _room;
   };
 
@@ -43,6 +46,7 @@ const ServerSocketState = (initialState = []) => {
     logger.debug(`setRoomStoryVote on room {${room.id}} for user {${userId}} with value {${vote}}`);
     const _room = rooms.get(room.id);
     _room.storyVotes.set(userId, vote);
+    logger.silly(`setRoomStoryVote on room {${room.id}} for user {${userId}} has {${JSON.stringify(_room.storyVotes)}}`);
     return _room.storyVotes;
   };
   const getRoom = room => {

packages/scrum-server/template.env

@@ -5,4 +5,7 @@ DB_NAME=
 SESSION_SECRET=
 PORT=
 CORS_WHITELIST_URL=
-DEBUG_LEVEL=info
+LOG_LEVEL=(silly|debug|info|warn|error)
+LOG_DATEFORMAT='MMM-DD-YYYY HH:mm:ss'
+HTTP_LOG_FORMAT=(tiny|)
+HTTP_LOG_ENABLED=(true|false)

packages/scrum-server/tests/babelTranspileTest.js

@@ -0,0 +1,44 @@
+const assert = require('assert');
+
+describe('Map', () => {
+  describe('set', () => {
+    it('should add an element to the map', done => {
+      const k1 = { id: 1 };
+      const k2 = { id: 2 };
+      const storyVotes = new Map();
+      console.log(storyVotes);
+      storyVotes.set(k1.id, k1);
+      console.log(storyVotes);
+      const foundK1 = storyVotes.get(k1.id);
+      storyVotes.should.have.key(k1.id);
+      storyVotes.should.not.have.key(k2.id);
+      assert.equal(k1, foundK1);
+      done();
+    });
+  });
+});
+
+describe('Array', () => {
+  describe('find', () => {
+    it('should return an element to the array', done => {
+      const storyVotes = [5, 12, 8, 130, 44];
+      const idToFind = 8;
+      const found = storyVotes.find(id => id === idToFind);
+      // console.log(found);
+      assert.equal(found, idToFind);
+      done();
+    });
+  });
+});
+
+const inventory = [
+  { name: 'apples', quantity: 2 },
+  { name: 'cherries', quantity: 8 },
+  { name: 'bananas', quantity: 0 },
+  { name: 'cherries', quantity: 5 },
+  { name: 'cherries', quantity: 15 },
+];
+
+const result = inventory.find(({ name }) => name === 'cherries');
+
+console.log(result); // { name: 'cherries', quantity: 5 }