feat: Refresh user profile after create folder

[shaohuzhang1]

feat: Refresh user profile after create folder

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided code has several issues:

1. Re-definition of useStore: You've defined it twice in the same component, which can lead to confusion and errors if you're trying to use it multiple times.

2. Optimization Suggestions:

   • The .profile() method is called within an asynchronous chain without waiting for its completion before proceeding with further operations. It would be beneficial to add a .catch() block or await it properly after calling .profile().
   • Consider using TypeScript more extensively to ensure type safety throughout the function, especially when dealing with Promises.

3. General Improvements:

   • Ensure that dialogVisible, sourceType, and folderForm are correctly defined and used within their respective scopes.
   • Check for any unnecessary empty lines and adjust indentation where necessary for better readability.

Here's a revised version of the code incorporating some of these suggestions along with improvements in structure and comments:

import { ref, defineEmits, watch } from 'vue';
import folderApi from '@/api/folder';
import { MsgSuccess, MsgAlert } from '@/utils/message';
import { t } from '@/locales';
import useStore from '@/stores';

const store = useStore();
const dialogVisible = ref(false);
const sourceType = ref<string>('');
const folderForm = ref<any>({});

const emit = defineEmits(['refresh']);

watch(folderForm, (newForm) => console.log(newForm)); // Example: logging form changes

const submitHandle = async () => {
  try {
    let result;
    
    if (dialogVisible.value && !formValidated()) {
      handleValidateError(); // Function to show validation error message
      return;
    }

    if (!folderId || folderId === '-1') { // Assuming this variable holds the current folder ID
      result = await folderApi.postFolder(sourceType.value, folderForm.value, loading);
    }
    else {
      result = await folder.updateFolder(folderId, folderForm.value); // Assuming there's a method to update folders
    }

    await store.user.profile(); // Fetch user profile before handling success
    MsgSuccess(t('common.createSuccess'));
    folder.setCurrentFolder(result.data);
    folder.asyncGetFolder(sourceType.value, {}, loading);

    dialogVisible.value = false;

    // Handle successful response here
    if(result.success) {
      console log("Folder created successfully:", result);
    }

  } catch (error) {
    const errorMessage = error.response ? error.response.data.message : 'Something went wrong.';
    MsgFailed(t(`errors.${errorMessage}`));
    console.error(error);
  }
};

// Helper methods
function formValidated(): boolean {
  // Implement your validation logic here
  return true; // Return false if any field does not validate correctly
}

function handleValidateError(): void {
  Message.error(t('common.formValidationErrors'));
}

Key Changes:

• Removed repeated definition and usage of useStore.
• Ensured proper chaining of promises in the submitHandle function.
• Added basic input checking and error handling.
• Included comments for clarity and improved maintainability.
• Assumed store.user.profile().then(() => ...) fetches the user profile asynchronously.

These adjustments should help enhance the robustness and functionality of your Vue.js application component.