From 79869c611641f6e97b5c2d918c229f349a62724d Mon Sep 17 00:00:00 2001
From: Oleh Luzhniak <oleg.luzhnyak@gmail.com>
Date: Tue, 12 Dec 2023 23:34:41 +0200
Subject: [PATCH] add avatar to userModel

---
 src/App.tsx                         |  2 ++
 src/components/AppBar/UserMenu.tsx  |  5 +--
 src/components/Contacts/Contact.tsx | 48 +++++++++++++----------------
 src/redux/authSlice.ts              | 18 ++++++-----
 4 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d26f9a0..30d0400 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -46,6 +46,8 @@ export const App = () => {
       dispatch(
         setCredentials({
           name: user.data.name,
+          email: user.data?.email,
+          avatarURL: user.data?.avatarURL,
           isLoggedIn: true,
           isRefreshing: false,
         })
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
index fa0fadc..8631a64 100644
--- a/src/components/AppBar/UserMenu.tsx
+++ b/src/components/AppBar/UserMenu.tsx
@@ -16,7 +16,8 @@ import { getUser } from "../../redux/selectors";
 
 const UserMenu = () => {
   const [anchorElUser, setAnchorElUser] = useState(null);
-  const { name } = useSelector(getUser);
+  const { name, avatarURL } = useSelector(getUser);
+  console.log("avatarURL", useSelector(getUser));
 
   const dispatch = useDispatch();
   const [logout] = useLogoutMutation();
@@ -45,7 +46,7 @@ const UserMenu = () => {
     <Box sx={{ flexGrow: 0 }}>
       <Tooltip title={name}>
         <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-          <Avatar alt={name} children={name[0]} />
+          <Avatar alt={name} src={avatarURL} />
         </IconButton>
       </Tooltip>
       <Menu
diff --git a/src/components/Contacts/Contact.tsx b/src/components/Contacts/Contact.tsx
index dd7a015..bdb48f3 100644
--- a/src/components/Contacts/Contact.tsx
+++ b/src/components/Contacts/Contact.tsx
@@ -47,7 +47,7 @@ export const Contact: React.FC<Props> = ({
           onClick={handleDelete}
           title={`Delete ${name}`}
           loading={deleteInfo.isLoading}
-          loadingPosition="end"
+          // loadingPosition="end"
           variant="outlined"
           color="success"
         >
@@ -61,39 +61,33 @@ export const Contact: React.FC<Props> = ({
           <PersonIcon />
         </Avatar>
       </ListItemAvatar>
-      <ListItemText
-        primary={name}
-        secondary={
-          <Stack
-            direction={{ xs: "column", sm: "row" }}
-            spacing={{ xs: 0, sm: 2 }}
-            divider={<Divider orientation="vertical" flexItem />}
-          >
+      <Stack>
+        <ListItemText primary={name}></ListItemText>
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={{ xs: 0, sm: 2 }}
+          divider={<Divider orientation="vertical" flexItem />}
+        >
+          <Link href={"tel:" + phone} underline="hover" sx={{ color: "green" }}>
+            <Stack direction="row" spacing={1}>
+              <PhoneIcon fontSize="small" />
+              <span>{phone}</span>
+            </Stack>
+          </Link>
+          {email && (
             <Link
-              href={"tel:" + phone}
+              href={"mailto:" + email}
               underline="hover"
               sx={{ color: "green" }}
             >
               <Stack direction="row" spacing={1}>
-                <PhoneIcon fontSize="small" />
-                <span>{phone}</span>
+                <MailOutlineIcon fontSize="small" />
+                <span>{email}</span>
               </Stack>
             </Link>
-            {email && (
-              <Link
-                href={"mailto:" + email}
-                underline="hover"
-                sx={{ color: "green" }}
-              >
-                <Stack direction="row" spacing={1}>
-                  <MailOutlineIcon fontSize="small" />
-                  <span>{email}</span>
-                </Stack>
-              </Link>
-            )}
-          </Stack>
-        }
-      />
+          )}
+        </Stack>
+      </Stack>
     </ListItem>
   );
 };
diff --git a/src/redux/authSlice.ts b/src/redux/authSlice.ts
index e3ef192..eb1b93d 100644
--- a/src/redux/authSlice.ts
+++ b/src/redux/authSlice.ts
@@ -1,25 +1,27 @@
-import { createSlice } from '@reduxjs/toolkit';
-import storage from 'redux-persist/lib/storage';
-import { persistReducer } from 'redux-persist';
+import { createSlice } from "@reduxjs/toolkit";
+import storage from "redux-persist/lib/storage";
+import { persistReducer } from "redux-persist";
 
 const authInitialState = {
   isLoggedIn: false,
   isRefreshing: false,
-  token: '',
-  name: '',
+  token: "",
+  name: "",
+  avatarURL: "",
 };
 
 const persistConfig = {
-  key: 'root',
+  key: "root",
   storage,
-  whitelist: ['token'],
+  whitelist: ["token"],
 };
 
 const authSlice = createSlice({
-  name: 'auth',
+  name: "auth",
   initialState: authInitialState,
   reducers: {
     setCredentials(state, action) {
+      console.log(action);
       return (state = { ...state, ...action.payload });
     },
   },