JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrate App.vue component to use SFC composition api

Browse Source 
Change-Id: I5877577d743fe1bfbc3762fdaa7064fa279f3ae2
This commit is contained in:
Vitalii 2023-03-28 13:13:26 +03:00 committed by Storj Robot
parent 6e11f92b1a
commit 77829c6306
1 changed files with 85 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
web/satellite/src/App.vue
View File

@ -9,34 +9,58 @@
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MetaUtils } from '@/utils/meta';
import { useNotify, useStore } from '@/utils/hooks';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
// @vue/component
@Component({
components: {
NotificationArea,
},
})
export default class App extends Vue {
const store = useStore();
const notify = useNotify();
/**
* Fixes the issue where view port height is taller than the visible viewport on
* mobile Safari/Webkit. See: https://bugs.webkit.org/show_bug.cgi?id=141832
* Specifically for us, this issue is seen in Safari and Google Chrome, both on iOS
*/
function fixViewportHeight(): void {
const agent = window.navigator.userAgent.toLowerCase();
const isMobile = screen.width <= 500;
const isIOS = agent.includes('applewebkit') && agent.includes('iphone');
// We don't want to apply this fix on FxIOS because it introduces strange behavior
// while not fixing the issue because it doesn't exist here.
const isFirefoxIOS = window.navigator.userAgent.toLowerCase().includes('fxios');
if (isMobile && isIOS && !isFirefoxIOS) {
// Set the custom --vh variable to the root of the document.
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
window.addEventListener('resize', updateViewportVariable);
}
}
/**
* Update the viewport height variable "--vh".
* This is called everytime there is a viewport change; e.g.: orientation change.
*/
function updateViewportVariable(): void {
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
}
/**
* Lifecycle hook after initial render.
* Sets up variables from meta tags from config such satellite name, etc.
*/
public mounted(): void {
onMounted((): void => {
try {
this.$store.dispatch(APP_STATE_ACTIONS.FETCH_CONFIG);
store.dispatch(APP_STATE_ACTIONS.FETCH_CONFIG);
} catch (error) {
// TODO: Use a harsher error-handling approach when the config is necessary
// for the frontend to function.
this.$notify.error(error.message, null);
notify.error(error.message, null);
}
const satelliteName = MetaUtils.getMetaContent('satellite-name');
@ -50,7 +74,7 @@ export default class App extends Vue {
const couponCodeSignupUIEnabled = MetaUtils.getMetaContent('coupon-code-signup-ui-enabled');
if (satelliteName) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
if (partneredSatellitesJSON.length) {
const partneredSatellites: PartneredSatellite[] = [];
@ -60,57 +84,28 @@ export default class App extends Vue {
partneredSatellites.push(sat);
}
});
this.$store.dispatch(APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
store.dispatch(APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
}
}
if (isBetaSatellite) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_STATUS, isBetaSatellite === 'true');
store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_STATUS, isBetaSatellite === 'true');
}
if (couponCodeBillingUIEnabled) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled === 'true');
store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled === 'true');
}
if (couponCodeSignupUIEnabled) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled === 'true');
store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled === 'true');
}
this.fixViewportHeight();
}
fixViewportHeight();
});
public beforeDestroy(): void {
window.removeEventListener('resize', this.updateViewportVariable);
}
/**
* Fixes the issue where view port height is taller than the visible viewport on
* mobile Safari/Webkit. See: https://bugs.webkit.org/show_bug.cgi?id=141832
* Specifically for us, this issue is seen in Safari and Google Chrome, both on iOS
*/
private fixViewportHeight(): void {
const agent = window.navigator.userAgent.toLowerCase();
const isMobile = screen.width <= 500;
const isIOS = agent.includes('applewebkit') && agent.includes('iphone');
// We don't want to apply this fix on FxIOS because it introduces strange behavior
// while not fixing the issue because it doesn't exist here.
const isFirefoxIOS = window.navigator.userAgent.toLowerCase().includes('fxios');
if (isMobile && isIOS && !isFirefoxIOS) {
// Set the custom --vh variable to the root of the document.
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
window.addEventListener('resize', this.updateViewportVariable);
}
}
/**
* Update the viewport height variable "--vh".
* This is called everytime there is a viewport change; e.g.: orientation change.
*/
private updateViewportVariable(): void {
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
}
}
onBeforeUnmount((): void => {
window.removeEventListener('resize', updateViewportVariable);
});
</script>
<style lang="scss">