Merge pull request #1 from w-arantes/feature-auth-SignIn/SignOut

Feature sign in / sign out with fixes

package.json

@@ -8,7 +8,7 @@
     "axios": "^0.19.2",
     "date-fns": "^2.0.0-beta.5",
     "date-fns-tz": "^1.0.7",
-    "history": "^4.9.0",
+    "history": "^4.10.1",
     "immer": "^6.0.2",
     "polished": "^3.5.1",
     "prop-types": "^15.7.2",

src/components/Header/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import Notifications from '~/components/Notifications';
@@ -7,11 +8,13 @@ import logo from '~/assets/logo-purple.svg';
 import { Container, Content, Profile } from './styles';
 
 export default function Header() {
+  const profile = useSelector(state => state.user.profile);
+
   return (
     <Container>
       <Content>
         <nav>
-          <img src={logo} alt="Gobarber" />
+          <img src={logo} alt="GoBarber" />
           <Link to="/dashboard">DASHBOARD</Link>
         </nav>
 
@@ -20,11 +23,14 @@ export default function Header() {
 
           <Profile>
             <div>
-              <strong>Wellington Arantes</strong>
-              <Link to="/profile">Meu Perfil</Link>
+              <strong>{profile.name}</strong>
+              <Link to="/profile">Meu perfil</Link>
             </div>
             <img
-              src="https://api.adorable.io/avatars/50/[email protected]"
+              src={
+                (profile.avatar && profile.avatar.url) ||
+                `https://api.adorable.io/avatars/50/[email protected]`
+              }
               alt="Wellington Arantes"
             />
           </Profile>

src/components/Header/styles.js

@@ -12,23 +12,19 @@ export const Content = styled.div`
   height: 64px;
   max-width: 900px;
   margin: 0 auto;
-
   nav {
     display: flex;
     align-items: center;
-
     img {
       margin-right: 20px;
       padding-right: 20px;
       border-right: 1px solid #eee;
     }
-
     a {
       font-weight: bold;
       color: #7159c1;
     }
   }
-
   aside {
     display: flex;
     align-items: center;
@@ -40,16 +36,13 @@ export const Profile = styled.div`
   margin-left: 20px;
   padding-left: 20px;
   border-left: 1px solid #eee;
-
   div {
     text-align: right;
     margin-right: 10px;
-
     strong {
       display: block;
       color: #333;
     }
-
     a {
       display: block;
       margin-top: 2px;
@@ -58,6 +51,7 @@ export const Profile = styled.div`
     }
   }
   img {
+    width: 32px;
     height: 32px;
     border-radius: 50%;
   }

src/components/Notifications/index.js

@@ -50,7 +50,7 @@ export default function Notifications() {
 
     setNotifications(
       notifications.map(notification =>
-        notification._id == id ? { ...notification, read: true } : notification
+        notification._id === id ? { ...notification, read: true } : notification
       )
     );
   }

src/pages/Profile/AvatarInput/index.js

@@ -0,0 +1,59 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useField } from '@rocketseat/unform';
+import api from '~/services/api';
+
+import { Container } from './styles';
+
+export default function AvatarInput() {
+  const { defaultValue, registerField } = useField('avatar');
+
+  const [file, setFile] = useState(defaultValue && defaultValue.id);
+  const [preview, setPreview] = useState(defaultValue && defaultValue.url);
+
+  const ref = useRef();
+
+  useEffect(() => {
+    if (ref.current) {
+      registerField({
+        name: 'avatar_id',
+        ref: ref.current,
+        path: 'dataset.file',
+      });
+    }
+  }, [ref, registerField]);
+
+  async function handleChange(e) {
+    const data = new FormData();
+
+    data.append('file', e.target.files[0]);
+
+    const response = await api.post('files', data);
+
+    const { id, url } = response.data;
+
+    setFile(id);
+    setPreview(url);
+  }
+
+  return (
+    <Container>
+      <label htmlFor="avatar">
+        <img
+          src={
+            preview || 'https://api.adorable.io/avatars/50/[email protected]'
+          }
+          alt=""
+        />
+
+        <input
+          type="file"
+          id="avatar"
+          accept="image/*"
+          data-file={file}
+          onChange={handleChange}
+          ref={ref}
+        />
+      </label>
+    </Container>
+  );
+}

src/pages/Profile/AvatarInput/styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  align-self: center;
+  margin-bottom: 30px;
+
+  label {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    img {
+      height: 120px;
+      width: 120px;
+      border-radius: 50%;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      background: #eee;
+    }
+
+    input {
+      display: none;
+    }
+  }
+`;

src/pages/Profile/index.js

@@ -1,7 +1,53 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Form, Input } from '@rocketseat/unform';
 
-// import { Container } from './styles';
+import { logOut } from '~/store/modules/auth/actions';
+import { updateProfileRequest } from '~/store/modules/user/actions';
+
+import AvatarInput from './AvatarInput';
+
+import { Container } from './styles';
 
 export default function Profile() {
-  return <div />;
+  const dispatch = useDispatch();
+  const profile = useSelector(state => state.user.profile);
+
+  function handleSubmit(data) {
+    dispatch(updateProfileRequest(data));
+  }
+
+  function handlelogOut() {
+    dispatch(logOut());
+  }
+
+  return (
+    <Container>
+      <Form initialData={profile} onSubmit={handleSubmit}>
+        <AvatarInput name="avatar_id" />
+        <Input name="name" placeholder="Nome completo" />
+        <Input name="email" placeholder="Seu endereço de e-mail" />
+
+        <hr />
+
+        <Input
+          type="password"
+          name="oldPassword"
+          placeholder="Sua senha atual"
+        />
+        <Input type="password" name="password" placeholder="Nova senha" />
+        <Input
+          type="password"
+          name="confirmPassword"
+          placeholder="Confirmação de senha"
+        />
+
+        <button type="submit">Atualizar perfil</button>
+      </Form>
+
+      <button type="submit" onClick={handlelogOut}>
+        Sair do GoBarber
+      </button>
+    </Container>
+  );
 }

src/pages/Profile/styles.js

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+import { darken } from 'polished';
+
+export const Container = styled.div`
+  max-width: 600px;
+  margin: 50px auto;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+
+    input {
+      background: rgba(0, 0, 0, 0.1);
+      border: 0;
+      border-radius: 4px;
+      height: 44px;
+      padding: 0 15px;
+      color: #fff;
+      margin: 0 0 10px;
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+
+    span {
+      color: #fb6f91;
+      align-self: flex-start;
+      margin: 0 0 10px;
+      font-weight: bold;
+    }
+
+    hr {
+      border: 0;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.2);
+      margin: 10px 0 20px;
+    }
+
+    button {
+      margin: 5px 0 0;
+      height: 44px;
+      background: #3b9eff;
+      font-weight: bold;
+      color: #fff;
+      border: 0;
+      border-radius: 4px;
+      font-size: 16px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: ${darken(0.03, '#3b9eff')};
+      }
+    }
+
+    a {
+      color: #fff;
+      margin-top: 15px;
+      font-size: 16px;
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  > button {
+    width: 100%;
+    margin: 10px 0 0;
+    height: 44px;
+    background: #fb6f91;
+    font-weight: bold;
+    color: #fff;
+    border: 0;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background 0.2s;
+
+    &:hover {
+      background: ${darken(0.08, '#fb6f91')};
+    }
+  }
+`;
+
+// export const Input = styled.div``;

src/store/modules/auth/actions.js

@@ -24,3 +24,9 @@ export function signFailure() {
     type: '@auth/SIGN_FAILURE',
   };
 }
+
+export function logOut() {
+  return {
+    type: '@auth/SIGN_OUT',
+  };
+}

src/store/modules/auth/reducer.js

@@ -23,8 +23,12 @@ export default function auth(state = INITIAL_STATE, action) {
         draft.loading = false;
         break;
       }
+      case '@auth/SIGN_OUT': {
+        draft.token = null;
+        draft.signed = false;
+        break;
+      }
       default:
-        return state;
     }
   });
 }

src/store/modules/auth/sagas.js

@@ -62,8 +62,13 @@ export function setToken({ payload }) {
   }
 }
 
+export function logOut() {
+  history.push('/');
+}
+
 export default all([
   takeLatest('persist/REHYDRATE', setToken),
   takeLatest('@auth/SIGN_IN_REQUEST', signIn),
   takeLatest('@auth/SIGN_UP_REQUEST', signUp),
+  takeLatest('@auth/SIGN_OUT', logOut),
 ]);

src/store/modules/user/actions.js

@@ -0,0 +1,19 @@
+export function updateProfileRequest(data) {
+  return {
+    type: '@user/UPDATE_PROFILE_REQUEST',
+    payload: { data },
+  };
+}
+
+export function updateProfileSuccess(profile) {
+  return {
+    type: '@user/UPDATE_PROFILE_SUCCESS',
+    payload: { profile },
+  };
+}
+
+export function updateProfileFailure() {
+  return {
+    type: '@user/UPDATE_PROFILE_FAILURE',
+  };
+}