Fixed bug with overwriting opened tabs. Added proxy for websocket

client/src/components/Apps/AppCard/AppCard.tsx

@@ -17,7 +17,7 @@ const AppCard = (props: ComponentProps): JSX.Element => {
   }
 
   return (
-    <a href={`http://${props.app.url}`} target='blank' className={classes.AppCard}>
+    <a href={`http://${props.app.url}`} target='_blank' className={classes.AppCard}>
       <div className={classes.AppCardIcon}>
         <Icon icon={iconParser(props.app.icon)} />
       </div>

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -16,7 +16,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
         {props.category.bookmarks.map((bookmark: Bookmark) => (
           <a
             href={`http://${bookmark.url}`}
-            target='blank'
+            target='_blank'
             key={`bookmark-${bookmark.id}`}>
             {bookmark.icon && (
               <div className={classes.BookmarkIcon}>

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -12,8 +12,8 @@ interface ComponentProps {
 
 const WeatherIcon = (props: ComponentProps): JSX.Element => {
   const icon = props.isDay
-    ? (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day)
-    : (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.night);
+    ? new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.day)
+    : new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.night);
 
   useEffect(() => {
     const delay = setTimeout(() => {
@@ -25,7 +25,7 @@ const WeatherIcon = (props: ComponentProps): JSX.Element => {
     return () => {
       clearTimeout(delay);
     }
-  }, [props.weatherStatusCode]);
+  }, [props.weatherStatusCode, icon, props.theme.colors.accent]);
 
   return <canvas id={`weather-icon`} width='50' height='50'></canvas>
 }

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

@@ -50,7 +50,11 @@ const WeatherWidget = (): JSX.Element => {
 
   // Open socket for data updates
   useEffect(() => {
-    const webSocketClient = new WebSocket('ws://localhost:5005');
+    const webSocketClient = new WebSocket(`ws://${window.location.host}/socket`);
+
+    webSocketClient.onopen = () => {
+      console.log('Socket: listen')
+    }
 
     webSocketClient.onmessage = (e) => {
       const data = JSON.parse(e.data);

client/src/setupProxy.js

@@ -0,0 +1,15 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  const apiProxy = createProxyMiddleware('/api', {
+    target: 'http://localhost:5005'
+  })
+
+  const wsProxy = createProxyMiddleware('/socket', {
+    target: 'http://localhost:5005',
+    ws: true
+  })
+
+  app.use(apiProxy);
+  app.use(wsProxy);
+};

client/src/store/actions/app.ts

@@ -23,10 +23,7 @@ export const getApps = () => async (dispatch: Dispatch) => {
       payload: res.data.data
     })
   } catch (err) {
-    dispatch<GetAppsAction<string>>({
-      type: ActionTypes.getAppsError,
-      payload: err.data.data
-    })
+    console.log(err);
   }
 }