refactor services and reducers to parse JSON before data hits dispatch

play-node-go/src/App.js

@@ -39,6 +39,7 @@ function App() {
   }, [])
 
   const socketConnect = () => {
+    socket.removeAllListeners();
     socket.emit('connect');
     socket.on('connected', data => setSocketData('socket connected'));
     socket.on('connect_error', err => setError([...error, err]));

play-node-go/src/components/Form/Login/Login.js

@@ -36,9 +36,8 @@ const Login = (props) => {
       username,
       password
     })
-    const parsedResponse = JSON.parse(loginResponse);
+    if (loginResponse.errors) {
-    if (parsedResponse.errors) {
+      const authError = loginResponse.errors
-      const authError = parsedResponse.errors
       return props.dispatch({
         ...errorDispatchAction,
         body: { authError }
@@ -48,7 +47,7 @@ const Login = (props) => {
     return props.dispatch({
       type: 'AUTH',
       message: 'LOGIN',
-      body: parsedResponse
+      body: loginResponse
     })
   }
 

play-node-go/src/components/Form/Login/Login.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Login from './Login';
-import { initState } from '../../reducers/init/stateReducer.init';
+import { initState } from '../../../reducers/init/stateReducer.init';
 
 test('renders Login without crashing', () => {
   const state = initState();

play-node-go/src/components/Form/Signup/Signup.js

@@ -53,10 +53,9 @@ const Signup = (props) => {
       password,
       confirmPassword
     })
-    const parsedResponse = JSON.parse(signupResponse)
 
-    if (parsedResponse.errors) {
+    if (signupResponse.errors) {
-      const authError = parsedResponse.errors[0].auth
+      const authError = signupResponse.errors[0].auth
       return props.dispatch({
         ...errorDispatchAction,
         body: { authError }
@@ -66,7 +65,7 @@ const Signup = (props) => {
     return props.dispatch({
       type: 'AUTH',
       message: 'SIGNUP',
-      body: parsedResponse
+      body: signupResponse
     })
   }
 

play-node-go/src/components/Form/Signup/Signup.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Signup from './Signup';
-import { initState } from '../../reducers/init/stateReducer.init';
+import { initState } from '../../../reducers/init/stateReducer.init';
 
 test('renders Signup without crashing', () => {
   const { getByTestId } = render(<Signup state={initState()}/>);

play-node-go/src/pages/Room/Room.js

@@ -3,12 +3,30 @@ import { useParams } from 'react-router-dom';
 import './Room.scss';
 import socketIOClient from 'socket.io-client';
 import config from '../../config';
+import roomsServices from '../../services/api/roomsServices';
 
 const Room = (props) => {
-  const roomId = useParams().id;
+  const roomId = parseInt(useParams().id) || 0;
   const [ socketData, setSocketData ] = useState();
   const [ messages, setMessages ] = useState();
 
+  const fetchRoomAPI = async () => {
+    const response = await roomsServices.getRoomService(roomId);
+    if (response) {
+      console.log(response);
+      // const action = {
+      //   type: 'ROOMS',
+      //   message: 'JOIN_ROOM',
+      //   body: response
+      // }
+      // return dispatch(action);
+    }
+  }
+  
+  useEffect(() => {
+    fetchRoomAPI();
+  }, [])
+
   // ! [start] roomSocket
   const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
 
@@ -23,6 +41,7 @@ const Room = (props) => {
   useEffect(() => {
     roomSocketConnect();
   }, [])
+
   // ! [end]
 
   return (  

play-node-go/src/reducers/index/stateReducer.index.js

@@ -5,15 +5,10 @@ export const indexReducer = (state: state, action: action):state => {
   switch(action.message) {
 
     case 'SET_USER':
-      const user = indexDataParse(action.body);
+      const user = action.body;
       return {...state, user};
       
     default: 
       return state;
   }
 }
-
-function indexDataParse(indexData) {
-  const user = JSON.parse(indexData);
-  return user
-}

play-node-go/src/reducers/messages/stateReducer.messages.js

@@ -0,0 +1,16 @@
+// @flow
+import type { state, action } from '../stateReducer';
+import { stateReducer } from '../stateReducer';
+
+export const messagesReducer = (state: state, action: action):state => {
+  switch(action.message) {
+
+    case 'SET_MESSAGES':
+      const rooms = parseData(action.body);
+      return {...state, rooms};
+
+      
+    default:
+      return state;
+  }
+}

play-node-go/src/reducers/messages/stateReducer.messages.test.js

@@ -0,0 +1,10 @@
+import {stateReducer} from '../stateReducer';
+import { initState } from '../init/stateReducer.init';
+
+const messagesData = [];
+
+it('default returns state unaltered', () => {
+  const state = initState();
+  const action = {type: 'MESSAGES', message: '', body: JSON.stringify(messagesData)};
+  expect(stateReducer(state, action)).toEqual(state);
+})

play-node-go/src/reducers/rooms/stateReducer.rooms.js

@@ -1,19 +1,43 @@
 // @flow
 import type { state, action } from '../stateReducer';
+import { stateReducer } from '../stateReducer';
 
 export const roomsReducer = (state: state, action: action):state => {
   switch(action.message) {
 
     case 'SET_ROOMS':
-      const rooms = roomsParse(action.body);
+      const rooms = action.body;
       return {...state, rooms};
 
+    case 'JOIN_ROOM': {
+      // SET MESSAGES
+      const stateWithMessages = action.body.messages.length ? setMessages(state, action.body) : state;
+      
+      // SET CURRENT ROOM
+
+      // if (!data.roomGames.length) {
+      //   const errorAction = {
+      //     type: 'ERR',
+      //     message: 'JOIN_ROOM',
+      //     body: { joinRoomError: 'Game room has no games' }
+      //   }
+      //   return stateReducer(stateWithMessages, errorAction);
+      // }
+
+      // SET GAMES
+    }
+
+      
     default:
       return state;
   }
 }
 
-function roomsParse(roomsData) {
+function setMessages(state, data) {
-  const rooms = JSON.parse(roomsData);
+  const messageAction = {
-  return rooms.rooms
+    type: 'MESSAGE',
+    message: 'SET_MESSAGES',
+    body: data.messages
+  }
+  stateReducer(state, messageAction)
 }

play-node-go/src/reducers/rooms/stateReducer.rooms.test.js

@@ -10,9 +10,45 @@ const roomsData = [
   }
 ]
 
-it('default returns state with rooms added', () => {
+const joinRoomData = {
+  "roomGames": [
+    {
+      "id":1, "name":"main", 
+      "description":"A general place to play Go",
+      "language":"EN", "komi":6.5, "handicap":0, "board_size":19,
+      "player_black":"anon", "player_white":"anon",
+      "player_black_rank":"K3", "player_white_rank":"K2"
+    }
+  ],
+  "messages": [
+    {
+      "content": "Hey! Welcome to the general room!", "username": "userOne", "admin":true
+    }
+  ]
+}
+
+it('default returns state unaltered', () => {
   const state = initState();
-  const action = {type: 'ROOMS', message: 'SET_ROOMS', body: JSON.stringify(roomsData)};
+  const action = {type: 'ROOMS', message: '', body: JSON.stringify(roomsData)};
+  expect(stateReducer(state, action)).toEqual(state);
+})
+
+it('set rooms returns state with rooms added', () => {
+  const state = initState();
+  const action = {type: 'ROOMS', message: 'SET_ROOMS', body: roomsData};
   expect(stateReducer(state, action)).toEqual({...state, rooms: roomsData});
 });
 
+it('join room returns state with current room, games and messages all populated', () => {
+  const state = initState();
+  const action = {type: 'ROOMS', message: 'JOIN_ROOM', body: joinRoomData};
+  const normalizedRoomGames = joinRoomData.roomGames.map(game => {delete game.id; delete game.name; delete game.description; return game});
+  expect(stateReducer(state, action)).toEqual({
+    ...state, 
+    currentRoom: roomsData[0], 
+    messages: joinRoomData.messages,
+    roomGames: [
+      joinRoomData.roomGames
+    ]
+  })
+});

play-node-go/src/reducers/stateReducer.js

@@ -13,7 +13,7 @@ export type state = {
 export type action = {
   type: string,
   message: ?string,
-  body: {}
+  body: {},
 }
 
 export const stateReducer = (state: state, action: action): state => {

play-node-go/src/reducers/stateReducer.test.js

@@ -2,7 +2,7 @@ import {stateReducer} from './stateReducer';
 
 it('default returns state unaltered', () => {
   const state = {data: 'example'};
-  const action = {type: ''};
+  const action = {type: '', message: '', body:{}};
   expect(stateReducer(state, action)).toBe(state);
 });
 

play-node-go/src/services/api/indexServices.js

@@ -11,9 +11,9 @@ const indexService = async () => {
   const response = await fetch(apiAddress, 
     {method: 'GET', credentials: 'include', headers: headers}
   )
-  .then(res => {
+  .then(res => res.text())
-    return res.text();
+  .then(text => JSON.parse(text))
-  }).catch(err => {
+  .catch(err => {
     return err;
   });
   return response;

play-node-go/src/services/api/roomsServices.js

@@ -12,18 +12,25 @@ const indexService = async () => {
   const response = await fetch(roomsAddress, 
     {method: 'GET', credentials: 'include', headers: headers}
   )
-  .then(res => {
+  .then(res => res.text())
-    return res.text();
+  .then(text => JSON.parse(text))
-  })
+  .catch(err =>  err);
-  // .then(text => {
+  
-  //   return JSON.parse(text)
+  return response;
-  // })
+}
-  .catch(err => {
+
-    return err;
+const getRoomService = async (roomIndex) => {
-  });
+  const response = await fetch(`${roomsAddress}/${roomIndex}`, 
+    {method: 'GET', credentials: 'include', headers: headers}
+  )
+  .then(res => res.text())
+  .then(text => JSON.parse(text))
+  .catch(err => err);
+
   return response;
 }
   
 export default {
-  indexService
+  indexService,
+  getRoomService
 }

play-node-go/src/services/authServices.js

@@ -16,11 +16,10 @@ const loginService = async(formData) => {
     body: JSON.stringify(formData),
     headers: headers
   })
-  .then(res => {
+  .then(res => res.text())
-    return res.text();
+  .then(text => JSON.parse(text))
-  }).catch(err => {
+  .catch(err => err);
-    return err;
+  
-  });
   return response;
 }
 
@@ -31,11 +30,10 @@ const signupService = async (formData) => {
     body: JSON.stringify(formData),
     headers: headers
   })
-  .then(res => {
+  .then(res => res.text())
-    return res.text();
+  .then(text => JSON.parse(text))
-  }).catch(err => {
+  .catch(err => err);
-    return err;
+
-  });
   return response;
 }