From fcccb9df68f0c27890a431a132a2e3e59f1ba80d Mon Sep 17 00:00:00 2001 From: Roger Braun <roger@rogerbraun.net> Date: Wed, 30 Nov 2016 23:32:22 +0100 Subject: [PATCH] Add basic user profiles. --- src/components/status/status.vue | 6 ++++-- src/components/user_profile/user_profile.js | 17 +++++++++++++++++ src/components/user_profile/user_profile.vue | 14 ++++++++++++++ src/main.js | 2 ++ src/modules/users.js | 1 + 5 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 src/components/user_profile/user_profile.js create mode 100644 src/components/user_profile/user_profile.vue diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1e824fbe..58e808b3 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -18,8 +18,10 @@ <div class="user-content"> <h4 class="media-heading"> {{status.user.name}} - <small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small> - <small v-if="status.in_reply_to_screen_name"> > <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small> + <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> + <small v-if="status.in_reply_to_screen_name"> > + <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a> + </small> - <small> <router-link :to="{ name: 'conversation', params: { id: status.id } }"> diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js new file mode 100644 index 00000000..4d52bc95 --- /dev/null +++ b/src/components/user_profile/user_profile.js @@ -0,0 +1,17 @@ +import UserCardContent from '../user_card_content/user_card_content.vue' +import { find } from 'lodash' + +const UserProfile = { + computed: { + user () { + const id = this.$route.params.id + const user = find(this.$store.state.users.users, {id}) + return user + } + }, + components: { + UserCardContent + } +} + +export default UserProfile diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue new file mode 100644 index 00000000..767982c5 --- /dev/null +++ b/src/components/user_profile/user_profile.vue @@ -0,0 +1,14 @@ +<template> + <div class="user-profile panel panel-default"> + <user-card-content :user="user"></user-card-content> + </div> +</template> + +<script src="./user_profile.js"></script> + +<style> + .user-profile { + flex: 2; + flex-basis: 500px; + } +</style> diff --git a/src/main.js b/src/main.js index 4c743703..048706d5 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import PublicAndExternalTimeline from './components/public_and_external_timeline import FriendsTimeline from './components/friends_timeline/friends_timeline.vue' import Conversation from './components/conversation/conversation.vue' import Mentions from './components/mentions/mentions.vue' +import UserProfile from './components/user_profile/user_profile.vue' import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' @@ -37,6 +38,7 @@ const routes = [ { path: '/main/public', component: PublicTimeline }, { path: '/main/friends', component: FriendsTimeline }, { name: 'conversation', path: '/notice/:id', component: Conversation }, + { name: 'user-profile', path: '/users/:id', component: UserProfile }, { name: 'mentions', path: '/:username/mentions', component: Mentions } ] diff --git a/src/modules/users.js b/src/modules/users.js index fd2d6e81..1821e0f2 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -4,6 +4,7 @@ import { map, each, find, merge } from 'lodash' // TODO: Unify with mergeOrAdd in statuses.js export const mergeOrAdd = (arr, item) => { + if (!item) { return false } const oldItem = find(arr, {id: item.id}) if (oldItem) { // We already have this, so only merge the new info.