From 6b90b4e195be0806ad0170120eba59023760fdb5 Mon Sep 17 00:00:00 2001 From: Kim-Jaemin420 Date: Tue, 18 May 2021 19:31:31 +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/doc/I-1/I1Bottom.jsx | 5 +- src/components/doc/I-1/I1Form.jsx | 4 +- src/components/doc/I-1/I1TableRow.jsx | 22 ++-- src/components/doc/I-1/I1Top.jsx | 8 +- src/containers/doc/I1Container.js | 164 +++++++++++++++----------- src/redux/modules/i.js | 1 - src/redux/modules/i1.js | 111 +++++++++-------- 7 files changed, 179 insertions(+), 136 deletions(-) diff --git a/src/components/doc/I-1/I1Bottom.jsx b/src/components/doc/I-1/I1Bottom.jsx index d7f12f8..3575c95 100644 --- a/src/components/doc/I-1/I1Bottom.jsx +++ b/src/components/doc/I-1/I1Bottom.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 I1Bottom = ({ onChangeTextArea }) => { + const D2 = useSelector(state => state.i1.D2); + return (
Recommendation ;
- +
); diff --git a/src/components/doc/I-1/I1Form.jsx b/src/components/doc/I-1/I1Form.jsx index c539d08..cd33170 100644 --- a/src/components/doc/I-1/I1Form.jsx +++ b/src/components/doc/I-1/I1Form.jsx @@ -16,11 +16,11 @@ const ButtonBox = styled.div` margin: 0 15px; }`; -const I1Form = ({ onChange, onRemove, onInsert, lists, units, onChangeTextArea, showModal, showCommModal }) => { +const I1Form = ({ onChange, onRemove, onInsert, units, onChangeTextArea, showModal, showCommModal }) => { return (
- + diff --git a/src/components/doc/I-1/I1TableRow.jsx b/src/components/doc/I-1/I1TableRow.jsx index 235984a..b2c58e0 100644 --- a/src/components/doc/I-1/I1TableRow.jsx +++ b/src/components/doc/I-1/I1TableRow.jsx @@ -5,38 +5,38 @@ import { useSelector } from 'react-redux'; import DeleteButton from '../common/DeleteButton'; const I1TableRow = ({ id, onRemove, onChange, units }) => { - const { MFGDt } = useSelector(state => state.i1.D1[id]); + const { CylnType, Type, MFGDt, SerialNo, Pressure, Perform } = useSelector(state => state.i1.D1[id]); const inputArg = ({ target }) => onChange({ target, id }); return ( - + - + onChange({ id, target: { name: "MFGDt", value } })} showMonthYearPicker /> - + - + - - {units.map(unit => ( - ))} diff --git a/src/components/doc/I-1/I1Top.jsx b/src/components/doc/I-1/I1Top.jsx index 94dee45..adeb7f6 100644 --- a/src/components/doc/I-1/I1Top.jsx +++ b/src/components/doc/I-1/I1Top.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; import I1TableRow from './I1TableRow'; @@ -50,7 +51,8 @@ const ButtonDiv = styled.div` text-align: center; `; -const I1Top = ({ units, onChange, onRemove, onInsert, lists }) => { +const I1Top = ({ units, onChange, onRemove, onInsert }) => { + const D1 = useSelector(state => state.i1.D1); return ( <> @@ -69,8 +71,8 @@ const I1Top = ({ units, onChange, onRemove, onInsert, lists }) => { - {lists.map(list => ( - + {Object.entries(D1).map(item => ( + ))} diff --git a/src/containers/doc/I1Container.js b/src/containers/doc/I1Container.js index 9f8c042..e403396 100644 --- a/src/containers/doc/I1Container.js +++ b/src/containers/doc/I1Container.js @@ -1,55 +1,47 @@ -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 I1Form from "../../components/doc/I-1/I1Form"; -import useStorage from "../../hooks/useStorage"; -import { addInitialState, changeField, changeTextArea, deleteInitialState, storage } from "../../redux/modules/i1"; +import axios from 'axios'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import SaveModal from '../../components/common/SaveModal'; +import CompleteModal from '../../components/common/CompleteModal'; +import I1Form from '../../components/doc/I-1/I1Form'; +import useStorage from '../../hooks/useStorage'; +import { + addInitialState, + changeField, + changeTextArea, + deleteInitialState, + getI1h, + getI1data, + i1Initialize, +} from '../../redux/modules/i1'; +import getItemData from '../../components/common/getItemData'; const I1Container = () => { const dispatch = useDispatch(); - const nextId = useRef(4); - const state = useSelector(state => state.i1); - const { visible, showModal, commVisible, showCommModal, hideModal } = useStorage() + const i1state = useSelector(state => state.i1); + const { + visible, + showModal, + commVisible, + showCommModal, + hideModal, + setState, + } = useStorage(); const [units, setUnits] = useState([]); - const [lists, setLists] = useState([ - { - id: 0, - }, - { - id: 1, - }, - { - id: 2, - }, - { - id: 3, - } - ]) + + const history = useHistory(); 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 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(i1state.D1).length)); + }, [dispatch, i1state.D1]); const onChange = ({ id, target }) => { const { value, name } = target; @@ -59,69 +51,99 @@ const I1Container = () => { value, name, }) - ) + ); }; const onChangeTextArea = e => { const { value } = e.target; - dispatch( - changeTextArea(value) - ) - } + dispatch(changeTextArea(value)); + }; - 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}`, + i1state, + { + headers: { + Authorization: `Bearer ${sessionStorage.getItem('KOSCO_token')}`, + }, } ); hideModal(); + await history.push('/inspection'); console.log('res', res); } catch (e) { console.log(e); } - } + }; - console.log('state', state); - 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'), + getI1h({ + RCVNO: JSON.parse(localStorage.getItem('rcvNo')), + VESSELNM: JSON.parse(localStorage.getItem('shipNm')), + CERTNO: JSON.parse(localStorage.getItem('certNo')) || null, }) - ) - }, [dispatch]) + ); + const data = await getItemData(setState); + + if (!data) return; + + await dispatch(getI1data(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(i1Initialize()); + }; + }, [dispatch, getData]); return ( <> {visible && ( - + )} {commVisible && ( - + )} - ) -} + ); +}; -export default I1Container \ No newline at end of file +export default I1Container; diff --git a/src/redux/modules/i.js b/src/redux/modules/i.js index 95299c9..080ad6e 100644 --- a/src/redux/modules/i.js +++ b/src/redux/modules/i.js @@ -155,7 +155,6 @@ const iReducer = handleActions( }, [DELETE_INITIALSTATE]: (state, { payload: id }) => { - console.log(id); delete state.D1[id]; return { ...state, D1: state.D1 }; }, diff --git a/src/redux/modules/i1.js b/src/redux/modules/i1.js index ef99986..2e77e4f 100644 --- a/src/redux/modules/i1.js +++ b/src/redux/modules/i1.js @@ -6,55 +6,61 @@ const CHANGE_TEXT_AREA = 'i1/CHANGE_TEXT_AREA'; const ADD_INITIALSTATE = 'i1/ADD_INITIALSTATE'; const DELETE_INITIALSTATE = 'i1/DELETE_INITIALSTATE'; const STORAGE = 'i1/STORAGE'; +const GET_I1_DATA = 'i1/GET_I1_DATA'; +const GET_I1_H = 'i1/GET_I1_H'; +const I1_INITIALIZE = 'i1/INITIALIZE'; // CREATE ACTION export const changeField = createAction(CHANGE_FIELD); export const changeTextArea = createAction(CHANGE_TEXT_AREA); export const addInitialState = createAction(ADD_INITIALSTATE); export const deleteInitialState = createAction(DELETE_INITIALSTATE); export const storage = createAction(STORAGE); +export const getI1data = createAction(GET_I1_DATA); +export const getI1h = createAction(GET_I1_H); +export const i1Initialize = createAction(I1_INITIALIZE); -// INITIAL STATE +// INITIAL STATE const initialState = { H: { - RCVNO: "", - VESSELNM: "", + RCVNO: '', + VESSELNM: '', }, D1: { 0: { - CylnType: "", - Type: "", + CylnType: '', + Type: '', MFGDt: new Date(), - SerialNo: "", - Pressure: "", - Perform: "", + SerialNo: '', + Pressure: '', + Perform: '', }, 1: { - CylnType: "", - Type: "", + CylnType: '', + Type: '', MFGDt: new Date(), - SerialNo: "", - Pressure: "", - Perform: "", + SerialNo: '', + Pressure: '', + Perform: '', }, 2: { - CylnType: "", - Type: "", + CylnType: '', + Type: '', MFGDt: new Date(), - SerialNo: "", - Pressure: "", - Perform: "", + SerialNo: '', + Pressure: '', + Perform: '', }, 3: { - CylnType: "", - Type: "", + CylnType: '', + Type: '', MFGDt: new Date(), - SerialNo: "", - Pressure: "", - Perform: "", - } + SerialNo: '', + Pressure: '', + Perform: '', + }, }, - D2: "", -} + D2: '', +}; // REDUCER const i1Reducer = handleActions( @@ -68,15 +74,15 @@ const i1Reducer = handleActions( ...state.D1[id], [name]: value, }, - } - } + }, + }; }, - + [CHANGE_TEXT_AREA]: (state, { payload: value }) => { return { ...state, D2: value, - } + }; }, [ADD_INITIALSTATE]: (state, { payload: id }) => { @@ -85,23 +91,20 @@ const i1Reducer = handleActions( D1: { ...state.D1, [id]: { - CylnType: "", - Type: "", + CylnType: '', + Type: '', MFGDt: new Date(), - SerialNo: "", - Pressure: "", - Perform: "", + SerialNo: '', + Pressure: '', + 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 }; }, [STORAGE]: (state, { payload: { RCVNO, VESSELNM } }) => { return { @@ -110,11 +113,25 @@ const i1Reducer = handleActions( ...state.H, RCVNO, VESSELNM, - } - } - } + }, + }; + }, + [GET_I1_DATA]: (state, { payload: { D1, D2 } }) => { + return { + ...state, + D1, + D2, + }; + }, + [GET_I1_H]: (state, { payload }) => { + return { + ...state, + H: payload, + }; + }, + [I1_INITIALIZE]: () => initialState, }, initialState ); -export default i1Reducer; \ No newline at end of file +export default i1Reducer;