--wip-- [skip ci]

CrisisCleanup · Aug 3, 2022 · ffbedf3 · ffbedf3
1 parent d38c002
commit ffbedf3
Show file tree

Hide file tree

Showing 11 changed files with 405 additions and 323 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -24,7 +24,6 @@ import {
 } from '@/filters';
 import Authenticated from '@/layouts/Authenticated';
 import Unauthenticated from '@/layouts/Unauthenticated';
-import VueLog from '@dreipol/vue-log';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -49,7 +48,9 @@ import Toasted from 'vue-toasted';
 // Import Vue plugins
 import Vuex from 'vuex';
 import { getOrganizationName } from '../src/filters';
+import Logger from 'js-logger';
 
+Logger.useDefaults();
 library.add(fas);
 
 // Base Components
@@ -90,7 +91,6 @@ Vue.use(Toasted, {
 });
 
 Vue.use(VueI18n);
-Vue.use(VueLog);
 Vue.use(Popover);
 Vue.version = '2.0';
 Vue.use(VueCompositionApi);

diff --git a/src/App.vue b/src/App.vue
@@ -13,135 +13,130 @@
   </div>
 </template>
 
-<script lang="ts">
-// @ts-nocheck TODO(tabiodun): Fix this file
+<script lang="ts" setup>
+import { computed, watch, onBeforeUnmount, ref, onMounted } from 'vue';
 import { mapActions, mapGetters, mapMutations } from 'vuex';
-import { defineComponent } from '@vue/composition-api';
+import { useRoute } from 'vue-router';
 import CCP from '@/components/phone/CCP.vue';
-import Version from '@/components/Version.vue';
 import BannerOverlay from '@/components/notifications/BannerOverlay.vue';
 import { cachedGet, hash } from '@/utils/promise';
-import PhoneLegacy from './pages/phone_legacy/Index.vue';
 
+const route = useRoute();
 const defaultLayout = 'authenticated';
-export default defineComponent({
-  name: 'App',
-  components: { PhoneLegacy, CCP, Version, BannerOverlay },
-  computed: {
-    ...mapGetters('ui', ['currentBanner']),
-    layout() {
-      return `${this.$route.meta?.layout || defaultLayout}-layout`;
-    },
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(to) {
-        const newTitle = `${this.$t(to.name)}: Crisis Cleanup`;
-        if (document.title !== newTitle) {
-          document.title = newTitle;
-        }
-      },
-    },
-  },
-  created(): void {
-    if (process.env.NODE_ENV === 'development') {
-      this.eventsInterval = setInterval(this.pushCurrentEvents, 2000);
-    }
-    this.$http.interceptors.request.use(function (config) {
-      config.headers.CCU_WEB_URL = window.location.href;
-      config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
-      return config;
-    });
-  },
-  beforeDestroy(): void {
-    if (this.eventsInterval) {
-      clearInterval(this.eventsInterval);
-      this.eventsInterval = undefined;
+
+const eventsInterval = ref<any>(null);
+const layout = computed(() => `${route.meta?.layout || defaultLayout}-layout`);
+const currentBanner = computed(() => {
+  const { currentBanner: _currentBanner } = mapGetters('ui', ['currentBanner']);
+  return _currentBanner;
+});
+
+const { login, logout } = mapActions('auth', ['login', 'logout']);
+const { pushEvents } = mapActions('events', ['pushEvents']);
+const { validateBrowser } = mapActions('ui', ['validateBrowser']);
+const { isLoggedIn } = mapGetters('auth', ['isLoggedIn']);
+const { setStatuses, setWorkTypes, setLocationTypes, setPhases, setPortal } =
+  mapMutations('enums', [
+    'setStatuses',
+    'setWorkTypes',
+    'setLocationTypes',
+    'setPhases',
+    'setPortal',
+  ]);
+
+watch(
+  () => route,
+  (to) => {
+    // const newTitle = `${this.$t(to.name)}: Crisis Cleanup`;
+    const newTitle = `ABC`;
+    if (document.title !== newTitle) {
+      document.title = newTitle;
     }
   },
-  methods: {
-    ...mapActions('auth', ['login', 'logout']),
-    ...mapActions('events', ['pushEvents']),
-    ...mapActions('ui', ['validateBrowser']),
-    ...mapGetters('auth', ['isLoggedIn']),
-    ...mapMutations('enums', [
-      'setStatuses',
-      'setWorkTypes',
-      'setLocationTypes',
-      'setPhases',
-      'setPortal',
-    ]),
-    async getEnums(): Promise<void> {
-      const enums = await hash({
-        statuses: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/statuses`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'statuses',
-        ),
-        workTypes: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/work_types`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'work_types',
-        ),
-        phases: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'incidents_phases',
-        ),
-        locationTypes: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/location_types`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'location_types',
-        ),
-        portal: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/portals/current`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'portal',
-        ),
-      });
-      this.setStatuses(enums.statuses.data.results);
-      this.setWorkTypes(enums.workTypes.data.results);
-      this.setLocationTypes(enums.locationTypes.data.results);
-      this.setPhases(enums.phases.data.results);
-      this.setPortal(enums.portal.data);
-    },
-    async pushCurrentEvents(): Promise<void> {
-      if (this.isLoggedIn()) {
-        await this.pushEvents();
-      }
-    },
-  },
-  async mounted(): Promise<void> {
-    await this.validateBrowser();
-    await this.getEnums();
-  },
-  data(): any {
-    return {
-      eventsInterval: null as any,
-    };
-  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  await validateBrowser();
+  await getEnums();
+});
+
+onBeforeUnmount(() => {
+  if (eventsInterval.value) {
+    clearInterval(eventsInterval.value);
+    eventsInterval.value = undefined;
+  }
 });
+
+async function getEnums(): Promise<void> {
+  const enums = await hash({
+    statuses: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/statuses`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'statuses',
+    ),
+    workTypes: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/work_types`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'work_types',
+    ),
+    phases: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'incidents_phases',
+    ),
+    locationTypes: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/location_types`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'location_types',
+    ),
+    portal: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/portals/current`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'portal',
+    ),
+  });
+  setStatuses(enums.statuses.data.results);
+  setWorkTypes(enums.workTypes.data.results);
+  setLocationTypes(enums.locationTypes.data.results);
+  setPhases(enums.phases.data.results);
+  setPortal(enums.portal.data);
+}
+
+async function pushCurrentEvents(): Promise<void> {
+  if (isLoggedIn()) {
+    await pushEvents();
+  }
+}
+
+if (process.env.NODE_ENV === 'development') {
+  eventsInterval.value = setInterval(pushCurrentEvents, 2000);
+}
+// $http.interceptors.request.use(function (config) {
+//   config.headers.CCU_WEB_URL = window.location.href;
+//   config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
+//   return config;
+// });
 </script>
 <style>
 @import '~vue-resize/dist/vue-resize.css';

diff --git a/src/layouts/Authenticated.vue b/src/layouts/Authenticated.vue
@@ -82,10 +82,16 @@ import detectBrowserLanguage from 'detect-browser-language';
 import { size } from 'lodash';
 import { Slide } from 'vue-burger-menu';
 import { parsePhoneNumber } from 'libphonenumber-js';
-import { ref, computed, watch, onMounted } from 'vue';
-import { useState, useGetters, useMutations, useActions } from '@u3u/vue-hooks';
+import { ref, computed, watch, onMounted, inject } from 'vue';
+import {
+  mapState as useState,
+  mapMutations as useMutations,
+  mapGetters as useGetters,
+  mapActions as useActions,
+} from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 import moment from 'moment';
+import { useI18n } from 'vue-i18n';
 import Incident from '@/models/Incident';
 import User from '@/models/User';
 import Organization from '@/models/Organization';
@@ -100,6 +106,9 @@ import PhoneStatus from '@/models/PhoneStatus';
 import CompletedTransferModal from '@/components/CompletedTransferModal.vue';
 import { AuthService } from '@/services/auth.service';
 import LoginForm from '@/components/forms/LoginForm.vue';
+import useHttp from '@/use/useHttp';
+import { useLogger } from '@/use/useLog';
+import usePhoneService from '@/use/usePhoneService';
 
 const VERSION_3_LAUNCH_DATE = '2020-03-25';
 
@@ -117,7 +126,11 @@ export default {
   setup(props, context) {
     const route = useRoute();
     const router = useRouter();
-    const { $http, $log, $t, $phoneService } = context.root;
+    const { $http } = useHttp();
+    const { $phoneService } = usePhoneService();
+    // const { t: $t } = useI18n();
+    const $t = (s) => s;
+    const $log = useLogger('Authenticated');
 
     const { currentIncidentId } = useState('incident', ['currentIncidentId']);
     const { user, showLoginModal } = useState('auth', [
@@ -286,7 +299,7 @@ export default {
             }
           }
         } catch (e) {
-          $log.error(e);
+          $log.value.error(e);
         }
       }
       moment.locale(currentLanguage.split('-')[0]);