Update bookmark. Changes to CSS. Changes to WeatherJob

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -17,7 +17,7 @@ interface ComponentProps {
   addCategory: (formData: NewCategory) => void;
   addBookmark: (formData: NewBookmark) => void;
   updateCategory: (id: number, formData: NewCategory) => void;
-  updateBookmark: (id: number, formData: NewBookmark) => void;
+  updateBookmark: (id: number, formData: NewBookmark, categoryWasChanged: boolean) => void;
   createNotification: (notification: NewNotification) => void;
 }
 
@@ -90,7 +90,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         setCategoryName({ name: '' });
       } else if (props.contentType === ContentType.bookmark && props.bookmark) {
         // Update bookmark
-        props.updateBookmark(props.bookmark.id, formData);
+        props.updateBookmark(props.bookmark.id, formData, props.bookmark.categoryId !== formData.categoryId);
         setFormData({
           name: '',
           url: '',

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -1,9 +1,11 @@
-import { useState, ChangeEvent, Fragment, useEffect, FormEvent } from 'react';
+import { useState, ChangeEvent, useEffect, FormEvent } from 'react';
+import { connect } from 'react-redux';
 import axios from 'axios';
-import { ApiResponse, Config } from '../../../interfaces';
+import { ApiResponse, Config, NewNotification } from '../../../interfaces';
 
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
+import { createNotification } from '../../../store/actions';
 
 interface FormState {
   WEATHER_API_KEY: string;
@@ -12,7 +14,11 @@ interface FormState {
   isCelsius: number;
 }
 
-const WeatherSettings = (): JSX.Element => {
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const WeatherSettings = (props: ComponentProps): JSX.Element => {
   const [formData, setFormData] = useState<FormState>({
     WEATHER_API_KEY: '',
     lat: 0,
@@ -59,7 +65,12 @@ const WeatherSettings = (): JSX.Element => {
     e.preventDefault();
 
     axios.put<ApiResponse<{}>>('/api/config', formData)
-      .then(data => console.log(data.data.success))
+      .then(data => {
+        props.createNotification({
+          title: 'Success',
+          message: 'Settings updated'
+        })
+      })
       .catch(err => console.log(err));
   }
 
@@ -131,4 +142,4 @@ const WeatherSettings = (): JSX.Element => {
   )
 }
 
-export default WeatherSettings;
+export default connect(null, { createNotification })(WeatherSettings);

client/src/components/UI/Layout/Layout.module.css

@@ -1,8 +1,16 @@
 .Container {
   width: 100%;
   padding: 20px;
+  margin: 0 auto;
 }
 
+/* .Container {
+  width: 60%;
+  margin: 0 auto;
+  padding: 20px;
+  padding-top: 20px;
+} */
+
 /* 320px — 480px: Mobile devices.
 481px — 768px: iPads, Tablets.
 769px — 1024px: Small screens, laptops.
@@ -11,7 +19,8 @@
 
 @media (min-width: 769px) {
   .Container {
-    padding: 25px 40px;
+    /* padding: 25px 40px; */
+    width: 90%;
   }
 }
 

client/src/components/Widgets/WeatherWidget/WeatherWidget.module.css

@@ -1,5 +1,6 @@
 .WeatherWidget {
   display: flex;
+  visibility: hidden;
 }
 
 .WeatherDetails {
@@ -19,4 +20,10 @@
 
 .WeatherDetails span:last-child {
   padding-top: 5px;
+}
+
+@media (min-width: 600px) {
+  .WeatherWidget {
+    visibility: visible;
+  }
 }

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

@@ -14,38 +14,65 @@ const WeatherWidget = (): JSX.Element => {
     isDay: 1,
     conditionText: '',
     conditionCode: 1000,
-    id: 0,
+    id: -1,
     createdAt: new Date(),
     updatedAt: new Date()
   });
   const [isLoading, setIsLoading] = useState(true);
 
+  // Initial request to get data
   useEffect(() => {
     axios.get<ApiResponse<Weather[]>>('/api/weather')
       .then(data => {
-        setWeather(data.data.data[0]);
+        const weatherData = data.data.data[0];
+        if (weatherData) {
+          setWeather(weatherData);
+        }
         setIsLoading(false);
       })
       .catch(err => console.log(err));
   }, []);
 
+  // Open socket for data updates
+  useEffect(() => {
+    const webSocketClient = new WebSocket('ws://localhost:5005');
+
+    webSocketClient.onopen = () => {
+      console.log('WebSocket opened');
+    }
+
+    webSocketClient.onclose = () => {
+      console.log('WebSocket closed')
+    }
+
+    webSocketClient.onmessage = (e) => {
+      const data = JSON.parse(e.data);
+      setWeather({
+        ...weather,
+        ...data
+      })
+    }
+
+    return () => webSocketClient.close();
+  }, []);
+
   return (
     <div className={classes.WeatherWidget}>
       {isLoading
         ? 'loading'
-        : (
-          <Fragment>
-            <div className={classes.WeatherIcon}>
-              <WeatherIcon
-                weatherStatusCode={weather.conditionCode}
-                isDay={weather.isDay}
-              />
-            </div>
-            <div className={classes.WeatherDetails}>
-              <span>{weather.tempC}°C</span>
-              <span>{weather.conditionCode}</span>
-            </div>
-          </Fragment>
+        : (weather.id > 0 && 
+            (<Fragment>
+              <div className={classes.WeatherIcon}>
+                <WeatherIcon
+                  weatherStatusCode={weather.conditionCode}
+                  isDay={weather.isDay}
+                />
+              </div>
+              <div className={classes.WeatherDetails}>
+                <span>{weather.tempC}°C</span>
+                <span>{weather.conditionCode}</span>
+              </div>
+            </Fragment>)
         )
       }
     </div>