Basic status posting.

src/components/post_status_form/post_status_form.js

+import statusPoster from '../../services/status_poster/status_poster.service.js'
+
+const PostStatusForm = {
+  data() {
+    return {
+      newStatus: { }
+    }
+  },
+  methods: {
+    postStatus(newStatus) {
+      statusPoster.postStatus({
+        status: newStatus.status,
+        store: this.$store
+      })
+      this.newStatus = { }
+    }
+  }
+}
+
+export default PostStatusForm

src/components/post_status_form/post_status_form.vue

+<template>
+  <div class="post-status-form">
+    <form v-on:submit.prevent="postStatus(newStatus)">
+      <div class="form-group" >
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"></textarea>
+      </div>
+      <div class="attachments">
+        <div class="attachment" v-for="file in newStatus.files">
+          <img class="thumbnail media-upload" :src="file.image"></img>
+        </div>
+      </div>
+      <div class='form-bottom'>
+        <media-upload files="newStatus.files"></media-upload>
+        <button type="submit" class="btn btn-default" >Submit</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script src="./post_status_form.js"></script>

src/components/user_panel/user_panel.js

 import LoginForm from '../login_form/login_form.vue'
+import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const UserPanel = {
   computed: {
@@ -11,7 +12,8 @@ const UserPanel = {
     }
   },
   components: {
-    LoginForm
+    LoginForm,
+    PostStatusForm
   }
 }
 

src/components/user_panel/user_panel.vue

@@ -29,7 +29,7 @@
       </div>
 
       <div class="panel-footer">
-        <post-status-form></post-status-form>
+        <post-status-form v-if='user'></post-status-form>
       </div>
     </div>
     <login-form v-if='!user'></login-form>

src/services/api/api.service.js

@@ -5,8 +5,8 @@ const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
 const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json'
 const FAVORITE_URL = '/api/favorites/create'
 const UNFAVORITE_URL = '/api/favorites/destroy'
+const STATUS_UPDATE_URL = '/api/statuses/update.json'
 // const CONVERSATION_URL = '/api/statusnet/conversation/';
-// const STATUS_UPDATE_URL = '/api/statuses/update.json';
 // const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload';
 
 // const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'};
@@ -57,11 +57,30 @@ const unfavorite = ({ id, credentials }) => {
   })
 }
 
+const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
+  const idsText = mediaIds.join(',')
+  const form = new FormData()
+
+  form.append('status', status)
+  form.append('source', 'Pleroma FE')
+  form.append('media_ids', idsText)
+  if (inReplyToStatusId) {
+    form.append('in_reply_to_status_id', inReplyToStatusId)
+  }
+
+  return fetch(STATUS_UPDATE_URL, {
+    body: form,
+    method: 'POST',
+    headers: authHeaders(credentials)
+  })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
   favorite,
-  unfavorite
+  unfavorite,
+  postStatus
 }
 
 export default apiService
@@ -102,24 +121,6 @@ export default apiService
 //     return $http.post(LOGIN_URL, null, { headers: authHeaders });
 //   };
 
-//   const postStatus = ({status, mediaIds, in_reply_to_status_id}) => {
-//     const idsText = mediaIds.join(',');
-//     const form = new FormData();
-
-//     form.append('status', status);
-//     form.append('source', 'The Wired FE');
-//     form.append('media_ids', idsText);
-//     if(in_reply_to_status_id) {
-//       form.append('in_reply_to_status_id', in_reply_to_status_id);
-//     };
-
-//     return fetch(STATUS_UPDATE_URL, {
-//       body: form,
-//       method: 'POST',
-//       headers: authHeaders
-//     });
-//   };
-
 //   const unfavorite = (id) => $http.post(`${UNFAVORITE_URL}/${id}.json`, null, {headers: authHeaders});
 
 //   // This was impossible to get to work with $http. You're supposed to set Content-Type

src/services/status_poster/status_poster.service.js

+import { map } from 'lodash'
+import apiService from '../api/api.service.js'
+
+const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }) => {
+  const mediaIds = map(media, 'id')
+
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, mediaIds, inReplyToStatusId})
+    .then((data) => data.json())
+    .then((data) => {
+      store.commit('addNewStatuses',
+        { statuses: [data], timeline: 'friends', showImmediately: true })
+    })
+}
+
+const statusPosterService = {
+  postStatus
+}
+
+export default statusPosterService
+
+// const statusPosterServiceFactory = (apiService, $ngRedux) => {
+//   const postStatus = ({status, media = [], in_reply_to_status_id = undefined}) => {
+//     const mediaIds = map(media, 'id');
+
+//     return apiService.postStatus({status, mediaIds, in_reply_to_status_id}).
+//       then((data) => data.json()).
+//       then((data) => {
+//         $ngRedux.dispatch({type: 'ADD_NEW_STATUSES', data: { statuses: [data], timeline: 'friends', showImmediately: true }});
+//       });
+//   };
+
+//   const uploadMedia = (formData) => {
+//     return apiService.uploadMedia(formData).then((xml) => {
+//       return {
+//         id: xml.getElementsByTagName('media_id')[0].textContent,
+//         url: xml.getElementsByTagName('media_url')[0].textContent,
+//         image: xml.getElementsByTagName('atom:link')[0].getAttribute('href')
+//       };
+//     });
+//   };
+
+//   const statusPosterService = {
+//     postStatus,
+//     uploadMedia
+//   };
+
+//   return statusPosterService;
+// };
+
+// statusPosterServiceFactory.$inject = ['apiService', '$ngRedux'];
+
+// export default statusPosterServiceFactory;