Add custom icons to bookmarks (#5)

* allow custom icons for bookmarks

* update docker-image action to tag images based on source branch

.github/workflows/docker-image.yml

@@ -20,10 +20,10 @@ jobs:
         run: |
           DOCKER_IMAGE=ghcr.io/${{ github.repository }}
           VERSION=latest
-          if [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/v}
+          if [[ '${{ github.head_ref }}' != 'master' ]]; then
+            VERSION=${{github.head_ref}}
           fi
-          TAGS="${DOCKER_IMAGE}:latest,${DOCKER_IMAGE}:${{ steps.date.outputs.date }}"
+          TAGS="${DOCKER_IMAGE}:${VERSION},${DOCKER_IMAGE}:${{ steps.date.outputs.date }}"
           echo ::set-output name=tags::${TAGS}
           
       - name: Set up QEMU

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

@@ -30,7 +30,7 @@ interface ComponentProps {
 }
 
 const AppForm = (props: ComponentProps): JSX.Element => {
-  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
+  const [useCustomIcon, setUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [categoryData, setCategoryData] = useState<NewCategory>({
     name: '',
@@ -77,13 +77,12 @@ const AppForm = (props: ComponentProps): JSX.Element => {
 
     const createFormData = (): FormData => {
       const data = new FormData();
-
+      Object.entries(appData).forEach((entry: [string, any]) => {
+        data.append(entry[0], entry[1]);
+      });
       if (customIcon) {
         data.append('icon', customIcon);
       }
-      data.append('name', appData.name);
-      data.append('url', appData.url);
-      data.append('categoryId', appData.categoryId.toString());
 
       return data;
     };
@@ -151,6 +150,11 @@ const AppForm = (props: ComponentProps): JSX.Element => {
     })
   }
   
+  const toggleUseCustomIcon = (): void => {
+    setUseCustomIcon(!useCustomIcon);
+    setCustomIcon(null);
+  };
+
   const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     if (e.target.files) {
       setCustomIcon(e.target.files[0]);
@@ -272,7 +276,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
                     </a>
                   </span>
                   <span
-                    onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+                    onClick={() => toggleUseCustomIcon()}
                     className={classes.Switch}>
                     Switch to custom icon upload
                   </span>
@@ -286,10 +290,10 @@ const AppForm = (props: ComponentProps): JSX.Element => {
                     id='icon'
                     required
                     onChange={(e) => fileChangeHandler(e)}
-                    accept=".jpg,.jpeg,.png,.svg"
+                    accept='.jpg,.jpeg,.png,.svg'
                   />
                   <span
-                    onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+                    onClick={() => toggleUseCustomIcon()}
                     className={classes.Switch}>
                     Switch to MDI
                   </span>

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

@@ -7,7 +7,7 @@ import classes from './BookmarkCard.module.css';
 
 interface ComponentProps {
   category: Category;
-  bookmarks: Bookmark[]
+  bookmarks: Bookmark[];
   pinHandler?: Function;
 }
 

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

@@ -28,10 +28,8 @@ interface ComponentProps {
   updateBookmark: (
     id: number,
     formData: NewBookmark | FormData,
-    category: {
-      prev: number,
-      curr: number
-    }) => void;
+    previousCategoryId: number
+  ) => void;
   createNotification: (notification: NewNotification) => void;
 }
 
@@ -39,13 +37,13 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const [useCustomIcon, setUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [categoryData, setCategoryData] = useState<NewCategory>({
-    name: '',
-    type: 'bookmarks'
-  })
+    name: "",
+    type: "bookmarks",
+  });
 
   const [bookmarkData, setBookmarkData] = useState<NewBookmark>({
-    name: '',
-    url: '',
+    name: "",
+    url: "",
     categoryId: -1,
     icon: '',
   });
@@ -55,7 +53,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     if (props.category) {
       setCategoryData({ name: props.category.name, type: props.category.type });
     } else {
-      setCategoryData({ name: '', type: "bookmarks" });
+      setCategoryData({ name: "", type: "bookmarks" });
     }
   }, [props.category]);
 
@@ -70,8 +68,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       });
     } else {
       setBookmarkData({
-        name: '',
-        url: '',
+        name: "",
+        url: "",
         categoryId: -1,
         icon: '',
       });
@@ -86,9 +84,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       if (customIcon) {
         data.append('icon', customIcon);
       }
-      data.append('name', bookmarkData.name);
-      data.append('url', bookmarkData.url);
-      data.append('categoryId', `${bookmarkData.categoryId}`);
+      Object.entries(bookmarkData).forEach((entry: [string, any]) => {
+        data.append(entry[0], entry[1]);
+      });
 
       return data;
     };
@@ -98,7 +96,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       if (props.contentType === ContentType.category) {
         // Add category
         props.addBookmarkCategory(categoryData);
-        setCategoryData({ name: '', type: 'bookmarks' });
+        setCategoryData({ name: "", type: "bookmarks" });
       } else if (props.contentType === ContentType.bookmark) {
         // Add bookmark
         if (bookmarkData.categoryId === -1) {
@@ -117,8 +115,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
         }
 
         setBookmarkData({
-          name: '',
-          url: '',
+          name: "",
+          url: "",
           categoryId: bookmarkData.categoryId,
           icon: ''
         });
@@ -130,33 +128,18 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       if (props.contentType === ContentType.category && props.category) {
         // Update category
         props.updateBookmarkCategory(props.category.id, categoryData);
-        setCategoryData({ name: '', type: 'bookmarks' });
+        setCategoryData({ name: "", type: "bookmarks" });
       } else if (props.contentType === ContentType.bookmark && props.bookmark) {
         // Update bookmark
-        if (customIcon) {
-          const data = createFormData();
         props.updateBookmark(
           props.bookmark.id,
-            data,
-            {
-              prev: props.bookmark.categoryId,
-              curr: bookmarkData.categoryId
-            }
-          )
-        } else {
-          props.updateBookmark(
-            props.bookmark.id,
-            bookmarkData,
-            {
-              prev: props.bookmark.categoryId,
-              curr: bookmarkData.categoryId
-            }
+          createFormData(),
+          props.bookmark.categoryId
         );
-        }
         
         setBookmarkData({
-          name: '',
-          url: '',
+          name: "",
+          url: "",
           categoryId: -1,
           icon: '',
         });

client/src/components/Bookmarks/Bookmarks.tsx

@@ -50,10 +50,10 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     updatedAt: new Date(),
   });
   const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
-    name: "",
-    url: "",
+    name: "string",
+    url: "string",
     categoryId: -1,
-    icon: "",
+    icon: "string",
     isPinned: false,
     orderId: 0,
     id: 0,
@@ -113,10 +113,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
         {!isInUpdate ? (
-          <BookmarkForm
-            modalHandler={toggleModal}
-            contentType={formContentType}
-          />
+          <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
         ) : formContentType === ContentType.category ? (
           <BookmarkForm
             modalHandler={toggleModal}

client/src/store/actions/app.ts

@@ -138,7 +138,8 @@ export interface AddAppAction {
   payload: App;
 }
 
-export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
+export const addApp =
+  (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
     try {
       const res = await axios.post<ApiResponse<App>>("/api/apps", formData);
 
@@ -160,7 +161,7 @@ export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch
     } catch (err) {
       console.log(err);
     }
-};
+  };
 
 /**
  * PIN CATEGORY

client/src/store/actions/bookmark.ts

@@ -136,7 +136,8 @@ export const pinBookmark =
 
 /**
  * ADD BOOKMARK
- */ export interface AddBookmarkAction {
+ */
+export interface AddBookmarkAction {
   type: ActionTypes.addBookmarkSuccess;
   payload: Bookmark;
 }
@@ -442,7 +443,7 @@ export interface ReorderBookmarkCategoriesAction {
   payload: Category[];
 }
 
-interface ReorderReorderCategoriesQueryuery {
+interface ReorderCategoriesQuery {
   categories: {
     id: number;
     orderId: number;
@@ -452,7 +453,7 @@ interface ReorderReorderCategoriesQueryuery {
 export const reorderBookmarkCategories =
   (categories: Category[]) => async (dispatch: Dispatch) => {
     try {
-      const updateQuery: ReorderReorderCategoriesQueryuery = { categories: [] };
+      const updateQuery: ReorderCategoriesQuery = { categories: [] };
 
       categories.forEach((category, index) =>
         updateQuery.categories.push({

routes/bookmark.js

@@ -22,7 +22,7 @@ router
   .put(upload, updateBookmark)
   .delete(deleteBookmark);
 
-  router
+router
   .route('/0/reorder')
   .put(reorderBookmarks);