Repository: louislam/uptime-kuma
File: src/components/CreateGroupDialog.vue (Vue)

Code before:
                <div class="modal-body">
                    <form @submit.prevent="confirm">
                        <div>
                            <label for="draftGroupName" class="form-label">{{ $t("Group Name") }}</label>
                            <input id="draftGroupName" v-model="groupName" type="text" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ $t("Cancel") }}
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="groupName == '' || groupName == null" @click="confirm">
                        {{ $t("Confirm") }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from "bootstrap";

export default {
    beforeRouteLeave(to, from, next) {
        this.cleanupModal();
        next();
    },
    props: {},
    emits: [ "added" ],
    data: () => ({
        modal: null,
        groupName: null,
    }),
    watch: {
        $route(to, from) {
            this.cleanupModal();
        }
    },
    mounted() {
        this.modal = new Modal(this.$refs.modal);
    },
    beforeUnmount() {
        this.cleanupModal();
    },
    methods: {
        /**
         * Show the confirm dialog
         * @returns {void}
         */

Review comment (refactor):
are there cases where the `beforeUnmount` is not called?
If yes, please add a comment what this case is.
If no, lets remove this check and inline `cleanupModal` into `beforeUnmount`

Code after:
                <div class="modal-body">
                    <form @submit.prevent="confirm">
                        <div>
                            <label for="draftGroupName" class="form-label">{{ $t("Group Name") }}</label>
                            <input id="draftGroupName" v-model="groupName" type="text" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ $t("Cancel") }}
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="groupName == '' || groupName == null" @click="confirm">
                        {{ $t("Confirm") }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from "bootstrap";

export default {
    props: {},
    emits: [ "added" ],
    data: () => ({
        modal: null,
        groupName: null,
    }),
    mounted() {
        this.modal = new Modal(this.$refs.modal);
    },
    beforeUnmount() {
        this.cleanupModal();
    },
    methods: {
        /**
         * Show the confirm dialog
         * @returns {void}
         */
        show() {
            this.modal.show();
        },
        /**
         * Dialog confirmed
         * @returns {void}
         */
        confirm() {
            this.$emit("added", this.groupName);