Discussion :

[Aygo-69]

Bonjour, nous somme un groupe d’étudiant qui devons réaliser un projet en JavaScript. Nous devons réaliser une sorte de forum avec des fonctionnalités bien-sur et parmi celle que l'on doit faire il y'en a 2 que nous ne comprenons pas du tout et n'y arrivons pas :
-(écriture) Ajouter un nouveau sujet de débat
-(écriture) Liker et disliker des contributions.

Le code en js fait plus de 400 lignes donc je pense que c'est pas très pertinent de faire un copier coller ici. J'ai donc mit tout ça en pièces jointes. Désolé si le code est pas du tout optimisé ou quoi on vient de commencer a apprendre tout ensemble (mon groupe et moi même).

Ma question est comment faire ces 2 fonctionnalités là svp.

Merci d'avance.
Cordialement.

[Watilin]

Bonjour,
j’ai regardé tout le code. C’est loin d’être minimal, il y a plein de « bruit » à la lecture du code, notamment l’usage de Bootstrap.
Je devine que vos enseignants ou enseignantes vous ont fourni un squelette de code avec des parties déjà écrites. Mais difficile de savoir lesquelles.

Je ne peux pas faire grand chose à part donner quelques conseils d’ordre général :

D’abord, je vois que vous utilisez le mode strict. C’est bien. Ça vous signale, entre autres, les variables non déclarées, et j’en ai vu quelques-unes. Ouvre la console pour voir les messages d’erreur.

Il y a également des directives ESLint. Si tu n’as pas de module ESLint dans ton environnement de dév, tu peux utiliser un linteur en ligne, par exemple https://jshint.com/.

J’ai l’impression que les notions de portée des variables ne sont pas maîtrisées. Pour éviter les pièges, abandonnez var, utilisez const au maximum, et quand vous avez vraiment besoin qu’une variable soit modifiable, utilisez let.

Il y a quelques confusions entre les méthodes de tableau .forEach() et .map(). N’utilise .map() que quand tu attends en résultat un nouveau tableau. Sinon, utilise .forEach(), ce n’est pas seulement une question d’optimisation, ça exprime aussi ton intention et ça rend le code plus lisible.

Petit détail à propos des fonctions de tri :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function trie_sujet_alphabetique(a, b) {
  const txta = a.topic;
  const txtb = b.topic;
  if (txta < txtb) return -1;
  if (txta > txtb) return 1;
  return 0;
}
 
function trie_sujet_alphabetiqueInv(a, b) {
  return -trie_sujet_alphabetique(a, b);
}

Le return 0 indique que les valeurs a et b sont égales, ça permet au moteur d’économiser une ou deux opérations dans ce cas. C’est une légère optimisation.

Quand tu as besoin de chaînes constantes, par exemple ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (state.sort == "NONE" || state.sort == "decroissant") {

La moindre faute de frappe fait échouer silencieusement. Par exemple, essaye de voir la différence entre la ligne ci-dessus et la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (state.sort == "NONE" || state.sort == "dercoissant") {

Pour éviter cet écueil, dans tous les langages on a recours à la déclaration d’une constante. Avec des constantes, les fautes de frappe lèvent des erreurs claires au lieu d’échouer silencieusement.
JavaScript offre en plus un type de donnée spécial : les symboles.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const SORT_NONE = Symbol("NONE");
const SORT_DESC = Symbol("decroissant");
 
...
 
if (SORT_NONE === state.sort || SORT_DESC === state.sort) {

Voir aussi égalité stricte et condition Yoda.

Note, s’il y a plus de deux valeurs à tester, ça devient intéressant d’utiliser un switch. En JS, le switch fait des comparaisons strictes.

Un truc qui simplifie la vie pour les dates : .toLocaleString()

[Aygo-69]

D'accord je vais regarder tout ce que vous me dites ! Merci beaucoup d'avoir prit votre temp pour me donner des conseils