Životní cyklus komponenty

V některých webových aplikacích se nám může hodit komponenta informující uživatele, že došlo k výpadku internetového připojení a aplikace tedy nemusí fungovat správně. Zkusíme společně takovou komponentu vytvořit.

1. Udělejte si fork repozitáře se zadáním. Spusťte aplikaci a prozkoumejte zdrojový kód.
2. Prohlédněte si komponentu Offline, která zobrazuje informaci zda jsme připojeni k internetu. Zatím komponenta nefunguje a v podstatě nic užitečného nedělá.
3. Pomocí správného použití useEffect zařiďte, aby se při každém mountu této komponenty vypsalo do konzole mounted. Zkuste přepínat mezi stránkami Domů a Test Připojení a sledujte, kdy se vypíše zpráva do konzole.
4. Zařiďte podobnou věc i pro unmount komponenty. Opět přepínejte mezi stránkami a sledujte, kdy se komponenta mountuje a kdy unmountuje.
5. Uvnitř komponenty Offline napište funkci handleOffline, která bude reagovat na událost odpojení od internetu. Nastavte v ní stav isOnline na false.
6. Při mountu komponenty zapojte tuto funkci jako posluchač události offline na objektu window:

   window.addEventListener('offline', handleOffline);
   

7. Na stránce Test připojení otevřete Developer tools → Network a přejděte do offline módu. Komponenta by měla zobrazit patřičnou zprávu.
   

   
8. Podobným postupem jako výše vytvořte posluchač události online a zařiďte, aby se stav komponenty správně aktualizoval, pokud v developer tools přejdeme opět do online módu.
9. Vyzkoušejte, že vaše řešení správně funguje.