kcscDev/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx

import React, {useState, useCallback} from 'react';
import {useParams} from 'react-router-dom';

import * as EgovNet from 'api/egovFetch';
import DownloadModal from './DownloadModal'
import StandardCodeSearchForm from "./StandardCodeSearchForm";
import Loading from "components/Loading";
import StandardCodeList from "./StandardCodeList";

import Modal from "react-bootstrap/Modal";
import HistoryModal from "./HistoryModal";

function StandardCodePage({}) {
    const {listCode} = useParams();
    const [listData, setListData] = useState([])
    const [listLoading, setListLoading] = useState(true);
    const [filterData, setFilterData] = useState('');
    const [resultCnt, setResultCnt] = useState(0);
    const [remarkCnt, setRemarkCnt] = useState(0);
    const [modalContent, setModalContent] = useState([]);

    const [show, setShow] = useState(false);
    function close() {
        setShow(false);
    }

    const retrieveList = useCallback((searchCondition) => {
        setListLoading(true)
        EgovNet.requestFetch('/standardCode/standard-code-list'+EgovNet.convParams(searchCondition),
            {
                method: "GET",
                headers: {
                    'Content-type': 'application/json',
                }
            },
            (resp) => {
                setListData(resp.result.resultList);
                setResultCnt(resp.result.resultCnt.allCnt);
                setRemarkCnt(resp.result.resultCnt.remarkCnt);
                setListLoading(false)
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );

    }, []);

    function downloadModal(){
        setShow(true);
        setModalContent(<DownloadModal closeFn={close}/>)
    }

    function historyModal(item){
        setShow(true);
        setModalContent(<HistoryModal closeFn={close} standardCode={item}/>)
    }

    return (
        <div className="">
            <div className="c_wrap">
                {/*<div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
                        <li>건설기준코드</li>
                        <li><Link to={URL.STANDARD_CODE_LIST} >건설기준코드 검색</Link></li>
                    </ul>
                </div>*/}
                <div className="layout">
                    <div className="contents NOTICE_LIST" id="contents">
                        {/*<div className="top_tit">
                            <h1 className="tit_1">건설기준코드 검색</h1>
                        </div>*/}
                        <div className="StandardCodeList container">
                            <div className="c_wrap codeListContent">
                                <div className="layout">
                                    <div className="contents NOTICE_LIST listTableDiv">
                                        <StandardCodeSearchForm param={listCode?listCode:'10'} reloadFunction={retrieveList} resultCnt={resultCnt} remarkCnt={remarkCnt} downloadModal={downloadModal}/>
                                        <div className="board_list code_list">
                                            <div className="head">
                                                <span>대분류</span>
                                                <span>중분류</span>
                                                <span>코드번호</span>
                                                <span>코드명</span>
                                                <span>개정이력</span>
                                                <span className={"text-start"}>보기</span>
                                                <span>즐겨찾기</span>
                                            </div>
                                            {
                                                listLoading?(<Loading loadingState={true}/>):(
                                                    <StandardCodeList listData={listData} filterData={filterData} getHistoryModal={historyModal}/>
                                                )
                                            }
                                        </div>
                                        <Modal size={"lg"} show={show} onHide={close}>
                                            {modalContent}
                                        </Modal>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default StandardCodePage;