ready to deploy

package-lock.json

@@ -27,9 +27,7 @@
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
         "canvas": "^2.8.0",
-        "cross-env": "^7.0.3",
         "date-fns": "^2.28.0",
-        "dotenv": "^8.2.0",
         "emoji-picker-react": "^3.5.1",
         "file-saver": "^2.0.5",
         "formik": "^2.2.6",
@@ -6354,78 +6352,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "node_modules/cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.1"
-      },
-      "bin": {
-        "cross-env": "src/bin/cross-env.js",
-        "cross-env-shell": "src/bin/cross-env-shell.js"
-      },
-      "engines": {
-        "node": ">=10.14",
-        "npm": ">=6",
-        "yarn": ">=1"
-      }
-    },
-    "node_modules/cross-env/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cross-env/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cross-env/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cross-env/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cross-env/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -29092,52 +29018,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-      "requires": {
-        "cross-spawn": "^7.0.1"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",

package.json

@@ -23,9 +23,7 @@
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "canvas": "^2.8.0",
-    "cross-env": "^7.0.3",
     "date-fns": "^2.28.0",
-    "dotenv": "^8.2.0",
     "emoji-picker-react": "^3.5.1",
     "file-saver": "^2.0.5",
     "formik": "^2.2.6",
@@ -64,7 +62,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "netlify deploy -p"
   },
   "eslintConfig": {
     "extends": [

src/App.tsx

@@ -77,7 +77,7 @@ function App() {
             <PrivateRoute exact path="/">
               <HomePage/>
             </PrivateRoute>
-              <PublicRoute  path={'/z/'} restricted>
+              <PublicRoute  path={'/w/'} restricted>
                 <AuthPage />
               </PublicRoute>
           </Switch>

src/api-data/index.ts

@@ -1,6 +1,7 @@
 import { toast } from 'react-toastify';
+import { prodBaseURL } from '../helpers';
 const axios = require('axios');
-axios.defaults.baseURL = 'https://w-telegram.herokuapp.com/api';
+axios.defaults.baseURL = `${prodBaseURL}/api`;
 
 const error = (message:string) =>
   toast.error(`🔥 ${message}!`, {

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

@@ -3,7 +3,7 @@ import Avatar from '@mui/material/Avatar';
 import { makeStyles } from '@material-ui/core'
 
 import { removeChatForBoth } from '../../../../../../api-data';
-import { firstLetter, slicedWord } from '../../../../../../helpers';
+import { firstLetter, slicedWord,prodBaseURL } from '../../../../../../helpers';
 import { TChat } from '../../../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
@@ -59,7 +59,7 @@ const DeleteModal = ({setModal,chat}:IDeleteModal) => {
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

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

@@ -15,7 +15,7 @@ import DoneAllIcon from '@mui/icons-material/DoneAll';
 
 import { muteChat } from '../../../../../api-data';
 import { TChat } from '../../../../../typescript/redux/chats/types';
-import { firstLetter, slicedWord, timeStampEU } from '../../../../../helpers';
+import { firstLetter, slicedWord, timeStampEU,prodBaseURL } from '../../../../../helpers';
 import DeleteModal from './DeleteModal';
 
 const StyledMenu = styled((props:any) => (
@@ -224,7 +224,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
         <ListItemIcon className={classes.listItem_iconAvatar}>
           <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
-            <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+            <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 54, height: 54 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
             </Avatar>

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

@@ -14,7 +14,7 @@ import { actionRemoveChat } from '../../../../redux/chat/action'
 import { actionScroll, actionIsOpen } from '../../../../redux/control/action'
 import { getIsOpen } from '../../../../redux/control/selector';
 import { TChats } from '../../../../typescript/redux/chats/types';
-import { timeStampFilter } from '../../../../helpers';
+import { timeStampFilter,prodBaseURL } from '../../../../helpers';
 
 const useStyles = makeStyles({
   list: {
@@ -98,7 +98,7 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
         if(chat === undefined) return
         const newDifferent = chat.total - chat.seen
         if (newDifferent > oldDifferent && !chat.mute) {
-          playNotificationWithoutPermission('http://localhost:3000/recive.mp3')
+          playNotificationWithoutPermission(`${prodBaseURL}/notifications/receive.mp3`)
           notification(chat.name,() => handleNotification(chat.companionId))
         } 
       })
@@ -113,7 +113,7 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
         handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs} />):
        <AlertInfo name={`Can not find Chats by request : ${value}`} />}
     </List>
-  ):<AlertInfo name='You do not have any Chats yet!' />;
+  ):<AlertInfo name='You do not have Chats yet!' />;
 }
 
 export default ChatsList

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

@@ -16,7 +16,7 @@ import {removeContact } from '../../../../../api-data';
 import { actionIsOpen } from '../../../../../redux/control/action';
 import { TContact } from '../../../../../typescript/redux/contacts/types';
 import { TIsOpen } from '../../../../../typescript/redux/control/types';
-import { firstLetter,slicedWord,timeStampEU,copied } from '../../../../../helpers';
+import { firstLetter,slicedWord,timeStampEU,copied,prodBaseURL } from '../../../../../helpers';
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -132,7 +132,7 @@ const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
         onContextMenu={(e) => handleContextMenu(e)}
       >
         <ListItemIcon className={classes.listItem_iconAvatar}>
-        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
           sx={{ background: color, width: 54, height: 54 }}>
           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>
@@ -162,7 +162,7 @@ const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
      {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

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

@@ -83,7 +83,7 @@ const  ContactsList = ({value,handleClick,sort,date} : IContactList) => {
         contact={contact} handleListItemClick={handleListItemClick} isOpen={isOpen}/>) :
         <AlertInfo name={`Can not find Contact by request : ${value}`} />}
       </List>
-  ):<AlertInfo name='You do not have any Contact yet!' />;
+  ):<AlertInfo name='You do not have Contact yet!' />;
 }
 
 export default ContactsList

src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

@@ -4,7 +4,7 @@ import Avatar from '@mui/material/Avatar';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import { useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { format,firstLetter } from '../../../../../helpers'
+import { format,firstLetter,prodBaseURL } from '../../../../../helpers'
 import { IAuthorizationState } from '../../../../../typescript/redux/authorization/interfaces'
 
 const useStyles = makeStyles({
@@ -105,7 +105,7 @@ const EditList = (props: IEditList) => {
           <AddAPhotoIcon className={classes.addPhoto} fontSize='large' />
           <input {...getInputProps()}/>
         </div>
-         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+         <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 120, height: 120}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>

src/components/HomePage/LeftBar/SearchLists/AudioList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -58,7 +58,7 @@ const AudioList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/LeftBar/SearchLists/ChatListRecent/ChatItem/index.tsx

@@ -5,7 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { TChat } from '../../../../../../typescript/redux/chats/types';
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers';
+import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers';
 
 const useStyles = makeStyles({
   listItemInnerText: {
@@ -40,7 +40,7 @@ const  ChatItem = ({chat,handleListItemClick}:IChatItem) => {
   return (
       <ListItemButton onClick={() => handleListItemClick(companionId)}>
         <ListItemIcon className={classes.listItem_iconAvatar}>
-          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 54, height: 54 }}>
             {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/LeftBar/SearchLists/ChatListRecent/RecentItem/index.tsx

@@ -1,6 +1,6 @@
 import { makeStyles, Typography } from '@material-ui/core'
 import Avatar from '@mui/material/Avatar';
-import { slicedWord, firstLetter } from '../../../../../../helpers';
+import { slicedWord, firstLetter,prodBaseURL } from '../../../../../../helpers';
 import { TChat } from '../../../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
@@ -37,7 +37,7 @@ const RecentItem = ({handleListItemClick,chat}:IRecentItem) => {
 
 return (
   <div onClick={() => handleListItemClick(companionId)} className={classes.stackItem}>
-     <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+     <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
        sx={{ background: color, width: 54, height: 54}}>
        {`${firstLetter(name)}${firstLetter(lastName)}`}
       </Avatar>

src/components/HomePage/LeftBar/SearchLists/FilesList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -59,7 +59,7 @@ const FilesList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/LeftBar/SearchLists/MediaList/MediaListItem/index.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU } from '../../../../../../helpers'
+import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -64,7 +64,7 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const handleOpenWatch = () => !watch && setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   
-  const url = `http://localhost:3000/${message}`
+  const url = `${prodBaseURL}/${message}`
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>

src/components/HomePage/LeftBar/SearchLists/TextList/index.tsx

@@ -9,7 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied } from '../../../../../helpers'
+import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -60,7 +60,7 @@ const TextList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessage
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
-              <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+              <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>
                   {`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>

src/components/HomePage/LeftBar/SearchLists/VideoList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -58,7 +58,7 @@ const VideoList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

@@ -5,7 +5,7 @@ import { getState } from '../../../../../redux/authorization/selector'
 import { Carousel } from 'react-responsive-carousel';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Avatar from '@mui/material/Avatar';
-import { firstLetter, slicedWord, timeStampEU } from '../../../../../helpers'
+import { firstLetter, slicedWord, timeStampEU,prodBaseURL } from '../../../../../helpers'
 import DeleteModal from './DeleteModal';
 
 
@@ -83,7 +83,7 @@ const SettingsPicture = () => {
       <Carousel onChange={(i)=> setIndex(i)} selectedItem={index}>
         {avatarsArr.map(({ avatarUrl, updatedAt }) =>
           <div key={avatarUrl}>
-            <img alt='pic' src={`http://localhost:3000/${avatarUrl}`}/>
+            <img alt='pic' src={`${prodBaseURL}/${avatarUrl}`}/>
             <p className="legend">{timeStampEU(updatedAt)}</p>         
           </div>)}
        </Carousel>      

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

@@ -157,10 +157,10 @@ const useStyles = makeStyles({
     left: 0,
     width: '100%',
     minHeight:'100%',  
-    zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    cursor:'pointer'
   },
   modalDelete: {
     background: '#ffffff',

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

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
-import { Carousel } from 'react-responsive-carousel';
+import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
@@ -12,7 +12,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -148,7 +148,7 @@ const useStyles = makeStyles({
       color:'#ffffff'
     }
   },    
-  overlay: {
+   overlay: {
     position: 'fixed',
     top: 0,
     left: 0,
@@ -156,17 +156,43 @@ const useStyles = makeStyles({
     height: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflowY: 'hidden',
     boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
   },
-  carousel: {
-    position: "absolute",
-    left: '35%',
-    top:'2%',
+  wrapperOverlayImg: {
     width: '30%',
-    height:'80%',
+    maxHeight: '80%',
+    position: 'relative',
+    display: 'flex',
+  },
+  overlayDownloadIcon: {
+    position: 'absolute',
+    content: '',
+    right: 0,
+    top: -40,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    borderRadius: '50%',
+    '&:hover': {
+      backgroundColor: '#ffffff',
+      color: '#b8b7b7',
+    }
   },
+  overlayTime: {
+    position: 'absolute',
+    content: '',    
+    color: '#ffffff',
+    top: -30,
+    left: 0,
+    borderRadius: 10,
+    padding:'2px 6px 2px 6px',
+    backgroundColor:'#707070'
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -233,22 +259,13 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,_id}:I
   }   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
-      <Carousel className={classes.carousel}>
-        {[...messages].reduce((acc, el) => {
-          if (el.type === 'image' && el.message !== message) {
-            acc.push(el)
-            return acc
-          } else if (el.type === 'image') {
-            acc.unshift(el)
-            return acc 
-          }
-          return acc
-        },[]).map((el:any) => <div>
-              <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
-                <p className="legend">{timeStampFilter(el.createdAt)}</p>
-            </div>)}
-       </Carousel>
-    </div> :
+      <div className={classes.wrapperOverlayImg}>
+        <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
+        <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
+         onClick={() => handleDownload(url, fullType)}/>
+        <img width='100%' height='auto' alt='imageItem' src={url} />
+       </div>
+    </div>  :
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>

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

@@ -157,10 +157,10 @@ const useStyles = makeStyles({
     left: 0,
     width: '100%',
     minHeight:'100%',
-    zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    cursor:'pointer'
   },
   modalDelete: {
     background: '#ffffff',

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

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
-import { Carousel } from 'react-responsive-carousel';
+import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
@@ -12,7 +12,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -126,7 +126,7 @@ const useStyles = makeStyles({
       borderRadius: 7,
       width: 300,
       maxHeight: 400,
-      cursor: 'pointer',
+      cursor:'pointer',
     },  
     time: {
       position: "absolute",
@@ -156,17 +156,43 @@ const useStyles = makeStyles({
     height: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflowY: 'hidden',
     boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
   },
-  carousel: {
-    position: "absolute",
-    left: '35%',
-    top:'2%',
+  wrapperOverlayImg: {
     width: '30%',
-    height:'80%',
+    maxHeight: '80%',
+    position: 'relative',
+    display: 'flex',
+  },
+  overlayDownloadIcon: {
+    position: 'absolute',
+    content: '',
+    right: 0,
+    top: -40,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    borderRadius: '50%',
+    '&:hover': {
+      backgroundColor: '#ffffff',
+      color: '#b8b7b7',
+    }
   },
+  overlayTime: {
+    position: 'absolute',
+    content: '',    
+    color: '#ffffff',
+    top: -30,
+    left: 0,
+    borderRadius: 10,
+    padding:'2px 6px 2px 6px',
+    backgroundColor:'#707070'
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -233,22 +259,13 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,_id}:I
   }   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
-      <Carousel className={classes.carousel}>
-        {[...messages].reduce((acc, el) => {
-          if (el.type === 'image' && el.message !== message) {
-            acc.push(el)
-            return acc
-          } else if (el.type === 'image') {
-            acc.unshift(el)
-            return acc 
-          }
-          return acc
-        },[]).map((el:any) => <div>
-              <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
-                <p className="legend">{timeStampFilter(el.createdAt)}</p>
-            </div>)}
-       </Carousel>
-    </div> :
+      <div className={classes.wrapperOverlayImg}>
+        <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
+        <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
+         onClick={() => handleDownload(url, fullType)}/>
+        <img width='100%' height='auto' alt='imageItem' src={url} />
+       </div>
+    </div>  :
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>

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

@@ -17,7 +17,7 @@ import {
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { getIsOpen } from '../../../../../redux/control/selector'
-import { playNotification } from "../../../../../helpers";
+import { playNotification,prodBaseURL } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 
 const useStyles = makeStyles({   
@@ -227,7 +227,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
             }
         }
         clearMessage()
-        playNotification('http://localhost:3000/send.mp3')
+        playNotification(`${prodBaseURL}/notifications/send.mp3`)
         setTimeout(handleScrollTo, 4000);
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)

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

@@ -23,7 +23,7 @@ import { getScroll } from '../../../../redux/control/selector'
 import { actionScroll } from '../../../../redux/control/action'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 import { seenChat } from "../../../../api-data";
-import { timeStampFilter } from "../../../../helpers";
+import { timeStampFilter,prodBaseURL } from "../../../../helpers";
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
@@ -141,7 +141,7 @@ const ChatBar = () => {
             time = createdAt
             isTime = true
           }
-          const url = `http://localhost:3000/${message}`
+          const url = `${prodBaseURL}/${message}`
           if (number !== userNumber) {
             if (type === 'text') return (<div key={createdAt}>
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}

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

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 
 import { getChat } from '../../../../../../redux/chat/selector';
 import { removeChatForBoth } from '../../../../../../api-data';
-import { firstLetter,slicedWord } from '../../../../../../helpers';
+import { firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers';
 
 const useStyles = makeStyles({
   modalDelete: {
@@ -56,7 +56,7 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

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

@@ -8,7 +8,7 @@ import { useEffect,useRef } from 'react';
 import { actionIsOpen } from '../../../../../redux/control/action'
 import { getChat } from '../../../../../redux/chat/selector'
 import { asyncGetChatById } from '../../../../../redux/chat/operations'
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../helpers'
+import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
@@ -30,7 +30,7 @@ const Credentials = () => {
   return (
     <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
       <ListItemIcon >
-        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 44, height: 44 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/AudioList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
 import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -34,7 +34,7 @@ const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/FilesList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
 import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -35,7 +35,7 @@ const FilesList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU } from '../../../../../../../../helpers'
+import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -64,7 +64,7 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const handleOpenWatch = () => !watch && setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   
-  const url = `http://localhost:3000/${message}`
+  const url = `${prodBaseURL}/${message}`
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/TextList/index.tsx

@@ -9,7 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied } from '../../../../../../../helpers'
+import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../../../helpers'
 import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -36,7 +36,7 @@ const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
-              <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+              <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>
                   {`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/VideoList/index.tsx

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
 import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -34,7 +34,7 @@ const VideoList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
-                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfilePicture/index.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux';
 import { Carousel } from 'react-responsive-carousel';
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers'
+import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers'
 import { getChat } from '../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
@@ -44,7 +44,7 @@ const ProfilePicture = () => {
     <div className={classes.container}>
       <Carousel>
         {avatarsArr.map(({avatarUrl,updatedAt}) => <div>
-              <img alt='pic' src={`http://localhost:3000/${avatarUrl}`}/>
+              <img alt='pic' src={`${prodBaseURL}/${avatarUrl}`}/>
                 <p className="legend">{timeStampEU(updatedAt)}</p>
             </div>)}
        </Carousel>      

src/components/HomePage/RightBar/RightListsAndBars/EditBar/Delete/index.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { removeContact } from '../../../../../../api-data';
 import { TContact } from '../../../../../../typescript/redux/contacts/types';
-import { slicedWord,firstLetter } from '../../../../../../helpers';
+import { slicedWord,firstLetter,prodBaseURL } from '../../../../../../helpers';
 const useStyles = makeStyles({
   container: {
     width: '100%',
@@ -71,7 +71,7 @@ const Delete = ({isContact}:{isContact:TContact}) => {
         {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/RightBar/RightListsAndBars/EditBar/EditList/index.tsx

@@ -3,7 +3,7 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Checkbox from '@mui/material/Checkbox';
 import ListItemText from '@mui/material/ListItemText';
-import { format,firstLetter,slicedWord } from '../../../../../../helpers'
+import { format,firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers'
 import { TChat } from '../../../../../../typescript/redux/chat/types'
 
 const useStyles = makeStyles({
@@ -80,7 +80,7 @@ const EditList = (props: IEditList) => {
   return (
     <div className={classes.container} >     
       <ListItemAvatar style={{marginBottom:10}}>
-         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+         <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 120, height: 120,marginRight:2}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>

src/components/HomePage/RightBar/RightListsAndBars/SearchList/index.tsx

@@ -12,7 +12,7 @@ import Search from './Search'
 import AlertInfo from "../../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../../redux/messages/selector'
 import { getChat } from '../../../../../redux/chat/selector'
-import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort } from '../../../../../helpers'
+import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodBaseURL } from '../../../../../helpers'
 import { TMessages } from '../../../../../typescript/redux/messages/types';
 
 const useStyles = makeStyles({
@@ -76,7 +76,7 @@ return (
           <div key={createdAt}>
               <ListItem alignItems="flex-start" className={classes.listItem}>
                      <ListItemAvatar>
-                        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+                        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
                           sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
                           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                         </Avatar>

src/components/reusableComponents/Routes/PrivateRoute/index.tsx

@@ -8,7 +8,7 @@ function PrivateRoute({ children, ...routeProps }: IPrivateProps) {
   const token = useSelector(getToken)
   return (
     <Route {...routeProps}>
-      {token ? children : <Redirect to="/z/" />}
+      {token ? children : <Redirect to="/w/" />}
     </Route>
   );
 }

src/helpers/index.ts

@@ -130,7 +130,7 @@ const sortByRecent = (chats:TChats,sort:boolean) => [...chats].sort((a, b) => {
   return direction ? 1 : -1
 })
 
-
+const prodBaseURL = 'https://w-telegram.herokuapp.com'
 
 export {
   format,
@@ -147,5 +147,6 @@ export {
   playNotificationWithoutPermission,
   handleDownload,
   handleSort,
-  sortByRecent
+  sortByRecent,
+  prodBaseURL,
 }