Modal: Chatting

sparcs-kaist · May 1, 2023 · 5e825fc · 5e825fc
1 parent a8ae23a
commit 5e825fc
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 86 deletions.
diff --git a/...ges/Chatting/MessagesBody/PopupReport.tsx → ...ents/ModalPopup/ModalReportInChatting.tsx b/...ges/Chatting/MessagesBody/PopupReport.tsx → ...ents/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>(ReportTypes.NoSettlement);
+  const [type, setType] = useState<Report["type"]>("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<HTMLSelectElement>) => {
-    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<HTMLSpanElement>) => {
@@ -192,13 +186,13 @@ const PopupReport = ({
             onChange={handleType}
             disabled={isSubmitted}
           >
-            <option value={ReportTypes.NoSettlement}>정산을 하지 않음</option>
-            <option value={ReportTypes.NoShow}>택시에 동승하지 않음</option>
-            <option value={ReportTypes.ETCReason}>기타 사유</option>
+            <option value="no-settlement">정산을 하지 않음</option>
+            <option value="no-show">택시에 동승하지 않음</option>
+            <option value="etc-reason">기타 사유</option>
           </select>
         </div>
       </div>
-      {type === ReportTypes.ETCReason ? (
+      {type === "etc-reason" ? (
         <div style={styleETC}>
           <EditRoundedIcon style={styleIcon} />
           <span
@@ -259,4 +253,4 @@ const PopupReport = ({
   );
 };
 
-export default PopupReport;
+export default ModalReportInChatting;
diff --git a/src/pages/Chatting/MessagesBody/ChatSet.jsx b/src/pages/Chatting/MessagesBody/ChatSet.jsx
@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import { useCallback, useEffect, useState } from "react";
 
 import LinkCopy from "components/Link/LinkCopy";
+import ModalReportInChatting from "components/ModalPopup/ModalReportInChatting";
 import ProfileImg from "components/User/ProfileImg";
 import ImageFullscreen from "pages/Chatting/MessagesBody/ImageFullscreen";
 
@@ -279,13 +280,6 @@ const ChatSet = (props) => {
     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 (
     <div style={style}>
+      <ModalReportInChatting
+        isOpen={isOpenReportInChatting}
+        onChangeIsOpen={setIsOpenReportInChatting}
+        path={props.chats[0].authorProfileUrl}
+        name={props.chats[0].authorName}
+        reportedId={props.chats[0].authorId}
+      />
       {fullImage ? (
         <ImageFullscreen path={fullImage} onClose={onClose} />
       ) : null}
@@ -324,7 +331,7 @@ const ChatSet = (props) => {
           width: "53px",
         }}
       >
-        <div style={styleProfCont} onClick={handleOpen}>
+        <div style={styleProfCont} onClick={handleOpenReportInChatting}>
           <ProfileImg path={props.chats[0].authorProfileUrl} />
         </div>
       </div>
@@ -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
@@ -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(
             <ChatSet
-              key={"chat" + chatsCache[0].time}
+              key={"chat" + getChatUnquewKey(chatsCache[0])}
               chats={chatsCache}
               {...chatSetCommonProps}
             />
@@ -72,7 +54,7 @@ const MessagesBody = (props) => {
         if (chatsCache) {
           list.push(
             <ChatSet
-              key={"chat" + chatsCache[0].time}
+              key={"chat" + getChatUnquewKey(chatsCache[0])}
               chats={chatsCache}
               {...chatSetCommonProps}
             />
@@ -88,7 +70,7 @@ const MessagesBody = (props) => {
         if (chatsCache) {
           list.push(
             <ChatSet
-              key={"chat" + chatsCache[0].time}
+              key={"chat" + getChatUnquewKey(chatsCache[0])}
               chats={chatsCache}
               {...chatSetCommonProps}
             />
@@ -97,7 +79,7 @@ const MessagesBody = (props) => {
         }
         list.push(
           <ChatInOut
-            key={"inout" + currentMoment}
+            key={"inout" + getChatUnquewKey(item)}
             type={item.type}
             users={item.inOutNames}
           />
@@ -115,7 +97,7 @@ const MessagesBody = (props) => {
         ) {
           list.push(
             <ChatSet
-              key={"chat" + chatsCache[0].time}
+              key={"chat" + getChatUnquewKey(chatsCache[0])}
               chats={chatsCache}
               {...chatSetCommonProps}
             />
@@ -130,7 +112,7 @@ const MessagesBody = (props) => {
     if (chatsCache) {
       list.push(
         <ChatSet
-          key={"chatLast" + chatsCache[0].time}
+          key={"chatLast" + getChatUnquewKey(chatsCache[0])}
           chats={chatsCache}
           {...chatSetCommonProps}
         />
@@ -139,10 +121,6 @@ const MessagesBody = (props) => {
     return list;
   }, [props.chats, userOid]);
 
-  const onClose = () => {
-    setIsOpen(false);
-  };
-
   return (
     <div
       className="chatting-body"
@@ -158,13 +136,6 @@ const MessagesBody = (props) => {
       onScroll={props.handleScroll}
     >
       {chats}
-      <PopupReport
-        isOpen={isOpen}
-        onClose={onClose}
-        path={path}
-        name={name}
-        reportedId={reportedId}
-      />
     </div>
   );
 };

diff --git 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
@@ -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<Chat | CheckoutChat>
+): Array<Chat | CheckoutChat> => {
+  return [];
+};
diff --git 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
@@ -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,23 +41,31 @@ declare global {
     ];
   };
   type Chat = {
-    roomId: string;
+    roomId: string; // 방의 objectId
     type:
       | "text"
       | "in"
       | "out"
       | "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: {