web/satellite: VBar, VBanner migrated to use composition api

composables folder created (same as react hooks) for functionality reusage;
related test moved to ignored folder;

Change-Id: I494aa27079aa5694bee7b18511eeadd56ced59e9

web/satellite/src/components/common/VBanner.vue

@@ -17,62 +17,61 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Watch } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 
-import Resizable from '@/components/common/Resizable.vue';
+import { useResize } from '@/composables/resize';
 
 import InfoIcon from '@/../static/images/notifications/info.svg';
 import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
 
-// @vue/component
-@Component({
-    components: {
-        CloseIcon,
-        InfoIcon,
-    },
-})
-export default class VBanner extends Resizable {
-    @Prop({ default: 'info' })
-    private readonly severity: 'info' | 'warning' | 'critical';
-    @Prop({ default: () => () => {} })
-    public readonly onClick: () => void;
-    @Prop({ default: () => {} })
-    private readonly dashboardRef: HTMLElement;
+const props = withDefaults(defineProps<{
+    severity?: 'info' | 'warning' | 'critical';
+    onClick?: () => void;
+    dashboardRef?: HTMLElement;
+}>(), {
+    severity: 'info',
+    onClick: () => () => {},
+    dashboardRef: () => {},
+});
 
-    public isShown = true;
-    public bannerWidth = 0;
-    public resizeObserver?: ResizeObserver;
+const { isMobile } = useResize();
 
-    public mounted(): void {
-        this.resizeObserver = new ResizeObserver(this.onBannerResize);
+const isShown = ref<boolean>(true);
+const bannerWidth = ref<number>(0);
+let resizeObserver = reactive<ResizeObserver>();
 
-        if (this.dashboardRef) {
-            this.resizeObserver?.observe(this.dashboardRef);
-            this.onBannerResize();
-        }
-    }
+const bannerStyle = computed((): string => {
+    const margin = isMobile.value ? 30 : 60;
 
-    public beforeUnmount(): void {
-        this.resizeObserver?.unobserve(this.dashboardRef);
-    }
+    return `width: ${bannerWidth.value - margin}px`;
+});
 
-    @Watch('dashboardRef')
-    public setResizable(): void {
-        this.resizeObserver?.observe(this.dashboardRef);
-    }
-
-    @Watch('dashboardRef')
-    public onBannerResize(): void {
-        this.bannerWidth = this.dashboardRef.offsetWidth;
-    }
-
-    public get bannerStyle(): string {
-        const margin = this.isMobile ? 30 : 60;
-
-        return `width: ${this.bannerWidth - margin}px`;
-    }
+function onBannerResize(): void {
+    bannerWidth.value = props.dashboardRef.offsetWidth;
 }
+
+function setResizable(): void {
+    resizeObserver?.observe(props.dashboardRef);
+}
+
+onMounted((): void => {
+    resizeObserver = new ResizeObserver(onBannerResize);
+
+    if (props.dashboardRef) {
+        setResizable();
+        onBannerResize();
+    }
+});
+
+onUnmounted((): void => {
+    resizeObserver?.unobserve(props.dashboardRef);
+});
+
+watch(() => props.dashboardRef, () => {
+    setResizable();
+    onBannerResize();
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/common/VBar.vue

@@ -7,8 +7,8 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 /**
  * BarFillStyle class holds info for BarFillStyle entity.
@@ -23,26 +23,25 @@ class BarFillStyle {
     }
 }
 
-// @vue/component
-@Component
-export default class VBar extends Vue {
-    @Prop({ default: 0 })
-    private readonly current: number;
-    @Prop({ default: 0 })
-    private readonly max: number;
-    @Prop({ default: '#0068DC' })
-    private readonly color: string;
+const props = withDefaults(defineProps<{
+    current?: number;
+    max?: number;
+    color?: string;
+}>(), {
+    current: 0,
+    max: 0,
+    color: '#0068DC',
+});
 
-    public get barFillStyle(): BarFillStyle {
-        if (this.current > this.max) {
-            return new BarFillStyle(this.color, '100%');
-        }
-
-        const width = (this.current / this.max) * 100 + '%';
-
-        return new BarFillStyle(this.color, width);
+const barFillStyle = computed((): BarFillStyle => {
+    if (props.current > props.max) {
+        return new BarFillStyle(props.color, '100%');
     }
-}
+
+    const width = (props.current / props.max) * 100 + '%';
+
+    return new BarFillStyle(props.color, width);
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/composables/resize.ts

@@ -0,0 +1,37 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+export function useResize() {
+    const screenWidth = ref<number>(window.innerWidth);
+    const screenHeight = ref<number>(window.innerHeight);
+
+    const isMobile = computed((): boolean => {
+        return screenWidth.value <= 550;
+    });
+
+    const isTablet = computed((): boolean => {
+        return !isMobile.value && screenWidth.value <= 800;
+    });
+
+    function onResize(): void {
+        screenWidth.value = window.innerWidth;
+        screenHeight.value = window.innerHeight;
+    }
+
+    onMounted((): void => {
+        window.addEventListener('resize', onResize);
+    });
+
+    onUnmounted((): void => {
+        window.removeEventListener('resize', onResize);
+    });
+
+    return {
+        screenWidth,
+        screenHeight,
+        isMobile,
+        isTablet,
+    };
+}

web/satellite/tests/unit/common/__snapshots__/VBar.spec.ts.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VBar.vue renders correctly 1`] = `
-<div class="bar-container">
-  <div class="bar-container__fill" style="background-color: rgb(0, 104, 220); width: 50%;"></div>
-</div>
-`;
-
-exports[`VBar.vue renders correctly if current > max 1`] = `
-<div class="bar-container">
-  <div class="bar-container__fill" style="background-color: rgb(0, 104, 220); width: 100%;"></div>
-</div>
-`;