From 2902e65ba2c85b8c777cd445bec66424417e27d4 Mon Sep 17 00:00:00 2001 From: Roman Zakharov Date: Sun, 27 Nov 2016 16:13:45 +0700 Subject: [PATCH 1/3] implemented profile page (issue #19) --- src/client/components/Profile/Activity.tsx | 30 +++++ src/client/components/Profile/Card.tsx | 144 +++++++++++++++++++++ src/client/components/Profile/TeamList.tsx | 61 +++++++++ src/client/pageheader.tsx | 7 +- src/client/pages/profile.tsx | 46 +++++++ src/client/routes.tsx | 2 + 6 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 src/client/components/Profile/Activity.tsx create mode 100644 src/client/components/Profile/Card.tsx create mode 100644 src/client/components/Profile/TeamList.tsx create mode 100644 src/client/pages/profile.tsx diff --git a/src/client/components/Profile/Activity.tsx b/src/client/components/Profile/Activity.tsx new file mode 100644 index 0000000..00459f8 --- /dev/null +++ b/src/client/components/Profile/Activity.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; + +interface IActivityItemProps { + date: string; + action: string; +}; + +class ItemActivity extends React.Component<{}, {}> { + constructor(props: IActivityItemProps) { + super(props); + } + + render() { + return( +
+
+ ); + } +} + + +class Activity extends React.Component<{}, {}> { + constructor() { + super(); + } + render() { + return(
); + } +} diff --git a/src/client/components/Profile/Card.tsx b/src/client/components/Profile/Card.tsx new file mode 100644 index 0000000..27086d9 --- /dev/null +++ b/src/client/components/Profile/Card.tsx @@ -0,0 +1,144 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import API from '../../api'; +import {User} from '../../../lib/model'; + +interface FrontCardProps { + username: string; + role: string; + imageSrc: string; +}; + +class FrontCard extends React.Component { + render() { + return ( +
+ +
+
+
+
+
+
+
+ Avatar +
+ +
+

{this.props.username}

+ {this.props.role} +
+ +
+ + +
+ +
+ ); + } +} + +//////////////////////////////////////////////////////////////////////////////////// + +interface BackCardProps { + team: string; + position: string; + place: string; + description: string; +}; + +class BackCard extends React.Component { + render() { + return ( +
+
+
{this.props.team}
+
{this.props.position}
+
{this.props.place}
+
+
{this.props.description}
+
+
+
+
+
+ ); + } +} + +///////////////////////////////////////////////////////////////////////////////////// + +// constants +const FRONT_SIDE = "front_side"; +const BACK_SIDE = "back_side"; + +interface CardProps { + username: string; + role: string; + imageSrc: string; + team: string; + position: string; + place: string; + description: string; +}; + +/////////////////////////////////////////////////////////////////////////////////////// +interface ICardState { + user?: User; +}; + +const otherImg = "http://i1.kym-cdn.com/entries/icons/original/000/004/349/Minecraft_Creeper_Wallpaper_by_LynchMob10_09_1_.jpg"; + +export class Card extends React.Component<{}, ICardState> { + constructor() { + super(); + this.state = {user: null}; + } + + componentDidMount() { + API.me().then(user => { + this.setState({user: user }); + }); + } + + render() { + const {user} = this.state; + if (!user) return null; + + return ( +
+ +
+
+
+
+
+
+
+ Avatar +
+ +
+ {user.name} +
+
{user.role}
+
+
+
+ {"Your team"} + {user.place} + {user.position} +
+
+
{"Description"}
+
+
+ + +
+ +
+ ); + } +} diff --git a/src/client/components/Profile/TeamList.tsx b/src/client/components/Profile/TeamList.tsx new file mode 100644 index 0000000..4428601 --- /dev/null +++ b/src/client/components/Profile/TeamList.tsx @@ -0,0 +1,61 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; + + +interface ListItemProps { + teamId: string; + teamName: string; + imageSrc: string; +}; + + +class TeamItem extends React.Component { + constructor(props: any) { + super(props); + } + render() { + const teamId = this.props.teamId; + // console.log(teamId); + // console.log(this.props); + return ( +
  • + +
    • + ); + } +} + +export interface TeamListProps { + data: ListItemProps[]; +}; + +export class TeamList extends React.Component { + constructor(props: TeamListProps) { + super(props); + } + + getListItem() { + console.log(this.props); + const items = this.props.data; + const listItem = items.map((item) => + + ); + console.log(listItem); + return listItem; + } + + render() { + return( +
    +
      + {this.getListItem()} +
    +
    + ); + } +} diff --git a/src/client/pageheader.tsx b/src/client/pageheader.tsx index 1996b29..b3fa3ee 100644 --- a/src/client/pageheader.tsx +++ b/src/client/pageheader.tsx @@ -40,7 +40,12 @@ const menu: MenuItem[] = [ name: 'admin', text: 'Admin', link: '/admin', - }, + }, + { + name: 'profile', + text: 'Profile', + link: '/profile', + }, /* { name: 'user', diff --git a/src/client/pages/profile.tsx b/src/client/pages/profile.tsx new file mode 100644 index 0000000..6c2a0da --- /dev/null +++ b/src/client/pages/profile.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import {Card} from '../components/Profile/Card'; + + +export default class ProfilePage extends React.Component<{}, {}> { + render() { + return ( +
    +
    + +
    +
    +

    Activity

    +
    +
    3 days ago
    +

    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

    +
    +
    +
    2 days ago
    +

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    +
    +
    +
    Yesterday
    +

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    +
    +
    +
    + ); + } +} diff --git a/src/client/routes.tsx b/src/client/routes.tsx index abcdcee..d430e06 100644 --- a/src/client/routes.tsx +++ b/src/client/routes.tsx @@ -6,6 +6,7 @@ import Blank from './pages/blank'; import CalendarList from './pages/calendar_list'; import Calendar from './pages/calendar'; import Login from './pages/login'; +import ProfilePage from './pages/profile'; import PageHeader from './pageheader'; import API from './api'; @@ -42,6 +43,7 @@ const Routes = ( + From 3e12414d64cca449bc1bc30d458e7fe5bd5b7cd3 Mon Sep 17 00:00:00 2001 From: Roman Zakharov Date: Mon, 28 Nov 2016 08:30:53 +0700 Subject: [PATCH 2/3] Created light view of activity --- src/client/components/Profile/Activity.tsx | 47 +++++++++++++++--- src/client/components/Profile/Card.tsx | 2 +- src/client/pages/profile.tsx | 58 ++++++++++------------ 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/src/client/components/Profile/Activity.tsx b/src/client/components/Profile/Activity.tsx index 00459f8..00f85d3 100644 --- a/src/client/components/Profile/Activity.tsx +++ b/src/client/components/Profile/Activity.tsx @@ -2,29 +2,60 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; interface IActivityItemProps { + messageId: number; date: string; - action: string; + description: string; }; -class ItemActivity extends React.Component<{}, {}> { +class ActivityItem extends React.Component { constructor(props: IActivityItemProps) { super(props); } render() { return( -
    -
    +
  • +
    +
    +
    {"Date: " + this.props.date}
    +
    +
    +

    {this.props.description}

    +
    +
    +
    • ); } } +export interface IActivity { + data: IActivityItemProps[]; +}; + +export class Activity extends React.Component { + constructor(props: IActivity) { + super(props); + } -class Activity extends React.Component<{}, {}> { - constructor() { - super(); + getListItem() { + const items = this.props.data; + const listItem = items.map((item) => + + ); + return listItem; } + render() { - return(
    ); + return( +
    +

    Activity

    +
      + {this.getListItem()} +
    +
    + ); } } diff --git a/src/client/components/Profile/Card.tsx b/src/client/components/Profile/Card.tsx index 27086d9..e553a42 100644 --- a/src/client/components/Profile/Card.tsx +++ b/src/client/components/Profile/Card.tsx @@ -107,7 +107,7 @@ export class Card extends React.Component<{}, ICardState> { if (!user) return null; return ( -
    +
    diff --git a/src/client/pages/profile.tsx b/src/client/pages/profile.tsx index 6c2a0da..61b8e7f 100644 --- a/src/client/pages/profile.tsx +++ b/src/client/pages/profile.tsx @@ -1,44 +1,38 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import {Card} from '../components/Profile/Card'; +import {Activity} from '../components/Profile/Activity'; + +let data =[ + { + messageId: 0, + date: "20.11.16", + description: "PTO" + }, + { + messageId: 1, + date: "24.11.16", + description: "PTO" + }, + { + messageId: 2, + date: "29.11.16", + description: "PTO" + } +]; export default class ProfilePage extends React.Component<{}, {}> { render() { return ( -
    -
    - +
    +
    +
    -
    -

    Activity

    -
    -
    3 days ago
    -

    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

    -
    -
    -
    2 days ago
    -

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    -
    -
    -
    Yesterday
    -

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    -
    +
    +
    + +
    ); From 8b9bcb2f12cfff396e249ca8b20aaaa2338ab437 Mon Sep 17 00:00:00 2001 From: sergeyt Date: Mon, 28 Nov 2016 21:18:11 +0700 Subject: [PATCH 3/3] minor code cleanup --- src/client/components/Profile/Activity.tsx | 28 +++++++------------ src/client/components/Profile/Card.tsx | 15 +++++------ src/client/components/Profile/TeamList.tsx | 31 +++++++--------------- 3 files changed, 25 insertions(+), 49 deletions(-) diff --git a/src/client/components/Profile/Activity.tsx b/src/client/components/Profile/Activity.tsx index 00f85d3..52d472f 100644 --- a/src/client/components/Profile/Activity.tsx +++ b/src/client/components/Profile/Activity.tsx @@ -1,20 +1,16 @@ +import * as _ from 'lodash'; import * as React from "react"; -import * as ReactDOM from "react-dom"; interface IActivityItemProps { messageId: number; date: string; description: string; -}; +} class ActivityItem extends React.Component { - constructor(props: IActivityItemProps) { - super(props); - } - render() { return( -
  • +
  • {"Date: " + this.props.date}
    @@ -30,22 +26,16 @@ class ActivityItem extends React.Component { export interface IActivity { data: IActivityItemProps[]; -}; +} export class Activity extends React.Component { - constructor(props: IActivity) { - super(props); - } - - getListItem() { - const items = this.props.data; - const listItem = items.map((item) => - ( + - ); - return listItem; + )); } render() { @@ -53,7 +43,7 @@ export class Activity extends React.Component {

    Activity

      - {this.getListItem()} + {this.renderItems()}
    ); diff --git a/src/client/components/Profile/Card.tsx b/src/client/components/Profile/Card.tsx index e553a42..9c9d651 100644 --- a/src/client/components/Profile/Card.tsx +++ b/src/client/components/Profile/Card.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; import API from '../../api'; import {User} from '../../../lib/model'; @@ -7,7 +6,7 @@ interface FrontCardProps { username: string; role: string; imageSrc: string; -}; +} class FrontCard extends React.Component { render() { @@ -46,7 +45,7 @@ interface BackCardProps { position: string; place: string; description: string; -}; +} class BackCard extends React.Component { render() { @@ -81,25 +80,25 @@ interface CardProps { position: string; place: string; description: string; -}; +} /////////////////////////////////////////////////////////////////////////////////////// interface ICardState { user?: User; -}; +} const otherImg = "http://i1.kym-cdn.com/entries/icons/original/000/004/349/Minecraft_Creeper_Wallpaper_by_LynchMob10_09_1_.jpg"; export class Card extends React.Component<{}, ICardState> { - constructor() { - super(); + constructor(props: {}) { + super(props); this.state = {user: null}; } componentDidMount() { API.me().then(user => { this.setState({user: user }); - }); + }); } render() { diff --git a/src/client/components/Profile/TeamList.tsx b/src/client/components/Profile/TeamList.tsx index 4428601..2fa0d2f 100644 --- a/src/client/components/Profile/TeamList.tsx +++ b/src/client/components/Profile/TeamList.tsx @@ -1,24 +1,19 @@ +import * as _ from 'lodash'; import * as React from "react"; -import * as ReactDOM from "react-dom"; - interface ListItemProps { teamId: string; teamName: string; imageSrc: string; -}; - +} class TeamItem extends React.Component { constructor(props: any) { super(props); } render() { - const teamId = this.props.teamId; - // console.log(teamId); - // console.log(this.props); return ( -
  • +
  • Avatar @@ -32,28 +27,20 @@ class TeamItem extends React.Component { export interface TeamListProps { data: ListItemProps[]; -}; +} export class TeamList extends React.Component { - constructor(props: TeamListProps) { - super(props); - } - - getListItem() { - console.log(this.props); - const items = this.props.data; - const listItem = items.map((item) => - - ); - console.log(listItem); - return listItem; + renderItems() { + return _.map(this.props.data, (item, i) => ( + + )); } render() { return(
      - {this.getListItem()} + {this.renderItems()}
    );