Revize 1865a0be

re #58 massive code formatting

client/src/App.js

@@ -9 +9 @@
 import Setting from './Setting';
 import LogOut from './LogOut';
 import Login from './Login';
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import * as api_fetch from './api'
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import * as api from './api';
 
-function App() {
+export default function App() {
 
   useEffect(() => {
     if (window.location.pathname === '/login' || window.location.pathname === '/logout') return;
 
-    api_fetch.getCurrentProfile().then(currentProfile => {
+    api.getCurrentProfile().then(currentProfile => {
       setCurrentUser(currentProfile);
     }).catch(reason => {
-        alert(reason)
+      alert(reason);
     });
   }, []);
 
@@ -32 +32 @@
       <div className="App">
         <Nav currentUser={currentUser} />
         <div className="container">
-        <Switch>
-          <Route path="/" exact component={() => <Home currentUser={currentUser} setCurrentUser={setCurrentUser}/>}/>
-          <Route path="/setting">
-            {currentUser !== undefined && currentUser.role === 'EMPLOYER'
-            ?
-              <Setting/> 
-            :
-              <div className="permissionText column">
-                <p>You don't have permission to access on this server.</p>
-              </div>
-            }
-          </Route> 
-          <Route path="/logout"><LogOut/></Route>
-          <Route path="/login"><Login/></Route>
-        </Switch>  
+          <Switch>
+            <Route path="/" exact component={() => <Home currentUser={currentUser} setCurrentUser={setCurrentUser}/>}/>
+            <Route path="/setting">
+              {currentUser !== undefined && currentUser.role === 'EMPLOYER' ? (
+                <Setting/>
+              ) : (
+                <div className="permissionText column">
+                  <p>You don&apos;t have permission to access on this server.</p>
+                </div>
+              )}
+            </Route>
+            <Route path="/logout"><LogOut/></Route>
+            <Route path="/login"><Login/></Route>
+          </Switch>
         </div>
       </div>
     </BrowserRouter>
   );
 }
 
-const Home = (props) => {
-  const [user, setUser] = useState([]);
-
+function Home(props) {
+  const [user, setUser] = useState({});
   const [acceptedRequest, setAcceptedRequest] = useState([]);
 
-  // OverviewAdmin state 
+  // OverviewAdmin state
   const [employees, setEmployees] = useState([]);
 
   return (
     <div className="container">
       <div className="main-content">
-        {props.currentUser !== undefined && props.currentUser.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} currentUser={props.currentUser}/>
-        }
-        <Calendar setUser={setUser} user={user} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} currentUser={props.currentUser} setEmployees={setEmployees} setCurrentUser={props.setCurrentUser}/> 
+        )}
+        <Calendar setUser={setUser} user={user} acceptedRequest={acceptedRequest} setAcceptedRequest={setAcceptedRequest} currentUser={props.currentUser} setEmployees={setEmployees} setCurrentUser={props.setCurrentUser}/>
       </div>
-      {props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER'
-      ?
+      {props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER' ? (
         <OverviewAdmin employees={employees} setEmployees={setEmployees} />
-      :
-        <Overview currentUser={props.currentUser} employees={employees}  />
-      }
+      ) : (
+        <Overview currentUser={props.currentUser} employees={employees} />
+      )}
     </div>
-  )
-};
-
-export default App;
-
+  );
+}

client/src/Calendar.js

@@ -1 +1 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
-import FullCalendar from '@fullcalendar/react'
-import dayGridPlugin from '@fullcalendar/daygrid'
-import '@fullcalendar/core/main.css'
-import '@fullcalendar/daygrid/main.css'
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import '@fullcalendar/core/main.css';
+import '@fullcalendar/daygrid/main.css';
 import interactionPlugin from '@fullcalendar/interaction';
-import Popup from "reactjs-popup";
+import Popup from 'reactjs-popup';
 import moment from 'moment';
-import * as api_fetch from './api'
-
-
-function Calendar(props) {
-  
-  useEffect( () => {
-    if (props.currentUser !== undefined) {
-      props.currentUser.role === 'EMPLOYER'
-        ?
-          api_fetch.getAdminCalendar().then(adminCalendar => { 
-            props.setAcceptedRequest(adminCalendar);
-          }).catch(reason => {
-            alert(reason)
-          })
-        :
-          api_fetch.getUserCalendar(props.currentUser, convertedDate).then(userCalendar => {
-            props.setAcceptedRequest(userCalendar);
-          }).catch(reason => {
-            alert(reason)
-          });
-    }
-  }, [props.currentUser]);
-
-//states
-  const [isOpen, setOpen] = useState(false)
-
-  const [whatDate, setDate] = useState('')
+import * as api from './api';
 
-  const [whatTime, setWhatTime] = useState(7.5)
+const DEFAULT_MANDAY_HOURS = 7.5;
+const SICK_DAY_COUNT_INCREMENT = 1;
 
-  const [typeRadio, setType] = useState('sickday')
+export default function Calendar(props) {
 
-  var today = new Date();
-
-// setting date to right format
-  today = today.toISOString().split('T')[0]
-  const convertedDate = today.split("-").join("/")
+  useEffect(() => {
+    if (props.currentUser === undefined) {
+      return;
+    }
 
-// ********************* ADD EVENT - EMPLOYEE **************************
+    if (props.currentUser.role === 'EMPLOYER') {
+      api.getAdminCalendar().then(adminCalendar => {
+        props.setAcceptedRequest(adminCalendar);
+      }).catch(reason => {
+        alert(reason);
+      });
+    } else {
+      api.getUserCalendar(props.currentUser, convertedDate).then(userCalendar => {
+        props.setAcceptedRequest(userCalendar);
+      }).catch(reason => {
+        alert(reason);
+      });
+    }
+  }, [props.currentUser]);
 
-const addEvent = async (e) => {
-  e.preventDefault();
-  
-  try {
-  // setting an object
-  const newDate = whatDate.split("-").join("/");
+  //states
+  const [isOpen, setOpen] = useState(false);
+  const [whatDate, setDate] = useState('');
+  const [whatTime, setWhatTime] = useState(DEFAULT_MANDAY_HOURS);
+  const [typeRadio, setType] = useState('sickday');
 
-  const dataAddEventEmployee = {
-    type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION',
-    date: newDate,
-    from: typeRadio === 'sickday' ? null : "00:00",
-    to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, "hours").format("hh:mm"),
-  }
+  var today = new Date();
 
-  await api_fetch.addEventApi(dataAddEventEmployee);
-    if (typeRadio === 'holiday') {
-      props.setCurrentUser({
-        ...props.currentUser,
-        holiday: props.currentUser.holiday - whatTime
-      })
-    } else if (typeRadio === 'sickday') {
-      props.setCurrentUser({
-        ...props.currentUser,
-        takenSickday: props.currentUser.takenSickday + 1
-      })
+  // setting date to right format
+  today = today.toISOString().split('T')[0];
+  const convertedDate = today.split('-').join('/');
+
+  // ********************* ADD EVENT - EMPLOYEE **************************
+
+  async function addEvent(e) {
+    e.preventDefault();
+
+    try {
+      // setting an object
+      const newDate = whatDate.split('-').join('/');
+
+      const dataAddEventEmployee = {
+        type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION',
+        date: newDate,
+        from: typeRadio === 'sickday' ? null : '00:00',
+        to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, 'hours').format('hh:mm'),
+      };
+
+      await api.addEventApi(dataAddEventEmployee);
+
+      if (typeRadio === 'holiday') {
+        props.setCurrentUser({
+          ...props.currentUser,
+          holiday: props.currentUser.holiday - whatTime,
+        });
+      } else if (typeRadio === 'sickday') {
+        props.setCurrentUser({
+          ...props.currentUser,
+          takenSickday: props.currentUser.takenSickday + SICK_DAY_COUNT_INCREMENT,
+        });
+      }
+
+      setOpen(false);
+    } catch (e) {
+      alert(e);
     }
-    
-    setOpen(false)
-  } catch (e) {
-    alert(e)
   }
-}
-// ********************* ADD EVENT ADMIN - EMPLOYER **************************
 
-const addEventAdmin = async (e) => {
-  e.preventDefault();
+  // ********************* ADD EVENT ADMIN - EMPLOYER **************************
 
-// setting an object
-  const newDate = whatDate.split("-").join("/");
+  async function addEventAdmin(e) {
+    e.preventDefault();
 
-  const dataAddEventAdmin = {
-    type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION',
-    date: newDate,
-    from: typeRadio === 'sickday' ? null : "00:00",
-    to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, "hours").format("hh:mm"),
-  };
+    // setting an object
+    const newDate = whatDate.split('-').join('/');
 
-  api_fetch.addEventApiAdmin(dataAddEventAdmin).then(() => {
-    const userProps = {
-      title: props.currentUser.name, 
-      start: whatDate      
-  }
-  //concat new request to current ones
-      props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps))
-  }).catch(reason => {
-      alert(reason)
-  });
+    const dataAddEventAdmin = {
+      type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION',
+      date: newDate,
+      from: typeRadio === 'sickday' ? null : '00:00',
+      to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, 'hours').format('hh:mm'),
+    };
 
-  setOpen(false)
+    api.addEventApiAdmin(dataAddEventAdmin).then(() => {
+      const userProps = {
+        title: props.currentUser.name,
+        start: whatDate,
+      };
+      //concat new request to current ones
+      props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps));
+    }).catch(reason => {
+      alert(reason);
+    });
+
+    setOpen(false);
 
-  api_fetch.getUsersOverview().then(usersOverview => {
-    props.setEmployees(usersOverview);
+    api.getUsersOverview().then(usersOverview => {
+      props.setEmployees(usersOverview);
     }).catch(reason => {
-    alert(reason)
- });
-}
+      alert(reason);
+    });
+  }
 
-  const DEFAULT_MANDAY_HOURS = 7.5;
-  
-    
   return (
     <div className="calendar">
-
-    <FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin, interactionPlugin ]}
-
-    dateClick={function(info) {
-      setOpen(info.dateStr > today)
-      setDate(info.dateStr)
-      setWhatTime(DEFAULT_MANDAY_HOURS)
-    }}
-    events={[
-      ...props.acceptedRequest
-  ]}
-    />
-
-    <Popup 
-    open={isOpen}
-    position="right center" 
-    modal
-    closeOnDocumentClick
-    onClose={() => setOpen(false)}
-    >
-    <div className="calendar-form">
-      <form onSubmit={props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER' 
-      ? (e) => addEventAdmin(e)
-      : (e) => addEvent(e)
-      }>
-        <h2>Choose vacation type</h2>
-        <div className="calendar-radio">
-          <input checked={
-            typeRadio === 'sickday' ? 'checked' : null}
-            onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
-            type="radio" id="sickday" name="radiobutton" value="sickday"
-          />
-          <label for="sickday">Sickday</label>
-        </div>
-        <div className="calendar-radio">
-          <input checked={
-            typeRadio === 'holiday' ? 'checked' : null} 
-            onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')} 
-            type="radio" id="holiday" name="radiobutton" value="holiday"
-          />
-          <label for="holiday">Extra Holiday</label>
+      <FullCalendar
+        defaultView="dayGridMonth"
+        plugins={[dayGridPlugin, interactionPlugin]}
+        dateClick={function(info) {
+          setOpen(info.dateStr > today);
+          setDate(info.dateStr);
+          setWhatTime(DEFAULT_MANDAY_HOURS);
+        }}
+        events={[
+          ...props.acceptedRequest,
+        ]}/>
+
+      <Popup
+        open={isOpen}
+        position="right center"
+        modal
+        closeOnDocumentClick
+        onClose={() => setOpen(false)}
+      >
+        <div className="calendar-form">
+          <form onSubmit={props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER' ? (e) => addEventAdmin(e) : (e) => addEvent(e)}>
+            <h2>Choose vacation type</h2>
+            <div className="calendar-radio">
+              <input checked={typeRadio === 'sickday' ? 'checked' : null}
+                onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
+                type="radio" id="sickday" name="radiobutton" value="sickday"
+              />
+              <label htmlFor="sickday">Sickday</label>
+            </div>
+            <div className="calendar-radio">
+              <input checked={typeRadio === 'holiday' ? 'checked' : null}
+                onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
+                type="radio" id="holiday" name="radiobutton" value="holiday"
+              />
+              <label htmlFor="holiday">Extra Holiday</label>
+            </div>
+            <div>
+              {typeRadio === 'holiday' ? <h4>Date &amp; Hours</h4> : <h4>Date</h4>}
+              <div className="row calendarInputs">
+                <input
+                  className="date-input"
+                  type='date' onChange={(e) => setDate(e.target.value)}
+                  value={whatDate} min={today}
+                />
+                {typeRadio === 'holiday' ? (
+                  <input
+                    className="input-time"
+                    step={0.5}
+                    min={0.5}
+                    max={7.5}
+                    type="number"
+                    onChange={(e) => setWhatTime(e.target.value)}
+                    required
+                    value={whatTime}/>
+                ) : null}
+              </div>
+            </div>
+            <button className="btn btn-submit" type="submit">Request vacation</button>
+          </form>
         </div>
-        <div>
-          {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)} 
-              value={whatDate} min={today} 
-            />
-            {typeRadio === 'holiday' ? 
-            <input
-            className="input-time"
-            step={0.5}
-            min={0.5}
-            max={7.5}
-            type="number"
-            onChange={(e) => setWhatTime(e.target.value)}
-            required
-            value={whatTime}
-          /> : null}
-             </div> 
-          </div>
-        <button className="btn btn-submit" type="submit">Request vacation</button>
-      </form>
-    </div>
-    </Popup>
-
+      </Popup>
     </div>
   );
-  }
-
-
-export default Calendar;
+}

client/src/HttpStatus.js

@@ +1 @@
+export const CONTINUE = 100;
+export const SWITCHING_PROTOCOLS = 101;
+export const PROCESSING = 102;
+export const OK = 200;
+export const CREATED = 201;
+export const ACCEPTED = 202;
+export const NON_AUTHORITATIVE_INFORMATION = 203;
+export const NO_CONTENT = 204;
+export const RESET_CONTENT = 205;
+export const PARTIAL_CONTENT = 206;
+export const MULTI_STATUS = 207;
+export const MULTIPLE_CHOICES = 300;
+export const MOVED_PERMANENTLY = 301;
+export const MOVED_TEMPORARILY = 302;
+export const SEE_OTHER = 303;
+export const NOT_MODIFIED = 304;
+export const USE_PROXY = 305;
+export const TEMPORARY_REDIRECT = 307;
+export const PERMANENT_REDIRECT = 308;
+export const BAD_REQUEST = 400;
+export const UNAUTHORIZED = 401;
+export const PAYMENT_REQUIRED = 402;
+export const FORBIDDEN = 403;
+export const NOT_FOUND = 404;
+export const METHOD_NOT_ALLOWED = 405;
+export const NOT_ACCEPTABLE = 406;
+export const PROXY_AUTHENTICATION_REQUIRED = 407;
+export const REQUEST_TIMEOUT = 408;
+export const CONFLICT = 409;
+export const GONE = 410;
+export const LENGTH_REQUIRED = 411;
+export const PRECONDITION_FAILED = 412;
+export const REQUEST_TOO_LONG = 413;
+export const REQUEST_URI_TOO_LONG = 414;
+export const UNSUPPORTED_MEDIA_TYPE = 415;
+export const REQUESTED_RANGE_NOT_SATISFIABLE = 416;
+export const EXPECTATION_FAILED = 417;
+export const IM_A_TEAPOT = 418;
+export const INSUFFICIENT_SPACE_ON_RESOURCE = 419;
+export const METHOD_FAILURE = 420;
+export const UNPROCESSABLE_ENTITY = 422;
+export const LOCKED = 423;
+export const FAILED_DEPENDENCY = 424;
+export const PRECONDITION_REQUIRED = 428;
+export const TOO_MANY_REQUESTS = 429;
+export const REQUEST_HEADER_FIELDS_TOO_LARGE = 431;
+export const INTERNAL_SERVER_ERROR = 500;
+export const NOT_IMPLEMENTED = 501;
+export const BAD_GATEWAY = 502;
+export const SERVICE_UNAVAILABLE = 503;
+export const GATEWAY_TIMEOUT = 504;
+export const HTTP_VERSION_NOT_SUPPORTED = 505;
+export const INSUFFICIENT_STORAGE = 507;
+export const NETWORK_AUTHENTICATION_REQUIRED = 511;

client/src/LogOut.js

@@ -2 +2 @@
 import './App.css';
 
 function LogOut() {
-
   return (
     <div className="login-container logout column">
       <p>You have been successfully logged out!</p>
     </div>
-  )
+  );
 }
 
 export default LogOut;

client/src/Login.js

@@ -1 +1 @@
 import React from 'react';
 import './App.css';
 
-
-function Login() {
+export default function Login() {
   return (
-    <div className="login-container column">  
+    <div className="login-container column">
       <a href={window.config.baseUrl + '/login/google?target=' + window.config.redirectUrl}><p>log in</p></a>
     </div>
-  )
+  );
 }
-
-export default Login;

client/src/Nav.js

@@ -1 +1 @@
 import React from 'react';
 import './App.css';
 import { Link } from 'react-router-dom';
-import * as api_fetch from './api'
+import * as api from './api';
 
-function Nav(props) {
-  return (
-    props.currentUser === undefined
-  ?
+export default function Nav(props) {
+  if (props.currentUser === undefined) {
+    return (
       <nav className="top-nav">
         <Link className="link-nav" to="/login"><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>
-          <h2>{props.currentUser.name}</h2>
-            <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>
-                <button className="btn-logout" onClick={() => api_fetch.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>
-                </button>
-              </li>
-          </ul>
-        </div>
-      </nav>
-    )
-  }    
+    );
+  }
 
-
-export default Nav;
+  return (
+    <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>
+        <h2>{props.currentUser.name}</h2>
+        <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>
+            <button className="btn-logout" onClick={() => api.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>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+}

client/src/Overview.js

@@ -1 +1 @@
 import React from 'react';
 import './App.css';
 
+export default function OffsAvailable(props) {
 
-const OffsAvailable = (props) => {
+  if (props.currentUser === undefined) {
+    return null;
+  }
 
-   return props.currentUser === undefined ? null : (
-      <div>
-         <div className="side-content">
-            <div className="side-board column">
-               <div className="side-board-heading row">
-                  <h3>Overview</h3>
-               </div>
-            <div className="underline-1"></div>
-            <div className="side-board-items column">
-               <table border = "0">
-                  <tbody>
-                     <tr>
-                        <th className="th-left">Name</th>
-                        <th>Sick Days</th>
-                        <th>Holiday</th>
-                     </tr>                     
-                     <tr>
-                        <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>
+  return (
+    <div>
+      <div className="side-content">
+        <div className="side-board column">
+          <div className="side-board-heading row">
+            <h3>Overview</h3>
+          </div>
+          <div className="underline-1"></div>
+          <div className="side-board-items column">
+            <table border = "0">
+              <tbody>
+                <tr>
+                  <th className="th-left">Name</th>
+                  <th>Sick Days</th>
+                  <th>Holiday</th>
+                </tr>
+                <tr>
+                  <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>
+  );
 }
-
-
-export default OffsAvailable;

client/src/OverviewAdmin.js

@@ -1 +1 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
-import * as api_fetch from './api'
+import * as api from './api';
 
+export default function OverviewAdmin(props) {
 
-const OverviewAdmin = (props) => {
+  useEffect(() => {
+    api.getUsersOverview().then(usersOverview => {
+      props.setEmployees(usersOverview);
+    }).catch(reason => {
+      alert(reason);
+    });
+  }, []);
 
-   useEffect(() => {
-      api_fetch.getUsersOverview().then(usersOverview => {
-         props.setEmployees(usersOverview);
-         }).catch(reason => {
-         alert(reason)
-      });
-   }, []);
+  const [isEdit, setEdit] = useState(false);
+  const [editedUserId, setEditedUserId] = useState();
+  const [prevEdit, setPrevEdit] = useState();
 
-   const [isEdit, setEdit] = useState(false);
-   const [editedUserId, setEditedUserId] = useState();
-   const [prevEdit, setPrevEdit] = useState();
-   
+  // functions
+  function changeSickdays(newValue) {
+    const newEmployees = props.employees.map(employee => {
+      if (editedUserId === employee.id) {
+        return {
+          ...employee,
+          sickday: newValue,
+        };
+      } else {
+        return employee;
+      }
+    });
+    props.setEmployees(newEmployees);
+  }
+
+  function changeHoliday(newValue) {
+    const newEmployees = props.employees.map(employee => {
+      if (editedUserId === employee.id) {
+        return {
+          ...employee,
+          holiday: newValue,
+        };
+      } else {
+        return employee;
+      }
+    });
+    props.setEmployees(newEmployees);
+  }
 
-   // functions
-   function changeSickdays(newValue) {
-      const newEmployees = props.employees.map(employee => {
-         if (editedUserId === employee.id) {
-            return {
-               ...employee,
-               sickday: newValue,
-            };
-         } else {
-            return employee
-         }
-      })
-      props.setEmployees(newEmployees);
-   }
+  async function submitEdit(e) {
+    setEdit(isEdit === true ? false : true);
+    setPrevEdit(props.employees);
+    e.preventDefault();
 
-   function changeHoliday(newValue) {
-      const newEmployees = props.employees.map(employee => {
-         if (editedUserId === employee.id) {
-            return {
-               ...employee,
-               holiday: newValue,
-            };
-         } else {
-            return employee
-         }
-      })
-      props.setEmployees(newEmployees);
-   }
+    const found = props.employees.find(employee => editedUserId === employee.id);
+    const foundPrevEdit = prevEdit.find(employee => editedUserId === employee.id);
 
-   const submitEdit = async (e) => {
-      
-      setEdit(isEdit === true ? false : true);
-      setPrevEdit(props.employees);
-      e.preventDefault();
+    const dataOverviewObject = {
+      id: found.id,
+      vacationCount: Number(found.holiday) - foundPrevEdit.holiday,
+      sickDayCount: Number(found.sickday),
+      role: found.role,
+    };
 
-      const found = props.employees.find(employee => editedUserId === employee.id);
-      const foundPrevEdit = prevEdit.find(employee => editedUserId === employee.id);
+    api.saveDataOverview(dataOverviewObject).catch(reason => {
+      alert(reason);
+    });
+  }
 
-      const dataOverviewObject = {
-         id: found.id,
-         vacationCount: Number(found.holiday) - foundPrevEdit.holiday,
-         sickDayCount: Number(found.sickday),
-         role: found.role
-      }
+  function cancel() {
+    props.setEmployees(prevEdit);
+    setEdit(false);
+  }
 
-      api_fetch.saveDataOverview(dataOverviewObject).catch(reason => {
-         alert(reason)
-       });
-   }
+  // ***** overview button ******
 
-   const cancel = () => {
-      props.setEmployees(prevEdit)
-      setEdit(false)
-   }
+  function editEmployee(employeeId, e) {
+    setEdit(true);
+    setEditedUserId(employeeId);
+    setPrevEdit(props.employees);
 
-   // ***** overview button ******
+    e.preventDefault();
+  }
 
-   const editEmployee = (employeeId, e) => {
-      setEdit(true)
-      setEditedUserId(employeeId)
-      setPrevEdit(props.employees)
-      
-     e.preventDefault();
-   }
-   
-      return (
-   <div>
+  return (
+    <div>
       <div className="side-content">
-         <div className="side-board column">
-            <form className="column side-board-items" onSubmit={(e) => submitEdit(e)}>
+        <div className="side-board column">
+          <form className="column side-board-items" onSubmit={(e) => submitEdit(e)}>
             <div className="side-board-heading row">
-               <h3>Overview</h3>
+              <h3>Overview</h3>
             </div>
             <div className="underline-1"></div>
             <div className="side-board-items column">
-               <table className="side-board-table" border = "0">
-               <tbody>
-               <tr>
-                  <th className="th-left">Name</th>
-                  <th>Sick Days</th>
-                  <th>Holiday</th>
-                  <th></th>
-               </tr>
+              <table className="side-board-table" border = "0">
+                <tbody>
+                  <tr>
+                    <th className="th-left">Name</th>
+                    <th>Sick Days</th>
+                    <th>Holiday</th>
+                    <th></th>
+                  </tr>
                   {props.employees.map(employee => (
-               <tr>
-                  <td>{employee.name}</td>
-                  {/* SickDays Input */}
-                  <td className="td-center">
-                     {isEdit === true && editedUserId === employee.id ? (
-                        <input className="offsInput" type="number" min="0" value={employee.sickday} onChange={(e) => changeSickdays(e.target.value)}/>
-                     ) : (
-                        employee.takenSickday + '/' + employee.sickday
-                     )}
-                  </td>
-                  {/* Holiday Input */}
-                  <td className="td-center">
-                     {isEdit === true && editedUserId === employee.id ? (
-                       <input className="offsInput" type="number" min="0" value={employee.holiday} onChange={(e) => changeHoliday(e.target.value)}/>
-                     ) : (
-                        employee.holiday
-                     )}</td>
-                     <td>
-                  {/* Edit Button */}
-                  <button onClick={(e) => editEmployee(employee.id, e)} className="btn-edit">
-                     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
-                        <path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
-                     </svg>
-                  </button>
-                  {/* End of Edit Button */}
-                  </td>
-               </tr>
+                    <tr key={employee.id}>
+                      <td>{employee.name}</td>
+                      {/* SickDays Input */}
+                      <td className="td-center">
+                        {isEdit === true && editedUserId === employee.id ? (
+                          <input className="offsInput" type="number" min="0" value={employee.sickday} onChange={(e) => changeSickdays(e.target.value)}/>
+                        ) : (
+                          employee.takenSickday + '/' + employee.sickday
+                        )}
+                      </td>
+                      {/* Holiday Input */}
+                      <td className="td-center">
+                        {isEdit === true && editedUserId === employee.id ? (
+                          <input className="offsInput" type="number" min="0" value={employee.holiday} onChange={(e) => changeHoliday(e.target.value)}/>
+                        ) : (
+                          employee.holiday
+                        )}</td>
+                      <td>
+                        {/* Edit Button */}
+                        <button onClick={(e) => editEmployee(employee.id, e)} className="btn-edit">
+                          <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path fillRule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
+                            <path fillRule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
+                          </svg>
+                        </button>
+                        {/* End of Edit Button */}
+                      </td>
+                    </tr>
                   ))}
-               </tbody>
-            </table>
-            {/* Submit & Reject Button */}
-            <div className="column">
-            {isEdit === true ? <button  type="submit" className="btn btn-submit">
-            Save</button> : null}
-            {isEdit === true ? (
-            <button onClick={cancel} type="submit" className="btn btn-cancel">Cancel</button>
-               ) : (null)}
-            </div> 
-          </div>
-         </form>  
+                </tbody>
+              </table>
+              {/* Submit & Reject Button */}
+              <div className="column">
+                {isEdit === true ? (
+                  <button type="submit" className="btn btn-submit">Save</button>
+                ) : (
+                  <button onClick={cancel} type="submit" className="btn btn-cancel">Cancel</button>
+                )}
+              </div>
+            </div>
+          </form>
+        </div>
       </div>
-   </div>
-   </div>
-   );    
-   }
-
-
-export default OverviewAdmin;
+    </div>
+  );
+}

client/src/Setting.js

@@ -1 +1 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
 import { Link } from 'react-router-dom';
-import * as api_fetch from './api'
+import * as api from './api';
 
 
-function Setting() {
+export default function Setting() {
 
-  const [sickdays, setSickdays] = useState();
-
-  useEffect( () => {
-    api_fetch.getSettingData().then(settingData => {
+  useEffect(() => {
+    api.getSettingData().then(settingData => {
       setSetting(settingData);
     }).catch(reason => {
-      alert(reason)
-    })
+      alert(reason);
+    });
   }, []);
 
-  const submitSetting = async (e) => {
+  async function submitSetting(e) {
     e.preventDefault();
-    
+
     const dataSettingObject = {
-      "sickDayCount": Number(setting.sickday),
-      "notification": "2019/12/01 12:00:00"  
-    }
+      'sickDayCount': Number(setting.sickday),
+      'notification': '2019/12/01 12:00:00',
+    };
 
-    api_fetch.saveDataSetting(dataSettingObject).catch(reason => {
-      alert(reason)
-    })
+    api.saveDataSetting(dataSettingObject).catch(reason => {
+      alert(reason);
+    });
   }
+
   // states
-  const [setting, setSetting] = useState(
-    {sickday: 5,
-    holiday: 0
-    }
-  ) 
+  const [setting, setSetting] = useState({
+    sickday: 5,
+    holiday: 0,
+  });
 
   //functions
   function changeSickday(newValue) {
-    setSetting(
-       {sickday: newValue,
-        holiday: 0
-    })
+    setSetting({
+      sickday: newValue,
+      holiday: 0,
+    });
   }
 
   return (
@@ -60 +58 @@
     </div>
   );
 }
-
-export default Setting;

client/src/UpcomingRequests.js

@@ -1 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import './App.css';
 import moment from 'moment';
-import * as api_fetch from './api'
-import convertVacationType from './convertVacationType'
+import * as api from './api';
+import convertVacationType from './convertVacationType';
 
-function UpcomingRequests(props) {
+export default function UpcomingRequests(props) {
 
-  useEffect( () => {
+  useEffect(() => {
     getData();
-  }, []);
+  }, []); // eslint-disable-line
 
   // get requests from server
-  const getData = async () => {
-   
-    api_fetch.loadAdminRequests().then((data) => {
+  async function getData() {
+    api.loadAdminRequests().then((data) => {
       props.setUser(data.map(request => {
+        const convertedStartDate = request.date.split('/').join('-');
 
-        const convertedStartDate = request.date.split("/").join("-");
-  
-        return (
-          {
-            title: request.firstName + ' ' + request.lastName,
-            id: request.id,
-            type: convertVacationType(request.type),
-            start: moment(convertedStartDate).format("D.M.YYYY"),
-            end: null,
-            status: request.status.toLowerCase()
-        })
-      }))
+        return ({
+          title: request.firstName + ' ' + request.lastName,
+          id: request.id,
+          type: convertVacationType(request.type),
+          start: moment(convertedStartDate).format('D.M.YYYY'),
+          end: null,
+          status: request.status.toLowerCase(),
+        });
+      }));
     }).catch(reason => {
-      alert(reason)
+      alert(reason);
     });
-}
-
+  }
 
   // send accepted request to server
-  const acceptRequest = async (user) => {
+  async function acceptRequest(user) {
     try {
-
       const acceptedRequests = {
         id: user.id,
         status: 'ACCEPTED',
-      }
-    
-      await api_fetch.sendAcceptedRequest(acceptedRequests).then(() => {
-        
+      };
+
+      await api.sendAcceptedRequest(acceptedRequests).then(() => {
         const userProps = {
-              title: user.title,
-              type: user.type, 
-              start: user.start
-        }
+          title: user.title,
+          type: user.type,
+          start: user.start,
+        };
         //concat new request to current ones
-          props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps))
+        props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps));
         //request accept button
-          props.setUser((pendingRequest) => pendingRequest.filter((item) => item !== user));
-      })
+        props.setUser((pendingRequest) => pendingRequest.filter((item) => item !== user));
+      });
     } catch (e) {
-      alert(e)
+      alert(e);
     }
   }
 
-
   //send rejected request to server
-  const declineRequest = async (user) => {
-    try{
-
+  async function declineRequest(user) {
+    try {
       const rejectedRequest = {
         id: user.id,
         status: 'REJECTED',
-      }
+      };
+
+      await api.sendRejectedRequest(rejectedRequest);
 
-      await api_fetch.sendRejectedRequest(rejectedRequest);
-      
-      props.setUser((acceptedRequest) => acceptedRequest.filter((item) => item !== user))
+      props.setUser((acceptedRequest) => acceptedRequest.filter((item) => item !== user));
 
-      const usersOverview = await api_fetch.getUsersOverview();
+      const usersOverview = await api.getUsersOverview();
       props.setEmployees(usersOverview);
 
-  } catch (e) {
-    alert(e)
+    } catch (e) {
+      alert(e);
     }
   }
 
@@ -89 +81 @@
       <div className="offs-items column">
         <div className="offs-item row">
           <table>
-          {props.user.length > 0 ?
-            <tbody>
-              <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Date</th>    
-              </tr>
-              {props.user.map(user => (
-              <tr>
-                <td>{user.title}</td>
-                <td>{user.type}</td>    
-                <td>{user.end ? user.start + " - " + user.end : user.start}</td>
-                <div className="offs-btn row">
-                  <button onClick={() => acceptRequest(user)} type="submit" className="btn btn-submit">Accept</button>
-                  <button onClick={() => declineRequest(user)} type="submit" className="btn btn-cancel">Decline</button>     
-              </div>
-              </tr>
-              ))}
-            </tbody>
-            :
-            <tbody>
-              <p>There are no requests.</p>
-            </tbody>}   
-            </table>
+            {props.user.length > 0 ? (
+              <tbody>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Date</th>
+                </tr>
+                {props.user.map(user => (
+                  <tr key={user.id}>
+                    <td>{user.title}</td>
+                    <td>{user.type}</td>
+                    <td>{user.end ? user.start + ' - ' + user.end : user.start}</td>
+                    <div className="offs-btn row">
+                      <button onClick={() => acceptRequest(user)} type="submit" className="btn btn-submit">Accept</button>
+                      <button onClick={() => declineRequest(user)} type="submit" className="btn btn-cancel">Decline</button>
+                    </div>
+                  </tr>
+                ))}
+              </tbody>
+            ) : (
+              <tbody>
+                <p>There are no requests.</p>
+              </tbody>
+            )}
+          </table>
         </div>
       </div>
     </div>
-    )
-  }
-
-export default UpcomingRequests;
+  );
+}

client/src/YourRequests.js

@@ -1 +1 @@
 import React, { useEffect } from 'react';
 import './App.css';
 import moment from 'moment';
-import * as api_fetch from './api'
-import convertVacationType from './convertVacationType'
+import * as api from './api';
+import convertVacationType from './convertVacationType';
 
-function YourRequests(props) {
+export default function YourRequests(props) {
 
   useEffect( () => {
-    if (props.currentUser !== undefined) {
-      getData();
+    if (props.currentUser === undefined) {
+      return;
     }
-  }, [props.currentUser]);
 
-  // get requests from server
-  const getData = async () => {
-
-    api_fetch.loadYourRequests(props.currentUser).then((data) => {
+    getData();
+  }, [props.currentUser]); // eslint-disable-line
 
+  // get requests from server
+  async function getData() {
+    api.loadYourRequests(props.currentUser).then((data) => {
       props.setUser(data.map(request => {
-        const convertedDate = request.date.split("/").join("-");
+        const convertedDate = request.date.split('/').join('-');
 
-      return (
-        {
+        return ({
           title: props.currentUser.name,
           id: request.id,
-          start: moment(convertedDate).format("D.M.YYYY"),
-          status: request.status = request.status.toLowerCase(),
-          type: convertVacationType(request.type)
-        }
-      )
-    }))
+          start: moment(convertedDate).format('D.M.YYYY'),
+          status: request.status.toLowerCase(),
+          type: convertVacationType(request.type),
+        });
+      }));
     }).catch(reason => {
-      alert(reason)
+      alert(reason);
     });
-}
+  }
 
   return (
     <div className="offs-request column">
@@ -42 +40 @@
       <div className="offs-items column">
         <div className="offs-item row">
           <table>
-            {props.user.length > 0 ?
-            
-            <tbody>
-              <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Date</th>    
-                <th>Status</th>    
-              </tr>
-              {props.user.map(user => (
-                <tr key={user.id}>
-                <td>{user.title}</td>
-                <td>{user.type}</td>    
-                <td>{user.end ? user.start + " - " + user.end : user.start}</td>
-                <td>{user.status}</td>
-              </tr>
-              ))}
-            </tbody>
-            :
-            <tbody>
-              <div>No requests</div>
-            </tbody>}
+            {props.user.length > 0 ? (
+              <tbody>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Date</th>
+                  <th>Status</th>
+                </tr>
+                {props.user.map(user => (
+                  <tr key={user.id}>
+                    <td>{user.title}</td>
+                    <td>{user.type}</td>
+                    <td>{user.end ? user.start + ' - ' + user.end : user.start}</td>
+                    <td>{user.status}</td>
+                  </tr>
+                ))}
+              </tbody>
+            ) : (
+              <tbody>
+                <div>No requests</div>
+              </tbody>
+            )}
           </table>
         </div>
       </div>
     </div>
-  )
+  );
 }
-
-
-export default YourRequests;

client/src/api.js

@@ -1 @@
-// ******************** Log Out ********************
-
-export const logOut = async () => {
+import * as HttpStatus from './HttpStatus';
 
+/**
+ * Log Out
+ */
+export async function logOut() {
   let response;
 
   try {
-    response = await fetch(
-      `${window.config.baseUrl}/logout`, {
-        credentials: 'include'
-      }
-    );    
+    response = await fetch(`${window.config.baseUrl}/logout`, {
+      credentials: 'include',
+    });
   } catch (e) {
-    throw 'Server is not available'
-    }
+    throw new Error('Server is not available');
+  }
 
   if (response.ok) {
-        window.location.replace(`/logout`)
+    window.location.replace('/logout');
   } else {
-      switch (response.status) {
-        case 500:
-          throw new Error('Internal server error.')
-        default:
-          throw new Error(response.statusText)
-      }
+    switch (response.status) {
+      case HttpStatus.INTERNAL_SERVER_ERROR:
+        throw new Error('Internal server error.');
+      default:
+        throw new Error(response.statusText);
     }
+  }
 }
 
-// ******************** GET DATA APP getCurrentProfile ********************
-
-export const getCurrentProfile = async () => {
-
+/**
+ * GET DATA APP getCurrentProfile
+ */
+export async function getCurrentProfile() {
   let response;
 
   try {
-    response = await fetch(
-      `${window.config.baseUrl}/users/current/profile`, {
-
-        credentials: 'include'
-      }
-    );    
+    response = await fetch(`${window.config.baseUrl}/users/current/profile`, {
+      credentials: 'include',
+    });
   } catch (e) {
-    throw 'Server is not available'
-    }
+    throw new Error('Server is not available');
+  }
 
   if (response.ok) {
     const data = await response.json();
@@ -53 +50 @@
       holiday: data.vacationCount,
       sickday: data.sickDayCount,
       photo: data.photo,
-      takenSickday: data.takenSickDayCount
-    }