171648121 Update user profile #13

Irutingabo · 2020-06-12T17:29:45Z

Description

Users are able to amend/edit their profiles depending on change of preference to the full disclosure of the individual user

Type of change

Please select the relevant option

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Others (cosmetics, styling, improvements)
This change requires a documentation update

How Has This Been Tested?

Unit
Integration
End-to-end
No testing required

How to Test

Setup:

Clone this repo on your machine
Run npm i to install dependencies
Do npm run dev command

Test:

Open your preferred browser, such google chrome browser
Enter this link in the URL `localhost:8080/profile
Then press enter button.

Screenshots or GIFs
Profile page

STORY ID

[Finishes #171648121]

hound · 2020-06-14T13:18:49Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+
+  &__menu-item-title,
+  .expanded-menu {
+    margin-left: 24px;


Properties should be ordered color, font-size, font-style, font-weight, line-height, margin-left

hound · 2020-06-14T13:18:49Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    height: 45px;
+    color: #fff;
+    margin-top: auto;
+    padding: 15px 0 0 22px;


Shorthands of length 4 are not allowed. Value was 15px 0 0 22px

hound · 2020-06-14T13:18:50Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    border-top: 1px solid #ffffff47;
+    font-size: 14px;
+    height: 45px;
+    color: #fff;


Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-14T13:18:50Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+
+  &__menu-setting {
+    border-top: 1px solid #ffffff47;
+    font-size: 14px;


Properties should be ordered border-top, color, font-size, height, margin-top, padding

hound · 2020-06-14T13:18:50Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  }
+
+  &__icon {
+    width: 22px;


Properties should be ordered height, width

hound · 2020-06-14T13:18:51Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    background: radial-gradient(
+      1355.92% 61.47% at 49.49% 50.08%,
+      #d17af0 0%,
+      #2a96cc 100%


Color literals like #2a96cc should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-14T13:18:51Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    width: 170px;
+    background: radial-gradient(
+      1355.92% 61.47% at 49.49% 50.08%,
+      #d17af0 0%,


Color literals like #d17af0 should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-14T13:18:51Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  }
+
+  &__menu {
+    display: flex;


Properties should be ordered background, display, flex-direction, height, list-style, margin, padding-left, width

hound · 2020-06-14T13:18:51Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  height: 100%;
+  color: #fff;
+  font-family: "Roboto", sans-serif;
+  @media (max-width: 480px) {


@media declaration should be preceded by an empty line

hound · 2020-06-14T13:18:51Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+.sidebar {
+  position: fixed;
+  height: 100%;
+  color: #fff;


Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-17T07:59:56Z

src/Components/Users/Users.jsx

+class Users extends Component {
+  state = { selectedItem: "Users" };
+
+  render() {


Missing JSDoc comment require-jsdoc

hound · 2020-06-17T07:59:56Z

src/Components/Users/Users.jsx

+import Header from "../Shared/Dashboard/Header/Header.jsx";
+import "../Shared/Dashboard/Dashboard.scss";
+
+class Users extends Component {


Missing JSDoc comment require-jsdoc

hound · 2020-06-17T07:59:57Z

src/Components/Shared/Dashboard/Sidebar/SidebarItem.jsx

+import { string, bool } from "prop-types";
+import "./Sidebar.scss";
+
+function SidebarItem(props) {


Missing JSDoc comment require-jsdoc

hound · 2020-06-17T07:59:58Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    padding-left: 22px;
+    margin-top: 20px;
+    text-decoration: none;
+    &:hover, &__selected {


Each selector in a comma sequence should be on its own single line
Rule declaration should be preceded by an empty line

hound · 2020-06-17T07:59:58Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

@@ -0,0 +1,85 @@
+.sidebar {
+  position: fixed;


Properties should be ordered color, font-family, height, position

hound · 2020-06-17T07:59:58Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.jsx

+import "./Sidebar.scss";
+
+const Sidebar = ({ onChange, selectedItem }) => {
+  const onItemClicked = item => {


Unexpected block statement surrounding arrow body; move the returned value immediately after the => arrow-body-style

hound · 2020-06-17T07:59:59Z

src/Components/Shared/Dashboard/Header/Header.scss

+    margin-right: 12px;
+  }
+}
+@media (max-width: 480px) {


@media declaration should be preceded by an empty line

hound · 2020-06-17T07:59:59Z

src/Components/Shared/Dashboard/Header/Header.scss

+    margin-left: 12px;
+    margin-right: 12px;
+  }
+}


@media declaration should be followed by an empty line

hound · 2020-06-18T10:12:16Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    no-repeat #f7f7f7;
+  z-index: 1000;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 1px #fff;


Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-18T10:12:17Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    font-weight: 900;
+    font-size: 16px;
+    line-height: 19px;
+    color: #ffffff;


Color literals like #ffffff should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-18T10:12:18Z

src/Components/Shared/Dashboard/Header/Header.scss

+  }
+  .icon-styles {
+    margin-left: 12px;
+  }


Rule declaration should be followed by an empty line

hound · 2020-06-18T10:12:18Z

src/Components/Shared/Dashboard/Header/Header.scss

+  }
+  .title {
+    margin-left: 36px;
+  }


Rule declaration should be followed by an empty line

hound · 2020-06-18T10:12:18Z

src/Components/Shared/Dashboard/Header/Header.scss

+@media (max-width: 768px) {
+  .name {
+    display: "none";
+  }


Rule declaration should be followed by an empty line

hound · 2020-06-18T10:12:18Z

src/Components/Shared/Dashboard/Header/Header.scss

+  line-height: 35px;
+  color: rgba(0, 1, 0, 0.5);
+  margin: auto auto auto 14px;
+}


Rule declaration should be followed by an empty line

hound · 2020-06-23T20:52:49Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  }
+
+  &:hover {
+    background-color: #687cd7;


Color literals like #687cd7 should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:52:49Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+    background-image: url(../../../../Assets/DashboardAssets/right.png);
+
+    &:hover {
+      background-color: #687cd7;


Color literals like #687cd7 should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:52:49Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  box-shadow: 0 0 2px 1px #fff;
+
+  @media (max-width: 1024px) {
+    background-image: url(../../../../Assets/DashboardAssets/right.png);


URLs should be enclosed in quotes

hound · 2020-06-23T20:52:50Z

src/Components/Shared/Dashboard/Header/Header.scss

+  font-weight: 700;
+  font-size: 28px;
+  line-height: 35px;
+  color: rgba(0, 1, 0, 0.5);


Color literals like rgba(0, 1, 0, 0.5) should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:52:50Z

src/Components/Shared/Dashboard/Header/Header.scss

+  width: 2px;
+}
+.title {
+  font-family: Roboto;


Properties should be ordered color, font-family, font-size, font-style, font-weight, line-height, margin

hound · 2020-06-23T20:52:51Z

src/Components/Shared/Dashboard/Header/Header.scss

+  line-height: 21px;
+  text-align: right;
+
+  color: rgba(0, 0, 0, 0.5);


Color literals like rgba(0, 0, 0, 0.5) should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:52:51Z

src/Components/Shared/Dashboard/Header/Header.scss

+}
+
+.name {
+  font-family: Roboto;


Properties should be ordered color, font-family, font-size, font-style, font-weight, line-height, text-align

hound · 2020-06-23T20:52:51Z

src/Components/Shared/Dashboard/Header/Header.scss

+  border-radius: 50px;
+  margin-left: 14px;
+  margin-right: 14px;
+  border: "1px solid #DFE0EB";


Color #DFE0EB should be written as #dfe0eb

hound · 2020-06-23T20:52:51Z

src/Components/Shared/Dashboard/Header/Header.scss

+}
+
+.avatar {
+  height: 35px;


Properties should be ordered border, border-radius, height, margin-left, margin-right, width

hound · 2020-06-23T20:52:51Z

src/Components/Shared/Dashboard/Header/Header.scss

@@ -0,0 +1,71 @@
+.logo {
+  color: #fff;


Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:59:53Z

src/Components/Shared/Dashboard/Dashboard.scss

+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 72px 1fr;
+    grid-template-areas:


Colon after property should be followed by one space

hound · 2020-06-23T20:59:53Z

src/Components/Shared/Dashboard/Dashboard.scss

+@media screen and (max-width: 480px) {
+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 72px 1fr;


Unknown property grid-template-rows
fr units not allowed on grid-template-rows; must be one of (%, Hz, ch, cm, deg, dpcm, dpi, dppx, em, ex, grad, in, kHz, mm, ms, pc, pt, px, q, rad, rem, s, turn, vh, vmax, vmin, vw)

hound · 2020-06-23T20:59:53Z

src/Components/Shared/Dashboard/Dashboard.scss

+
+@media screen and (max-width: 480px) {
+  .grid-container {
+    grid-template-columns: 1fr;


Properties should be ordered grid-template-areas, grid-template-columns, grid-template-rows
Unknown property grid-template-columns
fr units not allowed on grid-template-columns; must be one of (%, Hz, ch, cm, deg, dpcm, dpi, dppx, em, ex, grad, in, kHz, mm, ms, pc, pt, px, q, rad, rem, s, turn, vh, vmax, vmin, vw)

hound · 2020-06-23T20:59:53Z

src/Components/Shared/Dashboard/Dashboard.scss

+  height: 100vh;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 65px auto;


Unknown property grid-template-columns

hound · 2020-06-23T20:59:53Z

src/Components/Shared/Dashboard/Dashboard.scss

+  display: grid;
+  grid-template-columns: 170px auto;
+  grid-template-rows: 65px auto;
+  grid-template-areas:


Colon after property should be followed by one space

hound · 2020-06-23T20:59:55Z

src/Components/Shared/Dashboard/Dashboard.jsx

+import Content from "./Content/Content.jsx";
+import "./Dashboard.scss";
+
+const Dashboard = () => {


Unexpected block statement surrounding arrow body; move the returned value immediately after the => arrow-body-style

hound · 2020-06-23T20:59:55Z

src/Components/Shared/Dashboard/Content/Content.jsx

+import React from "react";
+import "./Content.scss";
+
+function ContentComponent() {


Missing JSDoc comment require-jsdoc

hound · 2020-06-23T20:59:55Z

src/Components/Profile/Profile.scss

+  font-weight: 900;
+  font-size: 18px;
+  line-height: 21px;
+  color: #000000;


Color literals like #000000 should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T20:59:55Z

src/Components/Profile/Profile.scss

+}
+
+.label-field {
+  font-family: Roboto;


Properties should be ordered color, font-family, font-size, font-style, font-weight, line-height, width

hound · 2020-06-23T20:59:55Z

src/Components/Profile/Profile.scss

+.profile-details {
+  display: grid;
+  gap: 15px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


Unknown property grid-template-columns

hound · 2020-06-23T21:32:45Z

src/Components/Profile/Profile.scss

+
+.profile-details {
+  display: grid;
+  gap: 15px;


Unknown property gap

hound · 2020-06-23T21:32:45Z

src/Components/Profile/Profile.scss

+  font-weight: normal;
+  font-size: 18px;
+  line-height: 21px;
+  color: rgba(0, 0, 0, 0.6);


Color literals like rgba(0, 0, 0, 0.6) should only be used in variable declarations; they should be referred to via variable everywhere else.

hound · 2020-06-23T21:32:45Z

src/Components/Profile/Profile.scss

+
+.content-container input[type="email"]::placeholder,
+input[type="text"]::placeholder {
+  font-family: Roboto;


Properties should be ordered color, font-family, font-size, font-style, font-weight, line-height, width

src/Components/Profile/Profile.scss

…dating user info

hound · 2020-07-01T12:48:53Z

src/Components/Profile/Profile.jsx

+  changeValues: changeFieldValues,
+  fetchUserProfileDetail: fetchUserProfileDetails,
+  updateUserProfileData: updateUserProfileDetails
+})(Profile);


Replace } with ··}⏎ prettier/prettier

hound · 2020-07-01T12:48:53Z

src/Components/Profile/Profile.jsx

+export default connect(mapStateToProps, {
+  changeValues: changeFieldValues,
+  fetchUserProfileDetail: fetchUserProfileDetails,
+  updateUserProfileData: updateUserProfileDetails


Insert ·· prettier/prettier

hound · 2020-07-01T12:48:54Z

src/Components/Profile/Profile.jsx

+
+export default connect(mapStateToProps, {
+  changeValues: changeFieldValues,
+  fetchUserProfileDetail: fetchUserProfileDetails,


Insert ·· prettier/prettier

hound · 2020-07-01T12:48:54Z

src/Components/Profile/Profile.jsx

+});
+
+export default connect(mapStateToProps, {
+  changeValues: changeFieldValues,


Insert ·· prettier/prettier

hound · 2020-07-01T12:48:54Z

src/Components/Profile/Profile.jsx

+  user: state.profile.user
+});
+
+export default connect(mapStateToProps, {


Replace mapStateToProps, with ⏎··mapStateToProps,⏎· prettier/prettier

hound · 2020-07-01T12:48:55Z

src/Components/Profile/Profile.jsx

+    };
+  }
+
+  componentDidMount() {


Missing JSDoc comment require-jsdoc

hound · 2020-07-01T12:48:55Z

src/Components/Profile/Profile.jsx

+import "../Shared/Dashboard/Dashboard.scss";
+
+class Profile extends Component {
+  constructor(props) {


Missing JSDoc comment require-jsdoc

hound · 2020-07-01T12:48:55Z

src/Components/Profile/Profile.jsx

+import "./Profile.scss";
+import "../Shared/Dashboard/Dashboard.scss";
+
+class Profile extends Component {


Missing JSDoc comment require-jsdoc

hound · 2020-07-01T12:48:56Z

src/Components/Users/Users.jsx

+import "../Shared/Dashboard/Dashboard.scss";
+
+class Users extends Component {
+  constructor(props) {


Missing JSDoc comment require-jsdoc

hound · 2020-07-01T12:48:56Z

src/Components/Shared/Dashboard/Sidebar/Sidebar.scss

+  background-image: url(../../../../Assets/DashboardAssets/right.png);
+
+  &:hover {
+    background-color: #687cd7;


Color literals like #687cd7 should only be used in variable declarations; they should be referred to via variable everywhere else.

Irutingabo changed the title ~~171648121 user profile and support up…~~ 171648121 Update user profile Jun 12, 2020

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from 4b69dbf to 57ac509 Compare June 14, 2020 03:22

Irutingabo added the WIP Work In Progress label Jun 14, 2020

Irutingabo force-pushed the ft-update-userProfile-171648121 branch 4 times, most recently from 45c32c0 to 5c3acdd Compare June 14, 2020 13:18

hound bot reviewed Jun 14, 2020

View reviewed changes

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from 5c3acdd to f180ebf Compare June 17, 2020 07:59

brianineza01 temporarily deployed to champs-frontend-pr-13 June 17, 2020 07:59 Inactive

hound bot reviewed Jun 17, 2020

View reviewed changes

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from f180ebf to f8293c7 Compare June 18, 2020 10:12

hound bot reviewed Jun 18, 2020

View reviewed changes

brianineza01 temporarily deployed to champs-frontend-pr-13 June 18, 2020 10:12 Inactive

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from f8293c7 to b2c795c Compare June 23, 2020 20:52

hound bot reviewed Jun 23, 2020

View reviewed changes

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from b2c795c to ee61873 Compare June 23, 2020 20:59

hound bot reviewed Jun 23, 2020

View reviewed changes

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from ee61873 to 3eb5aa7 Compare June 23, 2020 21:32

hound bot reviewed Jun 23, 2020

View reviewed changes

[Starts #171648121] Feature page displays user profile and support up…

dc26de1

…dating user info

Irutingabo force-pushed the ft-update-userProfile-171648121 branch from 3eb5aa7 to dc26de1 Compare July 1, 2020 12:48

hound bot reviewed Jul 1, 2020

View reviewed changes

171648121 Update user profile #13

Are you sure you want to change the base?

171648121 Update user profile #13

Conversation

Irutingabo commented Jun 12, 2020 • edited Loading

Description

Type of change

How Has This Been Tested?

How to Test

STORY ID

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 14, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 17, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 18, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

hound bot Jun 23, 2020

Choose a reason for hiding this comment

Irutingabo commented Jun 12, 2020 •

edited

Loading