feat(communities): PEDAGO-2911 adding members list

[francoisTouchardEdifice]

No description provided.

[vmourot]

VisibleItemLoader

• Il reste des styles calculés (style={[....]}) qui ne sont pas dans useMemo.

VisibleItem

• prop isListReadonly : pas besoin de cette prop, il suffit de tester l'existence de la prop rightElement.

MemberListItem

• profileMap : il existe déjà une map pour les couleurs de type de profil dans le thème

• I18n.get(user-profiletypes-${profileKey}). Ne pas faire de clés calculés, faire un Record<AccountType, string> pour stoker les clés possibles en entier. Sinon impossible de faire une recherche par clé i18n dans le code (ça nous a posé beaucoup de soucis par le passé pour savoir quelles clés étaient utilisées ou non dans fr.json)

• Idem pour roleLabel.

• Pour les placeholders :

  • La width de est un pourcentage. Il vaut mieux l'utiliser plutôt que de faire ça en styles fixe
  • Pour les hauteurs, il faut sélectionner la hauteur qui correspond à la taille du texte qu'il y a à cet endroit

MembersListCount

• Comme d'habitude pour la prop isLoading. Faire 2 composants : un normal, un placeholder. C'est au composant parent d'afficher l'un ou l'autre (pour éviter de devoir complexifier les props)

• {count} {I18n.get('communities-members')} : Utiliser une variable injectée dans la clé de traduction. Cf l'autre PR.

• if (count <= 1) return null;. Idem, c'est au composant parent de faire ce test et d'afficher ou non le composant. Il faut rester le plus simple possible. Un composant qui ne s'affiche pas selon une prop est considéré comme un code-smell (ça demande de creuser en profondeur pour savoir pourquoi tel ou tel truc s'affiche ou pas)

• width: getScaleWidth(101),. Pour le loader, utiliser la prop width qui est un pourcentage. Pas besoin d'être pixel-perfect avec la maquette.

CommunitiesMembersScreen

• Ne pas appeler directement la prop children : utiliser la syntaxe /children ici/

• data={allMembers.length <= 1 ? [] : allMembers} // render empty screen if no members have been added yet by admin
  C'est vraiment utile ça ? Par défaut allMembers est déjà un tableau vide (c'est son état initial)

De façon générale

• Éviter de typer les composants avec React.FC. Utiliser une des syntaxes suivante :

const MyComponent = function({p1, p2}: Readonly<MyComponentProps>) { /* ... */ }
const MyComponent = ({p1, p2}: Readonly<MyComponentProps>) => // ...

Considérons qu'un Functional Component est rien de plus qu'une fonction, il vaut mieux la typer comme tel et gérer le cas des props (sans oublier Readonly<>), sans ajouter de dépendance à React.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud