Custom icons for bookmarks

client/src/components/Apps/AppForm/AppForm.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, ChangeEvent, SyntheticEvent } from 'react';
+import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
 import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
 import { App, NewApp } from '../../../interfaces';
@@ -25,14 +25,6 @@ const AppForm = (props: ComponentProps): JSX.Element => {
     icon: ''
   });
 
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef])
-
   useEffect(() => {
     if (props.app) {
       setFormData({
@@ -98,6 +90,8 @@ const AppForm = (props: ComponentProps): JSX.Element => {
       url: '',
       icon: ''
     })
+
+    setCustomIcon(null);
   }
 
   return (
@@ -115,7 +109,6 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           required
           value={formData.name}
           onChange={(e) => inputChangeHandler(e)}
-          ref={inputRef}
         />
       </InputGroup>
       <InputGroup>

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

@@ -24,7 +24,14 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
               key={`bookmark-${bookmark.id}`}>
               {bookmark.icon && (
                 <div className={classes.BookmarkIcon}>
-                  <Icon icon={iconParser(bookmark.icon)} />
+                  {(/.(jpeg|jpg|png)$/i).test(bookmark.icon)
+                    ? <img
+                        src={`/uploads/${bookmark.icon}`}
+                        alt={`${bookmark.name} icon`}
+                        className={classes.CustomIcon}
+                      />
+                    : <Icon icon={iconParser(bookmark.icon)} />
+                  }
                 </div>
               )}
               {bookmark.name}

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.module.css

@@ -0,0 +1,7 @@
+.Switch {
+  text-decoration: underline;
+}
+
+.Switch:hover {
+  cursor: pointer;
+}

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

@@ -7,6 +7,7 @@ import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotificat
 import { ContentType } from '../Bookmarks';
 import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
 import Button from '../../UI/Buttons/Button/Button';
+import classes from './BookmarkForm.module.css';
 
 interface ComponentProps {
   modalHandler: () => void;
@@ -15,13 +16,22 @@ interface ComponentProps {
   category?: Category;
   bookmark?: Bookmark;
   addCategory: (formData: NewCategory) => void;
-  addBookmark: (formData: NewBookmark) => void;
+  addBookmark: (formData: NewBookmark | FormData) => void;
   updateCategory: (id: number, formData: NewCategory) => void;
-  updateBookmark: (id: number, formData: NewBookmark, previousCategoryId: number) => void;
+  updateBookmark: (
+    id: number,
+    formData: NewBookmark | FormData,
+    category: {
+      prev: number,
+      curr: number
+    }
+  ) => void;
   createNotification: (notification: NewNotification) => void;
 }
 
 const BookmarkForm = (props: ComponentProps): JSX.Element => {
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
+  const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [categoryName, setCategoryName] = useState<NewCategory>({
     name: ''
   })
@@ -64,6 +74,18 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
+    const createFormData = (): FormData => {
+      const data = new FormData();
+      if (customIcon) {
+        data.append('icon', customIcon);
+      }
+      data.append('name', formData.name);
+      data.append('url', formData.url);
+      data.append('categoryId', `${formData.categoryId}`);
+
+      return data;
+    }
+
     if (!props.category && !props.bookmark) {
       // Add new
       if (props.contentType === ContentType.category) {
@@ -79,14 +101,22 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           })
           return;
         }
-  
-        props.addBookmark(formData);
+
+        if (customIcon) {
+          const data = createFormData();
+          props.addBookmark(data);
+        } else {
+          props.addBookmark(formData);
+        }
+        
         setFormData({
           name: '',
           url: '',
           categoryId: formData.categoryId,
           icon: ''
         })
+
+        setCustomIcon(null)
       }
     } else {
       // Update
@@ -96,13 +126,35 @@ 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.bookmark.categoryId);
+        if (customIcon) {
+          const data = createFormData();
+          props.updateBookmark(
+            props.bookmark.id,
+            data,
+            {
+              prev: props.bookmark.categoryId,
+              curr: formData.categoryId
+            }
+          )
+        } else {
+          props.updateBookmark(
+            props.bookmark.id,
+            formData,
+            {
+              prev: props.bookmark.categoryId,
+              curr: formData.categoryId
+            }
+          );
+        }
+
         setFormData({
           name: '',
           url: '',
           categoryId: -1,
           icon: ''
         })
+
+        setCustomIcon(null)
       }
 
       props.modalHandler();
@@ -123,6 +175,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     })
   }
 
+  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) {
+      setCustomIcon(e.target.files[0]);
+    }
+  }
+
   let button = <Button>Submit</Button>
 
   if (!props.category && !props.bookmark) {
@@ -216,25 +274,49 @@ 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>
+            {!useCustomIcon
+              // mdi
+              ? (<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>
+                <span
+                  onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+                  className={classes.Switch}>
+                  Switch to custom icon upload
+                </span>
+              </InputGroup>)
+              // custom
+              : (<InputGroup>
+                <label htmlFor='icon'>Bookmark Icon (optional)</label>
+                <input
+                  type='file'
+                  name='icon'
+                  id='icon'
+                  onChange={(e) => fileChangeHandler(e)}
+                  accept='.jpg,.jpeg,.png'
+                />
+                <span
+                  onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+                  className={classes.Switch}>
+                  Switch to MDI
+                </span>
+              </InputGroup>)
+            }
           </Fragment>
         )
       }