fix: 🐛 add exercice Network

Author: MatthysDev

challenges/data/03.md

@@ -23,39 +23,7 @@ yarn add @react-native-community/netinfo
 npm install --save @react-native-community/netinfo
 ```
 
-- [ ] Create a new context `Network.tsx`
-
-You should check if the user is connected to the internet and display a message when the user is not connected.
-
-```javascript
-const NetworkContext = createContext<NetworkContextProps>(
-  {} as NetworkContextProps
-);
-
-export const NetworkProvider = ({ children }: PropsWithChildren) => {
-  const [isConnected, setIsConnected] = useState<boolean | null>(false);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [isConnected]);
-
-  return (
-    <NetworkContext.Provider value={{ isConnected }}>
-      {children}
-    </NetworkContext.Provider>
-  );
-};
-```
+- [ ] Create a new file `Network.tsx` and [paste this component](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/hackathon/spacecraft/src/components/exercice/Network.tsx)
 
 You can use console.log to check if the user is connected to the internet.
 

hackathon/spacecraft/src/components/exercice/Network.tsx

@@ -0,0 +1,30 @@
+import NetInfo from "@react-native-community/netinfo";
+import type { PropsWithChildren } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface NetworkContextProps {
+  isConnected: boolean | null;
+}
+
+const NetworkContext = createContext<NetworkContextProps>(
+  {} as NetworkContextProps
+);
+
+export const NetworkProvider = ({ children }: PropsWithChildren) => {
+  const [isConnected, setIsConnected] = useState<boolean | null>(false);
+
+  useEffect(() => {
+    // use `NetInfo.addEventListener` to listen to network status changes
+    // use `NetInfo.fetch` to get the current network status
+    // store the network status in the `isConnected` state
+    return () => {
+      // unsubscribe from the network status listener
+    };
+  }, [isConnected]);
+
+  return (
+    {/* Add `NetworkContext.Provider` with the connection status value */ }
+  );
+};
+
+export const useNetwork = () => useContext(NetworkContext);