Dashboard

src/components/misc/contract-select/ContractSelect.jsx

@@ -2,16 +2,17 @@ import React from 'react';
 import './ContractSelect.scss'
 
 const ContractSelect = ({contracts, contractSelected, setContractSelected}) => {
+
   const handleChange = event => {
     setContractSelected(event.target.value);
   };
 
   return (
     <select name='contract'
-                  onChange={handleChange}
-                  id="select-contract"
-                  defaultValue={contractSelected}
-                  >
+        onChange={handleChange}
+        id="select-contract"
+        defaultValue={contractSelected}
+        >
       {contracts?.map(option => {
         return <option key={option.id} value={option.id}> {option.location.street} {option.location.streetNumber}</option>
       })}

src/screens/dashboard/sidescreen/dashboard/Dashboard.jsx

@@ -10,7 +10,7 @@ import { ProgressBar } from 'react-loader-spinner';
 import { getTickets } from '../../../../services/TicketService';
 
 const Dashboard = () => {
-  const toMonthName= (monthNumber) => {
+  const toMonthName = (monthNumber) => {
     const date = new Date();
     date.setMonth(monthNumber - 1);
 

src/screens/dashboard/sidescreen/user/User.jsx

@@ -1,20 +1,65 @@
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getContracts } from '../../../../services/ContractService';
 import { getCurrentUser } from '../../../../services/UserService';
+import "./User.scss"
 
 const User = () => {
     const [ user, setUser ] = useState({})
+    const [ contracts, setContracts] = useState([])
+
+    const toMonthName = (monthNumber) => {
+      const date = new Date();
+      date.setMonth(monthNumber - 1);
+
+      return date.toLocaleString('en-US', {
+        month: 'short',
+      });
+    }
 
     useEffect(() => {
         getCurrentUser()
           .then(user => {
             setUser(user)
+            getContracts(user)
+            .then(contracts => {
+              setContracts(contracts)
+            })
+            .catch(err => (console.log(err)))
           })
+          .catch(err => console.log(err))
       }, [])
 
     return (
+      <div>
+        <div>
+            <h1>Bienvenido {user.firstName}</h1>
+        </div>
+        <div className='contract-container-container'>
+          {contracts.map((contract) => {
+            return (
+              <Link to={""} className="contract-container" key={contract.id}>
+                <div className=''>
+                  <h3>{contract.location.city}</h3>
+                  <p>
+                    {toMonthName(contract.createdAt.split('-').slice(1,-1).toString())}
+                    {" "}
+                    {contract.createdAt.split('-').slice(0, 1)}
+                  </p>
+                  <p>{contract.location.street}{" "}{contract.location.streetNumber}</p>
+                  <p>{contract.price} €/kwh</p>
+                  {contract.solarPanels ? <p>Solar panels: {contract.solarPanels}</p> : ''}
+                  {contract.solarPanels ? <p>Power generated per solar panel: {contract.powerPerPanel}</p> : ''}
+                </div>
+              </Link>
+            )
+          })
+          }
+        </div>
         <div>
-            <h1>{user.firstName}</h1>
+
         </div>
+      </div>
     );
 };
 

src/screens/dashboard/sidescreen/user/User.scss

@@ -0,0 +1,30 @@
+.contract-container {
+    background-color: white;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    margin-right: 10px;
+    text-decoration: none;
+    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+    transition: .2s ease-in-out;
+    margin-bottom: 20px;
+    max-width: 400px;
+    &:visited {
+      color: #3d3d3d
+    }
+    &:hover {
+      color: #3d3d3d;
+      box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
+      background-color: rgb(223, 237, 255);
+    }
+    &:active {
+      color: #3d3d3d
+    }
+}
+
+.contract-container-container {
+    display: flex;
+    flex-wrap: wrap;
+
+}