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 723fc54..c304321 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 09810e1..4b6d917 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 afe4290..4921497 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 6e25363..a72c6b2 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 5f458ee..b8b86eb 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 c3cf36b..67fa7fe 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>