Fixed bug where user could create empty app or bookmark which was causing page to go blank

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))

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(
+  const { addApp, updateApp, setEditApp, createNotification } =
-    actionCreators,
+    bindActionCreators(actionCreators, dispatch);
-    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();
 

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) {

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

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() }
       );