Merge pull request #187 from homenoc/develop

[fix] Fixed chat pages.

src/components/Dashboard/Dashboard.tsx

@@ -15,7 +15,8 @@ import {
   Theme,
   Box,
   Typography,
-  ListItemButton, List,
+  ListItemButton,
+  List,
 } from '@mui/material'
 import MuiDrawer from '@mui/material/Drawer'
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
@@ -26,14 +27,10 @@ import TocIcon from '@mui/icons-material/Toc'
 import AddIcon from '@mui/icons-material/Add'
 import AutorenewIcon from '@mui/icons-material/Autorenew'
 import ChatIcon from '@mui/icons-material/Chat'
-import FeedbackIcon from '@mui/icons-material/Feedback';
+import FeedbackIcon from '@mui/icons-material/Feedback'
 import PermIdentityIcon from '@mui/icons-material/PermIdentity'
 import PaymentIcon from '@mui/icons-material/Payment'
-import {
-  StyledDivDashboardRoot,
-  StyledDivDashboardToolBarIcon,
-  StyledTypographyPageTitle,
-} from './styles'
+import { StyledDivDashboardRoot, StyledDivDashboardToolBarIcon } from './styles'
 import { useNavigate } from 'react-router-dom'
 import { Logout } from '../../api/Auth'
 import { Get } from '../../api/Info'
@@ -43,7 +40,7 @@ import { clearInfos, clearTemplates } from '../../store/action/Actions'
 import DashboardIcon from '@mui/icons-material/Dashboard'
 import { restfulApiConfig } from '../../api/Config'
 import { muiColorTheme } from '../Theme'
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 const drawerWidth = 240
 
@@ -109,30 +106,28 @@ const Drawer = styled(MuiDrawer, {
   }),
 }))
 
-
 interface DashboardProps {
   title?: string
   children?: React.ReactNode
   sx?: CSSObject
   forceDrawerClosed?: boolean
 }
+
 export default function Dashboard(props: DashboardProps) {
   const navigate = useNavigate()
   // Menu Bar
   // useMediaQuery("(min-width:800px)")でmobileかどうかを判定
-  const [open, setOpen] = React.useState(useMediaQuery("(min-width:600px)"))
+  const [open, setOpen] = React.useState(useMediaQuery('(min-width:600px)'))
 
   // 画面サイズが変わったときにopenを変更
   // closeが強制されているときは、openをfalseにする
-  const isMobile = !useMediaQuery("(min-width:600px)");
+  const isMobile = !useMediaQuery('(min-width:600px)')
   useEffect(() => {
-    if(props.forceDrawerClosed){
+    if (props.forceDrawerClosed) {
       setOpen(false)
-    }
-    else if(isMobile){
+    } else if (isMobile) {
       setOpen(false)
-    }
-    else{
+    } else {
       setOpen(true)
     }
   }, [isMobile, props.forceDrawerClosed])
@@ -260,16 +255,11 @@ export default function Dashboard(props: DashboardProps) {
             <Divider />
           </List>
         </Drawer>
-        <Box component="main" sx={{ flexGrow: 1, p: 3, ...props.sx}}>
+        <Box component="main" sx={{ flexGrow: 1, p: 3, ...props.sx }}>
           <StyledDivDashboardToolBarIcon />
-
-          <StyledTypographyPageTitle
-            // component="h2"
-            variant="h5"
-            color="inherit"
-          >
+          <Typography sx={{ m: 1 }} variant="h5" color="inherit">
             {props.title}
-          </StyledTypographyPageTitle>
+          </Typography>
           {props.children}
         </Box>
       </Box>

src/components/Dashboard/styles.ts

@@ -20,10 +20,6 @@ export const StyledDivDashboardToolBarIcon = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
 }))
 
-export const StyledTypographyPageTitle = styled(Typography)(({ theme }) => ({
-  marginBottom: theme.spacing(1),
-}))
-
 export const StyledMainContent = styled('main')(({ theme }) => ({
   flexGrow: 1,
   height: '100vh',

src/pages/Procedure/UserList/UserDetail/UserDetail.tsx

@@ -69,8 +69,7 @@ export default function UserDetail() {
   const [user, setUser] = useState<UserData>()
   const infos = useSelector((state: RootState) => state.infos)
   const navigate = useNavigate()
-  let id: string | undefined
-  ;({ id } = useParams())
+  const { id } = useParams()
   const { enqueueSnackbar } = useSnackbar()
   const [value, setValue] = React.useState(0)
   const [email, setEmail] = React.useState({ email: '', email_verify: '' })

src/pages/Support/Support.tsx

@@ -145,7 +145,7 @@ export default function Support() {
         tickets
           .filter((ticket) => ticket.solved === value)
           .map((ticket: TicketData, index) => (
-            <StyledCardRoot3 key={'tikect_' + index}>
+            <StyledCardRoot3 key={'ticket_' + index}>
               <CardContent>
                 <StyledTypographyTitle color="textSecondary" gutterBottom>
                   ID: {ticket.id}
@@ -167,7 +167,6 @@ export default function Support() {
                   <Chip size="small" color="primary" label="管理者作成" />
                 )}
                 <br />
-                {/*作成者: {ticket.user?.name}*/}
               </CardContent>
               <CardActions>
                 <Button size="small" onClick={() => clickDetailPage(ticket.id)}>

src/pages/Support/SupportAddDialog.tsx

@@ -70,11 +70,11 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
             <Grid item xs={12}>
               <h3>ユーザチャットとグループチャットの違い</h3>
               <div>
-                ユーザチャット: ログインユーザと1対1のチャットになります。
+                ユーザチャット: ログインユーザと1対1のチャット
               </div>
               <div>
-                グループチャットチャット:
-                ログインユーザのグループとのチャット（基本はこちらでお願いします。）
+                グループチャット:
+                ログインユーザのグループとのチャット（基本はこちらでお願いします）
               </div>
               <RadioGroup
                 row

src/pages/Support/SupportDetail/Message.tsx

@@ -4,9 +4,10 @@ import {
   StyledMessageTimeStampLeft,
   StyledReactMarkdownMessageContentRight,
   StyledReactMarkdownMessageContentLeft,
-} from './styles'
+  StyledLeftMessage,
+  StyledRightMessage,
+} from '../styles'
 import { Avatar, Box } from '@mui/material'
-import { StyledBlueMessage, StyledOrangeMessage } from '../../../style'
 import { deepOrange } from '@mui/material/colors'
 
 export const MessageLeft = (props: {
@@ -20,20 +21,22 @@ export const MessageLeft = (props: {
   const divRef = useRef<HTMLDivElement>(null)
 
   return (
-    <Box sx={{ display: 'flex', paddingLeft: "6px" }}>
-      <Avatar sx={{ 
-        bgcolor: deepOrange[500],
-        fontSize: "medium",
-      }}>
+    <Box sx={{ display: 'flex', paddingLeft: '6px' }}>
+      <Avatar
+        sx={{
+          bgcolor: deepOrange[500],
+          fontSize: 'medium',
+        }}
+      >
         {displayName}
       </Avatar>
-      <StyledBlueMessage>
+      <StyledLeftMessage>
         <div
           ref={divRef}
           style={{
             borderRadius: 15,
-            minWidth: "50vw",
-            maxWidth: "70vw",
+            minWidth: '50vw',
+            maxWidth: '70vw',
           }}
         >
           <StyledReactMarkdownMessageContentLeft
@@ -43,7 +46,7 @@ export const MessageLeft = (props: {
           />
         </div>
         <StyledMessageTimeStampLeft>{timestamp}</StyledMessageTimeStampLeft>
-      </StyledBlueMessage>
+      </StyledLeftMessage>
     </Box>
   )
 }
@@ -60,13 +63,13 @@ export const MessageRight = (props: {
 
   return (
     <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <StyledOrangeMessage>
+      <StyledRightMessage>
         <div
           ref={divRef}
           style={{
             borderRadius: 15,
-            minWidth: "50vw",
-            maxWidth: "70vw",
+            minWidth: '50vw',
+            maxWidth: '70vw',
           }}
         >
           <StyledReactMarkdownMessageContentRight
@@ -77,9 +80,9 @@ export const MessageRight = (props: {
           />
         </div>
         <StyledMessageTimeStampLeft>
-          ({displayName}) <br/> {timestamp}
+          ({displayName}) <br /> {timestamp}
         </StyledMessageTimeStampLeft>
-      </StyledOrangeMessage>
+      </StyledRightMessage>
     </Box>
   )
 }

src/pages/Support/SupportDetail/SupportDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { ChatData, TicketData, UserData } from '../../../interface'
+import { TicketData, UserData } from '../../../interface'
 import { restfulApiConfig } from '../../../api/Config'
 import useWebSocket from 'react-use-websocket'
 import { MessageLeft, MessageRight } from './Message'
@@ -11,14 +11,11 @@ import store, { RootState } from '../../../store'
 import Cookies from 'js-cookie'
 import { clearInfos, clearTemplates } from '../../../store/action/Actions'
 import { Get } from '../../../api/Info'
-import {
-  StyledPaperMessage,
-} from '../../../style'
 import DashboardComponent from '../../../components/Dashboard/Dashboard'
+import { StyledPaperMessage } from '../styles'
 
 export default function SupportDetail() {
-  let id: string | undefined
-  ;({ id } = useParams())
+  const { id } = useParams()
   const { sendMessage, lastMessage } = useWebSocket(
     restfulApiConfig.wsURL +
       '/support' +
@@ -32,21 +29,20 @@ export default function SupportDetail() {
       onOpen: () =>
         enqueueSnackbar('WebSocket接続確立', { variant: 'success' }),
       onClose: () => enqueueSnackbar('WebSocket切断', { variant: 'error' }),
-      shouldReconnect: (closeEvent) => true,
+      shouldReconnect: () => true,
     }
   )
   const { enqueueSnackbar } = useSnackbar()
-  const [baseChatData, setBaseChatData] = useState<ChatData[]>()
   const [inputChatData, setInputChatData] = useState('')
-  const [tickets, setTickets] = useState<TicketData>()
+  const [ticket, setTicket] = useState<TicketData>()
   const [userList, setUserList] = useState<UserData[]>()
   const infos = useSelector((state: RootState) => state.infos)
   const [sendPush, setSendPush] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     ref.current?.scrollIntoView()
-  }, [baseChatData])
+  }, [ticket])
 
   useEffect(() => {
     // info
@@ -73,11 +69,7 @@ export default function SupportDetail() {
             (ticket) => ticket.id === Number(id)
           )
           if (ticketOne != null && ticketOne.length !== 0) {
-            setTickets(ticketOne[0])
-            if (ticketOne[0].chat != null) {
-              setBaseChatData(ticketOne[0].chat)
-              return
-            }
+            setTicket(ticketOne[0])
           }
         }
 
@@ -86,11 +78,7 @@ export default function SupportDetail() {
             (ticket) => ticket.id === Number(id)
           )
           if (requestOne != null && requestOne.length !== 0) {
-            setTickets(requestOne[0])
-            if (requestOne[0].chat != null) {
-              setBaseChatData(requestOne[0].chat)
-              return
-            }
+            setTicket(requestOne[0])
           }
         }
         enqueueSnackbar('データがありません ', { variant: 'info' })
@@ -109,25 +97,22 @@ export default function SupportDetail() {
     if (lastMessage !== null) {
       const obj = JSON.parse(lastMessage?.data)
 
-      if (baseChatData != null) {
-        setBaseChatData([
-          ...baseChatData,
-          {
-            ticket_id: Number(id),
-            admin: obj.admin,
-            data: obj.message,
-            created_at: obj.time,
-            user_id: obj.user_id,
-            user_name: obj.username,
-          },
-        ])
+      if (ticket?.chat != null) {
+        setTicket({
+          ...ticket,
+          chat: [
+            ...ticket.chat,
+            {
+              ticket_id: Number(id),
+              admin: obj.admin,
+              data: obj.message,
+              created_at: obj.time,
+              user_id: obj.user_id,
+              user_name: obj.username,
+            },
+          ],
+        })
       }
-      // setBaseChatData(tmpChat => [...tmpChat, {
-      //     admin: obj.admin,
-      //     data: obj.message,
-      //     time: obj.time,
-      //     user_name: obj.username
-      // }]);
       const tmpData = infos[infos.length - 1]
       if (obj.user_id === tmpData.data?.user?.id) {
         enqueueSnackbar('送信しました', { variant: 'success' })
@@ -160,14 +145,26 @@ export default function SupportDetail() {
   }
 
   return (
-    <div>
-      {id === undefined && <DashboardComponent><h2>IDの値が取得できません</h2></DashboardComponent>}
-      {baseChatData === undefined && <DashboardComponent><h2>データがありません</h2></DashboardComponent>}
-      {baseChatData != null && (
-        <DashboardComponent title={"ID: "+ tickets?.id + " " + tickets?.title} sx={{ padding: "2px" }} forceDrawerClosed={true}>
+    <>
+      {id === undefined && (
+        <DashboardComponent>
+          <h2>IDの値が取得できません</h2>
+        </DashboardComponent>
+      )}
+      {ticket?.chat === undefined && (
+        <DashboardComponent>
+          <h2>データがありません</h2>
+        </DashboardComponent>
+      )}
+      {ticket?.chat != null && (
+        <DashboardComponent
+          title={ticket?.id + ': ' + ticket?.title}
+          sx={{ padding: '2px' }}
+          forceDrawerClosed={true}
+        >
           <StyledPaperMessage id="style-1">
             <b>このチャットはMarkdownに準拠しております。</b>
-            {baseChatData.map((chat, index) =>
+            {ticket.chat.map((chat, index) =>
               !chat.admin ? (
                 <MessageRight
                   key={index}
@@ -194,6 +191,6 @@ export default function SupportDetail() {
           />
         </DashboardComponent>
       )}
-    </div>
+    </>
   )
 }