Vérification de code. Developpement web JS react/DOM accessi

yali2747 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
yali2747 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -

Bonjour,

Je suis en formation dev web( très compliqué...), on nous incite à ne pas utiliser l'IA pour coder.  Pour l'accessibilité, j'ai un ordre bien spécifique d'un menu en version desktop. Mais pour la version mobile, le menu  passe de l'ordre 1 2 3 4 5 à l'ordre 2 3 1 4 5 . quelqu'un peut me dire si ce code est clair ou pas svp : 

 `const orderItemMobile = (items: typeof menuItems) => {

    const [dashboard, kitchen, recipes, products, nutrition] = items;

    return [kitchen, recipes, dashboard, products, nutrition];

  };

  const orderItems = orderItemMobile(menuItems);`

Sachant que menuItems est un fichiers TS pour les routes des menus et sous menus.pour l'accessibilité, que la lecture se fasse bien de gauche à droite dans l'ordre 2 3 1 4 5. Merci de vos retours ;-)

Windows / Chrome 138.0.0.0

A voir également:

2 réponses

Bruno83200_6929 Messages postés 608 Date d'inscription   Statut Membre Dernière intervention   126
 

Bonjour,

Votre code est fonctionnellement correct et fait exactement ce que vous voulez (passer de l'ordre 1,2,3,4,5 à 2,3,1,4,5), mais il peut être amélioré pour la lisibilité et la maintenance.


Points positifs :

Le code fonctionne
La logique est claire avec le destructuring
Bon pour l'accessibilité (ordre de lecture respecté)

Points d'amélioration :


Nommage plus explicite :


typescript// Plus clair
const reorderMenuForMobile = (items: typeof menuItems) => {
  const [dashboard, kitchen, recipes, products, nutrition] = items;
  return [kitchen, recipes, dashboard, products, nutrition];
};


Approche plus maintenable :


typescript// Alternative avec les index (plus flexible)
const reorderMenuForMobile = (items: typeof menuItems) => {
  const [item1, item2, item3, item4, item5] = items;
  return [item2, item3, item1, item4, item5]; // 2,3,1,4,5
};

// Ou encore mieux avec les index directs
const reorderMenuForMobile = (items: typeof menuItems) => {
  return [items[1], items[2], items[0], items[3], items[4]];
};


Avec un commentaire explicatif :


typescript// Réorganise le menu pour mobile : Dashboard passe en 3ème position
const reorderMenuForMobile = (items: typeof menuItems) => {
  const [dashboard, kitchen, recipes, products, nutrition] = items;
  return [kitchen, recipes, dashboard, products, nutrition];
};


Votre code est donc clair et fonctionnel !

C'est du bon travail pour quelqu'un en formation. L'important est que l'ordre d'accessibilité soit respecté, ce qui est le cas.


1
yali2747 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   1
 

Bonjour Bruno,

Un grand merci pour ton aide. Cela fonctionne à merveille. Je vais continuer sur un nouveau ticket, la page détails de la recette via un click et back end by id.

Si besoin, je repasserai sur ce forum très vite parce que ça va être plus compliqué.

Leïla ;-)

1