From 0b3eb2e87fd46bf456487d8278be8df7342f0766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Fri, 25 Mar 2022 13:16:57 +0100
Subject: [PATCH] Fixed bug where user could create empty app or bookmark which
 was causing page to go blank

---
 CHANGELOG.md                                    |  1 +
 client/src/components/Apps/AppForm/AppForm.tsx  | 17 +++++++++++++----
 .../components/Bookmarks/Form/BookmarksForm.tsx | 11 +++++++++++
 .../Themer/ThemeBuilder/ThemeCreator.tsx        |  2 +-
 client/src/store/action-creators/theme.ts       |  5 +++--
 5 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f991071..0b67f87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### v2.3.0 (TBA)
 - Added custom theme editor ([#246](https://github.com/pawelmalak/flame/issues/246))
+- Fixed bug where user could create empty app or bookmark which was causing page to go blank ([#332](https://github.com/pawelmalak/flame/issues/332))
 
 ### v2.2.2 (2022-03-21)
 - Added option to get user location directly from the app ([#287](https://github.com/pawelmalak/flame/issues/287))
diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx
index a751ad6..a154e0a 100644
--- a/client/src/components/Apps/AppForm/AppForm.tsx
+++ b/client/src/components/Apps/AppForm/AppForm.tsx
@@ -18,10 +18,8 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
   const { appInUpdate } = useSelector((state: State) => state.apps);
 
   const dispatch = useDispatch();
-  const { addApp, updateApp, setEditApp } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
+  const { addApp, updateApp, setEditApp, createNotification } =
+    bindActionCreators(actionCreators, dispatch);
 
   const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
@@ -58,6 +56,17 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
+    for (let field of ['name', 'url', 'icon'] as const) {
+      if (/^ +$/.test(formData[field])) {
+        createNotification({
+          title: 'Error',
+          message: `Field cannot be empty: ${field}`,
+        });
+
+        return;
+      }
+    }
+
     const createFormData = (): FormData => {
       const data = new FormData();
 
diff --git a/client/src/components/Bookmarks/Form/BookmarksForm.tsx b/client/src/components/Bookmarks/Form/BookmarksForm.tsx
index 893b334..9c1b728 100644
--- a/client/src/components/Bookmarks/Form/BookmarksForm.tsx
+++ b/client/src/components/Bookmarks/Form/BookmarksForm.tsx
@@ -69,6 +69,17 @@ export const BookmarksForm = ({
   const formSubmitHandler = (e: FormEvent): void => {
     e.preventDefault();
 
+    for (let field of ['name', 'url', 'icon'] as const) {
+      if (/^ +$/.test(formData[field])) {
+        createNotification({
+          title: 'Error',
+          message: `Field cannot be empty: ${field}`,
+        });
+
+        return;
+      }
+    }
+
     const createFormData = (): FormData => {
       const data = new FormData();
       if (customIcon) {
diff --git a/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx b/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
index bbad529..056d3dc 100644
--- a/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
+++ b/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
@@ -74,7 +74,7 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     if (!themeInEdit) {
       addTheme(formData);
     } else {
-      updateTheme(formData);
+      updateTheme(formData, themeInEdit.name);
     }
 
     // close modal
diff --git a/client/src/store/action-creators/theme.ts b/client/src/store/action-creators/theme.ts
index 881b777..e0199b2 100644
--- a/client/src/store/action-creators/theme.ts
+++ b/client/src/store/action-creators/theme.ts
@@ -109,10 +109,11 @@ export const editTheme =
   };
 
 export const updateTheme =
-  (theme: Theme) => async (dispatch: Dispatch<UpdateThemeAction>) => {
+  (theme: Theme, originalName: string) =>
+  async (dispatch: Dispatch<UpdateThemeAction>) => {
     try {
       const res = await axios.put<ApiResponse<Theme[]>>(
-        `/api/themes/${theme.name}`,
+        `/api/themes/${originalName}`,
         theme,
         { headers: applyAuth() }
       );