Merge pull request #12 from iVladyuser/accounts

updateAvatar

src/components/App.jsx

@@ -13,6 +13,8 @@ const Home = lazy(() => import('pages/HomePage'));
 const Register = lazy(() => import('pages/RegisterPage'));
 const Login = lazy(() => import('pages/LogInPage'));
 const Contacts = lazy(() => import('pages/ContactsPage'));
+const Profile = lazy(() => import('pages/Profile'));
+const Update = lazy(() => import('pages/Update'));
 
 const appRoutes = [
   { path: ROUTES.HOME_ROUTE, element: <Home /> },
@@ -40,6 +42,22 @@ const appRoutes = [
       </PrivateRoute>
     ),
   },
+  {
+    path: ROUTES.PROFILE_ROUTE,
+    element: (
+      <PrivateRoute>
+        <Profile />
+      </PrivateRoute>
+    ),
+  },
+  {
+    path: ROUTES.UPDATE_ROUTE,
+    element: (
+      <PrivateRoute>
+        <Update />
+      </PrivateRoute>
+    ),
+  },
 ];
 
 const App = () => {

src/components/ContactList/ContactList.jsx

@@ -41,15 +41,15 @@ const ContactList = () => {
   return (
     <List>
       {showContacts &&
-        visibleContacts.map(({ id, name, number }) => {
+        visibleContacts.map(({ _id, name, number }) => {
           return (
-            <ContactItem key={id}>
+            <ContactItem key={_id}>
               <CardWrapper>
                 <Info>{name}</Info>
                 <Info>{number}</Info>
                 <ButtonDelete
                   disabled={isLoading}
-                  onClick={() => handleDeleteContact(id)}
+                  onClick={() => handleDeleteContact(_id)}
                 >
                   {isLoading ? <SpinerDel /> : 'Delete'}
                 </ButtonDelete>

src/components/Toast/Toast.jsx

@@ -4,7 +4,7 @@ export const TostBox = () => {
   return (
     <ToastContainer
       position="top-center"
-      autoClose={2000}
+      autoClose={1000}
       hideProgressBar={false}
       newestOnTop={false}
       closeOnClick

src/components/UserMenu/UserMenu.jsx

@@ -1,4 +1,5 @@
 import avatar from './avatar.png';
+import { Link } from 'react-router-dom';
 import { Avatar, Button, Toolbar } from '@mui/material';
 import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 import { selectUserData } from 'redux/auth/authSelectors';
@@ -16,7 +17,7 @@ export const UserMenu = () => {
   return (
     <Toolbar sx={{ display: 'flex', columnGap: 2, fontSize: 18 }}>
       <Avatar alt={''} src={avatar} sx={{ width: 36, height: 36 }} />
-      Welcome, {userData.name}!
+      Welcome, {userData.name}!<Link to="/profile">Profile</Link>
       <Button
         onClick={onLogOut}
         variant="text"

src/constants/routes.js

@@ -2,3 +2,5 @@ export const HOME_ROUTE = '/';
 export const LOGIN_ROUTE = '/login';
 export const REGISTER_ROUTE = '/register';
 export const CONTACTS_ROUTE = '/contacts';
+export const PROFILE_ROUTE = '/profile';
+export const UPDATE_ROUTE = '/profile/update';

src/pages/Profile.jsx

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+import { selectUserData } from 'redux/auth/authSelectors';
+import { Link } from 'react-router-dom';
+
+const Profile = () => {
+  const userData = useSelector(selectUserData);
+  console.log(userData);
+
+  const isAvatar = userData.avatarURL.includes('gravatar')
+    ? userData.avatarURL
+    : `http://localhost:8000/${userData.avatarURL}`;
+
+  return (
+    <div style={{ marginTop: 60 }}>
+      <Link to="update">Update</Link>
+      <h2> {userData.name}</h2>
+      <p>{userData.email}</p>
+      <img src={isAvatar} alt={''} />
+    </div>
+  );
+};
+
+export default Profile;

src/pages/Update.jsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateAvatarThunk } from 'services/fetchAuth';
+
+const Update = () => {
+  const [file, setFile] = useState(null);
+  const dispatch = useDispatch();
+
+  const handleChange = event => {
+    setFile(event.target.files[0]);
+  };
+
+  const handleSubmit = event => {
+    event.preventDefault();
+
+    dispatch(updateAvatarThunk(file));
+  };
+  return (
+    <div style={{ marginTop: 60 }}>
+      <form onSubmit={handleSubmit}>
+        <input type="file" onChange={handleChange} />
+        <button>Upload</button>
+      </form>
+    </div>
+  );
+};
+
+export default Update;

src/redux/auth/authSlice.js

@@ -35,12 +35,16 @@ const authSlice = createSlice({
         state.authenticated = true;
         state.userData = payload;
       })
+      .addCase(authThunk.updateAvatarThunk.fulfilled, (state, { payload }) => {
+        state.userData.avatarURL = payload;
+      })
       .addMatcher(
         isAnyOf(
           authThunk.loginThunk.pending,
           authThunk.registerThunk.pending,
           authThunk.refreshThunk.pending,
-          authThunk.logOutThunk.pending
+          authThunk.logOutThunk.pending,
+          authThunk.updateAvatarThunk.pending
         ),
         state => {
           state.isLoading = true;
@@ -52,7 +56,8 @@ const authSlice = createSlice({
           authThunk.loginThunk.rejected,
           authThunk.registerThunk.rejected,
           authThunk.refreshThunk.rejected,
-          authThunk.logOutThunk.rejected
+          authThunk.logOutThunk.rejected,
+          authThunk.updateAvatarThunk.rejected
         ),
         (state, { payload }) => {
           state.isLoading = false;

src/redux/contacts/phoneBookSlice.js

@@ -21,7 +21,7 @@ const phoneBookSlice = createSlice({
         state.isLoading = false;
         state.error = null;
         state.contacts = state.contacts.filter(
-          contact => contact.id !== payload.id
+          contact => contact._id !== payload
         );
       })
       .addCase(addContact.fulfilled, (state, { payload }) => {

src/services/fetchAuth.js

@@ -2,7 +2,8 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 
 export const instance = axios.create({
-  baseURL: 'https://connections-api.herokuapp.com/',
+  // baseURL: 'https://connections-api.herokuapp.com/',
+  baseURL: 'http://localhost:8000',
 });
 
 export const setToken = token => {
@@ -29,6 +30,7 @@ export const registerThunk = createAsyncThunk(
       const { data } = await instance.post('/users/signup', formData);
 
       setToken(data.token);
+      console.log(data);
       return data;
     } catch (err) {
       return thunkApi.rejectWithValue(err.message);
@@ -72,3 +74,20 @@ export const logOutThunk = createAsyncThunk(
     }
   }
 );
+
+export const updateAvatarThunk = createAsyncThunk(
+  'auth/updateAvatarThunk',
+  async (file, thunkApi) => {
+    try {
+      const formData = new FormData();
+      formData.append('avatar', file);
+      const { data } = await instance.post('/users/avatar', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+
+      return data.avatar;
+    } catch (err) {
+      return thunkApi.rejectWithValue(err.message);
+    }
+  }
+);

src/services/fetchContacts.js

@@ -29,8 +29,9 @@ export const deleteContact = createAsyncThunk(
   'contacts/delete',
   async (contactId, thunkApi) => {
     try {
-      const response = await instance.delete(`/contacts/${contactId}`);
-      return response.data;
+      await instance.delete(`/contacts/${contactId}`);
+
+      return contactId;
     } catch (err) {
       return thunkApi.rejectWithValue(err.message);
     }