Tristan Yang
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useParams, useNavigate, useSearchParams } from "react-router-dom";
|
|
import LeaveChannel from "../../common/component/LeaveChannel";
|
|
import StyledSettingContainer from "../../common/component/StyledSettingContainer";
|
|
import DeleteConfirmModal from "./DeleteConfirmModal";
|
|
import useNavs from "./navs";
|
|
import { useAppSelector } from "../../app/store";
|
|
|
|
let from: string = "";
|
|
|
|
export default function ChannelSetting() {
|
|
const { cid = 0 } = useParams();
|
|
const { loginUser, channel } = useAppSelector((store) => {
|
|
return {
|
|
loginUser: store.authData.user,
|
|
channel: cid ? store.channels.byId[+cid] : undefined
|
|
};
|
|
});
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const navs = useNavs(+cid);
|
|
const flattenNavs = navs
|
|
.map(({ items }) => {
|
|
return items;
|
|
})
|
|
.flat();
|
|
const navKey = searchParams.get("nav");
|
|
from = from ?? (searchParams.get("f") || "/");
|
|
const [deleteConfirm, setDeleteConfirm] = useState(false);
|
|
const [leaveConfirm, setLeaveConfirm] = useState(false);
|
|
const close = () => {
|
|
navigate(from);
|
|
from = "";
|
|
};
|
|
const toggleDeleteConfirm = () => {
|
|
setDeleteConfirm((prev) => !prev);
|
|
};
|
|
const toggleLeaveConfirm = () => {
|
|
setLeaveConfirm((prev) => !prev);
|
|
};
|
|
if (!cid) return null;
|
|
const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
|
|
const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
|
|
const canLeave = !channel?.is_public;
|
|
|
|
return (
|
|
<>
|
|
<StyledSettingContainer
|
|
nav={currNav}
|
|
closeModal={close}
|
|
title="Channel Setting"
|
|
navs={navs}
|
|
dangers={[
|
|
canLeave && {
|
|
title: "Leave Channel",
|
|
handler: toggleLeaveConfirm
|
|
},
|
|
canDelete && {
|
|
title: "Delete Channel",
|
|
handler: toggleDeleteConfirm
|
|
}
|
|
]}
|
|
>
|
|
{currNav.component}
|
|
</StyledSettingContainer>
|
|
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+cid} />}
|
|
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfirm} id={+cid} />}
|
|
</>
|
|
);
|
|
}
|