Services

Encapsuler la manipulation des données de l'application, ex: CRUDL. En utilisant les modules, on obtient automatiquement le comportement d'un singleton.

const USERS = [
    { username: 'a', password: 'a' },
    { username: 'b', password: 'b' },
    { username: 'c', password: 'c' },
];

class AuthService {
    #currentUser = null;

    get currentUser() {
        return this.#currentUser;
    }

    signUp(credentials) {
        const { username, password } = credentials;
        const user = USERS.find((u) => u.username == username)

        if (!user)  {
            USERS.push({username, password});
            this.#currentUser = { username }
        }

        return !!this.#currentUser
    }

    logIn(credentials) {
        const user = USERS.find((u) => 
            u.username == credentials.username && u.password == credentials.password
        )

        this.#currentUser = user ? { username: user.username } : null;

        return !!this.#currentUser
    }

    logOut() {
        this.#currentUser = null;
    }
}

const service = new AuthService();
export default service;

🚨 Mettre à jour: Login, Signup, Logout 🚨

Modèles

Encapsuler les données et comportements d'une entité de l'application, les classes permettent d'exploiter les concepts orienté-objet en JavaScript.

export class User {

    constructor(username) {
        this.username = username;
    }

}

import { User } from './User.js'

export class UserCredentials extends User {

    constructor({username, password}) {
        super(username);

        this.password = password;
    }

    matches(credentials) {
        return this.username == credentials.username && this.password == credentials.password
    }
}

import { UserCredentials } from '../models/UserCredentials.js'
import { User } from '../models/User.js'

const USERS = [
    new UserCredentials({ username: 'a', password: 'a' }),
    new UserCredentials({ username: 'b', password: 'b' }),
    new UserCredentials({ username: 'c', password: 'c' }),
];

class AuthService {
    #currentUser = null; // ATTENTION, à utiliser judicieusement

    get currentUser() {
        return this.#currentUser;
    }

    signUp(credentials) {
        const { username, password } = credentials;
        const user = USERS.find((u) => u.username == username)

        if (!user)  {
            USERS.push(new UserCredentials({username, password}));
            this.#currentUser = new User( username )
        }

        return !!this.#currentUser
    }

    logIn(credentials) {
    console.log(credentials);
        const user = USERS.find((u) => u.matches(credentials))

        this.#currentUser = user ? new User(user.username) : null;

        return !!this.#currentUser
    }

    logOut() {
        this.#currentUser = null;
    }
}

const service = new AuthService();
export default service;

🚨 Mettre à jour les components!? ou pas... 🚨

Organisation

Par type

src
├── App.js
├── components
│   ├── StyledButton.js
│   └── StyledTextInput.js
├── models
│   ├── User.js
│   └── UserCredentials.js
├── screens
│   ├── auth
│   │   ├── Login.js
│   │   └── Signup.js
│   ├── recipes
│   │   ├── RecipeItem.js
│   │   ├── Recipe.js
│   │   └── Recipes.js
│   └── Screen.js
└── services
        └── Auth.js

Par fonctionnalité

src
├── App.js
├── auth
│   ├── Auth.service.js
│   ├── Login.js
│   ├── Signup.js
│   ├── UserCredentials.model.js
│   └── User.model.js
├── components
│   ├── Screen.js
│   ├── StyledButton.js
│   └── StyledTextInput.js
└── recipes
    ├── RecipeItem.js
    ├── Recipe.js
    ├── Recipe.model.js
    └── Recipes.js

🖥️ Recipeasy

On prépare le terrain pour la suite du développement, pas de suivi formel, mais je vous recommande de commencer à intégrer la mécanique de services et modèles pour la gestion de l'authentification et des recettes. Dans le prochain chapitre, nous remplacerons l'accès au données locales par des appels HTTP à un serveur pour manipuler une base de données MariaDB.

• Connexion
• Inscription

• Déconnexion

• CRUDL des recettes de l'utilisateur connecté

  • Liste
  • Ajout
  • Modification
  • Suppression