commit 5bedee9e4131c8ddec3da2bfeacf297918215678
Author: plundrichov <monika.plundrichova@yoso.fi>
Date:   Mon Jul 13 13:09:22 2020 +0200

    re #58 Rewrited client app to React #58 // yoso internal app // in progress #60 // fixed

diff --git a/client/index.html b/client/index.html
deleted file mode 100644
index 7cc4240..0000000
--- a/client/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <img src="http://placekitten.com/200/300" class="">
-</body>
-</html>
\ No newline at end of file
diff --git a/client/public/index.html b/client/public/index.html
index aa069f2..3093f14 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+  
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,20 +21,10 @@
       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>Ymanager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/client/src/App.css b/client/src/App.css
index 3b8eb64..fb6517b 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -52,7 +52,7 @@
     object-fit: cover;
 }
 
-.top-nav h3 {
+.top-nav h1 {
     margin-left: 85px;
 }
 
@@ -294,7 +294,7 @@ input {
 .login-container:hover {
     background-color: #ffffff25;
 }
-.login-container h1 {
+.login-container p {
     color: white;
     font-size: 90px;
 }
@@ -383,19 +383,14 @@ input {
 
 /* -------------------LogOut------------------- */
 
-.logout h1 {
+.logout p {
     font-size: 48px;
     text-align: center;
     padding: 40px;
-}
-.logout h4 {
-    font-size: 18px;
-    text-align: center;
-    color: #ffffffc4;
+    color: #ffffff;
     transition: all 0.2s;
 }
 
-
 /* ------------ responsive --------- */
 
 @media only screen and (max-width: 990px) {
@@ -585,9 +580,23 @@ input {
         margin: 2px 0px 2px 5px;
     }
 
-    /* .side-board {
-        box-shadow: 1px 0px 15px rgb(161, 161, 161);
-    } */
+    .calendarInputs {
+        display: flex;
+        flex-direction: column;
+    }
+    .input-time {
+        margin: 0;
+    }
+    .main-content .btn {
+        margin-left: 0px;
+    }
+    .calendar-form h2 {
+        font-size: 15px;
+    }
+    .calendar-form h4 {
+        font-size: 13px;
+    }
+
 }
 
 @media only screen and (max-width: 320px) {
@@ -661,7 +670,7 @@ input {
     }
 
     .date-input {
-        width: 135px;
+        width: 130px;
     }
     .offs-request table {
         font-size: 10px;
@@ -675,9 +684,10 @@ input {
         font-size: 11px;
         margin: 5px 0px 2px 5px;
     }
+    .calendar-form h2 {
+        font-size: 14px;
+    }
+    .calendar-form h4 {
+        font-size: 12px;
+    }
 }
-
-/* .todoDiv {
-    padding-left: 200px;
-} */
-
diff --git a/client/src/App.js b/client/src/App.js
index cc1cfeb..8b2750f 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,27 +18,24 @@ function App() {
     if (window.location.pathname === '/login') return;
 
     api_fetch.getCurrentProfile().then(currentProfile => {
-      setUserName(currentProfile);
+      setCurrentUser(currentProfile);
     }).catch(reason => {
         alert(reason)
     });
   }, []);
 
-  const [userName, setUserName] = useState([
-    { name: 'Golstoj Hyhrenciv' }
-  ]);
-
+  const [currentUser, setCurrentUser] = useState();
 
 
   return (
     <BrowserRouter>
       <div className="App">
-        <Nav userName={userName} />
+        <Nav currentUser={currentUser} />
         <div className="container">
         <Switch>
-          <Route path="/" exact component={() => <Home userName={userName} setUserName={setUserName}/>}/>
+          <Route path="/" exact component={() => <Home currentUser={currentUser} setCurrentUser={setCurrentUser}/>}/>
           <Route path="/setting">
-            {userName.role === 'EMPLOYER'
+            {currentUser !== undefined && currentUser.role === 'EMPLOYER'
             ?
               <Setting/> 
             :
@@ -61,42 +58,25 @@ const Home = (props) => {
 
   const [acceptedRequest, setAcceptedRequest] = useState([]);
 
-  useEffect(() => {
-    const datauser = getDatauser();
-    setUser(datauser);
-  }, []);
-
   // OverviewAdmin state 
-  const [employees, setEmployees] = useState([
-    {
-       name: 'Sadam',
-       id: 0,
-       sickday: 10,
-       holiday: 10,
-       takenSickday: 2
-    }
- ]);
+  const [employees, setEmployees] = useState([]);
 
-  function getDatauser() {
-    return ([]);
-  }
-  
   return (
     <div className="container">
       <div className="main-content">
-        {props.userName.role === 'EMPLOYER'
+        {props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER'
         ? 
           <UpcomingRequests user={user} setUser={setUser} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} setEmployees={setEmployees}/>
         : 
-          <YourRequests user={user} setUser={setUser} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} userName={props.userName}/>
+          <YourRequests user={user} setUser={setUser} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} currentUser={props.currentUser}/>
         }
-        <Calendar setUser={setUser} user={user} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} userName={props.userName} setEmployees={setEmployees} setUserName={props.setUserName}/> 
+        <Calendar setUser={setUser} user={user} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} currentUser={props.currentUser} setEmployees={setEmployees} setCurrentUser={props.setCurrentUser}/> 
       </div>
-      {props.userName.role === 'EMPLOYER'
+      {props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER'
       ?
         <OverviewAdmin employees={employees} setEmployees={setEmployees} />
       :
-        <Overview userName={props.userName} employees={employees}  />
+        <Overview currentUser={props.currentUser} employees={employees}  />
       }
     </div>
   )
diff --git a/client/src/Calendar.js b/client/src/Calendar.js
index 2d1d444..e48bfc3 100644
--- a/client/src/Calendar.js
+++ b/client/src/Calendar.js
@@ -13,8 +13,8 @@ import * as api_fetch from './api'
 function Calendar(props) {
   
   useEffect( () => {
-    if (props.userName.id !== undefined) {
-      props.userName.role === 'EMPLOYER'
+    if (props.currentUser !== undefined) {
+      props.currentUser.role === 'EMPLOYER'
         ?
           api_fetch.getAdminCalendar().then(adminCalendar => { 
             props.setAcceptedRequest(adminCalendar);
@@ -22,13 +22,13 @@ function Calendar(props) {
             alert(reason)
           })
         :
-          api_fetch.getUserCalendar(props.userName, todayTwo).then(userCalendar => {
+          api_fetch.getUserCalendar(props.currentUser, convertedDate).then(userCalendar => {
             props.setAcceptedRequest(userCalendar);
           }).catch(reason => {
             alert(reason)
           });
     }
-  }, [props.userName.id]);
+  }, [props.currentUser]);
 
 //states
   const [isOpen, setOpen] = useState(false)
@@ -43,11 +43,7 @@ function Calendar(props) {
 
 // setting date to right format
   today = today.toISOString().split('T')[0]
-  const todayTwo = today.split("-").join("/")
-
-// LOAD DATA from server to calendar **** EMPLOYEE ****
-  
-// LOAD DATA from server to calendar **** EMPLOYER ****
+  const convertedDate = today.split("-").join("/")
 
 // ********************* ADD EVENT - EMPLOYEE **************************
 
@@ -67,14 +63,14 @@ const addEvent = async (e) => {
 
   await api_fetch.addEventApi(dataAddEventEmployee);
     if (typeRadio === 'holiday') {
-      props.setUserName({
-        ...props.userName,
-        holiday: props.userName.holiday - whatTime
+      props.setCurrentUser({
+        ...props.currentUser,
+        holiday: props.currentUser.holiday - whatTime
       })
     } else if (typeRadio === 'sickday') {
-      props.setUserName({
-        ...props.userName,
-        takenSickday: props.userName.takenSickday + 1
+      props.setCurrentUser({
+        ...props.currentUser,
+        takenSickday: props.currentUser.takenSickday + 1
       })
     }
     
@@ -100,7 +96,7 @@ const addEventAdmin = async (e) => {
 
   api_fetch.addEventApiAdmin(dataAddEventAdmin).then(() => {
     const userProps = {
-      title: props.userName.name, 
+      title: props.currentUser.name, 
       start: whatDate      
   }
   //concat new request to current ones
@@ -117,6 +113,9 @@ const addEventAdmin = async (e) => {
     alert(reason)
  });
 }
+
+  const DEFAULT_MANDAY_HOURS = 7.5;
+  
     
   return (
     <div className="calendar">
@@ -124,10 +123,9 @@ const addEventAdmin = async (e) => {
     <FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin, interactionPlugin ]}
 
     dateClick={function(info) {
-      //setOpen(true === info.dateStr > today ? true : false )
       setOpen(info.dateStr > today)
       setDate(info.dateStr)
-      setWhatTime(7.5)
+      setWhatTime(DEFAULT_MANDAY_HOURS)
     }}
     events={[
       ...props.acceptedRequest
@@ -142,12 +140,11 @@ const addEventAdmin = async (e) => {
     onClose={() => setOpen(false)}
     >
     <div className="calendar-form">
-      {/* <form onSubmit={(e) => addEvent(e)}> */}
-      <form onSubmit={props.userName.role === 'EMPLOYER' 
+      <form onSubmit={props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER' 
       ? (e) => addEventAdmin(e)
       : (e) => addEvent(e)
       }>
-        <h2>Choose an option</h2>
+        <h2>Choose vacation type</h2>
         <div className="calendar-radio">
           <input checked={
             typeRadio === 'sickday' ? 'checked' : null}
@@ -165,8 +162,8 @@ const addEventAdmin = async (e) => {
           <label for="holiday">Extra Holiday</label>
         </div>
         <div>
-          <h4>Date & Hours</h4>
-          <div className="row">
+          {typeRadio === 'holiday' ? <h4>Date & Hours</h4> : <h4>Date</h4>}
+          <div className="row calendarInputs">
             <input 
               className="date-input" 
               type='date' onChange={(e) => setDate(e.target.value)} 
@@ -185,7 +182,7 @@ const addEventAdmin = async (e) => {
           /> : null}
              </div> 
           </div>
-        <button className="btn btn-submit" type="submit">Submit</button>
+        <button className="btn btn-submit" type="submit">Request vacation</button>
       </form>
     </div>
     </Popup>
diff --git a/client/src/LogOut.js b/client/src/LogOut.js
index 159f621..a4ef9c7 100644
--- a/client/src/LogOut.js
+++ b/client/src/LogOut.js
@@ -5,8 +5,7 @@ function LogOut() {
 
   return (
     <div className="login-container logout column">
-      <h1>You have been successfully logged out!</h1>
-      <h4>Click to log in</h4>
+      <p>You have been successfully logged out!</p>
     </div>
   )
 }
diff --git a/client/src/Login.js b/client/src/Login.js
index 86c943a..20c10c8 100644
--- a/client/src/Login.js
+++ b/client/src/Login.js
@@ -3,13 +3,9 @@ import './App.css';
 
 
 function Login() {
-console.log(window.config)
   return (
-    <div className="login-container column">
-     
-    <a href={window.config.baseUrl + '/login/google?target=' + window.config.redirectUrl}><h1>log in</h1></a>
-     
-
+    <div className="login-container column">  
+    <a href={window.config.baseUrl + '/login/google?target=' + window.config.redirectUrl}><p>log in</p></a>
     </div>
   )
 }
diff --git a/client/src/Nav.js b/client/src/Nav.js
index 84fe666..ce5f7fb 100644
--- a/client/src/Nav.js
+++ b/client/src/Nav.js
@@ -5,51 +5,41 @@ import { Link } from 'react-router-dom';
 function Nav(props) {
 
   return (
-    <nav className="top-nav">
-      <a className="link-nav" href="http://localhost:3000/"><h3>YOSO</h3></a>
-      <div className="profile-comp">
-      <img src="https://cataas.com/cat/says/hello%20world!" className="img-avatar" alt="cat"></img>
-        <h5>{props.userName.name}</h5>
-          <ul>
-            {props.userName.role === 'EMPLOYER' ? 
-            <li>
-              <Link to="/setting">
-                <svg className="bi bi-gear-fill navIcon" width="20px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                  <path fillRule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
-                 <path fillRule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
-                </svg>
-              </Link>
-            </li>
-             :  null }
-            <li>
-              <Link to="/logout">
-                <svg className="bi bi-power navIcon" width="20px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                  <path fillRule="evenodd" d="M5.578 4.437a5 5 0 1 0 4.922.044l.5-.866a6 6 0 1 1-5.908-.053l.486.875z"/>
-                  <path fillRule="evenodd" d="M7.5 8V1h1v7h-1z"/>
-                </svg>
-              </Link>
-            </li>
-        </ul>
-      </div>
-    </nav>
-  )
-}
+    props.currentUser === undefined
+  ?
+      <nav className="top-nav">
+        <Link className="link-nav" to="/"><h1>YOSO</h1></Link>
+      </nav>
+  :
+      <nav className="top-nav">
+         <Link className="link-nav" to="/"><h1>YOSO</h1></Link>
+        <div className="profile-comp">
+        <img src={props.currentUser.photo} className="img-avatar" alt="profile_photo"></img>
+          <h5>{props.currentUser.name}</h5>
+            <ul>
+              {props.currentUser.role === 'EMPLOYER' ? 
+              <li>
+                <Link to="/setting">
+                  <svg className="bi bi-gear-fill navIcon" width="20px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
+                  <path fillRule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
+                  </svg>
+                </Link>
+              </li>
+              :  null }
+              <li>
+                <Link to="/logout">
+                  <svg className="bi bi-power navIcon" width="20px" height="20px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" d="M5.578 4.437a5 5 0 1 0 4.922.044l.5-.866a6 6 0 1 1-5.908-.053l.486.875z"/>
+                    <path fillRule="evenodd" d="M7.5 8V1h1v7h-1z"/>
+                  </svg>
+                </Link>
+              </li>
+          </ul>
+        </div>
+      </nav>
+    )
+  }    
 
-export default Nav;
 
-
-
-  /*
-  useEffect(() => {
-    const data = nactiData();
-    setName(data.user.name);
-  }, []);
-
-  function nactiData() {
-    return {
-      user: {
-        name: 'Golstoj Hyhrenciv',
-      },
-    };
-  }
-  */
\ No newline at end of file
+export default Nav;
\ No newline at end of file
diff --git a/client/src/Overview.js b/client/src/Overview.js
index f789896..05b69ab 100644
--- a/client/src/Overview.js
+++ b/client/src/Overview.js
@@ -4,7 +4,7 @@ import './App.css';
 
 const OffsAvailable = (props) => {
 
-   return (
+   return props.currentUser === undefined ? null : (
       <div>
          <div className="side-content">
             <div className="side-board column">
@@ -19,18 +19,18 @@ const OffsAvailable = (props) => {
                         <th className="th-left">Name</th>
                         <th>Sick Days</th>
                         <th>Holiday</th>
-                     </tr>
+                     </tr>                     
                      <tr>
-                        <td>{props.userName.name}</td>
-                        <td className="td-center">{props.userName.takenSickday + '/' + props.userName.sickday}</td>
-                        <td className="td-center">{props.userName.holiday}</td>
+                        <td>{props.currentUser.name}</td>
+                        <td className="td-center">{props.currentUser.takenSickday + '/' + props.currentUser.sickday}</td>
+                        <td className="td-center">{props.currentUser.holiday}</td>
                      </tr>
                   </tbody>
                </table>
+            </div>
          </div>
       </div>
    </div>
-   </div>
    );
 }
 
diff --git a/client/src/OverviewAdmin.js b/client/src/OverviewAdmin.js
index 9895d1c..f563198 100644
--- a/client/src/OverviewAdmin.js
+++ b/client/src/OverviewAdmin.js
@@ -13,16 +13,6 @@ const OverviewAdmin = (props) => {
       });
    }, []);
 
-   // states
-   // const [employees, setEmployees] = useState([
-   //    {
-   //       name: 'Sadam',
-   //       id: 0,
-   //       sickday: 10,
-   //       holiday: 10
-   //    }
-   // ]);
-
    const [isEdit, setEdit] = useState(false);
    const [editedUserId, setEditedUserId] = useState();
    const [prevEdit, setPrevEdit] = useState();
@@ -98,7 +88,6 @@ const OverviewAdmin = (props) => {
       <div className="side-content">
          <div className="side-board column">
             <form className="column side-board-items" onSubmit={(e) => submitEdit(e)}>
-            {/* <form className="column side-board-items" onSubmit={(e) => submitEdit(e)}> */}
             <div className="side-board-heading row">
                <h3>Overview</h3>
             </div>
diff --git a/client/src/Setting.js b/client/src/Setting.js
index 45e9fa0..1b03836 100644
--- a/client/src/Setting.js
+++ b/client/src/Setting.js
@@ -6,7 +6,7 @@ import * as api_fetch from './api'
 
 function Setting() {
 
-  const [sickdays, setSickdays] = useState([]);
+  const [sickdays, setSickdays] = useState();
 
   useEffect( () => {
     api_fetch.getSettingData().then(settingData => {
@@ -39,30 +39,21 @@ function Setting() {
   function changeSickday(newValue) {
     setSetting(
        {sickday: newValue,
-        holiday: setting.holiday
-    })
-  }
-
-  function changeHoliday(newValue) {
-    setSetting(
-      {sickday: setting.sickday,
-       holiday: newValue
+        holiday: 0
     })
   }
 
   return (
     <div className="container">
       <div className="setting-container column">
-        <h2>Nastavení</h2>
+        <h2>Setting</h2>
         <div className="underline-2"></div>
         <form onSubmit={(e) => submitSetting(e)} className="setting-form column">
           <label><h3>Sick days</h3></label>
           <input onChange={(e) => changeSickday(e.target.value)} value={setting.sickday} type="number" min="0" />
-          <label><h3>Holiday</h3></label>
-          <input onChange={(e) => changeHoliday(e.target.value)} value={setting.holiday} type="number" min="0" />
           <div className="buttons row">
             <Link to="/"><button className="btn btn-cancel" type="submit" value="Cancel">Cancel</button></Link>
-            <button className="btn btn-submit" type="submit" value="Submit">Submit</button>
+            <button className="btn btn-submit" type="submit" value="Submit">Save</button>
           </div>
         </form>
       </div>
diff --git a/client/src/UpcomingRequests.js b/client/src/UpcomingRequests.js
index 95d464c..79fa3f6 100644
--- a/client/src/UpcomingRequests.js
+++ b/client/src/UpcomingRequests.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './App.css';
 import moment from 'moment';
 import * as api_fetch from './api'
+import convertVacationType from './convertVacationType'
 
 function UpcomingRequests(props) {
 
@@ -14,16 +15,15 @@ function UpcomingRequests(props) {
    
     api_fetch.loadAdminRequests().then((data) => {
       props.setUser(data.map(request => {
-      
-        const a = request.date;
-        const b = [a.slice(0, 4), "-", a.slice(5, 7), "-", a.slice(8, 10)].join('');
+
+        const convertedStartDate = request.date.split("/").join("-");
   
         return (
           {
             title: request.firstName + ' ' + request.lastName,
             id: request.id,
             type: convertVacationType(request.type),
-            start: moment(b).format("D.M.YYYY"),
+            start: moment(convertedStartDate).format("D.M.YYYY"),
             end: null,
             status: request.status = request.status.toLowerCase()
         })
@@ -33,16 +33,6 @@ function UpcomingRequests(props) {
     });
 }
 
-function convertVacationType(vacationType) {
-  switch (vacationType) {
-    case 'SICK_DAY' :
-      return 'sickday';
-    default:
-      return 'holiday';
-  }
-}
-
-
 
   // send accepted request to server
   const acceptRequest = async (user) => {
@@ -57,9 +47,6 @@ function convertVacationType(vacationType) {
         
         const userProps = {
               title: user.title,
-              id: 0,
-              type: user.type, 
-          type: user.type, 
               type: user.type, 
               start: user.start
         }
@@ -69,7 +56,7 @@ function convertVacationType(vacationType) {
           props.setUser((pendingRequest) => pendingRequest.filter((item) => item !== user));
       })
     } catch (e) {
-      throw 'error catch GET DATA APP (getCurrentProfile)'
+      alert(e)
     }
   }
 
@@ -102,8 +89,6 @@ function convertVacationType(vacationType) {
       <div className="offs-items column">
         <div className="offs-item row">
           <table>
-            {/* {props.user.length > 0 
-            ? */}
             <tbody>
               <tr>
                 <th>Name</th>
@@ -122,35 +107,16 @@ function convertVacationType(vacationType) {
               </tr>
               ))}
             </tbody>
-            {/* :
+            :
             <tbody>
               <p>There are no requests.</p>
             </tbody>
-             } */}
-            
-          </table>
+              
+            </table>
         </div>
       </div>
     </div>
     )
   }
 
-export default UpcomingRequests;
-
-     
-
-
-        // return (shouldRemoveThisItem === true) ? false : true;
-        //})
-      //)
-      // props.setUser((pendingRequest) => pendingRequest.filter(
-        
-      //   function(item) {
-      //   const shouldRemoveThisItem = item === user;
-        
-      //   if (shouldRemoveThisItem === true) {
-      //     return false;
-      //   } else {
-      //     return true;
-      //   }})
-      // )
\ No newline at end of file
+export default UpcomingRequests;
\ No newline at end of file
diff --git a/client/src/YourRequests.js b/client/src/YourRequests.js
index abfc65f..7728db5 100644
--- a/client/src/YourRequests.js
+++ b/client/src/YourRequests.js
@@ -2,27 +2,29 @@ import React, { useEffect } from 'react';
 import './App.css';
 import moment from 'moment';
 import * as api_fetch from './api'
+import convertVacationType from './convertVacationType'
 
 function YourRequests(props) {
 
   useEffect( () => {
+    if (props.currentUser !== undefined) {
       getData();
-    }, []);
+    }
+  }, [props.currentUser]);
 
   // get requests from server
   const getData = async () => {
 
-    api_fetch.loadYourRequests().then((data) => {
+    api_fetch.loadYourRequests(props.currentUser).then((data) => {
 
       props.setUser(data.map(request => {
-        const a = request.date;
-        const b = [a.slice(0, 4), "-", a.slice(5, 7), "-", a.slice(8, 10)].join('');
+        const convertedDate = request.date.split("/").join("-");
 
       return (
         {
-          title: props.userName.name,
+          title: props.currentUser.name,
           id: request.id,
-          start: moment(b).format("D.M.YYYY"),
+          start: moment(convertedDate).format("D.M.YYYY"),
           status: request.status = request.status.toLowerCase(),
           type: convertVacationType(request.type)
         }
@@ -33,16 +35,6 @@ function YourRequests(props) {
     });
 }
 
-function convertVacationType(vacationType) {
-  switch (vacationType) {
-    case 'SICK_DAY' :
-      return 'sickday';
-    default:
-      return 'holiday';
-  }
-}
-  
-
   return (
     <div className="offs-request column">
       <h3>Your Requests</h3>
diff --git a/client/src/api.js b/client/src/api.js
index 6ae27fa..bf8753c 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -7,10 +7,7 @@ export const getCurrentProfile = async () => {
   try {
     response = await fetch(
       `${window.config.baseUrl}/users/current/profile`, {
-        headers: {
-          Authorization: 1
-
-        },
+        headers: {},
         credentials: 'include'
       }
     );    
@@ -27,15 +24,16 @@ export const getCurrentProfile = async () => {
       id: data.id,
       holiday: data.vacationCount,
       sickday: data.sickDayCount,
+      photo: data.photo,
       takenSickday: data.takenSickDayCount
     }
   } else {
       switch (response.status) {
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
           break;
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
           break;
         case 500:
           throw new Error('Internal server error.')
@@ -46,16 +44,15 @@ export const getCurrentProfile = async () => {
 }
 
 // ******************** LOAD DATA to CALENDAR - EMPLOYEE ********************
-export const getUserCalendar = async (userName, fromDate ) => {
+export const getUserCalendar = async (currentUser, fromDate ) => {
 
   let response;
 
   try {
     response = await fetch(
-      `${window.config.baseUrl}/user/${userName.id}/calendar?from=${fromDate}&status=ACCEPTED&status=REJECTED`, {
+      `${window.config.baseUrl}/user/${currentUser.id}/calendar?from=${fromDate}&status=ACCEPTED&status=REJECTED`, {
         headers: {
           'Accept': 'application/json',
-          Authorization: 6
         },
         credentials: 'include',
         method: 'GET',
@@ -75,7 +72,7 @@ export const getUserCalendar = async (userName, fromDate ) => {
     const newDate = day.date.split("/").join("-");
 
     return ({
-      title: userName.name,
+      title: currentUser.name,
       start: newDate,
       backgroundColor: day.status === 'REJECTED' ? 'red' : 'green'
     })
@@ -85,9 +82,9 @@ export const getUserCalendar = async (userName, fromDate ) => {
         case 400:
           throw new Error('Bad request. Check query parameters.')
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 404:
           throw new Error('User with given ID does not exist.')
         case 500:
@@ -109,7 +106,6 @@ export const getAdminCalendar = async () => {
       `${window.config.baseUrl}/users/requests/vacation?status=ACCEPTED`, {
         headers: {
           'Accept': 'application/json',
-          Authorization: 6
         },
         credentials: 'include',
         method: 'GET',
@@ -136,9 +132,9 @@ export const getAdminCalendar = async () => {
         case 400:
           throw new Error('Bad request. Check query parameters.')
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 500:
           throw new Error('Internal server error.')
         default:
@@ -149,14 +145,13 @@ export const getAdminCalendar = async () => {
 
 // ******************** ADD EVENT to CALENDAR - EMPLOYEE ********************
 
-export async function addEventApi(userName, dataAddEventEmployee) {
+export async function addEventApi(dataAddEventEmployee) {
   let response;
 
   try {
   // send accepted request to server
     response = await fetch(`${window.config.baseUrl}/user/calendar/create`, {
       headers: {
-        Authorization: 6,
         'Content-Type': 'application/json',
       },
       credentials: 'include',
@@ -168,40 +163,14 @@ export async function addEventApi(userName, dataAddEventEmployee) {
     throw 'Server is not available'
   }
 
-  if (response.ok) {
-      
-    response = await fetch(
-    `${window.config.baseUrl}/users/requests/vacation?status=PENDING`, {
-      headers: {
-        Authorization: 1
-      },
-      credentials: 'include',
-    });
-    const data = await response.json();
-      
-    return data.map(request => {
-      const a = request.date;
-      const b = [a.slice(0, 4), "-", a.slice(5, 7), "-", a.slice(8, 10)].join('');
-
-      return (
-        {
-          title: request.firstName + ' ' + request.lastName,
-          id: request.id,
-          type: request.type,
-          start: b,
-          end: null,
-          status: request.status
-        })
-    })
-
-  } else {
+  if (!response.ok) {
       switch (response.status) {
         case 400:
           throw new Error('Bad request. Check request body.')
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 500:
           throw new Error('Internal server error.')
         default:
@@ -219,7 +188,6 @@ export async function addEventApiAdmin(dataAddEventAdmin) {
   // send accepted request to server
     response = await fetch(`${window.config.baseUrl}/user/calendar/create`, {
       headers: {
-        Authorization: 1,
         'Content-Type': 'application/json',
     },
     credentials: 'include',
@@ -236,9 +204,9 @@ export async function addEventApiAdmin(dataAddEventAdmin) {
       case 400:
         throw new Error('Bad request. Check request body.')
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 500:
         throw new Error('Internal server error.')
       default:
@@ -255,9 +223,6 @@ export const getUsersOverview = async () => {
   try {
   response = await fetch (
     `${window.config.baseUrl}/users`, {
-      headers: {
-        Authorization: 1          
-      },
       credentials: 'include',
     }
   );
@@ -284,9 +249,9 @@ export const getUsersOverview = async () => {
       case 400:
         throw new Error('Bad request. Check query parameters.')
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 500:
         throw new Error('Internal server error.')
       default:
@@ -304,7 +269,6 @@ export async function saveDataOverview(dataOverviewObject) {
     // send accepted request to server
         response = await fetch(`${window.config.baseUrl}/user/settings`, {
           headers: {
-            Authorization: 1,
             'Content-Type': 'application/json',
           },
           credentials: 'include',
@@ -322,9 +286,9 @@ export async function saveDataOverview(dataOverviewObject) {
       case 400:
         throw new Error('Bad request. Check query parameters.')
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 500:
         throw new Error('Internal server error.')
       default:
@@ -340,9 +304,6 @@ export const getSettingData = async () =>  {
   try {
     response = await fetch(
       `${window.config.baseUrl}/settings`, {
-        headers: {
-          Authorization: 1
-        },
         credentials: 'include',
       }
     );
@@ -374,7 +335,6 @@ export async function saveDataSetting(dataSettingObject) {
   try {
     response = await fetch(`${window.config.baseUrl}/settings`, {
       headers: {
-        'Authorization': 1,
         'Content-Type': 'application/json'
       },
       credentials: 'include',
@@ -388,9 +348,9 @@ export async function saveDataSetting(dataSettingObject) {
   if (!response.ok) {
     switch (response.status) {
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 500:
         throw new Error('Internal server error.')
       default:
@@ -401,15 +361,12 @@ export async function saveDataSetting(dataSettingObject) {
 
 // ****************** LOAD DATA to YOUR REQUESTS - EMPLOYEE ******************
 
-export async function loadYourRequests(userName) {
+export async function loadYourRequests(currentUser) {
   let response;
   
   try {
     response = await fetch(
-      `${window.config.baseUrl}/user/${userName.id}/calendar?from=2020/06/24&status=PENDING`, {
-        headers: {
-          Authorization: 6
-        },
+      `${window.config.baseUrl}/user/${currentUser.id}/calendar?from=2020/06/24&status=PENDING`, {
         credentials: 'include',
       }
     );
@@ -425,9 +382,9 @@ export async function loadYourRequests(userName) {
         case 400:
           throw new Error('Bad request. Check query parameters.')
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 500:
           throw new Error('Internal server error.')
         default:
@@ -443,9 +400,6 @@ export async function loadAdminRequests() {
   try {
     response = await fetch(
       `${window.config.baseUrl}/users/requests/vacation?status=PENDING`, {
-        headers: {
-          Authorization: 1
-        },
         credentials: 'include',
       },
     );
@@ -461,9 +415,9 @@ export async function loadAdminRequests() {
         case 400:
           throw new Error('Bad request. Check query parameters.')
         case 401:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 403:
-          window.location.replace("http://localhost:3000/login")
+          window.location.replace(`/login`)
         case 500:
           throw new Error('Internal server error.')
         default:
@@ -480,7 +434,6 @@ export async function sendAcceptedRequest(acceptedRequests) {
   try {
     response = await fetch(`${window.config.baseUrl}/user/requests?type=VACATION`, {
       headers: {
-        Authorization: 1,
         'Content-Type': 'application/json',
       },
       credentials: 'include',
@@ -496,9 +449,9 @@ export async function sendAcceptedRequest(acceptedRequests) {
       case 400:
         throw new Error('Bad request. Check query parameters and request body.')
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 404:
         throw new Error('Neither vacation nor authorization request with given ID exists.')
       case 500:
@@ -517,7 +470,6 @@ export async function sendRejectedRequest(rejectedRequest) {
   try {
     response = await fetch(`${window.config.baseUrl}/user/requests?type=VACATION`, {
       headers: {
-        Authorization: 1,
         'Content-Type': 'application/json',
       },
       credentials: 'include',
@@ -533,9 +485,9 @@ export async function sendRejectedRequest(rejectedRequest) {
       case 400:
         throw new Error('Bad request. Check query parameters and request body.')
       case 401:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 403:
-        window.location.replace("http://localhost:3000/login")
+        window.location.replace(`/login`)
       case 404:
         throw new Error('Neither vacation nor authorization request with given ID exists.')
       case 500:
diff --git a/client/src/convertVacationType.js b/client/src/convertVacationType.js
new file mode 100644
index 0000000..72aaa5e
--- /dev/null
+++ b/client/src/convertVacationType.js
@@ -0,0 +1,10 @@
+function convertVacationType(vacationType) {
+    switch (vacationType) {
+      case 'SICK_DAY' :
+        return 'sickday';
+      default:
+        return 'holiday';
+    }
+  }
+  
+  export default convertVacationType;
\ No newline at end of file
