Problématique State Pattern

[Guiloux]

Description

Nous allons profiter d'une petite accalmie côté produit pour refactoriser la connexion utilisateur. En effet, cette dernière est actuellement réalisée dans le fichier js/templates/FormModal.js.

Deux méthodes dans l'objet FormModal se servent de l'objet User :

// La méthode onSubmitForm
onSubmitForm() {
    this.$wrapper
        .querySelector('form')
        .addEventListener('submit', e => {
            e.preventDefault()

            const firstNameInputValue = this
                .$wrapper
                .querySelector('#firstname')
                .value

            const lastNameInputValue = this
                .$wrapper
                .querySelector('#lastname')
                .value

            const user = new User({
                firstName: firstNameInputValue,
                lastName: lastNameInputValue
            })

            if (user.user) {
                this.$modalWrapper.classList.remove('modal-on')
                this.$modalWrapper.innerHTML = ""
            } 

        })
}

// Et la méthode shouldDisplayForm
shouldDisplayForm() {
    const user = new User()
    return !user.user
}

Nous allons devoir implémenter un State Pattern pour mieux gérer cette dépendance.

User Stories

Première User Story

• (GIVEN) : Je suis sur la page d'accueil du projet
• (WHEN) : Je ne suis pas connecté en tant qu'utilisateur
• (THEN) : Le formulaire de connexion s'affiche

Deuxième User Story

• (GIVEN) : Je suis sur la page d'accueil du projet
• (WHEN) : Je suis connecté en tant qu'utilisateur (les informations sont en local storage)
• (THEN) : Le formulaire de connexion ne s'affiche pas

[AurelienWebnation]

Hello !

Le propriété User et la méthode getUser dans AnonymousUserState et UserConnectedState ne servent à rien ! Dommage, il y a souvent du code assez étrange et qui n'est pas utile, ce qui peut porter à confusion

[tdimnet]

Bonjour @AurelienWebnation

Merci pour ton retour. Alors, pour le code « assez étrange et qui n’est pas utile », j’avoue que j’aimerais bien en savoir un peu plus. Encore une fois, c’est ce que je répondais dans une autre issue, attention aux généralités.

Pour la propriété user et le state pattern, peut-être que j’aurais plus faire ça différemment et donner plus de contextes. Je vais me garder ça en tête pour mes prochains cours (qui ne seront pas sur OpenClassrooms). Merci :)

[loicmalo]

Bonjour, Merci pour ton tuto encore une fois. C'est très instructif. Juste une remarque : dans la correction proposée, il est possible de valider le formulaire de connexion et passer à l'état connecté sans créer d'utilisateur.

[Elishaya13]

En effet, il n'y a plus de sauvegarde de l'utilisateur dans le localStorage, on se trouve connecté mais pas de sauvegarde, donc si on relance, on a de nouveau le modal.