From 28683e7511f60142e93c1866ab4a12a2a5050643 Mon Sep 17 00:00:00 2001
From: unknown <pawel999@icloud.com>
Date: Fri, 21 May 2021 18:55:21 +0200
Subject: [PATCH] Some changes on how application list is being rendered. Added
 isDay property on WeatherIcon to render icon accordingly to time of day.
 Modal can now be closed by clicking on backdrop

---
 client/src/App.tsx                                   |  2 +-
 client/src/components/Apps/Apps.module.css           |  9 +++++++++
 client/src/components/Apps/Apps.tsx                  | 12 ++++++++----
 .../components/UI/Icons/WeatherIcon/WeatherIcon.tsx  |  5 ++++-
 client/src/components/UI/Modal/Modal.tsx             | 12 +++++++++++-
 .../Widgets/WeatherWidget/WeatherWidget.tsx          |  5 ++++-
 6 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 723fc540eec86898e64b2711dd30c9b2195934d9..c304321a2b4c9cfad810cfae12c1b2733048afb4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -22,7 +22,7 @@ const App = (): JSX.Element => {
         <Switch>
           <Route exact path='/' component={Home} />
           <Route path='/settings' component={Settings} />
-          <Route path='/apps' component={Apps} />
+          <Route path='/applications' component={Apps} />
         </Switch>
       </BrowserRouter>
     </Provider>
diff --git a/client/src/components/Apps/Apps.module.css b/client/src/components/Apps/Apps.module.css
index 09810e1f23677e9476943773be24b3d621d48ad3..4b6d917cc98e14438f2abc00c257e0a3f2c630a9 100644
--- a/client/src/components/Apps/Apps.module.css
+++ b/client/src/components/Apps/Apps.module.css
@@ -1,4 +1,13 @@
 .ActionsContainer {
   display: flex;
   align-items: center;
+}
+
+.AppsMessage {
+  color: var(--color-primary);
+}
+
+.AppsMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
 }
\ No newline at end of file
diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx
index afe429067ef44448a58387c4ec6994432731b1b3..4921497bb4512fbf238882595135326f1b780733 100644
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@@ -36,7 +36,9 @@ const Apps = (props: ComponentProps): JSX.Element => {
   const [isInEdit, setIsInEdit] = useState(false);
 
   useEffect(() => {
-    props.getApps();
+    if (props.apps.length === 0) {
+      props.getApps();
+    }
   }, [props.getApps]);
 
   const toggleModal = (): void => {
@@ -49,12 +51,12 @@ const Apps = (props: ComponentProps): JSX.Element => {
 
   return (
     <Container>
-      <Modal isOpen={modalIsOpen}>
+      <Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
         <AppForm modalHandler={toggleModal} />
       </Modal>
 
       <Headline
-        title='All Apps'
+        title='All Applications'
         subtitle={(<Link to='/'>Go back</Link>)}
       />
       
@@ -75,7 +77,9 @@ const Apps = (props: ComponentProps): JSX.Element => {
         {props.loading
           ? <Spinner />
           : (!isInEdit
-              ? <AppGrid apps={props.apps} />
+              ? props.apps.length > 0
+                ? <AppGrid apps={props.apps} />
+                : <p className={classes.AppsMessage}>You don't have any applications. You can a new one from <Link to='/applications'>/application</Link> menu</p>
               : <AppTable />)
         }
       </div>
diff --git a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx
index 6e25363dc968b89dc4e9869c82162d7efa2ddb33..a72c6b2aa0f83ce20dca30052f978635926167d7 100644
--- a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx
+++ b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx
@@ -7,10 +7,13 @@ import { IconMapping, TimeOfDay } from './IconMapping';
 interface ComponentProps {
   theme: Theme;
   weatherStatusCode: number;
+  isDay: number;
 }
 
 const WeatherIcon = (props: ComponentProps): JSX.Element => {
-  const icon = (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day);
+  const icon = props.isDay
+    ? (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day)
+    : (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.night);
 
   useEffect(() => {
     const delay = setTimeout(() => {
diff --git a/client/src/components/UI/Modal/Modal.tsx b/client/src/components/UI/Modal/Modal.tsx
index 5f458eef8758c017199c3fab922217d14827e7af..b8b86ebd49009dbc43c073a64a77f35f590bcdbb 100644
--- a/client/src/components/UI/Modal/Modal.tsx
+++ b/client/src/components/UI/Modal/Modal.tsx
@@ -1,15 +1,25 @@
+import { MouseEvent, useRef, useEffect } from 'react';
+
 import classes from './Modal.module.css';
 
 interface ComponentProps {
   isOpen: boolean;
+  setIsOpen: Function;
   children: JSX.Element;
 }
 
 const Modal = (props: ComponentProps): JSX.Element => {
+  const modalRef = useRef(null);
   const modalClasses = [classes.Modal, props.isOpen ? classes.ModalOpen : classes.ModalClose].join(' ');
 
+  const clickHandler = (e: MouseEvent) => {
+    if (e.target === modalRef.current) {
+      props.setIsOpen(false);
+    }
+  }
+
   return (
-    <div className={modalClasses}>
+    <div className={modalClasses} onClick={clickHandler} ref={modalRef}>
       {props.children}
     </div>
   )
diff --git a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
index c3cf36b125520060de6514f21a27e858b0a1fb42..67fa7fe1d5e1273d38078e0f0d01d4814656fcad 100644
--- a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
+++ b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
@@ -36,7 +36,10 @@ const WeatherWidget = (): JSX.Element => {
         : (
           <Fragment>
             <div className={classes.WeatherIcon}>
-              <WeatherIcon weatherStatusCode={weather.conditionCode} />
+              <WeatherIcon
+                weatherStatusCode={weather.conditionCode}
+                isDay={weather.isDay}
+              />
             </div>
             <div className={classes.WeatherDetails}>
               <span>{weather.tempC}°C</span>