$

src/pages/home/home.jsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { useAuth } from "../../hooks";
+import { useEffect } from "react";
+import { getState } from "../../api";
+import { useState } from "react";
+import Chart from "react-apexcharts";
+import "./home.scss";
+import { Link } from "react-router-dom";
+import { MagnifyingGlass } from "react-loader-spinner";
+
+export const Home = () => {
+  const { user } = useAuth();
+  const [dataset, setDataset] = useState(null);
+  const [generalStat, setGeneralStat] = useState(null);
+  const [roomsStats, setRoomsState] = useState(null);
+  const [isLoad, setIsLoad] = useState(true);
+
+  useEffect(() => {
+    getState().then((res) => {
+      try {
+        setIsLoad(false);
+        console.log(res);
+        setDataset(res);
+        setupRoomsStats(res.rooms);
+        setupGlobalStat({ years: res.years, global: res.global });
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  }, []);
+
+  const setupRoomsStats = (rooms) => {
+    setRoomsState(
+      Object.values(rooms).sort((a, b) => b.room_price - a.room_price),
+    );
+  };
+
+  const setupGlobalStat = (data) => {
+    const stats = {
+      options: {
+        chart: {
+          id: "",
+        },
+        xaxis: {
+          categories: [],
+        },
+        stroke: {
+          curve: "smooth",
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "line",
+          data: [],
+          color: "#7b6a9c",
+        },
+      ],
+    };
+
+    for (let i in data.years) {
+      if (data.years[i] === 0) {
+        continue;
+      }
+
+      stats.options.xaxis.categories.push(i);
+      stats.series[0].data.push(data.years[i]);
+    }
+
+    const component = (
+      <Chart options={stats.options} series={stats.series} width="500" />
+    );
+
+    setGeneralStat(component);
+  };
+
+  return (
+    <div id="home-container">
+      {user && (
+        <div id="home-title">
+          <h3 id="title">Bonjour {user.user.username} !</h3>
+        </div>
+      )}
+
+      <MagnifyingGlass
+        visible={isLoad}
+        height="100"
+        width="100"
+        ariaLabel="magnifying-glass-loading"
+        wrapperStyle={{}}
+        wrapperClass="magnifying-glass-wrapper"
+        glassColor="#ffffff"
+        color="#7B6A9C"
+      />
+
+      {dataset ? (
+        <div id="stats-container">
+          <div className="stats">
+            <div className="header">
+              <h3 className="header-title">Statistique general</h3>
+            </div>
+
+            {generalStat ? generalStat : null}
+
+            <div id="others-container">
+              <div className="others">
+                <div className="others-label">Moyenne de vos depenses</div>
+                <div className="others-value">
+                  {dataset.global.average_price}e
+                </div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Nombre total d'objet</div>
+                <div className="others-value">
+                  {dataset.global.items_count}e
+                </div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Nombre de piece</div>
+                <div className="others-value">{dataset.global.rooms_count}</div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Prix total</div>
+                <div className="others-value">
+                  {dataset.global.total_price}e
+                </div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Piece la plus cher</div>
+                <div className="others-value">
+                  {dataset.global.most_expensive_room.name} (
+                  {dataset.global.most_expensive_room.count}e)
+                </div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Piece avec le plus d'objet</div>
+                <div className="others-value">
+                  {dataset.global.most_item_room.name} (
+                  {dataset.global.most_item_room.count}).
+                </div>
+              </div>
+
+              <div className="others">
+                <div className="others-label">Piece avec le plus d'objet</div>
+                <div className="others-value">
+                  {dataset.global.most_item_room.name} (
+                  {dataset.global.most_item_room.count}).
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="stats">
+            <div className="header">
+              <h3 className="header-title">Pieces</h3>
+            </div>
+
+            <div id="rooms-container">
+              {roomsStats.length >= 1
+                ? roomsStats.map((r, i) => (
+                    <div className="rooms" key={i}>
+                      <span>- </span>
+                      <Link to={`/room/${r._id}`}>{r.name}</Link>
+
+                      <span>
+                        {" "}
+                        contient <b>{r.items_count}</b> objet(s) pour une valeur
+                        total de <b>{r.room_price}e</b>{" "}
+                      </span>
+                    </div>
+                  ))
+                : null}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};