# Retours techniques Beeops

* Branche de référence : 2-create-apiary-screen
* Date : 11 décembre 2019
* Auteur : Corentin Chardeau

## Structure du projet

Pour ce qui est de la structure du projet, je serais d'avis de suivre ce qui a été fait sur ce [boilerplate](https://github.com/GeekyAnts/ReactNative-Redux-TypeScript-Boilerplate), notament pour le dossier `src`. Ce qui donnerais pour un composant `Weather`, un path `src/components/Weather.tsx`. Les tests correspondants à ce composant se trouveraient dans `tests/components/Weather.test.tsx`.

## React
Utiliser les FunctionComponents avec les hooks dès que possible. De nombreux développements React tendent vers ce nouveau mode de fonctionnement. Il simplifie énormément l'écriture des composants en "masquant" la partie `lifecycle` notamment.
[Pour en savoir plus](https://habr.com/en/post/443500)

## Typescript
### Couverture
Quelques améliorations concernant la couverture Typescript du projet :
* Passer tout les fichiers `src` sur du Typescript (`.ts` ous `.tsx` pour les composants).
* Corriger les erreurs Typescript (ex : Element implicitly has an 'any' type)
* Pour cela, ne pas hésiter à utiliser une extension TS pour son IDE. La mission : enlever tout le rouge sur son écran :grin:
* Ajouter le check TSLint à la compilation ? (comme ça, erreur TypeScript = pas de compilation = correction immédiate de l'erreur)

### Typage
* Ajouter du typage sur les `props`, ça simplifie la lecture du composant et permet d'éviter pas mal d'erreurs. [exemple](https://github.com/cchardeau/marvel/blob/master/src/components/Character/Character.tsx)
* Ajouter du typage sur les variables "complexes". Exemple avec `hives` :

// src/models/Hive.ts

enum Health {
  Low = 0,
  Medium = 1,
  Normal = 2
}

enum Food {
  VeryLow = 1,
  Low = 2,
  Full = 3,
  VeryFull = 4
}

enum Eggs {
  Invalid = -1,
  Ko = 0,
  Ok = 1
}

enum Alerts {
  Varroa = 'VARROA',
  Swarming = 'SWARMING',
  SwarmingP = 'SWARMINGP',
  Laying = 'LAYING',
  Food = 'FOOD',
  FoodP = 'FOODP',
  Brood = 'BROOD',
  Sickness = 'SICKNESS',
  Orphan = 'Orphan'
}

type Queen = {
  seen: boolean
  orphan: boolean
  year: number
}

type Hive = {
  id: number,
  name: string,
  health: Health,
  queen: Queen,
  brood: number
  food: Food,
  eggs: Eggs,
  alerts: Array<Alerts>
}

export { Health, Food, Eggs, Alerts }
export default Hive

// src/utils/data.ts

import Hive from '../models/Hive'

export const hives: Array<Hive> = [ ... ]

## Code
* Corriger les diférentes erreurs Eslint
* Préferer l'utilisation de `const` et `let` à `var`
* Harmoniser l'écriture du noms des variables (choix entre `snake_case` ou `camelCase`)