feat: setup conversation list

app/javascript/dashboard/api/ApiClient.js

@@ -15,6 +15,12 @@ class ApiClient {
 
   // eslint-disable-next-line class-methods-use-this
   get accountIdFromRoute() {
+    // eslint-disable-next-line no-underscore-dangle
+    if (window.__WOOT_ACCOUNT_ID__) {
+      // eslint-disable-next-line no-underscore-dangle
+      return window.__WOOT_ACCOUNT_ID__;
+    }
+
     const isInsideAccountScopedURLs =
       window.location.pathname.includes('/app/accounts');
 

app/javascript/entrypoints/ui.js

@@ -12,12 +12,9 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 import store from 'dashboard/store';
 import constants from 'dashboard/constants/globals';
 import axios from 'axios';
-import createAxios from 'dashboard/helper/APIHelper';
+import createAxios from '../ui/axios';
 import commonHelpers from 'dashboard/helper/commons';
 
-import WootButton from '../dashboard/components-next/button/Button.vue';
-import WootInput from '../dashboard/components-next/input/Input.vue';
-import WootMessage from '../dashboard/components-next/message/Message.vue';
 import MessageList from '../ui/MessageList.vue';
 import i18nMessages from '../dashboard/i18n';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
@@ -47,14 +44,8 @@ commonHelpers();
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 
-export const buttonElement = defineCustomElement(WootButton, ceOptions);
-export const inputElement = defineCustomElement(WootInput, ceOptions);
-export const messageElement = defineCustomElement(WootMessage, ceOptions);
 export const messageListElement = defineCustomElement(MessageList, ceOptions);
 
 // eslint-disable-next-line no-underscore-dangle
 window.__CHATWOOT_STORE__ = store;
-customElements.define('woot-button', buttonElement);
-customElements.define('woot-input', inputElement);
-customElements.define('woot-message', messageElement);
 customElements.define('woot-message-list', messageListElement);

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;
+};

public/test-components.html

@@ -5,18 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Components Test</title>
     <link rel="stylesheet" href="/packs/style.css" />
+    <script>
+      window.__WOOT_ACCOUNT_ID__ = 1;
+      window.__WOOT_API_HOST__ = 'http://localhost:3000';
+      window.__WOOT_ACCESS_TOKEN__ = 'code';
+    </script>
   </head>
   <body>
     <h1>Web Components Test</h1>
-
-    <h2>Button Component</h2>
-    <woot-button ruby solid label="Click Me"></woot-button>
-
-    <h2>Input Component</h2>
-    <woot-input placeholder="Type something..."></woot-input>
-
     <h2>Message List</h2>
-    <woot-message-list></woot-message-list>
+    <woot-message-list conversation-id="5833"></woot-message-list>
 
     <script src="/packs/js/ui.js"></script>
   </body>