done contacts

package-lock.json

@@ -25,6 +25,7 @@
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
         "canvas": "^2.8.0",
+        "date-fns": "^2.28.0",
         "formik": "^2.2.6",
         "gh-pages": "^3.1.0",
         "modern-normalize": "^1.0.0",
@@ -43,6 +44,7 @@
         "redux-logger": "^3.0.6",
         "redux-persist": "^6.0.0",
         "redux-toolkit": "^1.1.2",
+        "shortid": "^2.2.16",
         "typescript": "^4.3.5",
         "uuid": "^8.3.1",
         "web-vitals": "^0.2.4",
@@ -51,6 +53,7 @@
       "devDependencies": {
         "@types/react-redux": "^7.1.18",
         "@types/react-router-dom": "^5.1.8",
+        "@types/shortid": "^0.0.29",
         "husky": "^4.3.0",
         "lint-staged": "^10.5.2",
         "prettier": "^2.2.1",
@@ -3405,6 +3408,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/shortid": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
+      "integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
+      "dev": true
+    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -6619,6 +6628,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -18712,6 +18734,19 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
+    "node_modules/shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "dependencies": {
+        "nanoid": "^2.1.0"
+      }
+    },
+    "node_modules/shortid/node_modules/nanoid": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+    },
     "node_modules/side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
@@ -25270,6 +25305,12 @@
         "@types/node": "*"
       }
     },
+    "@types/shortid": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
+      "integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
+      "dev": true
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -28006,6 +28047,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -37893,6 +37939,21 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "canvas": "^2.8.0",
+    "date-fns": "^2.28.0",
     "formik": "^2.2.6",
     "gh-pages": "^3.1.0",
     "modern-normalize": "^1.0.0",
@@ -39,6 +40,7 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-toolkit": "^1.1.2",
+    "shortid": "^2.2.16",
     "typescript": "^4.3.5",
     "uuid": "^8.3.1",
     "web-vitals": "^0.2.4",
@@ -73,6 +75,7 @@
   "devDependencies": {
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.8",
+    "@types/shortid": "^0.0.29",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.2",
     "prettier": "^2.2.1",

src/App.module.css

@@ -2,4 +2,7 @@
   min-width: 100vw;
   min-height: 100vh;
   background-color: rgb(255, 255, 255);
+  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: hidden;
 }

src/App.tsx

@@ -11,6 +11,13 @@ import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
 import PublicRoute from './components/Routes/PublicRoute/PublicRoute';
 import Loader from './components/Loader/Loader';
 
+const HomePage = lazy(
+  () =>
+    import(
+      './components/HomePage' /* webpackChunkName: "HomePage" */
+    ),
+);
+
 const AuthPage = lazy(
   () =>
     import(
@@ -44,7 +51,7 @@ function App() {
         <BrowserRouter>
           <Switch>
             <PrivateRoute exact path="/">
-              Home
+              <HomePage/>
             </PrivateRoute>
               <PublicRoute  path={'/z/'} restricted>
                 <AuthPage />

src/components/DropZone/UploadAvatar/index.tsx

@@ -50,7 +50,7 @@ function UploadAvatar({ setUpload }: IUploadAvatar) {
       </ListItemIcon>
       <ListItemText
         primary="Avatar uploaded"
-          secondary={`${file.path} -${file.size} bytes`}/>
+        secondary={`${file.path} -${file.size} bytes`}/>
    </ListItem>
   ));
 

src/components/HomePage/ContactsBar/ChatsList/chats.tsx

@@ -0,0 +1,83 @@
+export  const chats = [
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+        {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'gh',
+        message: 'dddddddddddddd'
+    },
+        {
+        avatarUrl: null,
+        name: 'jjjjj',
+        message: 'dddddddddddddd'
+    },
+            {
+        avatarUrl: null,
+        name: 'gh',
+        message: 'dddddddddddddd'
+    },
+                {
+        avatarUrl: null,
+        name: 'jlllll',
+        message: 'dddddddddddddd'        
+    },
+                    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'oooooo',
+        message: 'dddddddddddddd'
+    },
+                        {
+        avatarUrl: null,
+        name: 'ee',
+        message: 'dddddddddddddd'
+    },
+                            {
+        avatarUrl: null,
+        name: 'v',
+        message: 'dddddddddddddd'
+    },
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
+        {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'gh',
+        message: 'dddddddddddddd'
+    },
+        {
+        avatarUrl: null,
+        name: 'jjjjj',
+        message: 'dddddddddddddd'
+    },
+            {
+        avatarUrl: null,
+        name: 'gh',
+        message: 'dddddddddddddd'
+    },
+                {
+        avatarUrl: null,
+        name: 'jlllll',
+        message: 'dddddddddddddd'        
+    },
+                    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'oooooo',
+        message: 'dddddddddddddd'
+    },
+                        {
+        avatarUrl: null,
+        name: 'ee',
+        message: 'dddddddddddddd'
+    },
+                            {
+        avatarUrl: null,
+        name: 'v',
+        message: 'dddddddddddddd'
+    }                            
+]
+

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

@@ -0,0 +1,130 @@
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import Avatar from '@mui/material/Avatar';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { makeStyles, Typography } from '@material-ui/core'
+import { useState } from 'react';
+import  shortid  from 'shortid';
+
+import doubleCheck from '../../../../img/clipart289625.png'
+import { chats } from './chats'
+
+const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
+
+const useStyles = makeStyles({
+  list: {
+    width: '100%',
+    maxHeight: '890px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },
+  listItem: {},
+  listItem_iconAvatar: {
+    marginRight:10
+  },
+  listItem_iconRight: {
+    marginRight: 10,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    flexDirection: 'column'
+  },
+  listItem_iconTimeChecked: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    marginBottom:2
+  },
+  listItem_iconRightBtn: {
+    background: '#0ac40a',
+    borderRadius: '50%',
+    color: '#ffffff',
+    border: 'none',
+    height: 24,
+    width: 24,
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    fontSize: 12,
+    marginLeft: 'auto',
+    '&:hover': {
+      outline: 'solid 3px #3ee415',
+    }
+  },
+  listItem_icon_time: {
+    fontSize: 12,
+    marginLeft:5
+  }
+})
+
+const  ChatsList = () => {
+  const [selectedIndex, setSelectedIndex] = useState<number>(1);
+
+  const classes = useStyles()
+
+  const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
+    console.log(i,'index','selected chat in chat bar',e)
+    setSelectedIndex(i);
+  }
+
+  const handleNewMsgS = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, i: number) => {
+    e.stopPropagation()
+    console.log(i,'index','clicked read new messages')
+  }
+  
+  const data = new Date(2022, 3, 8).toLocaleString("en-US", {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+  return (
+    <List className={classes.list} component="nav"
+        aria-label="main mailbox folders">
+         {chats && chats.map((chat: any,i:number) =>
+          <ListItemButton
+          className={classes.listItem}
+          key={shortid.generate()}
+          selected={selectedIndex === i}
+          onClick={(e) => handleListItemClick(e, i)}
+          >
+          <ListItemIcon className={classes.listItem_iconAvatar}>
+            <Avatar alt={chat.name} src={chat.avatarUrl?chat.avatarUrl:undefined}
+              sx={{ background: randomColor(), width: 54, height: 54 }}/>
+          </ListItemIcon> 
+            <ListItemText primary={chat.name.slice(0,50)} secondary={chat.message.slice(0,35)} />
+          <ListItemIcon className={classes.listItem_iconRight}>
+               <div className={classes.listItem_iconTimeChecked}>
+                 <img alt='double check' width="16" height='16' src={doubleCheck} />
+                 <Typography  className={classes.listItem_icon_time} variant="h6"   color="initial">{data}</Typography>
+               </div>
+               <button onClick={(e) => handleNewMsgS(e,i)} className={classes.listItem_iconRightBtn}>17</button>
+          </ListItemIcon>            
+        </ListItemButton>)}
+      </List>
+  );
+}
+
+export default ChatsList

src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/index.tsx

@@ -0,0 +1,48 @@
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import { makeStyles, Typography } from '@material-ui/core'
+import  shortid  from 'shortid';
+
+import {users} from './user'
+
+const useStyles = makeStyles({
+    stack: {
+        display: 'flex',
+        justifyContent: 'space-around'
+    },
+    stackItem: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        padding: 5,
+        borderRadius: 5,
+        '&:hover': {
+            background: '#eeeded'
+        }
+    },
+    titleName: {
+        color: '#6e6e6e',
+        fontSize: 16,
+        paddingTop:5
+    }
+})
+
+const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
+
+
+const ChatListRecent = () => {
+    const classes = useStyles()
+    return (
+    <Stack direction="row" className={classes.stack}>
+      {users && users.slice(0, 6).map(({ name, avatarUrl }) => <div key={shortid.generate()} className={classes.stackItem}>
+        <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
+              sx={{ background: randomColor(), width: 54, height: 54 }}>{name.slice(0, 1).toUpperCase()}</Avatar>
+        <Typography variant="h6" className={classes.titleName} >{name}</Typography>
+          </div>)}
+    </Stack>   
+    )
+}
+
+export default ChatListRecent

src/components/HomePage/ContactsBar/SearchBar/ChatListRecent/user.tsx

@@ -0,0 +1,35 @@
+export  const users = [
+    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grig',
+    },
+        {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'gh',
+    },
+        {
+        avatarUrl: null,
+        name: 'jjjjj',
+    },
+            {
+        avatarUrl: null,
+        name: 'gh',
+    },
+                {
+        avatarUrl: null,
+        name: 'jlllll',
+    },
+                    {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'oooooo',
+    },
+                        {
+        avatarUrl: null,
+        name: 'ee',
+    },
+                            {
+        avatarUrl: null,
+        name: 'v',
+    }
+]
+

src/components/HomePage/ContactsBar/SearchBar/index.tsx

@@ -0,0 +1,48 @@
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core'
+
+import ChatListRecent from './ChatListRecent'
+
+const useStyles = makeStyles({
+    bottomNavigation: {
+        boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
+        marginBottom: 20
+    },
+    icon: {
+        marginBottom:0,
+    },
+    underline: {
+        fontSize: 30,
+        lineHeight:0
+    },
+})
+
+const SearchBar = () => {
+    const [isActive, setIsActive] = useState<number>(0)
+    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
+    const classes = useStyles()
+    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
+    const Label = () => <span className={classes.underline}>__</span>
+    return (
+    <>
+      <BottomNavigation
+        showLabels
+        value={isActive}
+        onChange={handleIsActive}
+        className={classes.bottomNavigation}
+      >
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Chats' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Links' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />}  />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
+        </BottomNavigation>
+       {isActive === 0&&<ChatListRecent/>}
+    </>      
+    )
+}
+
+export default SearchBar

src/components/HomePage/ContactsBar/index.tsx

@@ -0,0 +1,108 @@
+import Toolbar from '@mui/material/Toolbar'
+import IconButton from '@mui/material/IconButton'
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
+import InputBase from '@mui/material/InputBase';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { styled, alpha } from '@mui/material/styles';
+import { makeStyles } from '@material-ui/core'
+import React, { useState } from 'react';
+
+import SearchBar from './SearchBar'
+import ChatsList from './ChatsList'
+
+const Search = styled('div')(({ theme }:any) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+    background: '#f1f0f0',
+    borderRadius: '20px',
+    padding: theme.spacing(1, 1, 1, 0),
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '35ch',
+      '&:focus': {
+          color: '#2184f7',
+          outline: '2px solid  #2184f7',
+          background: '#f5f5f5'
+      },
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+    toolBar: {
+        background: '#ffffff',
+        color: 'rgba(0, 0, 0, 0.87)'
+  },
+  iconBtn: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  iconArrow: {
+    '&:hover': {
+      transform: 'rotate(360deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+})
+
+const ContactsBar = () => {
+    const classes = useStyles()
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+    const [value,setValue] = useState<string>('')
+    const handleFocus = (): void => setIsOpen(true)
+    const handleClick = (): void => setIsOpen(false)
+    const handleSearch = (e:React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
+    return (
+    <>
+        <Toolbar className={classes.toolBar}>
+            <IconButton aria-label="" onClick={handleClick}>
+                {isOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
+            </IconButton>
+            <Search>
+                <SearchIconWrapper>
+                    <SearchIcon />
+                </SearchIconWrapper>
+                <StyledInputBase
+                 onFocus={handleFocus}
+                 onChange={handleSearch}
+                 placeholder="Search"
+                 inputProps={{ 'aria-label': 'search' }}
+                />
+            </Search>
+        </Toolbar>
+            {isOpen?<SearchBar />:<ChatsList/>}
+    </>
+    )
+}
+
+export default ContactsBar

src/components/HomePage/index.tsx

@@ -0,0 +1,31 @@
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@material-ui/core'
+import ContactsBar from './ContactsBar'
+
+const useStyles = makeStyles({
+    container: {
+        overflow: 'hidden',
+        minHeight: '100vh',
+        minWidth: '100vw',
+        overflowY:'hidden'
+    },
+    chat: {
+        minHeight: '100%',
+        background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+    },
+})
+
+const HomePage = () => {
+    const classes = useStyles()
+    return (
+       <Grid container spacing={0} className={classes.container}>
+            <Grid item lg={3}>
+                <ContactsBar/>
+            </Grid>
+            <Grid item lg={9} className={classes.chat}>
+            </Grid>
+       </Grid>
+    )
+}
+
+export default HomePage

src/img/double-check-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="#03bd03" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 12.5L5.57574 16.5757C5.81005 16.8101 6.18995 16.8101 6.42426 16.5757L9 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16 7L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7 12L11.5757 16.5757C11.8101 16.8101 12.1899 16.8101 12.4243 16.5757L22 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/index.css

@@ -6,6 +6,7 @@ html {
 body {
   min-width: 100vw;
   min-height: 100vh;
+  overflow: hidden;
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -50,5 +51,4 @@ ul {
 }
 
 
-
 @import 'https://fonts.googleapis.com/css?family=Mountains+of+Christmas';

src/redux/authorization/operations/index.ts

@@ -14,16 +14,12 @@ import { TResPromiseAll } from '../../../typescript/redux/authorization/types'
 const asyncCreateUser = (name:string, lastName: string,file:object) => async (dispatch:any) => {
   try {
     dispatch(actionIsLoading(true));
-    const reader: any = new FileReader()
-    const formData:any = new FormData()
-      reader.onload = async () => {
-        formData.append("avatar", file);
-        const data = await Promise.all<TResPromiseAll>(
-          [updateUserAvatar(formData), updateCredentials(name, lastName)])
-        const token = data.find(el => el?.token)?.token
-        token&&dispatch(actionLogInSuccess(token))
-      }
-     await reader.readAsArrayBuffer(file)
+    const formData: any = new FormData()
+    formData.append("avatar", file);
+    const data = await Promise.all<TResPromiseAll>(
+    [updateUserAvatar(formData), updateCredentials(name, lastName)])
+    const token = data.find(el => el?.token)?.token
+    token&&dispatch(actionLogInSuccess(token))
   } catch (e) {
     dispatch(actionLogInReject())
   } finally {
@@ -37,7 +33,6 @@ const asyncLogin = (number:string, code: string,cb:() => void ) => async (dispat
     const data = await loginUser<{ token: string, registered: boolean }>(number, code);
     const token = data?.token
     const registered = data?.registered
-    console.log(token,registered)
     if (!token) return
     setToken.set(token)
     if (!registered) return cb()

src/redux/authorization/reducer/index.ts

@@ -1,6 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { IAuthorizationState , IAuthorizationPayload} from '../../../typescript/redux/authorization/interfaces';
-
 import {
   actionLogInSuccess,
   actionLogInReject,
@@ -19,9 +18,8 @@ const initialState:IAuthorizationState = {
   avatarUrl: '',
 };
 
-
 const reducerAuthorization = createReducer(initialState, {
-  [actionLogInSuccess.type]: (state, { payload:token }: {payload: string}) => {
+  [actionLogInSuccess.type]: (state, { payload:token }: { payload: string }) => {
     return {...state,token};
   },
   [actionLogInReject.type]: (state, _) => {
@@ -33,7 +31,7 @@ const reducerAuthorization = createReducer(initialState, {
   [actionLogOutReject.type]: (state, _) => {
     return state;
   },
-  [actionCurrentSuccess.type]: (_state, { payload}:IAuthorizationPayload) => {
+  [actionCurrentSuccess.type]: (_state, { payload }:IAuthorizationPayload) => {
     return payload
   },
   [actionCurrentReject.type]: (_state, _) => {