From b3969618f9a434de2ae284af55ca7733b3952348 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Wed, 29 Mar 2023 15:11:33 +0300
Subject: [PATCH] web/satellite: migrate CreateProjectModal to use SFC
 composition api

Change-Id: I8da5c3e034ebdd72c07a036d13a1e31a1d706cf6
---
 .../components/modals/CreateProjectModal.vue  | 167 +++++++++---------
 1 file changed, 79 insertions(+), 88 deletions(-)

diff --git a/web/satellite/src/components/modals/CreateProjectModal.vue b/web/satellite/src/components/modals/CreateProjectModal.vue
index 516e92396..2ee7f793a 100644
--- a/web/satellite/src/components/modals/CreateProjectModal.vue
+++ b/web/satellite/src/components/modals/CreateProjectModal.vue
@@ -59,8 +59,8 @@
     </VModal>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { ref } from 'vue';
 
 import { RouteConfig } from '@/router';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@@ -71,111 +71,102 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
 import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { useNotify, useRouter, useStore } from '@/utils/hooks';
 
 import VLoader from '@/components/common/VLoader.vue';
 import VInput from '@/components/common/VInput.vue';
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
 
-// @vue/component
-@Component({
-    components: {
-        VButton,
-        VModal,
-        VInput,
-        VLoader,
-    },
-})
-export default class CreateProjectModal extends Vue {
-    private description = '';
-    private createdProjectId = '';
-    private isLoading = false;
+const store = useStore();
+const notify = useNotify();
+const router = useRouter();
 
-    public projectName = '';
-    public nameError = '';
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const description = ref<string>('');
+const createdProjectId = ref<string>('');
+const projectName = ref<string>('');
+const nameError = ref<string>('');
+const isLoading = ref<boolean>(false);
 
-    /**
-     * Sets project name from input value.
-     */
-    public setProjectName(value: string): void {
-        this.projectName = value;
-        this.nameError = '';
+/**
+ * Sets project name from input value.
+ */
+function setProjectName(value: string): void {
+    projectName.value = value;
+    nameError.value = '';
+}
+
+/**
+ * Sets project description from input value.
+ */
+function setProjectDescription(value: string): void {
+    description.value = value;
+}
+
+/**
+ * Creates project and refreshes store.
+ */
+async function onCreateProjectClick(): Promise<void> {
+    if (isLoading.value) return;
+
+    isLoading.value = true;
+    projectName.value = projectName.value.trim();
+
+    const project = new ProjectFields(
+        projectName.value,
+        description.value,
+        store.getters.user.id,
+    );
+
+    try {
+        project.checkName();
+    } catch (error) {
+        isLoading.value = false;
+        nameError.value = error.message;
+        analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
+
+        return;
     }
 
-    /**
-     * Sets project description from input value.
-     */
-    public setProjectDescription(value: string): void {
-        this.description = value;
+    try {
+        const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
+        createdProjectId.value = createdProject.id;
+    } catch (error) {
+        notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
+        isLoading.value = false;
+
+        return;
     }
 
-    /**
-     * Creates project and refreshes store.
-     */
-    public async onCreateProjectClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
+    selectCreatedProject();
 
-        this.isLoading = true;
-        this.projectName = this.projectName.trim();
+    await notify.success('Project created successfully!');
 
-        const project = new ProjectFields(
-            this.projectName,
-            this.description,
-            this.$store.getters.user.id,
-        );
+    isLoading.value = false;
+    closeModal();
 
-        try {
-            project.checkName();
-        } catch (error) {
-            this.isLoading = false;
-            this.nameError = error.message;
-            this.analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
+    store.commit(OBJECTS_MUTATIONS.CLEAR);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
 
-            return;
-        }
+    analytics.pageVisit(RouteConfig.ProjectDashboard.path);
+    await router.push(RouteConfig.ProjectDashboard.path);
+}
 
-        try {
-            const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
-            this.createdProjectId = createdProject.id;
-        } catch (error) {
-            this.$notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
-            this.isLoading = false;
+/**
+ * Selects just created project.
+ */
+function selectCreatedProject(): void {
+    store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
+    LocalData.setSelectedProjectId(createdProjectId.value);
+}
 
-            return;
-        }
-
-        this.selectCreatedProject();
-
-        await this.$notify.success('Project created successfully!');
-
-        this.isLoading = false;
-        this.closeModal();
-
-        this.$store.commit(OBJECTS_MUTATIONS.CLEAR);
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
-
-        this.analytics.pageVisit(RouteConfig.ProjectDashboard.path);
-        await this.$router.push(RouteConfig.ProjectDashboard.path);
-    }
-
-    /**
-     * Selects just created project.
-     */
-    private selectCreatedProject(): void {
-        this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.createdProjectId);
-        LocalData.setSelectedProjectId(this.createdProjectId);
-    }
-
-    /**
-     * Closes create project modal.
-     */
-    public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
-    }
+/**
+ * Closes create project modal.
+ */
+function closeModal(): void {
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
 }
 </script>