From 5a0a73d8d9faf7cdfbde3cc8bf0bcd89463a0506 Mon Sep 17 00:00:00 2001 From: Kim-Jaemin420 Date: Wed, 19 May 2021 13:00:23 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=81=ED=83=9C=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20value=EA=B0=92=20=EC=84=A4=EC=A0=95,=20=EB=8F=99?= =?UTF-8?q?=EC=A0=81=20=EC=B6=94=EA=B0=80/=EC=82=AD=EC=A0=9C=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90=20=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/getItemData.js | 8 +- src/components/doc/OX2/OX2Bottom.jsx | 9 +- src/components/doc/OX2/OX2Bottom2.jsx | 5 +- src/components/doc/OX2/OX2BttomTableRow.jsx | 22 +-- src/components/doc/OX2/OX2Form.jsx | 6 +- src/components/doc/OX2/OX2Top.jsx | 8 +- src/components/doc/OX2/OX2TopTableRow.jsx | 17 +- src/containers/doc/OX2Container.js | 195 +++++++++++--------- src/redux/modules/ox2.js | 119 ++++++------ 9 files changed, 207 insertions(+), 182 deletions(-) diff --git a/src/components/common/getItemData.js b/src/components/common/getItemData.js index 2e0adec..d964f14 100644 --- a/src/components/common/getItemData.js +++ b/src/components/common/getItemData.js @@ -1,18 +1,18 @@ import axios from 'axios'; const getItemData = async setState => { - const CERT_NO = JSON.parse(localStorage.getItem('certNo')); + const CERTNO = JSON.parse(localStorage.getItem('certNo')); const RCVNO = JSON.parse(localStorage.getItem('rcvNo')); const VESSELNM = JSON.parse(localStorage.getItem('shipNm')); - if (!CERT_NO) return; + if (!CERTNO) return; const params = new URL(window.location.href).pathname; const path = params.split('/')[2]; try { const res = await axios.get( - `${process.env.REACT_APP_SERVER_URL}/api/doc/${path}?ct=${CERT_NO}`, + `${process.env.REACT_APP_SERVER_URL}/api/doc/${path}?ct=${CERTNO}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}`, @@ -28,7 +28,7 @@ const getItemData = async setState => { H: { RCVNO, VESSELNM, - CERTNO: CERT_NO || null, + CERTNO, }, D1, ...rest, diff --git a/src/components/doc/OX2/OX2Bottom.jsx b/src/components/doc/OX2/OX2Bottom.jsx index e631911..1bef358 100644 --- a/src/components/doc/OX2/OX2Bottom.jsx +++ b/src/components/doc/OX2/OX2Bottom.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; import OX2BttomTableRow from './OX2BttomTableRow'; @@ -55,7 +56,9 @@ const ButtonDiv = styled.div` text-align: center; `; -const OX2Bottom = ({ onInsertD2, onRemoveD2, onChange, D2Lists, units, onChangeDatePicker }) => { +const OX2Bottom = ({ onInsertD2, onRemoveD2, onChange, units, onChangeDatePicker }) => { + const D2 = useSelector(state => state.ox2.D2); + return ( <> @@ -74,8 +77,8 @@ const OX2Bottom = ({ onInsertD2, onRemoveD2, onChange, D2Lists, units, onChangeD - {D2Lists.map((list, index) => ( - + {Object.entries(D2).map((item, index) => ( + ))} diff --git a/src/components/doc/OX2/OX2Bottom2.jsx b/src/components/doc/OX2/OX2Bottom2.jsx index c2c1fb9..d2fd760 100644 --- a/src/components/doc/OX2/OX2Bottom2.jsx +++ b/src/components/doc/OX2/OX2Bottom2.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; const BottomBox = styled.div` @@ -22,11 +23,13 @@ const BottomBox = styled.div` `; const OX2Bottom2 = ({ onChangeTextArea }) => { + const D3 = useSelector(state => state.ox2.D3); + return (
Recommendation ;
- +
); diff --git a/src/components/doc/OX2/OX2BttomTableRow.jsx b/src/components/doc/OX2/OX2BttomTableRow.jsx index 086c504..fac2819 100644 --- a/src/components/doc/OX2/OX2BttomTableRow.jsx +++ b/src/components/doc/OX2/OX2BttomTableRow.jsx @@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'; import DeleteButton from '../common/DeleteButton'; const OX2BttomTableRow = ({ id, onRemoveD2, onChange, num, units, onChangeDatePicker }) => { - const { TestDt } = useSelector(state => state.ox2.D2[id]); + const { Manuf, Volume, WorkPress, SerialNo, TestDt, Perform } = useSelector(state => state.ox2.D2[id]); const inputArg = ({ target }) => onChange({ target, id }); return ( @@ -13,33 +13,33 @@ const OX2BttomTableRow = ({ id, onRemoveD2, onChange, num, units, onChangeDatePi {'NO.' + num} - + - + - + - + onChangeDatePicker({ id, target: { name: "TestDt", form: "D2", value } })} showMonthYearPicker /> - - {units.map(unit => ( - ))} diff --git a/src/components/doc/OX2/OX2Form.jsx b/src/components/doc/OX2/OX2Form.jsx index 16428e3..32034ee 100644 --- a/src/components/doc/OX2/OX2Form.jsx +++ b/src/components/doc/OX2/OX2Form.jsx @@ -17,12 +17,12 @@ const ButtonBox = styled.div` cursor: pointer; }`; -const OX2Form = ({ onChangeD1, onChange, onRemove, onInsert, onChangeTextArea, lists, D2Lists, datas, onInsertD2, onRemoveD2, units, onChangeDatePicker, showModal, showCommModal }) => { +const OX2Form = ({ onChangeD1, onChange, onRemove, onInsert, onChangeTextArea, datas, onInsertD2, onRemoveD2, units, onChangeDatePicker, showModal, showCommModal }) => { return (
- - + + diff --git a/src/components/doc/OX2/OX2Top.jsx b/src/components/doc/OX2/OX2Top.jsx index dd4b58d..f48e4cd 100644 --- a/src/components/doc/OX2/OX2Top.jsx +++ b/src/components/doc/OX2/OX2Top.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; import OX2TopTableRow from './OX2TopTableRow'; @@ -95,7 +96,8 @@ const ButtonDiv = styled.div` text-align: center; `; -const OX2Top = ({ datas, lists, onRemove, onInsert, onChangeD1 }) => { +const OX2Top = ({ datas, onRemove, onInsert, onChangeD1 }) => { + const D1 = useSelector(state => state.ox2.D1); return ( <> @@ -109,8 +111,8 @@ const OX2Top = ({ datas, lists, onRemove, onInsert, onChangeD1 }) => {
Specification of medical oxygen ;
- {lists.map((list, index) => ( - + {Object.entries(D1).map((item, index) => ( + ))}
diff --git a/src/components/doc/OX2/OX2TopTableRow.jsx b/src/components/doc/OX2/OX2TopTableRow.jsx index 4e8c07d..3a60c2a 100644 --- a/src/components/doc/OX2/OX2TopTableRow.jsx +++ b/src/components/doc/OX2/OX2TopTableRow.jsx @@ -1,7 +1,10 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import DeleteButton from '../common/DeleteButton'; const OX2TopTableRow = ({ id, onRemove, onChangeD1, num }) => { + const { SetNo1, SetNo2, SetNo3, SetNo4, SetNo5, SetNo6, SetNo7 } = useSelector(state => state.ox2.D1[id]); + const checkBoxArgument = ({ target }) => onChangeD1({ target, id }) return (
@@ -9,25 +12,25 @@ const OX2TopTableRow = ({ id, onRemove, onChangeD1, num }) => { {'SET NO.' + num}
- +
- +
- +
- +
- +
- +
- +
onRemove(id)}> diff --git a/src/containers/doc/OX2Container.js b/src/containers/doc/OX2Container.js index 0bca9b6..896354f 100644 --- a/src/containers/doc/OX2Container.js +++ b/src/containers/doc/OX2Container.js @@ -1,17 +1,37 @@ -import axios from "axios"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import SaveModal from "../../components/common/SaveModal"; -import CompleteModal from "../../components/common/CompleteModal"; -import OX2Form from "../../components/doc/OX2/OX2Form"; -import useStorage from "../../hooks/useStorage"; -import { addInitialState, addInitialStateD2, changeFieldD1, changeField, deleteInitialState, deleteInitialStateD2, storage, changeTextArea, changeDatePicker } from "../../redux/modules/ox2"; +import axios from 'axios'; +import { useCallback, useEffect, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import SaveModal from '../../components/common/SaveModal'; +import CompleteModal from '../../components/common/CompleteModal'; +import OX2Form from '../../components/doc/OX2/OX2Form'; +import useStorage from '../../hooks/useStorage'; +import { + addInitialState, + addInitialStateD2, + changeFieldD1, + changeField, + deleteInitialState, + deleteInitialStateD2, + changeTextArea, + changeDatePicker, + getOX2h, + getOX2data, + ox2Initialize, +} from '../../redux/modules/ox2'; +import getItemData from '../../components/common/getItemData'; const OX2Container = () => { const dispatch = useDispatch(); const [units, setUnits] = useState([]); - const state = useSelector(state => state.ox2); - const { visible, showModal, commVisible, showCommModal, hideModal } = useStorage() + const ox2state = useSelector(state => state.ox2); + const { + visible, + showModal, + commVisible, + showCommModal, + hideModal, + setState, + } = useStorage(); const datas = [ 'MASKS CHECKED', 'BREATHING VALVE CHECKED', @@ -23,63 +43,26 @@ const OX2Container = () => { 'DELETE', ]; - const nextId = useRef(2); - const [lists, setLists] = useState([ - { - id: 0, - }, - ]); - const nextIdD2 = useRef(1); - const [D2Lists, setD2Lists] = useState([ - { - id: 0, - }, - ]) - - const onInsert = useCallback( - () => { - setLists(lists.concat({ - id: nextId.current = lists.length ? Math.max(...lists.map(list => list.id)) + 1 : 0 - })); - dispatch( - addInitialState(nextId.current = lists.length ? Math.max(...lists.map(list => list.id)) + 1 : 0)) - }, - [dispatch, lists] - ); + const onInsert = useCallback(() => { + dispatch(addInitialState(Object.keys(ox2state.D1).length)); + }, [dispatch, ox2state.D1]); - const onInsertD2 = useCallback( - () => { - setD2Lists(D2Lists.concat({ - id: nextIdD2.current = D2Lists.length ? Math.max(...D2Lists.map(list => list.id)) + 1 : 0 - })); - dispatch( - addInitialStateD2(nextIdD2.current = D2Lists.length ? Math.max(...D2Lists.map(list => list.id)) + 1 : 0)) - }, - [D2Lists, dispatch] - ); + const onInsertD2 = useCallback(() => { + dispatch(addInitialStateD2(Object.keys(ox2state.D2).length)); + }, [dispatch, ox2state.D2]); const onRemove = useCallback( id => { - if (lists.length > 1) { - setLists(lists.filter(list => list.id !== id)); - dispatch( - deleteInitialState(...lists.filter(list => list.id === id)) - ) - } + dispatch(deleteInitialState(id)); }, - [dispatch, lists], + [dispatch] ); const onRemoveD2 = useCallback( id => { - if (D2Lists.length > 1) { - setD2Lists(D2Lists.filter(list => list.id !== id)); - dispatch( - deleteInitialStateD2(...D2Lists.filter(list => list.id === id)) - ) - } + dispatch(deleteInitialStateD2(id)); }, - [dispatch, D2Lists], + [dispatch] ); const onChangeD1 = ({ id, target }) => { @@ -90,8 +73,8 @@ const OX2Container = () => { checked, name, }) - ) - } + ); + }; const onChange = ({ id, target }) => { const { value, name, dataset } = target; @@ -102,15 +85,13 @@ const OX2Container = () => { value, dataset, }) - ) - } + ); + }; const onChangeTextArea = e => { const { value } = e.target; - dispatch( - changeTextArea(value) - ) - } + dispatch(changeTextArea(value)); + }; const onChangeDatePicker = ({ id, target }) => { const { name, value, form } = target; @@ -121,14 +102,19 @@ const OX2Container = () => { value, form, }) - ) - } + ); + }; - const onStorage = async ( e, form, path ) => { + const onStorage = async (e, form, path) => { e.preventDefault(); try { - const res = await axios.post(`${process.env.REACT_APP_SERVER_URL}/api/doc/${form}/inspection/${path}`, state, { - headers: { Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}` }, + const res = await axios.post( + `${process.env.REACT_APP_SERVER_URL}/api/doc/${form}/inspection/${path}`, + ox2state, + { + headers: { + Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}`, + }, } ); hideModal(); @@ -136,32 +122,61 @@ const OX2Container = () => { } catch (e) { console.log(e); } - } - useEffect(() => { + }; + + const getUnits = async () => { + const res = await axios.get( + `${process.env.REACT_APP_SERVER_URL}/api/checkedInfo`, + { + headers: { + Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}`, + }, + } + ); + setUnits(res.data.data); + }; + + const getData = useCallback(async () => { dispatch( - storage({ - RCVNO: localStorage.getItem('rcvNo'), - VESSELNM: localStorage.getItem('shipNm'), + getOX2h({ + RCVNO: JSON.parse(localStorage.getItem('rcvNo')), + VESSELNM: JSON.parse(localStorage.getItem('shipNm')), + CERTNO: JSON.parse(localStorage.getItem('certNo')), }) - ) - }, [dispatch]) + ); + const data = await getItemData(setState); + + if (!data) return; + + await dispatch(getOX2data(data)); + }, [dispatch, setState]); useEffect(() => { - (async () => { - const res = await axios.get(`${process.env.REACT_APP_SERVER_URL}/api/checkedInfo`, { - headers: { Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}` }, - }); - setUnits(res.data.data); - })(); - }, []); + getUnits(); + getData(); + + return () => { + dispatch(ox2Initialize()); + }; + }, [dispatch, getData, setState]); return ( <> {visible && ( - + )} {commVisible && ( - + )} { onChange={onChange} onRemove={onRemove} onInsert={onInsert} - lists={lists} - D2Lists={D2Lists} onChangeTextArea={onChangeTextArea} datas={datas} onInsertD2={onInsertD2} @@ -180,7 +193,7 @@ const OX2Container = () => { showCommModal={showCommModal} /> - ) -} + ); +}; -export default OX2Container; \ No newline at end of file +export default OX2Container; diff --git a/src/redux/modules/ox2.js b/src/redux/modules/ox2.js index e988b8c..d0ed8bb 100644 --- a/src/redux/modules/ox2.js +++ b/src/redux/modules/ox2.js @@ -9,7 +9,9 @@ const ADD_INITIALSTATE = 'ox2/ADD_INITIALSTATE'; const ADD_INITIALSTATE_D2 = 'ox2/ADD_INITIALSTATE_D2'; const DELETE_INITIALSTATE = 'ox2/DELETE_INITIALSTATE'; const DELETE_INITIALSTATE_D2 = 'ox2/DELETE_INITIALSTATE_D2'; -const STORAGE = 'ox2/TEMPORARY_STORAGE'; +const GET_OX2_H = 'ox2/GET_OX2_H'; +const GET_OX2_DATA = 'ox2/GET_OX2_DATA'; +const OX2_INITIALIZE = 'ox2/OX2_INITIALIZE'; // CREATE ACTION export const changeFieldD1 = createAction(CHANGE_FIELD_D1); @@ -20,18 +22,19 @@ export const addInitialState = createAction(ADD_INITIALSTATE); export const addInitialStateD2 = createAction(ADD_INITIALSTATE_D2); export const deleteInitialState = createAction(DELETE_INITIALSTATE); export const deleteInitialStateD2 = createAction(DELETE_INITIALSTATE_D2); -export const storage = createAction(STORAGE); - +export const getOX2h = createAction(GET_OX2_H); +export const getOX2data = createAction(GET_OX2_DATA); +export const ox2Initialize = createAction(OX2_INITIALIZE); // INITIAL STATE const initialState = { H: { - RCVNO: "", - VESSELNM: "", + RCVNO: '', + VESSELNM: '', }, D1: { - 0: { - SetNo1:1, + 0: { + SetNo1: 1, SetNo2: 1, SetNo3: 1, SetNo4: 1, @@ -41,22 +44,21 @@ const initialState = { }, }, D2: { - 0: { - Manuf:"", - Volume: "", - WorkPress: "", + 0: { + Manuf: '', + Volume: '', + WorkPress: '', TestDt: new Date(), - SerialNo: "", - Perform: "", + SerialNo: '', + Perform: '', }, }, - D3 : "", -} + D3: '', +}; // REDUCER const ox2Reducer = handleActions( { - [CHANGE_FIELD_D1]: (state, { payload: { id, name, checked } }) => { if (checked) { return { @@ -66,9 +68,9 @@ const ox2Reducer = handleActions( [id]: { ...state.D1[id], [name]: 1, - } - } - } + }, + }, + }; } if (!checked) { return { @@ -78,42 +80,42 @@ const ox2Reducer = handleActions( [id]: { ...state.D1[id], [name]: 0, - } - } - } + }, + }, + }; } }, [CHANGE_FIELD]: (state, { payload: { id, name, value, dataset } }) => { return { ...state, [dataset.form]: { - ...state[dataset.form], + ...state[dataset.form], [id]: { ...state[dataset.form][id], [name]: value, }, - } - } + }, + }; }, [CHANGE_TEXT_AREA]: (state, { payload: value }) => { return { ...state, D3: value, - } + }; }, [CHANGE_DATE_PICKER]: (state, { payload: { id, name, value, form } }) => { return { ...state, [form]: { - ...state[form], + ...state[form], [id]: { ...state[form][id], [name]: value, }, - } - } + }, + }; }, - [ADD_INITIALSTATE]: (state, { payload : id }) => { + [ADD_INITIALSTATE]: (state, { payload: id }) => { return { ...state, D1: { @@ -128,8 +130,8 @@ const ox2Reducer = handleActions( SetNo6: 1, SetNo7: 1, }, - } - } + }, + }; }, [ADD_INITIALSTATE_D2]: (state, { payload: id }) => { return { @@ -138,42 +140,41 @@ const ox2Reducer = handleActions( ...state.D2, [id]: { ...state.D2.id, - Manuf:"", - Volume: "", - WorkPress: "", + Manuf: '', + Volume: '', + WorkPress: '', TestDt: new Date(), - SerialNo: "", - Perform: "", - } - } - } + SerialNo: '', + Perform: '', + }, + }, + }; }, - [DELETE_INITIALSTATE]: (state, { payload: { id } }) => { - const { [id]: value, ...restItems } = state.D1; - return { - ...state, - D1: restItems, - } + [DELETE_INITIALSTATE]: (state, { payload: id }) => { + delete state.D1[id]; + return { ...state, D1: state.D1 }; }, - [DELETE_INITIALSTATE_D2]: (state, { payload: { id } }) => { - const { [id]: value, ...restItems } = state.D2; + [DELETE_INITIALSTATE_D2]: (state, { payload: id }) => { + delete state.D2[id]; + return { ...state, D2: state.D2 }; + }, + [GET_OX2_H]: (state, { payload }) => { return { ...state, - D2: restItems, - } + H: payload, + }; }, - [STORAGE]: (state, { payload : { RCVNO, VESSELNM } }) => { + [GET_OX2_DATA]: (state, { payload: { D1, D2, D3 } }) => { return { ...state, - H: { - ...state.H, - RCVNO, - VESSELNM, - } - } - } + D1, + D2, + D3, + }; + }, + [OX2_INITIALIZE]: () => initialState, }, initialState ); -export default ox2Reducer; \ No newline at end of file +export default ox2Reducer;