finished chat

src/api-data/index.ts

@@ -39,7 +39,7 @@ const authorizeUser = async (number:string,country:string):Promise<string | unde
     success(`check ${number}`);
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
@@ -49,7 +49,7 @@ const loginUser = async <T>(number:string,code:string):Promise<T | undefined> =>
     success(`AUTHORIZED`);
     return data
   } catch (e) {
-    error('UNAUTHORIZED');
+    return undefined
   }
 };
 
@@ -59,7 +59,7 @@ const updateCredentials = async <T>(name: string,lastName: string):Promise<T | u
     success(`CREDENTIALS UPDATED`);
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
@@ -69,7 +69,7 @@ const updateUserAvatar = async <T>(formData: object): Promise<T | undefined> =>
     success(`AVATAR UPDATED`);
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   } 
 };
 
@@ -79,7 +79,7 @@ const currentUser = async <T>(): Promise<T | undefined> => {
     success(`LOGIN`);
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   } 
 };
 
@@ -89,47 +89,43 @@ const addContact = async <T>(number:string): Promise<T | undefined> => {
     success('CONTACT ADDED');
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
 const getContacts = async <T>(): Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.get('/contacts');
-    success('CONTACTS LOADED');
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
 const startChat = async <T>(id:string): Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.post('/chats',{id});
-    success('CHAT OPENED');
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
 const getChats = async <T>(): Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.get('/chats');
-    success('CHATS LOADED');
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 
 const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.post('/messages', { id, message });
-    success('MESSAGE SENDED');
     return data
   } catch (e) {
-    error('BAD REQUEST');
+    return undefined
   }
 };
 

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -12,7 +12,8 @@ import AlertInfo from '../../../reusableComponents/AlertInfo'
 import doubleCheck from '../../../../img/clipart289625.png'
 import { firstLetter, slicedWord, timeStamp } from '../../../../helpers'
 import { getState } from '../../../../redux/chats/selector'
-import { asyncGetChats,asyncStartChat } from '../../../../redux/chats/operations'
+import { asyncGetChats } from '../../../../redux/chats/operations'
+import { asyncStartChatById } from '../../../../redux/chat/operations'
 
 const useStyles = makeStyles({
   list: {
@@ -89,7 +90,7 @@ const ChatsList = () => {
  
 
   const handleListItemClick = async (i: number, companionId: string) => {
-      await dispatch(asyncStartChat(companionId))
+      await dispatch(asyncStartChatById(companionId))
       setSelectedIndex(i);
   }
 
@@ -98,6 +99,12 @@ const ChatsList = () => {
     console.log(i,'index','clicked read new messages')
   }
 
+  useEffect(() => {
+    const handleReset = () => dispatch(asyncGetChats())
+    const idInterval = setInterval(handleReset, 10000);
+    return () => clearInterval(idInterval);
+  }, [dispatch]);
+  
   useEffect(() => {
     dispatch(asyncGetChats())
   }, [dispatch])

src/components/HomePage/LeftBar/ContactsList/index.tsx

@@ -12,7 +12,7 @@ import AlertInfo from '../../../reusableComponents/AlertInfo'
 import { getState } from '../../../../redux/contacts/selector'
 import { asyncGetContacts } from '../../../../redux/contacts/operations'
 import { firstLetter, slicedWord, timeStamp } from '../../../../helpers'
-import { asyncStartChat } from '../../../../redux/chats/operations'
+import { asyncStartChatById } from '../../../../redux/chat/operations'
 
 const useStyles = makeStyles({
   list: {
@@ -49,7 +49,7 @@ const  ContactsList = () => {
   const [selectedIndex, setSelectedIndex] = useState<number>(1);  
   const handleListItemClick = async (i:number, companionId:string) => {
      setSelectedIndex(i);
-     await dispatch(asyncStartChat(companionId))
+     await dispatch(asyncStartChatById(companionId))
   }
 
   useEffect(() => {

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
 import { asyncSentMessageById } from '../../../../../redux/messages/operations'
-import { getChat } from '../../../../../redux/chats/selector'
+import { getChat } from '../../../../../redux/chat/selector'
 import FilesMenu from "../FilesMenu";
 import NotDone from "../../../../reusableComponents/NotDone";
 

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -8,8 +8,8 @@ import MessageLeft from './Messages/MessageLeft'
 import MessageRight from './Messages/MessagesRight'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../redux/messages/selector'
-import { getId } from '../../../../redux/authorization/selector'
-import { getChat } from '../../../../redux/chats/selector'
+import { getNumber } from '../../../../redux/authorization/selector'
+import { getChat } from '../../../../redux/chat/selector'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 const debounce = require('lodash.debounce');
 
@@ -37,7 +37,7 @@ const ChatBar = () => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messages = useSelector(getMessages)
-  const userId = useSelector(getId)
+  const userNumber = useSelector(getNumber)
   const {companionId} = useSelector(getChat)
   const [isArrow,setIsArrow] = useState<boolean>(false)
   const divRef = useRef<any | null>(null)
@@ -67,8 +67,8 @@ const ChatBar = () => {
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,owner:{_id}}:any,i:number) => {
-          if (_id !== userId) {
+        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,number}:any,i:number) => {
+          if (number !== userNumber) {
             return (
             <MessageLeft
             key={shortid.generate()}

src/components/HomePage/RightBar/HeaderBar/Buttons/MenuList/index.tsx

@@ -9,7 +9,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { actionIsOpen } from '../../../../../../redux/controlApp/action'
+import { actionIsOpen } from '../../../../../../redux/control/action'
 
 const StyledMenu = styled((props:any) => (
   <Menu

src/components/HomePage/RightBar/HeaderBar/Buttons/index.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 
 import MenuList from './MenuList'
-import { actionIsOpen } from '../../../../../redux/controlApp/action'
+import { actionIsOpen } from '../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/HeaderBar/Credentials/index.tsx

@@ -4,8 +4,8 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useDispatch,useSelector } from 'react-redux';
 
-import { actionIsOpen } from '../../../../../redux/controlApp/action'
-import { getChat } from '../../../../../redux/chats/selector'
+import { actionIsOpen } from '../../../../../redux/control/action'
+import { getChat } from '../../../../../redux/chat/selector'
 import { firstLetter,slicedWord,timeStamp } from '../../../../../helpers'
 
 const Credentials = () => {

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ToolBar/index.tsx

@@ -4,7 +4,7 @@ import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import CloseIcon from '@mui/icons-material/Close';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
-import { actionIsOpen } from '../../../../../../../redux/controlApp/action'
+import { actionIsOpen } from '../../../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/Search/index.tsx

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from "react-redux";
 
-import { actionIsOpen } from '../../../../../../../redux/controlApp/action'
+import { actionIsOpen } from '../../../../../../../redux/control/action'
 import StaticDatePicker from "../../../../../../reusableComponents/StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({

src/components/HomePage/RightBar/HeaderBar/RightLists/index.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
-import { getIsOpen } from '../../../../../redux/controlApp/selector'
+import { getIsOpen } from '../../../../../redux/control/selector'
 
 
 const RightLists = () => {

src/components/HomePage/RightBar/index.tsx

@@ -3,8 +3,8 @@ import { makeStyles } from '@material-ui/core'
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { useSelector } from 'react-redux'
-import { getIsOpen } from '../../../redux/controlApp/selector'
-import { getChat } from '../../../redux/chats/selector'
+import { getIsOpen } from '../../../redux/control/selector'
+import { getChat } from '../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {

src/redux/chat/action/index.ts

@@ -0,0 +1,11 @@
+import { createAction } from '@reduxjs/toolkit';
+import { TChat } from '../../../typescript/redux/chat/types'
+
+const actionSelectChat = createAction('selectChat/success', (value:TChat) => ({
+  payload: value,
+}));
+
+
+export {
+  actionSelectChat
+};

src/redux/chat/operations/index.ts

@@ -0,0 +1,24 @@
+import { actionIsLoading } from '../../loading/action';
+import {
+   actionSelectChat
+} from '../action';
+import { startChat} from '../../../api-data';
+
+import { TChat } from '../../../typescript/redux/chat/types'
+
+const asyncStartChatById = (id:string) => async (dispatch:any) => {
+  try {
+    dispatch(actionIsLoading(true));
+    const data = await startChat<TChat>(id)
+    data&&dispatch(actionSelectChat(data))
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+
+export { asyncStartChatById };
+
+
+
+

src/redux/chat/reducer/index.ts

@@ -0,0 +1,31 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { IChatPayload,IChatState } from '../../../typescript/redux/chat/interfaces';
+
+import {
+  actionSelectChat
+} from '../action';
+
+const initialState: IChatState = {
+  chat: {
+     name: '',
+     lastName: '',
+     avatarUrl:'',
+     color: '',
+     _id: '',
+     companionId: '',
+     owner: '',
+     createdAt: '',
+     updatedAt: '',
+    __v: 0,
+  },
+}
+
+
+
+const reducerChat = createReducer(initialState, {
+  [actionSelectChat.type]: (_,{ payload:chat }:IChatPayload) => {
+    return {chat}
+  },
+});
+
+export default reducerChat;

src/redux/chat/selector/index.ts

@@ -0,0 +1,6 @@
+import {IState} from '../../../typescript/redux/interfaces'
+
+const getState = (state: IState) => state.chat;
+const getChat = (state:IState) => state.chat.chat;
+
+export { getChat,getState };

src/redux/chats/action/index.ts

@@ -10,13 +10,8 @@ const actionGetChatsReject = createAction('getChats/reject', () => ({
   payload: null,
 }));
 
-const selectCompanionSuccess = createAction('selectCompanion/success', (value:TChat) => ({
-  payload: value,
-}));
-
 
 export {
   actionGetChatsSuccess,
   actionGetChatsReject,
-  selectCompanionSuccess
 };

src/redux/chats/operations/index.ts

@@ -1,36 +1,20 @@
-import { actionIsLoading } from '../../loading/action';
 import {
   actionGetChatsSuccess,
   actionGetChatsReject,
-  selectCompanionSuccess
 } from '../action';
-import { startChat,getChats} from '../../../api-data';
+import { getChats} from '../../../api-data';
 import { IChatsRes } from '../../../typescript/redux/chats/interfaces'
-import { TChat } from '../../../typescript/redux/chats/types'
-
-const asyncStartChat = (id:string) => async (dispatch:any) => {
-  try {
-    dispatch(actionIsLoading(true));
-    const data = await startChat<TChat>(id)
-    data&&dispatch(selectCompanionSuccess(data))
-  } finally {
-    dispatch(actionIsLoading(false));
-  }
-};
 
 const asyncGetChats = () => async (dispatch:any) => {
   try {
-    dispatch(actionIsLoading(true));
     const data = await getChats<IChatsRes>()
     data&&dispatch(actionGetChatsSuccess(data))
   } catch (e) {
     dispatch(actionGetChatsReject())
-  } finally {
-    dispatch(actionIsLoading(false));
   }
 };
 
-export { asyncStartChat,asyncGetChats };
+export { asyncGetChats };
 
 
 

src/redux/chats/reducer/index.ts

@@ -1,25 +1,12 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { IChatsState, IChatsPayload,IChatPayload } from '../../../typescript/redux/chats/interfaces';
+import { IChatsState, IChatsPayload } from '../../../typescript/redux/chats/interfaces';
 
 import {
   actionGetChatsSuccess,
   actionGetChatsReject,
-  selectCompanionSuccess
 } from '../action';
 
 const initialState: IChatsState = {
-  chat:{
-     name: '',
-     lastName: '',
-     avatarUrl:'',
-     color: '',
-     _id: '',
-     companionId: '',
-     owner: '',
-     createdAt: '',
-     updatedAt: '',
-     __v: 0,
-},
   total: "0",
   limit: "0",
   page: "0",
@@ -30,16 +17,11 @@ const initialState: IChatsState = {
 
 const reducerChats = createReducer(initialState, {
   [actionGetChatsSuccess.type]: (state,{ payload }:IChatsPayload) => {
-    return {...state,...payload};
+    return payload
   },
   [actionGetChatsReject.type]: (state, _) => {
     return state;
   },
-  [selectCompanionSuccess.type]: (state, { payload }: IChatPayload) => {
-    const newState = { ...state }
-    newState.chat = payload
-    return newState;
-  },  
 });
 
 export default reducerChats;

src/redux/chats/selector/index.ts

@@ -4,7 +4,6 @@ const getTotal = (state: IState) => state.chats.total;
 const getLimit = (state:IState) => state.chats.limit;
 const getPage = (state: IState) => state.chats.page;
 const getChats = (state: IState) => state.chats.chats;
-const getChat = (state: IState) => state.chats.chat;
 const getState= (state:IState) => state.chats;
 
-export { getTotal,getLimit,getPage,getChats,getChat,getState };
+export { getTotal,getLimit,getPage,getChats,getState };

src/redux/control/action/index.ts

@@ -0,0 +1,9 @@
+import { createAction } from '@reduxjs/toolkit';
+import { TIsOpen } from '../../../typescript/redux/control/types'
+
+const actionIsOpen= createAction('control/isOpen', (value:TIsOpen) => ({
+  payload: value,
+}));
+
+
+export { actionIsOpen };

src/redux/control/reducer/index.ts

@@ -0,0 +1,15 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { actionIsOpen } from '../action';
+import { IControlState,IPayloadIsOpen } from '../../../typescript/redux/control/interfaces'
+
+const initialState:IControlState = {
+  isOpen: '',
+}
+
+const reducerControl = createReducer(initialState, {
+  [actionIsOpen.type]: (state, { payload:isOpen }:IPayloadIsOpen) => {
+    return {...state,isOpen}
+  },
+});
+
+export default reducerControl;

src/redux/control/selector/index.ts

@@ -0,0 +1,6 @@
+import { IState } from '../../../typescript/redux/interfaces'
+
+const getIsOpen = (state: IState) => state.control.isOpen;
+const getState = (state:IState) => state.control;
+
+export { getIsOpen,getState };

src/redux/controlApp/action/index.ts

@@ -1,9 +0,0 @@
-import { createAction } from '@reduxjs/toolkit';
-import { TIsOpen } from '../../../typescript/redux/controlApp/types'
-
-const actionIsOpen= createAction('controlApp/isOpen', (value:TIsOpen) => ({
-  payload: value,
-}));
-
-
-export { actionIsOpen };

src/redux/controlApp/reducer/index.ts

@@ -1,15 +0,0 @@
-import { createReducer } from '@reduxjs/toolkit';
-import { actionIsOpen } from '../action';
-import { IControlAppState,IPayloadIsOpen } from '../../../typescript/redux/controlApp/interfaces'
-
-const initialState:IControlAppState = {
-  isOpen: '',
-}
-
-const reducerControlApp = createReducer(initialState, {
-  [actionIsOpen.type]: (state, { payload:isOpen }:IPayloadIsOpen) => {
-    return {...state,isOpen}
-  },
-});
-
-export default reducerControlApp;

src/redux/controlApp/selector/index.ts

@@ -1,6 +0,0 @@
-import { IState } from '../../../typescript/redux/interfaces'
-
-const getIsOpen = (state: IState) => state.controlApp.isOpen;
-const getState = (state:IState) => state.controlApp;
-
-export { getIsOpen,getState };

src/redux/rootReducer/index.ts

@@ -4,8 +4,9 @@ import storage from 'redux-persist/lib/storage';
 
 import reducerMessages from '../messages/reducer'
 import reducerContacts from '../contacts/reducer'
+import reducerChat from '../chat/reducer'
 import reducerChats from '../chats/reducer'
-import reducerControlApp from '../controlApp/reducer'
+import reducerControl from '../control/reducer'
 import reducerLoading from '../loading/reducer';
 import reducerAuthorization from '../authorization/reducer';
 
@@ -16,10 +17,11 @@ const authorizationPersistConfig = {
 
 export const rootReducer = combineReducers({
   isLoading: reducerLoading,
-  messages:reducerMessages,
+  messages: reducerMessages,
+  chat:reducerChat,
   chats: reducerChats,
   contacts:reducerContacts,
-  controlApp: reducerControlApp,
+  control: reducerControl,
   authorization: persistReducer(
     authorizationPersistConfig,
     reducerAuthorization,

src/typescript/redux/chat/interfaces.ts

@@ -0,0 +1,11 @@
+import { TChat } from './types'
+
+export interface IChatState  {
+  chat: TChat,
+}
+
+export interface IChatPayload {
+  payload: TChat
+}
+
+

src/typescript/redux/chat/types.ts

@@ -0,0 +1,19 @@
+export type TChat = {
+  name: string,
+  lastName: string,
+  avatarUrl:string,
+  color: string,
+  _id: string,
+  companionId: string,
+  owner: any,
+  createdAt: string,
+  updatedAt: string,
+  __v: number
+}
+
+
+
+
+
+
+

src/typescript/redux/chats/interfaces.ts

@@ -1,7 +1,6 @@
-import { TChats,TChat } from './types'
+import { TChats } from './types'
 
 export interface IChatsState  {
-  chat: TChat,
   total: string,
   limit: string,
   page: string,
@@ -24,7 +23,5 @@ export interface IChatsRes  {
   chats: TChats
 }
 
-export interface IChatPayload {
-  payload: TChat
-}
+
 

src/typescript/redux/controlApp/interfaces.ts

@@ -1,6 +1,6 @@
 import { TIsOpen } from './types'
 
-export interface IControlAppState {
+export interface IControlState {
   isOpen: TIsOpen,
 }
 

src/typescript/redux/interfaces.ts

@@ -1,14 +1,16 @@
 import { IAuthorizationState } from './authorization/interfaces'
 import { IContactsState } from './contacts/interfaces'
 import { IChatsState } from './chats/interfaces'
+import { IChatState } from './chat/interfaces'
 import { IMessagesState} from './messages/interfaces'
-import { IControlAppState } from './controlApp/interfaces'
+import { IControlState } from './control/interfaces'
 
 export interface IState {
   messages: IMessagesState,
   contacts: IContactsState,
+  chat:IChatState,
   chats: IChatsState,
-  controlApp:IControlAppState,
+  control:IControlState,
   isLoading: boolean;
   authorization: IAuthorizationState
 }

src/typescript/redux/messages/types.ts

@@ -4,6 +4,7 @@ export type TMessage = {
   lastName: string,
   avatarUrl:string,
   color: string,
+  number:string,
   _id: string,
   companionId: string,
   owner: any,