Add validation to background field

client/src/components/Background/Background.jsx

@@ -4,6 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { ProjectBackgroundTypes } from '../../constants/Enums';
+
 import styles from './Background.module.scss';
 import globalStyles from '../../styles.module.scss';
 
@@ -11,7 +13,8 @@ const Background = ({ type, name, imageUrl }) => (
   <div
     className={classNames(
       styles.wrapper,
-      type === 'gradient' && globalStyles[`background${upperFirst(camelCase(name))}`],
+      type === ProjectBackgroundTypes.GRADIENT &&
+        globalStyles[`background${upperFirst(camelCase(name))}`],
     )}
     style={{
       background: type === 'image' && `url("${imageUrl}") center / cover`,

client/src/components/Project/ActionsPopup/ActionsPopup.jsx

@@ -54,17 +54,10 @@ const ActionsStep = React.memo(
     );
 
     const handleBackgroundImageDelete = useCallback(() => {
-      const data = {
+      onUpdate({
         backgroundImage: null,
-      };
-
-      // TODO: move to services?
-      if (project.background && project.background.type === 'image') {
-        data.background = null;
-      }
-
-      onUpdate(data);
-    }, [project.background, onUpdate]);
+      });
+    }, [onUpdate]);
 
     if (step) {
       if (step) {

client/src/components/Project/ActionsPopup/EditBackgroundStep.jsx

@@ -9,6 +9,7 @@ import { Button, Image } from 'semantic-ui-react';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
 import ProjectBackgroundGradients from '../../../constants/ProjectBackgroundGradients';
+import { ProjectBackgroundTypes } from '../../../constants/Enums';
 
 import styles from './EditBackgroundStep.module.scss';
 import globalStyles from '../../../styles.module.scss';
@@ -30,15 +31,12 @@ const EditBackgroundStep = React.memo(
     const handleGradientClick = useCallback(
       (_, { value }) => {
         const background = {
-          type: 'gradient',
+          type: ProjectBackgroundTypes.GRADIENT,
           name: value,
         };
 
         if (!dequal(background, defaultValue)) {
-          onUpdate({
-            type: 'gradient',
-            name: value,
-          });
+          onUpdate(background);
         }
       },
       [defaultValue, onUpdate],
@@ -46,7 +44,7 @@ const EditBackgroundStep = React.memo(
 
     const handleImageClick = useCallback(() => {
       const background = {
-        type: 'image',
+        type: ProjectBackgroundTypes.IMAGE,
       };
 
       if (!dequal(background, defaultValue)) {
@@ -93,7 +91,7 @@ const EditBackgroundStep = React.memo(
                 className={classNames(
                   styles.gradientButton,
                   defaultValue &&
-                    defaultValue.type === 'gradient' &&
+                    defaultValue.type === ProjectBackgroundTypes.GRADIENT &&
                     gradient === defaultValue.name &&
                     styles.gradientButtonActive,
                   globalStyles[`background${upperFirst(camelCase(gradient))}`],

client/src/components/Project/ActionsPopup/EditBackgroundStep.module.scss

@@ -66,6 +66,10 @@
   .image {
     cursor: pointer;
     margin-bottom: 8px;
+
+    &:hover {
+      opacity: 0.9;
+    }
   }
 
   .imageLabel {

client/src/components/Projects/Projects.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import { Container, Grid } from 'semantic-ui-react';
 
 import Paths from '../../constants/Paths';
+import { ProjectBackgroundTypes } from '../../constants/Enums';
 import { ReactComponent as PlusIcon } from '../../assets/images/plus-icon.svg';
 
 import styles from './Projects.module.scss';
@@ -33,7 +34,7 @@ const Projects = React.memo(({ items, isEditable, onAdd }) => {
                   styles.card,
                   styles.open,
                   item.background &&
-                    item.background.type === 'gradient' &&
+                    item.background.type === ProjectBackgroundTypes.GRADIENT &&
                     globalStyles[`background${upperFirst(camelCase(item.background.name))}`],
                 )}
                 style={{

client/src/constants/Enums.js

@@ -1,4 +1,8 @@
-// eslint-disable-next-line import/prefer-default-export
+export const ProjectBackgroundTypes = {
+  GRADIENT: 'gradient',
+  IMAGE: 'image',
+};
+
 export const ActionTypes = {
   CREATE_CARD: 'createCard',
   MOVE_CARD: 'moveCard',

client/src/models/Project.js

@@ -1,6 +1,7 @@
 import { Model, attr, many } from 'redux-orm';
 
 import ActionTypes from '../constants/ActionTypes';
+import { ProjectBackgroundTypes } from '../constants/Enums';
 
 export default class extends Model {
   static modelName = 'Project';
@@ -28,10 +29,20 @@ export default class extends Model {
         });
 
         break;
-      case ActionTypes.PROJECT_UPDATE:
-        Project.withId(payload.id).update(payload.data);
+      case ActionTypes.PROJECT_UPDATE: {
+        const project = Project.withId(payload.id);
+        project.update(payload.data);
+
+        if (
+          payload.data.backgroundImage === null &&
+          project.background &&
+          project.background.type === ProjectBackgroundTypes.IMAGE
+        ) {
+          project.background = null;
+        }
 
         break;
+      }
       case ActionTypes.PROJECT_DELETE:
         Project.withId(payload.id).deleteWithRelated();