feat: setup conversation list

app/javascript/ui/MessageList.vue

@@ -1,21 +1,38 @@
 <script setup>
+import { onMounted, computed, watch } from 'vue';
 import Message from 'next/message/Message.vue';
-import allMessages from 'next/message/fixtures/textWithMedia.js';
+import { useStore } from 'dashboard/composables/store';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 
-// const props = defineProps({
-//   accountId: {
-//     type: Number,
-//     required: true,
-//   },
-//   conversationId: {
-//     type: Number,
-//     required: true,
-//   },
-//   token: {
-//     type: String,
-//     required: true,
-//   },
-// });
+const props = defineProps({
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const store = useStore();
+
+onMounted(() => {
+  store.dispatch('getConversation', props.conversationId);
+});
+
+const conversation = computed(() => {
+  return store.getters.getConversationById(props.conversationId);
+});
+
+const allMessages = computed(() => {
+  if (!conversation.value) return [];
+
+  return useCamelCase(conversation.value.messages);
+});
+
+watch(conversation, () => {
+  store.dispatch('fetchPreviousMessages', {
+    conversationId: conversation.value.id,
+    before: allMessages.value[0].id,
+  });
+});
 </script>
 
 <template>

app/javascript/ui/axios.js

@@ -0,0 +1,19 @@
+const parseErrorCode = error => Promise.reject(error);
+
+export default axios => {
+  // eslint-disable-next-line no-underscore-dangle
+  const apiHost = window.__WOOT_API_HOST__;
+  // eslint-disable-next-line no-underscore-dangle
+  const accessToken = window.__WOOT_ACCESS_TOKEN__;
+  const wootApi = axios.create({ baseURL: `${apiHost}/` });
+
+  Object.assign(wootApi.defaults.headers.common, {
+    api_access_token: accessToken,
+  });
+
+  wootApi.interceptors.response.use(
+    response => response,
+    error => parseErrorCode(error)
+  );
+  return wootApi;
+};