From 5e825fc49e6e4c94084593b80468d00509c0be1b Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Mon, 1 May 2023 20:34:01 +0900 Subject: [PATCH] Modal: Chatting --- .../ModalPopup/ModalReportInChatting.tsx} | 36 +++++++-------- src/pages/Chatting/MessagesBody/ChatSet.jsx | 27 ++++++----- src/pages/Chatting/MessagesBody/index.jsx | 45 ++++--------------- src/pages/Chatting/index.jsx | 3 +- src/pages/Chatting/utils.ts | 12 +++++ src/pages/Myroom/R2Myroom.jsx | 4 +- src/types/global.d.ts | 26 ++++++----- 7 files changed, 67 insertions(+), 86 deletions(-) rename src/{pages/Chatting/MessagesBody/PopupReport.tsx => components/ModalPopup/ModalReportInChatting.tsx} (89%) create mode 100644 src/pages/Chatting/utils.ts diff --git a/src/pages/Chatting/MessagesBody/PopupReport.tsx b/src/components/ModalPopup/ModalReportInChatting.tsx similarity index 89% rename from src/pages/Chatting/MessagesBody/PopupReport.tsx rename to src/components/ModalPopup/ModalReportInChatting.tsx index 48dc49452..bb35151ff 100644 --- a/src/pages/Chatting/MessagesBody/PopupReport.tsx +++ b/src/components/ModalPopup/ModalReportInChatting.tsx @@ -15,29 +15,23 @@ import theme from "tools/theme"; import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded"; import EditRoundedIcon from "@mui/icons-material/EditRounded"; -type PopupReportProps = { +type ModalReportInChattingProps = { isOpen: boolean; - onClose: () => void; + onChangeIsOpen: (isOpen: boolean) => void; path: string; name: string; reportedId: string; }; -enum ReportTypes { - NoSettlement = "no-settlement", - NoShow = "no-show", - ETCReason = "etc-reason", -} - -const PopupReport = ({ +const ModalReportInChatting = ({ isOpen, - onClose, + onChangeIsOpen, path, name, reportedId, -}: PopupReportProps) => { +}: ModalReportInChattingProps) => { const axios = useAxios(); - const [type, setType] = useState(ReportTypes.NoSettlement); + const [type, setType] = useState("no-settlement"); const [isSubmitted, setIsSubmitted] = useState(false); const [etcDetail, setEtcDetail] = useState(""); const setAlert = useSetRecoilState(alertAtom); @@ -142,11 +136,11 @@ const PopupReport = ({ }; const handleType = (event: ChangeEvent) => { - setType(event.target.value as ReportTypes); + setType(event.target.value as Report["type"]); }; const handleSubmit = () => { - const data: ReportData = { + const data: Report = { reportedId, type, etcDetail, @@ -162,9 +156,9 @@ const PopupReport = ({ }; const handleClose = () => { - onClose(); + onChangeIsOpen(false); setIsSubmitted(false); - setType(ReportTypes.NoSettlement); + setType("no-settlement"); }; const handleEtcDetail = (event: FormEvent) => { @@ -192,13 +186,13 @@ const PopupReport = ({ onChange={handleType} disabled={isSubmitted} > - - - + + + - {type === ReportTypes.ETCReason ? ( + {type === "etc-reason" ? (
{ minWidth: "fit-content", }; - const handleOpen = () => { - props.setIsOpen(true); - props.setPath(props.chats[0].authorProfileUrl); - props.setName(props.chats[0].authorName); - props.setReportedId(props.chats[0].authorId); - }; - const onClose = () => { setFullImage(""); }; @@ -314,8 +308,21 @@ const ChatSet = (props) => { } }; + const [isOpenReportInChatting, setIsOpenReportInChatting] = useState(false); + const handleOpenReportInChatting = useCallback( + () => setIsOpenReportInChatting(true), + [setIsOpenReportInChatting] + ); + return (
+ {fullImage ? ( ) : null} @@ -324,7 +331,7 @@ const ChatSet = (props) => { width: "53px", }} > -
+
@@ -365,10 +372,6 @@ ChatSet.propTypes = { authorId: PropTypes.string, isBottomOnScroll: PropTypes.func, scrollToBottom: PropTypes.func, - setIsOpen: PropTypes.func, - setPath: PropTypes.func, - setName: PropTypes.func, - setReportedId: PropTypes.func, isSideChat: PropTypes.bool, }; diff --git a/src/pages/Chatting/MessagesBody/index.jsx b/src/pages/Chatting/MessagesBody/index.jsx index cc8dba61c..1a31cf790 100644 --- a/src/pages/Chatting/MessagesBody/index.jsx +++ b/src/pages/Chatting/MessagesBody/index.jsx @@ -1,32 +1,18 @@ import PropTypes from "prop-types"; -import { useMemo, useState } from "react"; +import { useMemo } from "react"; +import { getChatUnquewKey } from "../utils"; import ChatDate from "./ChatDate"; import ChatInOut from "./ChatInOut"; import ChatSet from "./ChatSet"; -import PopupReport from "./PopupReport"; import loginInfoAtom from "atoms/loginInfo"; import { useRecoilValue } from "recoil"; import moment from "tools/moment"; -// Chat { -// roomId: ObjectId, // 방의 objectId -// authorId: ObjectId, // 작성자 objectId -// authorName: String, // 작성자 닉네임 (사용자 입,퇴장 알림 등 전체 메시지일 때: null) -// content: String, // 채팅 content -// time: Date, // UTC 시각 -// type: String // 메시지 종류 (text|in|out|s3img) -// authorProfileUrl: String -// } - const MessagesBody = (props) => { const { oid: userOid } = useRecoilValue(loginInfoAtom) || {}; - const [isOpen, setIsOpen] = useState(false); - const [path, setPath] = useState(""); - const [name, setName] = useState(""); - const [reportedId, setReportedId] = useState(""); const chats = useMemo(() => { const list = []; @@ -39,10 +25,6 @@ const MessagesBody = (props) => { authorId: userOid, isBottomOnScroll: props.isBottomOnScroll, scrollToBottom: props.scrollToBottom, - setIsOpen, - setPath, - setName, - setReportedId, isSideChat: props.layoutType === "sidechat", }; @@ -51,7 +33,7 @@ const MessagesBody = (props) => { if (chatsCache) { list.push( @@ -72,7 +54,7 @@ const MessagesBody = (props) => { if (chatsCache) { list.push( @@ -88,7 +70,7 @@ const MessagesBody = (props) => { if (chatsCache) { list.push( @@ -97,7 +79,7 @@ const MessagesBody = (props) => { } list.push( @@ -115,7 +97,7 @@ const MessagesBody = (props) => { ) { list.push( @@ -130,7 +112,7 @@ const MessagesBody = (props) => { if (chatsCache) { list.push( @@ -139,10 +121,6 @@ const MessagesBody = (props) => { return list; }, [props.chats, userOid]); - const onClose = () => { - setIsOpen(false); - }; - return (
{ onScroll={props.handleScroll} > {chats} -
); }; diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx index c11f2cd5b..8f7886964 100644 --- a/src/pages/Chatting/index.jsx +++ b/src/pages/Chatting/index.jsx @@ -13,6 +13,7 @@ import Container from "./Container"; import Header from "./Header"; import MessageForm from "./MessageForm"; import MessagesBody from "./MessagesBody"; +import { checkoutChat } from "./utils"; import alertAtom from "atoms/alert"; import { useSetRecoilState } from "recoil"; @@ -189,8 +190,6 @@ const Chatting = ({ roomId, layoutType }) => { callingInfScroll.current = null; return; } - - const checkoutChat = { type: "inf-checkout" }; setChats((prevChats) => sortChats([...chats, checkoutChat, ...prevChats]) ); diff --git a/src/pages/Chatting/utils.ts b/src/pages/Chatting/utils.ts new file mode 100644 index 000000000..11dc2d14f --- /dev/null +++ b/src/pages/Chatting/utils.ts @@ -0,0 +1,12 @@ +export const checkoutChat = { type: "inf-checkout" }; +export type CheckoutChat = typeof checkoutChat; + +export const getChatUnquewKey = (chat: Chat): string => { + return `${chat.type}-${chat.authorId}-${chat.time}`; +}; + +export const getCleanupChats = ( + chats: Array +): Array => { + return []; +}; diff --git a/src/pages/Myroom/R2Myroom.jsx b/src/pages/Myroom/R2Myroom.jsx index 4db45e644..7fbf5e885 100644 --- a/src/pages/Myroom/R2Myroom.jsx +++ b/src/pages/Myroom/R2Myroom.jsx @@ -184,10 +184,10 @@ const R2Myroom = (props) => { style={{ position: "fixed", width: "min(390px, calc(50% - 27.5px))", - top: 20, + top: "79px", left: "calc(50% + 7.5px)", height: - "calc(var(--window-inner-height) - 20px - 56px - 15px - env(safe-area-inset-bottom))", + "calc(var(--window-inner-height) - 79px - 56px - 15px - env(safe-area-inset-bottom))", display: "flex", flexDirection: "column", zIndex: theme.zIndex_nav - 1, diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 200871f4c..0959d889c 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -12,12 +12,6 @@ declare global { | `${PixelValue} ${PixelValue} ${PixelValue}` | `${PixelValue} ${PixelValue} ${PixelValue} ${PixelValue}`; type Padding = Margin; - type ReportData = { - reportedId: string; - type: "no-settlement" | "no-show" | "etc-reason"; - etcDetail: string; - time: Date; - }; type Location = { _id: string; enName: string; @@ -47,7 +41,7 @@ declare global { ]; }; type Chat = { - roomId: string; + roomId: string; // 방의 objectId type: | "text" | "in" @@ -55,15 +49,23 @@ declare global { | "s3img" | "payment" | "settlement" - | "account"; - authorId: string; - authorName: string; - authorProfileUrl: string; + | "account"; // 메시지 종류 (text|in|out|s3img) + authorId: string; // 작성자 objectId + authorName?: string; // 작성자 닉네임 (사용자 입,퇴장 알림 등 전체 메시지일 때: null) + authorProfileUrl?: string; content: string; - time: Date; + time: Date; // UTC 시각 isValid: boolean; + inOutNames: [string]; }; + type ReportResponse = { status: number }; + type Report = { + reportedId: string; + type: "no-settlement" | "no-show" | "etc-reason"; + etcDetail: string; + time: Date; + }; interface Window { flutter_inappwebview: {