Skip to content

REFACTORING.md

Latest commit

 

History

History
202 lines (157 loc) · 5.9 KB

REFACTORING.md

File metadata and controls

202 lines (157 loc) · 5.9 KB

🔧 Refactoring - Centralisation des Données

✅ Modifications Effectuées

1. Structure de Dossiers Créée

src/
├── data/
│   ├── index.ts          # Export centralisé
│   ├── voyages.ts        # Données voyages & hébergements
│   ├── user.ts           # Données utilisateur
│   ├── home.ts           # Données page d'accueil
│   └── README.md         # Documentation
└── types/
    └── index.ts          # Types TypeScript

2. Types TypeScript Créés (/src/types/index.ts)

  • ✅ Voyage - Trajets/voyages disponibles
  • ✅ Hebergement - Hébergements disponibles
  • ✅ UserInfo - Informations utilisateur
  • ✅ MenuItem - Éléments de menu du profil
  • ✅ Stat - Statistiques de la page d'accueil
  • ✅ Activity - Activités récentes

3. Fichiers de Données Créés

/src/data/voyages.ts

  • voyages[] - 14 trajets (Bus, Voiture, Train, Avion, Bateau)
  • hebergements[] - 8 hébergements (Hôtels, Auberges)
  • transportTypes[] - Types de transport pour filtrage
  • hebergementTypes[] - Types d'hébergement pour filtrage

/src/data/user.ts

  • userInfo - Profil utilisateur complet
  • menuItems[] - 8 éléments de menu des paramètres

/src/data/home.ts

  • stats[] - 3 statistiques (Gains, Courses, Note)
  • generateActivities(count) - Générateur d'activités
  • weatherInfo - Données météo

4. Fichiers Mis à Jour

✅ voyages.tsx

  • Suppression des données codées en dur (lignes 16-52)
  • Import depuis /src/data
  • Code réduit de ~50 lignes

Avant:

const voyages = [
  { id: 1, type: 'Bus', from: 'Libreville', ... },
  // 13 autres entrées...
];
const hebergements = [...];
const transportTypes = [...];
const hebergementTypes = [...];

Après:

import { voyages, hebergements, transportTypes, hebergementTypes } from '../../../data';

✅ profil.tsx

  • Suppression de userInfo et menuItems locaux
  • Import depuis /src/data
  • Code réduit de ~50 lignes

Avant:

const userInfo = { name: '...', email: '...', ... };
const menuItems = [ ... 8 items ... ];

Après:

import { userInfo, menuItems } from '../../../data';

✅ index.tsx (HomeTab)

  • Suppression des données statistiques codées en dur
  • Utilisation de stats.map() pour affichage dynamique
  • Utilisation de weatherInfo pour la météo
  • Utilisation de generateActivities() pour les activités
  • Code plus maintenable et dynamique

Avant:

// 3 blocs de code dupliqués pour les stats
<View>...</View>
<View>...</View>
<View>...</View>

// Données météo codées en dur
<Text>32°C</Text>
<Text>Libreville, Gabon</Text>

// Activités générées avec [...Array(10)]

Après:

import { stats, generateActivities, weatherInfo } from '../../../data';

{stats.map((stat) => (
  <View key={stat.id}>...</View>
))}

<Text>{weatherInfo.temperature}</Text>
<Text>{weatherInfo.location}</Text>

{activities.map((activity) => (...))}

5. Corrections de Navigation

✅ Remplacement de import { router } par useRouter()

Fichiers corrigés:

  • voyages.tsx (ligne 3, 9)
  • index.tsx (ligne 11, 30)
  • profil.tsx (ligne 2, 9)
  • profile-edit.tsx (ligne 12, 18)
  • voyage-detail.tsx (ligne 3, 9)

Raison: Utiliser le hook useRouter() garantit que le contexte de navigation est disponible au moment de l'utilisation.

✅ Nettoyage des Layouts

/src/app/(protected)/_layout.tsx

  • Suppression des déclarations de routes redondantes (course, delivery, message, conversation)
  • Expo Router détecte automatiquement ces dossiers

/src/app/_layout.tsx

  • Suppression de la route modal inexistante

6. Correction du Bug Hébergement

Fichier: voyages.tsx (lignes 17-23)

Problème: Le filtre des hébergements utilisait selectedType qui pouvait contenir des valeurs de transport ("Bus", "Train", etc.)

Solution:

const filteredHebergements = hebergements
  .filter((h) => {
    // Ne filtrer par type que si on est sur l'onglet hébergement
    if (selectedTab !== 'hebergement') return true;
    return selectedType === 'All' || h.type === selectedType;
  })
  .filter((h) => !searchLocation || h.location.toLowerCase().includes(searchLocation.toLowerCase()));

📊 Statistiques du Refactoring

Lignes de Code Réduites

  • voyages.tsx: ~50 lignes supprimées
  • profil.tsx: ~50 lignes supprimées
  • index.tsx: Code plus maintenable et dynamique

Fichiers Créés

  • 5 nouveaux fichiers (types + data)
  • 2 fichiers de documentation (README.md)

Bénéfices

✅ Maintenabilité : Données centralisées faciles à modifier ✅ Réutilisabilité : Données accessibles depuis n'importe quel composant ✅ Type Safety : TypeScript garantit la cohérence ✅ Testabilité : Données mockées facilement ✅ Lisibilité : Composants plus simples et focalisés sur la présentation ✅ Scalabilité : Facile d'ajouter de nouvelles données

🚀 Utilisation

Import Simple

// Import tout depuis le fichier centralisé
import { voyages, userInfo, stats } from '@/data';
import { Voyage, UserInfo } from '@/types';

Ajout de Nouvelles Données

  1. Créer le type dans /src/types/index.ts
  2. Créer le fichier de données dans /src/data/
  3. Exporter depuis /src/data/index.ts
  4. Importer dans vos composants

📝 Notes

  • Tous les chemins d'import utilisent le chemin relatif ../../../data
  • La structure est prête pour l'ajout de path aliases (@/data, @/types)
  • Documentation complète dans /src/data/README.md

✨ Prochaines Étapes Suggérées

  1. Ajouter des path aliases dans tsconfig.json pour simplifier les imports
  2. Créer des hooks personnalisés pour la gestion des données (ex: useVoyages())
  3. Connecter à une vraie API backend
  4. Ajouter la persistance locale avec AsyncStorage