Custom icons for bookmarks

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v1.6.1 (2021-07-28)
+- Added option to upload custom icons for bookmarks ([#52](https://github.com/pawelmalak/flame/issues/52))
+- Fixed custom icons not updating ([#58](https://github.com/pawelmalak/flame/issues/58))
+
 ### v1.6 (2021-07-17)
 - Added support for Steam URLs ([#62](https://github.com/pawelmalak/flame/issues/62))
 - Fixed bug with custom CSS not persisting ([#64](https://github.com/pawelmalak/flame/issues/64))

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.6.0
+REACT_APP_VERSION=1.6.1

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) {
@@ -80,13 +102,21 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
           return;
         }
 
+        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,7 +274,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 })}
               </select>
             </InputGroup>
-            <InputGroup>
+            {!useCustomIcon
+              // mdi
+              ? (<InputGroup>
                 <label htmlFor='icon'>Bookmark Icon (optional)</label>
                 <input
                   type='text'
@@ -234,7 +294,29 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                     {' '}Click here for reference
                   </a>
                 </span>
-            </InputGroup>
+                <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>
         )
       }

client/src/store/actions/bookmark.ts

@@ -69,15 +69,15 @@ export interface AddBookmarkAction {
   payload: Bookmark
 }
 
-export const addBookmark = (formData: NewBookmark) => async (dispatch: Dispatch) => {
+export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.post<ApiResponse<Bookmark>>('/api/bookmarks', formData);
-
+    console.log(res.data.data)
     dispatch<CreateNotificationAction>({
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `Bookmark ${formData.name} created`
+        message: `Bookmark created`
       }
     })
 
@@ -225,7 +225,14 @@ export interface UpdateBookmarkAction {
   payload: Bookmark
 }
 
-export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previousCategoryId: number) => async (dispatch: Dispatch) => {
+export const updateBookmark = (
+  bookmarkId: number,
+  formData: NewBookmark | FormData,
+  category: {
+    prev: number,
+    curr: number
+  }
+) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.put<ApiResponse<Bookmark>>(`/api/bookmarks/${bookmarkId}`, formData);
     
@@ -233,12 +240,12 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `Bookmark ${formData.name} updated`
+        message: `Bookmark updated`
       }
     })
 
     // Check if category was changed
-    const categoryWasChanged = formData.categoryId !== previousCategoryId;
+    const categoryWasChanged = category.curr !== category.prev;
 
     if (categoryWasChanged) {
       // Delete bookmark from old category
@@ -246,7 +253,7 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
         type: ActionTypes.deleteBookmark,
         payload: {
           bookmarkId,
-          categoryId: previousCategoryId
+          categoryId: category.prev
         }
       })
 
@@ -256,7 +263,7 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
         payload: res.data.data
       })
     } else {
-      // Else update only name/url
+      // Else update only name/url/icon
       dispatch<UpdateBookmarkAction>({
         type: ActionTypes.updateBookmark,
         payload: res.data.data

controllers/bookmark.js

@@ -7,7 +7,18 @@ const { Sequelize } = require('sequelize');
 // @route     POST /api/bookmarks
 // @access    Public
 exports.createBookmark = asyncWrapper(async (req, res, next) => {
-  const bookmark = await Bookmark.create(req.body);
+  let bookmark;
+
+  let _body = {
+    ...req.body,
+    categoryId: parseInt(req.body.categoryId)
+  };
+
+  if (req.file) {
+    _body.icon = req.file.filename;
+  }
+
+  bookmark = await Bookmark.create(_body);
 
   res.status(201).json({
     success: true,
@@ -59,7 +70,16 @@ exports.updateBookmark = asyncWrapper(async (req, res, next) => {
     return next(new ErrorResponse(`Bookmark with id of ${req.params.id} was not found`, 404));
   }
 
-  bookmark = await bookmark.update({ ...req.body });
+  let _body = {
+    ...req.body,
+    categoryId: parseInt(req.body.categoryId)
+  };
+
+  if (req.file) {
+    _body.icon = req.file.filename;
+  }
+
+  bookmark = await bookmark.update(_body);
 
   res.status(200).json({
     success: true,

routes/bookmark.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const router = express.Router();
+const upload = require('../middleware/multer');
 
 const {
   createBookmark,
@@ -11,13 +12,13 @@ const {
 
 router
   .route('/')
-  .post(createBookmark)
+  .post(upload, createBookmark)
   .get(getBookmarks);
 
 router
   .route('/:id')
   .get(getBookmark)
-  .put(updateBookmark)
+  .put(upload, updateBookmark)
   .delete(deleteBookmark);
 
 module.exports = router;