Kevin jayat

[KevinJayke]

Bonjour @tymate

Comme convenu je vous envoie le code à trous de Weather app.
Il manque la fonctionnalité du dernier sprint, mais comme elle me semblait complexe, je ne voulais pas l'expédier.

Vous avez bien insisté sur le fait de ne pas trop y passer du temps, mais je peux néanmoins travailler sur cette dernière dès Lundi, ça sera un excellent entraînement pour moi.

Merci pour ce challenge, j'ai hâte d'avoir vos retours !

Bon week-end tout le monde.

Kévin

[netlify]

✔️ Deploy Preview for tymate-interview-weather ready!

🔨 Explore the source changes: c182ba7

🔍 Inspect the deploy log: https://app.netlify.com/sites/tymate-interview-weather/deploys/6234b98eff87460009c66916

😎 Browse the preview: https://deploy-preview-1--tymate-interview-weather.netlify.app/

[Uptip]

Ça fonctionne. Comme on a un Grid au-dessus, on peut aussi utiliser une prop responsive sur le container, pour qu’il n’y ait 2 colonnes dans la grille qu’à partir d’un certain endpoint.

templateColumns={{ md: 'minmax(15em, 1fr) 3fr' }}

[Uptip]

Ici j’ai 3 remarques,

1. On a, sur today, la windDirection en degrés, plus précis qu’en points cardinaux
2. La direction du vent, c’est là d’où il vient, mais la flèche représente souvent là où il va, du coup si on utilise les points cardinaux, S c’est vers le haut, E vers la gauche, W vers la droite, etc. (du coup si utilise today?. windDirection, il suffit d’ajouter 180)
3. Pour une longue ternaire comme ça, n’hésite pas à utiliser des switch case, plus lisibles
   e.g.

export const angle = windDirection => {
  switch (windDirection) {
    case 'N':
      return 180;
    case 'NNE':
      return 202.5;
    case 'NE': 
      return 225;
    // […]
    case 'S':
    default:
      return 0;
  }
}

[Uptip]

🙌

[Uptip]

Du coup pour ça, dans AppProvider on a une constante const CITIES,

Tu peux l’exposer dans ton contexte, genre

<AppContext.Provider value={{ 
  availableCities: CITIES, 
  selectedCity, 
  onSelectCity: setSelectedCity 
}}>

Dans Sidebar.jsx,

const { availableCities } = useApp();
// [...]
<Select
  placeholder="Choose your city"
  variant="flushed"
  onChange={e => handleSelectCity(e.target.value)}
>
  {availableCities.map(({ id, label }) => (
    <option key={id} value={id}>
      {label}
    </option>
  ))}
</Select>

Dans useWeather.js

import { useQuery } from 'react-query';
import api from '../api';
import useApp from './useApp';

const useWeather = () => {
  const { selectedCity } = useApp();
  // const locationId = 608105;

  const response = useQuery(
    ['weather', selectedCity],
    () => api.get(`/location/${selectedCity}/`),
    {
      enabled: Boolean(selectedCity),
    },
  );

  return response;
};

export default useWeather;

Quelque chose comme ça. 🎉

[KevinJayke]

Wow merci pour tous ces retours très constructifs et détaillés ! Je m'entrainerai à les appliquer sur l'appli 💯