From f79f07fc66439b415d171aa50195a9c5249dd1fd Mon Sep 17 00:00:00 2001
From: Eduard Tudorache <edy_edytza2003@yahoo.com>
Date: Fri, 11 Nov 2022 15:42:35 +0100
Subject: [PATCH 1/2] work done on profile page

---
 .../sidescreen/dashboard/Dashboard.jsx        |  2 +-
 .../dashboard/sidescreen/user/User.jsx        | 45 ++++++++++++++++++-
 .../dashboard/sidescreen/user/User.scss       | 28 ++++++++++++
 3 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/screens/dashboard/sidescreen/user/User.scss

diff --git a/src/screens/dashboard/sidescreen/dashboard/Dashboard.jsx b/src/screens/dashboard/sidescreen/dashboard/Dashboard.jsx
index 9a7f73a..16c5639 100644
--- a/src/screens/dashboard/sidescreen/dashboard/Dashboard.jsx
+++ b/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);
   
diff --git a/src/screens/dashboard/sidescreen/user/User.jsx b/src/screens/dashboard/sidescreen/user/User.jsx
index 7200e80..6c784fd 100644
--- a/src/screens/dashboard/sidescreen/user/User.jsx
+++ b/src/screens/dashboard/sidescreen/user/User.jsx
@@ -1,20 +1,63 @@
 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)
+              console.log(contracts);
+            })
+            .catch(err => (console.log(err)))
           })
+          .catch(err => console.log(err))
       }, [])
 
     return (
+      <div>
+        <div>
+            <h1>Bienvenido {user.firstName}</h1>
+        </div>
         <div>
-            <h1>{user.firstName}</h1>
+          {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>
     );
 };
 
diff --git a/src/screens/dashboard/sidescreen/user/User.scss b/src/screens/dashboard/sidescreen/user/User.scss
new file mode 100644
index 0000000..5ab0d80
--- /dev/null
+++ b/src/screens/dashboard/sidescreen/user/User.scss
@@ -0,0 +1,28 @@
+.contract-container {
+    background-color: white;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    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;
+}
\ No newline at end of file

From 2ef9b4e4f15b23733c04c91d7cd6214c1717ce78 Mon Sep 17 00:00:00 2001
From: Eduard Tudorache <edy_edytza2003@yahoo.com>
Date: Fri, 11 Nov 2022 16:07:22 +0100
Subject: [PATCH 2/2] profile finished, may need retouch

---
 src/components/misc/contract-select/ContractSelect.jsx | 9 +++++----
 src/screens/dashboard/sidescreen/user/User.jsx         | 6 ++++--
 src/screens/dashboard/sidescreen/user/User.scss        | 2 ++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/misc/contract-select/ContractSelect.jsx b/src/components/misc/contract-select/ContractSelect.jsx
index 608eb47..c593e0a 100644
--- a/src/components/misc/contract-select/ContractSelect.jsx
+++ b/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>
       })}
diff --git a/src/screens/dashboard/sidescreen/user/User.jsx b/src/screens/dashboard/sidescreen/user/User.jsx
index 6c784fd..6def976 100644
--- a/src/screens/dashboard/sidescreen/user/User.jsx
+++ b/src/screens/dashboard/sidescreen/user/User.jsx
@@ -24,7 +24,6 @@ const User = () => {
             getContracts(user)
             .then(contracts => {
               setContracts(contracts)
-              console.log(contracts);
             })
             .catch(err => (console.log(err)))
           })
@@ -36,7 +35,7 @@ const User = () => {
         <div>
             <h1>Bienvenido {user.firstName}</h1>
         </div>
-        <div>
+        <div className='contract-container-container'>
           {contracts.map((contract) => {
             return (
               <Link to={""} className="contract-container" key={contract.id}>
@@ -57,6 +56,9 @@ const User = () => {
           })
           }
         </div>
+        <div>
+          
+        </div>
       </div>
     );
 };
diff --git a/src/screens/dashboard/sidescreen/user/User.scss b/src/screens/dashboard/sidescreen/user/User.scss
index 5ab0d80..4d0ed41 100644
--- a/src/screens/dashboard/sidescreen/user/User.scss
+++ b/src/screens/dashboard/sidescreen/user/User.scss
@@ -4,6 +4,7 @@
     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;
@@ -25,4 +26,5 @@
 .contract-container-container {
     display: flex;
     flex-wrap: wrap;
+    
 }
\ No newline at end of file