Merge pull request #98 from Kim-Jaemin420/develop

문서 I-1 수정
kosco-project · May 18, 2021 · b9c0d66 · b9c0d66
2 parents e52690e + 95e8bad
commit b9c0d66
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 136 deletions.
diff --git 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 (
     <BottomBox>
       <div className='title'>Recommendation ;</div>
       <div className='description'>
-        <textarea onChange={onChangeTextArea}></textarea>
+        <textarea value={D2} onChange={onChangeTextArea}></textarea>
       </div>
     </BottomBox>
   );

diff --git 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 (
     <form>
       <Info />
-      <I1Top units={units} onChange={onChange} onRemove={onRemove} onInsert={onInsert} lists={lists}/>
+      <I1Top units={units} onChange={onChange} onRemove={onRemove} onInsert={onInsert} />
       <I1Bottom onChangeTextArea={onChangeTextArea}/>
       <ButtonBox>
         <DynTemporaryStorageButton showModal={showModal}/>

diff --git 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 (
     <tr>
       <td>
-        <input type='text' onChange={inputArg} name="CylnType"/>
+        <input type='text' value={CylnType} onChange={inputArg} name="CylnType"/>
       </td>
       <td>
-        <input type='text' onChange={inputArg} name="Type"/>
+        <input type='text' value={Type} onChange={inputArg} name="Type"/>
       </td>
       <td>
         <DatePicker
-          selected={MFGDt}
+          selected={new Date(MFGDt)}
           name="MFGDt"
-          dateFormat="MMM.yyyy"
+          dateFormat="yyyy-MM"
           onChange={value => onChange({ id, target: { name: "MFGDt", value } })}
           showMonthYearPicker
         />
       </td>
       <td>
-        <input type='text' onChange={inputArg} name="SerialNo"/>
+        <input type='text' value={SerialNo} onChange={inputArg} name="SerialNo"/>
       </td>
       <td>
-        <input type='text' onChange={inputArg} name="Pressure"/>
+        <input type='text' value={Pressure} onChange={inputArg} name="Pressure"/>
       </td>
       <td>
-        <select onChange={inputArg} name="Perform">
+        <select value={Perform} onChange={inputArg} name="Perform">
           <option defaultValue="선택해주세요">선택해주세요</option>
-          {units.map(unit => (
-            <option key={unit.CdNm} value={unit.CD}>
-              {unit.CdNm}
+          {units.map(({CdNm, CD}) => (
+            <option key={CdNm} value={CD}>
+              {CdNm}
             </option>
           ))}
         </select>

diff --git 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 }) => {
             </tr>
           </thead>
           <tbody>
-            {lists.map(list => (
-              <I1TableRow key={list.id} id={list.id} onRemove={onRemove} units={units} onChange={onChange}/>
+             {Object.entries(D1).map(item => (
+              <I1TableRow key={item[0]} id={item[0]} onRemove={onRemove} units={units} onChange={onChange} />
             ))}
           </tbody>
         </table>

diff --git 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 && (
-        <SaveModal form="I-1" path="save" onStorage={onStorage} hideModal={hideModal}/>
+        <SaveModal
+          form='I-1'
+          path='save'
+          onStorage={onStorage}
+          hideModal={hideModal}
+        />
       )}
       {commVisible && (
-        <CompleteModal form="I-1" path="complete" onStorage={onStorage} hideModal={hideModal}/>
+        <CompleteModal
+          form='I-1'
+          path='complete'
+          onStorage={onStorage}
+          hideModal={hideModal}
+        />
       )}
       <I1Form
         onChange={onChange}
         onRemove={onRemove}
         onInsert={onInsert}
-        lists={lists}
         units={units}
         onChangeTextArea={onChangeTextArea}
         showModal={showModal}
         showCommModal={showCommModal}
       />
     </>
-  )
-}
+  );
+};
 
-export default I1Container
+export default I1Container;
diff --git 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 };
     },