Skip to content

Simple user view #3244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 3, 2019
Merged

Simple user view #3244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
464e5c7
show a simple user details page when viewing a user who isn't you (or…
Jan 3, 2019
6ec1406
add a snapshot test
Jan 3, 2019
d590fee
lint
Jan 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions client/app/components/UserShow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';

import { react2angular } from 'react2angular';

export const UserShow = ({ name, email, profileImageUrl }) => (
<div className="col-md-4 col-md-offset-4 profile__container">
<img
alt="profile"
src={profileImageUrl}
className="profile__image"
width="40"
/>

<h3 className="profile__h3">{name}</h3>

<hr />

<dl className="profile__dl">
<dt>Name:</dt>
<dd>{name}</dd>
<dt>Email:</dt>
<dd>{email}</dd>
</dl>
</div>
);

UserShow.propTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
profileImageUrl: PropTypes.string.isRequired,
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it wouldn't be more "future proof" to pass the user object?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kinda meaningless because we would want to describe the user object's shape using proptypes, and that's kind of the same effort when (read: "if") we choose to add anything in the future, no?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's kind of the same effort when (read: "if") we choose to add anything in the future, no?

Yes, but then you'll need only change proptypes; currently you'll also need to update all the places where you use this component.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kravets-levko kinda scratching my head with passing objects from Angular to React (as opposed to simple values). Do we have any examples of this happening in our code?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What @kravets-levko said + you define the PropType shape of the User object one time and can reuse in multiple components.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, static typing allows declaring props which can be used across the app with no import.

// declare.js

declare UserProfile {
  name: string,
  image: string,
  email: string,
  tags?: Tag[],
}
// SomeClass.jsx

type Props = {
  someProp: string,
  profile: UserProfile,
}

class SomeClass extends extends Component<Props> {
  ...
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's supposed to be declare.ts in your example, right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume (never used TS but rather Flow)


export default function init(ngModule) {
ngModule.component('userShow', react2angular(UserShow));
}

init.init = true;
10 changes: 10 additions & 0 deletions client/app/components/UserShow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { UserShow } from './UserShow';

test('renders correctly', () => {
const component = renderer.create(<UserShow name="John Doe" email="[email protected]" profileImageUrl="http://www.images.com/llama.jpg" />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

36 changes: 36 additions & 0 deletions client/app/components/__snapshots__/UserShow.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<div
className="col-md-4 col-md-offset-4 profile__container"
>
<img
alt="profile"
className="profile__image"
src="http://www.images.com/llama.jpg"
width="40"
/>
<h3
className="profile__h3"
>
John Doe
</h3>
<hr />
<dl
className="profile__dl"
>
<dt>
Name:
</dt>
<dd>
John Doe
</dd>
<dt>
Email:
</dt>
<dd>
[email protected]
</dd>
</dl>
</div>
`;
6 changes: 6 additions & 0 deletions client/app/pages/users/settings.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@
}
}

.profile__dl {
dd {
margin-bottom: 12px;
}
}

.alert-invited {
.form-control {
cursor: text !important;
Expand Down
3 changes: 2 additions & 1 deletion client/app/pages/users/show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@

<div ng-show="selectedTab == 'profile'">
<div class="row">
<div class="col-md-4 col-md-offset-4 profile__container">
<user-show ng-if="!(currentUser.isAdmin || currentUser.id == user.id)" name="user.name" email="user.email" profile-image-url="user.profile_image_url"></user-show>
<div class="col-md-4 col-md-offset-4 profile__container" ng-if="(currentUser.isAdmin || currentUser.id == user.id)">

<img ng-src="{{ user.profile_image_url }}" class="profile__image" width="40">

Expand Down