✨ PWA application & 📝 README

b48e7cf8 · LAFORÊT Nicolas · eb8dbeef · b48e7cf8 · b48e7cf8 · b48e7cf8
Commit b48e7cf8 authored Nov 17, 2021 by LAFORÊT Nicolas 🐇
--- a/.env
+++ b/.env
+REACT_APP_API_KEY=ea1e6033f2c30a0e6663de1736e13682
\ No newline at end of file
--- a/README.md
+++ b/README.md
+# PWA TP Noté - Laforêt Nicolas
+
+> Live at: [http://awake-steel.surge.sh/](http://awake-steel.surge.sh/)
+
+## App
+
+![Application screenshot](./assets/app.png)
+
+## Lighthouse
+
+![Lighthouse screenshot](./assets/lighthouse.png)
\ No newline at end of file
--- a/assets/app.png
+++ b/assets/app.png
--- a/assets/lighthouse.png
+++ b/assets/lighthouse.png
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>PWA TP - Laforet Nicolas</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

--- a/public/manifest.json
+++ b/public/manifest.json
 {
  "short_name": "PWA TP",
-  "name": "PWA TP Noté - Laforet",
+  "name": "PWA TP Noté - Laforet Nicolas",
  "icons": [
    {
      "src": "favicon.ico",

--- a/src/App.js
+++ b/src/App.js
-import React from 'react';
+/*
+  Pour rendre l'application production-ready,
+  il faut mettre l'API key dans un fichier .env à la racine du projet,
+  ce qui est fait ici.
+*/
+
+import React, { useEffect, useState } from 'react';
 import './App.css';

 function App() {
+  const [state, setState] = useState({
+    name: 'Strasbourg',
+    weather: [{ main: 'Nuageux', description: 'nuageux', icon: '04n' }],
+    main: {
+      temp: 25,
+      feels_like: 20,
+    }
+  });
+
+  useEffect(() => {
+    fetch(`http://api.openweathermap.org/data/2.5/weather?q=${state.name}&APPID=${process.env.REACT_APP_API_KEY}&units=metric&lang=fr`)
+      .then(res => res.json())
+      .then(data => setState({
+        name: data.name,
+        weather: data.weather,
+        main: data.main
+      }));
+  }, [state.name])
+
  return (
    <div className="flex justify-center">
      <div className="text-white">
        <div className="w-128 max-w-lg font-sans overflow-hidden bg-gray-900 shadow-lg" >
-          <div className="flex items-center justify-between px-6 py-8"><div className="flex items-center">
-            <div>
-              <div className="text-6xl font-semibold">8°C</div>
-              <div>Feels like 2°C</div>
+          <div className="flex items-center justify-between px-6 py-8">
+            <div className="flex items-center">
+              <div>
+                <div className="text-6xl font-semibold">{state.main.temp}°C</div>
+                <div>Feels like {state.main.feels_like}°C</div>
+              </div>
+              <div className="mx-5">
+                <div className="font-semibold capitalize">{state.weather.length ? state.weather[0].description : 'Not available'}</div>
+                <div>{state.name}</div>
+              </div>
            </div>
-            <div className="mx-5">
-              <div className="font-semibold">Cloudy</div>
-              <div>Toronto, Canada</div>
+            <div>
+              {
+                state.weather.length &&
+                <img alt={`${state.weather[0].description} icon`} src={`http://openweathermap.org/img/wn/${state.weather[0].icon}@2x.png`} />
+              }
            </div>
-          </div>
-            <div>ICON</div>
          </div>
          <div className="text-sm bg-gray-800 overflow-hidden"> {[1, 2, 3, 4, 5].map((value, index) => (
-            <div className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
+            <div key={index} className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
            >
              <div className="w-1/6 text-lg text-gray-200">DOW : {value}</div>
              <div className="flex items-center w-2/3 px-4">

--- a/src/App.test.js
+++ b/src/App.test.js
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/index.js
+++ b/src/index.js
@@ -15,7 +15,7 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
+serviceWorkerRegistration.register();

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))