add status online

src/App.tsx

@@ -40,8 +40,8 @@ function App() {
       setToken.set(token)
       dispatch(asyncCurrentUser())
     }
-    const handleKeepIn = () => {
-     if (localStorage.isChecked === 'false') dispatch(asyncLogout())
+    const handleKeepIn = async () => {
+     if (localStorage.isChecked === 'false') await dispatch(asyncLogout())
     }
     window.addEventListener("beforeunload",handleKeepIn)
     return () => window.removeEventListener("beforeunload",handleKeepIn)

src/api-data/index.ts

@@ -37,6 +37,7 @@ const authorizeUser = async (number:string,country:string):Promise<string | unde
   try {
     const { data : {data} } = await axios.post('/auth/register', { number,country });
     success(`check ${number}`);
+    success(`code ${data}`);
     return data
   } catch (e) {
     return undefined
@@ -53,6 +54,16 @@ const loginUser = async <T>(number:string,code:string):Promise<T | undefined> =>
   }
 };
 
+const logoutUser = async <T>():Promise<T | undefined> => {
+  try {
+    const { data } = await axios.post('/auth/logout');
+    success(`LOGOUT`);
+    return data
+  } catch (e) {
+    return undefined
+  }
+};
+
 const updateCredentials = async <T>(name: string,lastName: string):Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.patch('/users/current', { name, lastName });
@@ -142,6 +153,7 @@ export {
   setToken,
   authorizeUser,
   loginUser,
+  logoutUser,
   updateCredentials,
   updateUserAvatar,
   currentUser,

src/components/AuthPage/index.tsx

@@ -8,6 +8,7 @@ import Registration from './Registration'
 import { authorizeUser } from '../../api-data'
 import { asyncLogin } from '../../redux/authorization/operations'
 import { actionIsLoading } from '../../redux/loading/action'
+import { is } from 'date-fns/locale';
 
 const AuthPage = () => {
   const [isQR, setIsQR] = useState<boolean>(false)
@@ -32,7 +33,7 @@ const AuthPage = () => {
     try {
       dispatch(actionIsLoading(true))
       const res = await authorizeUser(format(number), country)
-      res&&setIsCode(res)
+      res && setIsCode(res)
     }  finally {
       dispatch(actionIsLoading(false))
     }
@@ -53,6 +54,7 @@ const AuthPage = () => {
     setCountry('Country')
     setNumber('')
   }
+  
  
   return (
     isReg?<Registration/>:

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

@@ -78,7 +78,8 @@ const useStyles = makeStyles({
   },
   listItem_icon_time: {
     fontSize: 12,
-    marginLeft:5
+    marginLeft: 5,
+    color: '#1b1b1b'
   }
 })
 

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

@@ -38,7 +38,7 @@ const ChatBar = () => {
   const dispatch = useDispatch()
   const messages = useSelector(getMessages)
   const userNumber = useSelector(getNumber)
-  const {companionId} = useSelector(getChat)
+  const { companionId } = useSelector(getChat)
   const [isArrow,setIsArrow] = useState<boolean>(false)
   const divRef = useRef<any | null>(null)
   const handleScroll = ({ target }: any) => {

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

@@ -10,8 +10,7 @@ import { firstLetter,slicedWord,timeStamp } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
-  const chat = useSelector(getChat)
-  const { name,lastName,avatarUrl,color,updatedAt } = chat
+  const { name, lastName, avatarUrl, color, online } = useSelector(getChat)
   return (
     <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
       <ListItemIcon >
@@ -22,7 +21,7 @@ const Credentials = () => {
       </ListItemIcon> 
       <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-        secondary={`last seen ${timeStamp(updatedAt)}`} />
+        secondaryTypographyProps={{ color: '#0379af' }} secondary={online === 'true'?'online':`last seen ${timeStamp(online)}`} />
     </ListItemButton>
   )
 }

src/helpers/index.ts

@@ -6,7 +6,10 @@ const slicedWord = (word: string, max: number, from: number = 0) =>
 const timeStamp = (updatedAt: string) => new Date(updatedAt).toLocaleString("en-US", {
     year:'numeric',
     month: 'short',
-    day: 'numeric'
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
 })
 
-export { firstLetter,slicedWord,timeStamp }
+
+export { firstLetter,slicedWord,timeStamp, }

src/redux/authorization/operations/index.ts

@@ -7,7 +7,7 @@ import {
   actionCurrentSuccess,
   actionCurrentReject
 } from '../action';
-import { setToken, loginUser, updateCredentials, updateUserAvatar, currentUser } from '../../../api-data';
+import { setToken, loginUser, logoutUser, updateCredentials, updateUserAvatar, currentUser } from '../../../api-data';
 import { IAuthorizationState } from '../../../typescript/redux/authorization/interfaces'
 import { TResPromiseAll } from '../../../typescript/redux/authorization/types'
 
@@ -47,14 +47,14 @@ const asyncLogin = (number:string, code: string,cb:() => void ) => async (dispat
 
 const asyncLogout = () => async (dispatch:any) => {
   try {
-    dispatch(actionIsLoading(true));
-    dispatch(actionLogOutSuccess());
-    setToken.unset()
+    const data = await logoutUser<object>();
+    if (data) {
+     dispatch(actionLogOutSuccess());
+     setToken.unset()
+    }
   } catch (e) {
     dispatch(actionLogOutReject());
-  } finally {
-    dispatch(actionIsLoading(false));
-  }
+  } 
 };
 
 const asyncCurrentUser = () => async (dispatch:any) => {

src/redux/authorization/reducer/index.ts

@@ -17,6 +17,7 @@ const initialState:IAuthorizationState = {
   code: "",
   _id: "",
   token: "",
+  online: "",
   number: "" ,
   country: "",
   createdAt: "",

src/redux/chat/reducer/index.ts

@@ -11,6 +11,7 @@ const initialState: IChatState = {
      lastName: '',
      avatarUrl:'',
      color: '',
+     online: '',
      _id: '',
      companionId: '',
      owner: '',

src/redux/chats/reducer/index.ts

@@ -16,7 +16,7 @@ const initialState: IChatsState = {
 
 
 const reducerChats = createReducer(initialState, {
-  [actionGetChatsSuccess.type]: (state,{ payload }:IChatsPayload) => {
+  [actionGetChatsSuccess.type]: (_,{ payload }:IChatsPayload) => {
     return payload
   },
   [actionGetChatsReject.type]: (state, _) => {

src/typescript/redux/authorization/interfaces.ts

@@ -7,6 +7,7 @@ export interface IAuthorizationState  {
   code?: string | null,
   _id?: string | null,
   token?: string | null,
+  online: string,
   number?: string | null ,
   country?: string | null,
   createdAt?: string | null,

src/typescript/redux/chat/types.ts

@@ -3,6 +3,7 @@ export type TChat = {
   lastName: string,
   avatarUrl:string,
   color: string,
+  online:string,
   _id: string,
   companionId: string,
   owner: any,