Merge pull request #21 from pawelmalak/feature

Release v1.2
pawelmalak · Jun 10, 2021 · 91ab1c5 · 91ab1c5
2 parents 43e110d + 78de875
commit 91ab1c5
Show file tree

Hide file tree

Showing 27 changed files with 289 additions and 152 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -2,9 +2,9 @@ FROM node:14-alpine
 
 WORKDIR /app
 
-COPY package*.json .
+COPY package*.json ./
 
-RUN npm install --only=production
+RUN npm install --production
 
 COPY . .
 

diff --git a/Socket.js b/Socket.js
@@ -5,11 +5,11 @@ class Socket {
     this.webSocketServer = new WebSocket.Server({ server })
 
     this.webSocketServer.on('listening', () => {
-      console.log('socket listen');
+      console.log('Socket: listen');
     })
 
     this.webSocketServer.on('connection', (webSocketClient) => {
-      console.log('new connection');
+      console.log('Socket: new connection');
     })
   }
 

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,6 +15,7 @@
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
+    "http-proxy-middleware": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
@@ -50,6 +51,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://localhost:5005"
+  }
 }
diff --git a/client/src/components/Apps/AppCard/AppCard.module.css b/client/src/components/Apps/AppCard/AppCard.module.css
@@ -27,4 +27,16 @@
   font-weight: 400;
   font-size: 0.8em;
   opacity: 1;
+}
+
+@media (min-width: 500px) {
+  .AppCard {
+    padding: 2px;
+    border-radius: 4px;
+    transition: all 0.10s;
+  }
+
+  .AppCard:hover {
+    background-color: rgba(0,0,0,0.2);
+  }
 }
diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx
@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom';
 
 import classes from './AppCard.module.css';
 import Icon from '../../UI/Icons/Icon/Icon';
+import { iconParser } from '../../../utility/iconParser';
 
 import { App } from '../../../interfaces';
 
@@ -11,22 +12,12 @@ interface ComponentProps {
 }
 
 const AppCard = (props: ComponentProps): JSX.Element => {
-  const iconParser = (mdiName: string): string => {
-    let parsedName = mdiName
-      .split('-')
-      .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`)
-      .join('');
-    parsedName = `mdi${parsedName}`;
-
-    return parsedName;
-  }
-
   const redirectHandler = (url: string): void => {
     window.open(url);
   }
 
   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>

diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
@@ -18,9 +18,18 @@
 .Bookmarks a {
   line-height: 2;
   transition: all 0.25s;
+  display: flex;
 }
 
 .BookmarkCard a:hover {
   text-decoration: underline;
   padding-left: 10px;
+}
+
+.BookmarkIcon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  margin-top: 3px;
+  margin-right: 2px;
 }
diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
@@ -1,6 +1,9 @@
 import { Bookmark, Category } from '../../../interfaces';
 import classes from './BookmarkCard.module.css';
 
+import Icon from '../../UI/Icons/Icon/Icon';
+import { iconParser } from '../../../utility/iconParser';
+
 interface ComponentProps {
   category: Category;
 }
@@ -13,8 +16,13 @@ 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}>
+                <Icon icon={iconParser(bookmark.icon)} />
+              </div>
+            )}
             {bookmark.name}
           </a>
         ))}

diff --git a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
@@ -29,9 +29,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const [formData, setFormData] = useState<NewBookmark>({
     name: '',
     url: '',
-    categoryId: -1
+    categoryId: -1,
+    icon: ''
   })
 
+  // Load category data if provided for editing
   useEffect(() => {
     if (props.category) {
       setCategoryName({ name: props.category.name });
@@ -40,18 +42,21 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     }
   }, [props.category])
 
+  // Load bookmark data if provided for editing
   useEffect(() => {
     if (props.bookmark) {
       setFormData({
         name: props.bookmark.name,
         url: props.bookmark.url,
-        categoryId: props.bookmark.categoryId
+        categoryId: props.bookmark.categoryId,
+        icon: props.bookmark.icon
       })
     } else {
       setFormData({
         name: '',
         url: '',
-        categoryId: -1
+        categoryId: -1,
+        icon: ''
       })
     }
   }, [props.bookmark])
@@ -79,7 +84,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         setFormData({
           name: '',
           url: '',
-          categoryId: formData.categoryId
+          categoryId: formData.categoryId,
+          icon: ''
         })
       }
     } else {
@@ -94,7 +100,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         setFormData({
           name: '',
           url: '',
-          categoryId: -1
+          categoryId: -1,
+          icon: ''
         })
       }
 
@@ -201,6 +208,25 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 })}
               </select>
             </InputGroup>
+            <InputGroup>
+              <label htmlFor='icon'>Bookmark Icon (optional)</label>
+              <input
+                type='text'
+                name='icon'
+                id='icon'
+                placeholder='book-open-outline'
+                value={formData.icon}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+              <span>
+                Use icon name from MDI. 
+                <a
+                  href='https://materialdesignicons.com/'
+                  target='blank'>
+                  {' '}Click here for reference
+                </a>
+              </span>
+            </InputGroup>
           </Fragment>
         )
       }

diff --git a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
@@ -96,6 +96,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
       <Table headers={[
         'Name',
         'URL',
+        'Icon',
         'Category',
         'Actions'
       ]}>
@@ -104,6 +105,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
             <tr key={bookmark.bookmark.id}>
               <td>{bookmark.bookmark.name}</td>
               <td>{bookmark.bookmark.url}</td>
+              <td>{bookmark.bookmark.icon}</td>
               <td>{bookmark.categoryName}</td>
               <td className={classes.TableActions}>
                 <div

diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx
@@ -45,6 +45,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     name: '',
     url: '',
     categoryId: -1,
+    icon: '',
     id: -1,
     createdAt: new Date(),
     updatedAt: new Date()