refactor services and reducers to parse JSON before data hits dispatch
This commit is contained in:
parent
83d3abf188
commit
6467004a89
16 changed files with 153 additions and 49 deletions
|
@ -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]));
|
||||
|
|
|
@ -36,9 +36,8 @@ const Login = (props) => {
|
|||
username,
|
||||
password
|
||||
})
|
||||
const parsedResponse = JSON.parse(loginResponse);
|
||||
if (parsedResponse.errors) {
|
||||
const authError = parsedResponse.errors
|
||||
if (loginResponse.errors) {
|
||||
const authError = loginResponse.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
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -53,10 +53,9 @@ const Signup = (props) => {
|
|||
password,
|
||||
confirmPassword
|
||||
})
|
||||
const parsedResponse = JSON.parse(signupResponse)
|
||||
|
||||
if (parsedResponse.errors) {
|
||||
const authError = parsedResponse.errors[0].auth
|
||||
|
||||
if (signupResponse.errors) {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -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()}/>);
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
})
|
|
@ -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) {
|
||||
const rooms = JSON.parse(roomsData);
|
||||
return rooms.rooms
|
||||
function setMessages(state, data) {
|
||||
const messageAction = {
|
||||
type: 'MESSAGE',
|
||||
message: 'SET_MESSAGES',
|
||||
body: data.messages
|
||||
}
|
||||
stateReducer(state, messageAction)
|
||||
}
|
|
@ -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
|
||||
]
|
||||
})
|
||||
});
|
|
@ -13,7 +13,7 @@ export type state = {
|
|||
export type action = {
|
||||
type: string,
|
||||
message: ?string,
|
||||
body: {}
|
||||
body: {},
|
||||
}
|
||||
|
||||
export const stateReducer = (state: state, action: action): state => {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -11,9 +11,9 @@ const indexService = async () => {
|
|||
const response = await fetch(apiAddress,
|
||||
{method: 'GET', credentials: 'include', headers: headers}
|
||||
)
|
||||
.then(res => {
|
||||
return res.text();
|
||||
}).catch(err => {
|
||||
.then(res => res.text())
|
||||
.then(text => JSON.parse(text))
|
||||
.catch(err => {
|
||||
return err;
|
||||
});
|
||||
return response;
|
||||
|
|
|
@ -12,18 +12,25 @@ const indexService = async () => {
|
|||
const response = await fetch(roomsAddress,
|
||||
{method: 'GET', credentials: 'include', headers: headers}
|
||||
)
|
||||
.then(res => {
|
||||
return res.text();
|
||||
})
|
||||
// .then(text => {
|
||||
// return JSON.parse(text)
|
||||
// })
|
||||
.catch(err => {
|
||||
return err;
|
||||
});
|
||||
.then(res => res.text())
|
||||
.then(text => JSON.parse(text))
|
||||
.catch(err => err);
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
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
|
||||
}
|
|
@ -16,11 +16,10 @@ const loginService = async(formData) => {
|
|||
body: JSON.stringify(formData),
|
||||
headers: headers
|
||||
})
|
||||
.then(res => {
|
||||
return res.text();
|
||||
}).catch(err => {
|
||||
return err;
|
||||
});
|
||||
.then(res => res.text())
|
||||
.then(text => JSON.parse(text))
|
||||
.catch(err => err);
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
|
@ -31,11 +30,10 @@ const signupService = async (formData) => {
|
|||
body: JSON.stringify(formData),
|
||||
headers: headers
|
||||
})
|
||||
.then(res => {
|
||||
return res.text();
|
||||
}).catch(err => {
|
||||
return err;
|
||||
});
|
||||
.then(res => res.text())
|
||||
.then(text => JSON.parse(text))
|
||||
.catch(err => err);
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue