logout fixed

public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="TopChat"
-    />
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.js

@@ -100,7 +100,7 @@ const CAuthSwitch = connect(state => ({ token: state.auth.token || null }))(Auth
 
 function App() {
 
-  window.addEventListener("contextmenu", e => e.preventDefault());
+  // window.addEventListener("contextmenu", e => e.preventDefault());
 
   return (
     <Router history={history}>

src/actions/authActions.js

@@ -1,9 +1,11 @@
+import { history } from '../App'
 import {gql} from '../helpers'
 import {   
    actionPromise, 
    actionAuthLogin, 
    actionAuthLogout,
    actionAboutMe,
+   actionChatsClear
 } from '../reducers'
 import {   
    actionUploadFile
@@ -11,11 +13,13 @@ import {
 
 
    export const actionFullLogout = () => (
-      async (dispatch) => {
+      async (dispatch) => {   
+         history.push('/login')
          await dispatch(actionAuthLogout())
+         await dispatch(actionChatsClear())
       }
    )   
- 
+
    const actionLogin = (login, password) => (
       actionPromise('login', gql(`query log($login: String, $password: String) {
          login(login: $login, password: $password)
@@ -24,8 +28,9 @@ import {
 
    export const actionFullLogin = (login, password) => (
       async (dispatch) => {
+         history.push('/main')
          let token = await dispatch(actionLogin(login, password))
-         if (token) {
+         if (token) {            
             await dispatch(actionAuthLogin(token))
             await dispatch(actionAboutMe())
          }

src/actions/msgActions.js

@@ -70,7 +70,7 @@ export const actionFullMsgsByChat = (chatId, currentCount, limitCount=50) => (
       let chat = getState().chats[chatId]
 
       if (!chat || !chat.messages || ( (chat.messages[0]?._id !== chat.firstMsgId)  &&
-                        ( (chat.messages?.length ?? 0) < currentCount + limitCount)  )
+                        ( (chat.messages?.length ?? 0) < currentCount + limitCount )  )
                         ) {
          // console.log(chat)
 

src/components/ChatInfoModal.jsx

@@ -0,0 +1,201 @@
+import React, {useEffect, useState} from 'react';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import CloseIcon from '@mui/icons-material/Close';
+import List from '@mui/material/List';
+
+import { ChatAvatar, UserCard } from '.'
+
+import {connect}  from 'react-redux'
+
+
+const styleModalParrent = {
+   position: 'absolute',
+   top: '50%',
+   left: '50%',
+   transform: 'translate(-50%, -50%)',
+   width: '70%',
+   maxWidth: '1000px',
+   height: '95%',
+   bgcolor: 'background.paper',
+   border: '1px solid #999',
+   boxShadow: 24,
+   p: 3,
+   display: 'flex',
+   flexDirection: 'column',
+   justifyContent: 'space-between',
+}
+
+
+const ChatInfoModal = ({ chat, render }) => {
+
+   const [open, setOpen] = useState(false)
+   const handleOpen = () =>  setOpen(true) 
+   const handleClose = () => setOpen(false)
+
+
+   const OpenBtn = render
+   return (
+     <>
+       <OpenBtn chat={chat} OPEN={handleOpen} />
+
+       <Modal
+         open={open}
+         onClose={handleClose}
+       >
+          
+         <Box sx={styleModalParrent}>
+
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid #999', pb: 1, mb: 1 }}>
+
+               <Box sx={{ display: 'flex', justifyContent: 'start' }}>
+                  <Typography variant="h6">
+                    {((chat?.owner?._id !== myProfile?._id) && !create) ?
+                                 'Информация (редактирование запрещено)' : create ? 'Создание чата' : 'Редактирование чата' } 
+                  </Typography>
+               </Box>
+
+               <Box sx={{ display: 'flex', justifyContent: 'end' }}>
+                  <IconButton aria-label="delete" onClick={handleClose}>
+                     <CloseIcon />
+                  </IconButton>
+               </Box>
+
+            </Box>     
+
+           
+
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', pl: 3, pr: 6 }} >
+
+                  <Box sx={{ display: 'flex', justifyContent: 'start', alignItems: 'start', flexBasis: "35%" }}> 
+                        <section className="container">
+                           <Box {...getRootProps({className: 'dropzone'})} 
+                                 sx={{ cursor: 'pointer', height: '80px', display: 'flex' }}
+                                 className="avatarInModal" >   
+
+                               <ChatAvatar 
+                                       chat={{  title: title, avatar: {url: chat?.avatar?.url || ''},
+                                             localUrl: img && URL.createObjectURL(img)}} bigSize={true} /> 
+      
+                              <input {...getInputProps()} type="file" name="media" id='mediaUser' />
+                              <Box sx={{ pl: 4 }} >
+                                 <Typography sx={{ fontWeight: 500, fontSize: 18 }}>
+                                    Аватар
+                                 </Typography>                                 
+                              </Box>
+                           </Box>
+                        </section>
+                  </Box>
+   
+                  <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'start', alignItems: 'stretch',
+                              flexBasis: "35%" }}>
+
+                     <Typography sx={{ fontWeight: 500, fontSize: 18 }}>
+                        Название
+                     </Typography>
+
+                     <TextField            
+                        onChange={(e) => {
+                              setTitle(e.target.value)
+                           }
+                        }     
+                        onBlur={() => {
+                           setTitleBlur(true)              
+                        }
+                        } 
+                        onFocus={() => {
+                           setTitleBlur(false)              
+                           }
+                        }          
+                        error={titleBlur ? ((title?.length >= minTitle ) ? false : true) : false}
+                        helperText={printStrReq(title, minTitle)}            
+      
+                        inputProps={{
+                           maxLength: 50
+                        }}
+                        variant="standard"
+                        margin="none"
+                        fullWidth
+                        id="titleChat"
+                        label=""
+                        name="title"
+                        defaultValue={title}
+                        sx={{mt: 1}}
+                     />
+                  </Box>
+                  
+            </Box>
+
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '60%', mt: 2   }}>
+            
+               <Box sx={{   display: 'flex', justifyContent: 'center', mb: 1 }}>
+                  <Typography sx={{ fontWeight: 500, fontSize: 18 }}>
+                     Добавить участников
+                  </Typography>
+               </Box>
+
+               <Box sx={{ display: 'flex', justifyContent: 'space-between',  height: '100%', }} >
+
+                  <Box sx={{ flexBasis: "45%" }}>
+
+                     <Box sx={{  height: "40px", display: 'flex', justifyContent: 'center', pt: 1 }}>
+                        <Typography sx={{ fontWeight: 400, fontSize: 16 }}>
+                           Сейчас в чате
+                        </Typography>
+                     </Box>
+                     
+                     <Box 
+                        sx={{  height: "calc(100% - 40px)", overflowY: "auto" }}
+                        >
+                        <List
+                           sx={{ maxWidth: '100%', bgcolor: 'background.paper' }}
+                           >
+                           { members.map((member, i) => <UserCard key={member._id || i} user={member} 
+                                                                  render={DelBtn}  onAction={() => onDelMember(i)} />)}
+                        </List>
+                     </Box>
+                  </Box>     
+
+                  <CUserSearch open={open} alreadySearched={members} onAdd={onAddMember} />
+
+               </Box>
+
+            </Box>
+
+
+            <Box sx={{ mt: 2 }} >
+                     
+                  { wrongAlert &&
+                     <Typography component="p" variant="body2" my={2} ml={2} 
+                        sx={{fontWeight: 'medium', fontSize: '0.75rem', color: '#d32f2f'}}>
+                           Ошибка создания
+                     </Typography> 
+                  }
+      
+                  <Box sx={{ display: 'flex', justifyContent: 'center'}}>
+                     <Button  variant="contained" 
+                              disabled={  (title?.length < minTitle) ? true :
+                                         ((chat?.owner?._id !== myProfile?._id) && !create) ? true : false }
+                              onClick={() => {
+                                 onСonfirm( "media", img, title, 
+                                                         prepareMembers(members), chat?._id );
+                                 handleClose()
+                              } } >
+                        Применить 
+                     </Button>
+                  </Box>
+            </Box>
+
+ 
+         </Box>
+       </Modal>
+     </>
+   )
+ }
+ export const CChatInfoModal = connect(  state => ( {  chatError: state.promise.updateChat || {} }))(ChatInfoModal)
+ 

src/components/MsgList.jsx

@@ -2,7 +2,7 @@ import React, {useState, useEffect, useRef} from 'react'
 
 import { connect } from 'react-redux'
 
-import { CMsg, MsgMenu } from '.'
+import { CMsg } from '.'
 
 const msgsWrapper = {
    display: "flex",
@@ -17,7 +17,6 @@ const MsgList = ({chats, chatId, onEdit }) => {
 
    const msgArr = chats[chatId]?.messages
 
-
    return (
       <div 
          style={msgsWrapper}
@@ -37,7 +36,4 @@ const MsgList = ({chats, chatId, onEdit }) => {
       </div>
    )
 }
-export const CMsgList = connect(state => ( { chats: state.chats } ))(MsgList)
-
-
-
+export const CMsgList = connect(state => ( { chats: state.chats } ))(MsgList)

src/components/SendingField.jsx

@@ -239,7 +239,6 @@ const SendingField = ({ chatId, onSend, msg }) => {
    const [files, setFiles] = useState(msg?.media.map(mediaFile =>( {...mediaFile, url: backURL +  mediaFile.url} )) || [])
    const [msgId, setMsgId] = useState(msg?._id || null)
 
-
    useEffect(() => {
       setText(msg?.text || '')
       setFiles(msg?.media.map(mediaFile =>( {...mediaFile, url: backURL +  mediaFile.url} )) || [])

src/pages/ChatsPage.jsx

@@ -42,7 +42,6 @@ const ChatsPage = ({  match:{params:{_id}}, auth,
        style={chatsPage}
        onScroll={(e) => {
          if (chatBlock < count) {
-
             if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
               setChatBlock(chatBlock => chatBlock + chatsCount)
             }

src/pages/MsgPage.jsx

@@ -62,7 +62,7 @@ const MsgBlock = ({ chatId, getMsgs, setLastVizited, msgsCount=20 }) => {
 
 
    useEffect( () => {
-      console.log(chatId)
+      // console.log(chatId)
       getMsgs(chatId, msgsBlock, msgsCount)
    },[msgsBlock])
 
@@ -107,7 +107,6 @@ const MsgBlock = ({ chatId, getMsgs, setLastVizited, msgsCount=20 }) => {
                   style={msgs}
                   ref={divRef}
                   onScroll={(e) => {
-
                      if (e.target.scrollTop*(-1) >= e.target.scrollHeight - e.target.clientHeight) {
                         setMsgsBlock(msgsBlock => msgsBlock + msgsCount)
                      }

src/reducers/chatsReducer.js

@@ -131,6 +131,10 @@
         return newState
       },
 
+      CHATS_CLEAR() {   
+        return {}
+      },
+
       MSGS() {
 
         if (payload && payload.length > 0) {
@@ -169,6 +173,9 @@
   export const actionChatLeft = (chat) => (
         {type: 'CHAT_LEFT', payload: chat}
   )
+  export const actionChatsClear = () => (
+    {type: 'CHATS_CLEAR'}
+  )
 
   export const actionMsgList = (msgs) => (
         {type: 'MSGS', payload: msgs}

src/reducers/index.js

@@ -11,6 +11,7 @@ import {
     actionChatList,
     actionChatOne,
     actionChatLeft,
+    actionChatsClear,
     actionMsgList,
     actionMsgOne
 } from './chatsReducer'
@@ -35,6 +36,7 @@ export {
     actionChatList,
     actionChatOne,
     actionChatLeft,
+    actionChatsClear,
     actionMsgList,
     actionMsgOne
 }