상위페이지
// filter select option
const option = [
{
value: "OS",
name: "OS",
},
{
value: "store",
name: "스토어",
},
];
const AppVersion = () => {
const classes = useStyles();
const navigate = useNavigate();
const [fetchData, setFetchData] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
// 페이지네이션
const [totalUser, setTotalUser] = useState(0); //임시
const [totalPage, setTotalPage] = useState(5); //임시
const [currentPage, setCurrentPage] = useState(1);
const postsPerPage = 10;
const getTotalUserCnt = () => {
axios
.get(
`http://localhost:3001/api/version/total?s=${selectVal}&v=${inputVal}`,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
},
}
)
.then(({ data }) => {
console.log(data);
setTotalUser(data.userCount);
});
};
const changePage = (page) => {
axios
.get(
`http://localhost:3001/api/version/pagination?size=${postsPerPage}&page=${page}&s=${selectVal}&v=${inputVal}`,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
},
}
)
.then(({ data }) => {
console.log(data);
setFetchData(data);
})
.then(setIsLoaded(true));
};
const handlePageChange = (page) => {
setCurrentPage(page);
console.log("page -------------------->", page);
};
const onClickAddVer = () => {
// AddAppVer.js
navigate("/service/app_version/add");
};
const onClickTarget = (user) => {
navigate("/service/app_version/details", { state: user });
};
console.log(fetchData);
console.log(isLoaded);
// 필터
const [selectVal, setSelectVal] = useState("OS");
const [inputVal, setInputVal] = useState("");
const [targetIdx, setTargetIdx] = useState();
const handleNameChange = (e) => {
setInputVal(e.target.value);
};
const onChangeSelect = (event) => {
setSelectVal(event.target.value);
};
// 업데이트 알림 모달
const [modalOpen, setModalOpen] = useState(false);
const openModal = (index) => {
setModalOpen(true);
setTargetIdx(index);
};
const closeModal = () => {
setModalOpen(false);
};
const [targetData, setTargetData] = useState([]);
// console.log('fetchData',fetchData)
// 업데이트 버튼 활성화 시 버전 업데이트 실행
const updateAppVersion = (e) => {
e.preventDefault();
// console.log("::::::::", fetchData[targetIdx]);
const newdata = JSON.parse(JSON.stringify(fetchData[targetIdx]));
newdata.status = "Y";
newdata.noticeKey=newdata.version_idx;
axios
.post(
`http://localhost:3001/api/version/update`,
{ ...newdata },
{
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
},
}
)
.then(({ data }) => {
console.log("+-+-+-+-+-", data);
// console.log("::::::::: newdata", newdata);
const new_data = JSON.parse(JSON.stringify(fetchData));
new_data[targetIdx].status = "Y";
setFetchData(new_data);
closeModal();
});
};
useEffect(() => {
changePage(1);
}, []);
return (
<div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
<div className={classes.root}>
<TableHeader title="App 버전 관리" />
<FilterSection
left={
<>
<SelectBox
value={selectVal}
onChange={onChangeSelect}
option={option}
/>
<input
className={classes.filterInput}
onChange={handleNameChange}
/>
<button className={classes.searchBtn}>검색</button>
</>
}
right={
<button onClick={onClickAddVer} className={classes.saveBtn}>
등록
</button>
}
/>
<AppVersionTable
fetchData={fetchData}
isLoaded={isLoaded}
onClickTarget={onClickTarget}
openModal={openModal}
/>
<Pagination
activePage={currentPage}
totalItemsCount={postsPerPage * totalPage} // 총 포스트 갯수
itemsCountPerPage={postsPerPage} // 페이지당 보여줄 포스트 갯수
pageRangeDisplayed={10} // 페이저 갯수
prevPageText={"‹"}
nextPageText={"›"}
onChange={handlePageChange}
/>
<UpdateAlertModal
open={modalOpen}
close={closeModal}
header="업데이트"
updateAppVersion={updateAppVersion}
>
<main>APP 업데이트를 시작합니다.</main>
</UpdateAlertModal>
</div>
</div>
);
};
export default AppVersion;하위 페이지
<tbody>
{isLoaded &&
fetchData?.map((i, index) => {
return (
<tr key={index} className={classes.tableTr}>
{/* 번호 */}
<td className={classes.td}>{i.version_idx}</td>
{/* 등록일 */}
<td className={classes.td}>{i.reg_dttm}</td>
{/* 스토어 */}
<td className={classes.td}>{i.store}</td>
{/* OS */}
<td className={classes.td}>{i.os}</td>
{/* 최신 APP 버전 */}
<td className={classes.td}>
<span
onClick={() => onClickTarget(i)}
className={classes.idLink}
>
{i.late_app_version}
</span>
</td>
{/* 최소 APP 버전 */}
<td className={classes.td}>{i.min_app_version}</td>
{/* 업데이트 유형 */}
<td className={classes.td}>{i.update_type}</td>
{/* 업데이트 */}
<td className={classes.td}>
<span
onClick={() => openModal(index)}
className={
i.status == "N"
? classes.uptInactive
: i.update_type === "choice"
? classes.uptActiveBlue
: classes.uptActiveRed
}
>
Update
</span>
</td>
</tr>
);
})}
{/* 검색결과가 없습니다. */}
{/* <tr>
<td colSpan="8" className={classes.noDataText}>
검색 결과가 없습니다.
</td>
</tr> */}
</tbody>
해당 버튼이 있는 모달
export const UpdateAlertModal = (props) => {
const classes = useStyles();
const { open, close, header, updateAppVersion } = props;
return (
<div className={open ? "openModal modal" : "modal"}>
{open ? (
<section>
<header>
<img
src={images.icons.BELL_IC_R}
alt="업데이트 알림 아이콘"
className="modalIcon"
/>
{header}
</header>
<main>{props.children}</main>
<footer className="modalBtns">
<button className={classes.backBtn} onClick={close}>
취소
</button>
{/* onClick 바꿔야함 */}
{/* <button className={classes.deleteBtn} onClick={close}>
확인
</button> */}
<button className={classes.deleteBtn} onClick={updateAppVersion}>
확인
</button>
</footer>
</section>
) : null}
</div>
);
};- 하위 페이지에 있는 버튼의 onClick에 index 값을 넘겨줌
---->> onClick={() => openModal(index)} - 인덱스를 설정하여 원하는 곳의 데이터 값만 바꾸기 위해 state를 하나 더 만들어줌
---->> const [targetIdx, setTargetIdx] = useState(); - 상위 페이지에 있는 onpenModal에 index값을 가져와서 setTargetIdx라는 것을 하나 더 만들어서 거기에 넣어줌
---->> const openModal = (index) => {
setModalOpen(true);
setTargetIdx(index); }; - updateAppVersion 라는 버튼을 누를시, 해당 인덱스의 데이터 값이 바뀌도록 설정
---->> const new_data = JSON.parse(JSON.stringify(fetchData));
new_data[targetIdx].status = "Y";
setFetchData(new_data);
const new_data = JSON.parse(JSON.stringify(fetchData)); fetchData를 스트링으로 변환해주는 것
new_data[targetIdx].status = "Y"; new_data에서 해당하는 인덱스의 status 라는 key의 값을 "Y"로 바꿔줌 anychat 관리자 페이지 app version 관리 페이지 코딩중,,,
