Add user finder.

src/App.js

 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
+import UserFinder from './components/user_finder/user_finder.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications
+    Notifications,
+    UserFinder
   },
   data: () => ({
     mobileActivePanel: 'timeline'

src/App.vue

@@ -19,6 +19,7 @@
         <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
           <div class="sidebar-container">
             <user-panel></user-panel>
+            <user-finder></user-finder>
             <nav-panel></nav-panel>
             <notifications v-if="currentUser"></notifications>
           </div>

src/components/user_finder/user_finder.js

+const UserFinder = {
+  data: () => ({
+    username: undefined
+  }),
+  methods: {
+    findUser (username) {
+      this.$store.state.api.backendInteractor.externalProfile(username)
+        .then((user) => {
+          if (!user.error) {
+            this.$store.commit('addNewUsers', [user])
+            this.$router.push({name: 'user-profile', params: {id: user.id}})
+          }
+        })
+    }
+  }
+}
+
+export default UserFinder

src/components/user_finder/user_finder.vue

+<template>
+  <div class="user-finder-panel panel panel-default base00-background">
+    <input @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text" />
+  </div>
+</template>
+
+<script src="./user_finder.js"></script>
+
+<style lang="scss">
+ .user-finder-panel {
+   padding: 10px;
+ }
+</style>

src/services/api/api.service.js

@@ -17,6 +17,7 @@ const FRIENDS_URL = '/api/statuses/friends.json'
 const FOLLOWING_URL = '/api/friendships/create.json'
 const UNFOLLOWING_URL = '/api/friendships/destroy.json'
 const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
+const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 // const USER_URL = '/api/users/show.json'
 
 const oldfetch = window.fetch
@@ -35,6 +36,13 @@ const authHeaders = (user) => {
   }
 }
 
+const externalProfile = (profileUrl) => {
+  let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
+  return fetch(url, {
+    method: 'GET'
+  }).then((data) => data.json())
+}
+
 const followUser = ({id, credentials}) => {
   let url = `${FOLLOWING_URL}?user_id=${id}`
   return fetch(url, {
@@ -198,7 +206,8 @@ const apiService = {
   uploadMedia,
   fetchAllFollowing,
   setUserMute,
-  fetchMutes
+  fetchMutes,
+  externalProfile
 }
 
 export default apiService

src/services/backend_interactor_service/backend_interactor_service.js

@@ -36,6 +36,8 @@ const backendInteractorService = (credentials) => {
 
   const fetchMutes = () => apiService.fetchMutes({credentials})
 
+  const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
+
   const backendInteractorServiceInstance = {
     fetchStatus,
     fetchConversation,
@@ -46,7 +48,8 @@ const backendInteractorService = (credentials) => {
     verifyCredentials: apiService.verifyCredentials,
     startFetching,
     setUserMute,
-    fetchMutes
+    fetchMutes,
+    externalProfile
   }
 
   return backendInteractorServiceInstance