Add project backgrounds

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

@@ -0,0 +1,142 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { withPopup } from '../../../lib/popup';
+import { Popup } from '../../../lib/custom-ui';
+
+import { useSteps } from '../../../hooks';
+import EditNameStep from './EditNameStep';
+import EditBackgroundStep from './EditBackgroundStep';
+import DeleteStep from '../../DeleteStep';
+
+import styles from './ActionsPopup.module.css';
+
+const StepTypes = {
+  EDIT_NAME: 'EDIT_NAME',
+  EDIT_BACKGROUND: 'EDIT_BACKGROUND',
+  DELETE: 'DELETE',
+};
+
+const ActionsStep = React.memo(
+  ({ project, onUpdate, onBackgroundImageUpdate, onDelete, onClose }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
+
+    const handleEditNameClick = useCallback(() => {
+      openStep(StepTypes.EDIT_NAME);
+    }, [openStep]);
+
+    const handleEditBackgroundClick = useCallback(() => {
+      openStep(StepTypes.EDIT_BACKGROUND);
+    }, [openStep]);
+
+    const handleDeleteClick = useCallback(() => {
+      openStep(StepTypes.DELETE);
+    }, [openStep]);
+
+    const handleNameUpdate = useCallback(
+      (newName) => {
+        onUpdate({
+          name: newName,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleBackgroundUpdate = useCallback(
+      (newBackground) => {
+        onUpdate({
+          background: newBackground,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleBackgroundImageDelete = useCallback(() => {
+      onUpdate({
+        background: null,
+        backgroundImage: null,
+      });
+    }, [onUpdate]);
+
+    if (step) {
+      if (step) {
+        switch (step.type) {
+          case StepTypes.EDIT_NAME:
+            return (
+              <EditNameStep
+                defaultValue={project.name}
+                onUpdate={handleNameUpdate}
+                onBack={handleBack}
+                onClose={onClose}
+              />
+            );
+          case StepTypes.EDIT_BACKGROUND:
+            return (
+              <EditBackgroundStep
+                defaultValue={project.background}
+                isImageUpdating={project.isBackgroundImageUpdating}
+                onUpdate={handleBackgroundUpdate}
+                onImageUpdate={onBackgroundImageUpdate}
+                onImageDelete={handleBackgroundImageDelete}
+                onBack={handleBack}
+              />
+            );
+          case StepTypes.DELETE:
+            return (
+              <DeleteStep
+                title={t('common.deleteProject', {
+                  context: 'title',
+                })}
+                content={t('common.areYouSureYouWantToDeleteThisProject')}
+                buttonContent={t('action.deleteProject')}
+                onConfirm={onDelete}
+                onBack={handleBack}
+              />
+            );
+          default:
+        }
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>
+          {t('common.projectActions', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              {t('action.editTitle', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEditBackgroundClick}>
+              {t('action.editBackground', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              {t('action.deleteProject', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+ActionsStep.propTypes = {
+  project: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUpdate: PropTypes.func.isRequired,
+  onBackgroundImageUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(ActionsStep);

client/src/components/Project/ActionsPopup/ActionsPopup.module.css

@@ -0,0 +1,9 @@
+.menu {
+  margin: -7px -12px -5px !important;
+  width: calc(100% + 24px) !important;
+}
+
+.menuItem {
+  margin: 0 !important;
+  padding-left: 14px !important;
+}

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

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
+
+import styles from './EditBackgroundStep.module.css';
+
+const EditBackgroundStep = React.memo(
+  ({ defaultValue, isImageUpdating, onImageUpdate, onImageDelete, onBack }) => {
+    const [t] = useTranslation();
+
+    const field = useRef(null);
+
+    const handleFileSelect = useCallback(
+      (file) => {
+        onImageUpdate({
+          file,
+        });
+      },
+      [onImageUpdate],
+    );
+
+    useEffect(() => {
+      field.current.focus();
+    }, []);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t('common.editBackground', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <div className={styles.action}>
+            <FilePicker accept="image/*" onSelect={handleFileSelect}>
+              <Button
+                ref={field}
+                content={t('action.uploadNewBackground')}
+                loading={isImageUpdating}
+                disabled={isImageUpdating}
+                className={styles.actionButton}
+              />
+            </FilePicker>
+          </div>
+          {defaultValue && (
+            <Button
+              negative
+              content={t('action.deleteBackground')}
+              disabled={isImageUpdating}
+              onClick={onImageDelete}
+            />
+          )}
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+EditBackgroundStep.propTypes = {
+  defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  isImageUpdating: PropTypes.bool.isRequired,
+  // onUpdate: PropTypes.func.isRequired,
+  onImageUpdate: PropTypes.func.isRequired,
+  onImageDelete: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+EditBackgroundStep.defaultProps = {
+  defaultValue: undefined,
+};
+
+export default EditBackgroundStep;

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

@@ -0,0 +1,25 @@
+.action {
+  border: none;
+  display: inline-block;
+  height: 36px;
+  overflow: hidden;
+  position: relative;
+  transition: background 0.3s ease;
+  width: 100%;
+}
+
+.action:hover {
+  background: #e9e9e9 !important;
+}
+
+.actionButton {
+  background: transparent !important;
+  color: #6b808c !important;
+  font-weight: normal !important;
+  height: 36px;
+  line-height: 24px !important;
+  padding: 6px 12px !important;
+  text-align: left !important;
+  text-decoration: underline !important;
+  width: 100%;
+}

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import { useField } from '../../../hooks';
+
+import styles from './EditNameStep.module.css';
+
+const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
+  const [t] = useTranslation();
+  const [value, handleFieldChange] = useField(defaultValue);
+
+  const field = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanValue = value.trim();
+
+    if (!cleanValue) {
+      field.current.select();
+      return;
+    }
+
+    if (cleanValue !== defaultValue) {
+      onUpdate(cleanValue);
+    }
+
+    onClose();
+  }, [defaultValue, onUpdate, onClose, value]);
+
+  useEffect(() => {
+    field.current.select();
+  }, []);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editTitle', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.title')}</div>
+          <Input
+            fluid
+            ref={field}
+            value={value}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <Button positive content={t('action.save')} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+EditNameStep.propTypes = {
+  defaultValue: PropTypes.string.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default EditNameStep;

client/src/components/Project/ActionsPopup/EditNameStep.module.css

@@ -0,0 +1,10 @@
+.field {
+  margin-bottom: 8px;
+}
+
+.text {
+  color: #444444;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 6px;
+}

client/src/components/Project/ActionsPopup/index.js

@@ -0,0 +1,3 @@
+import ActionsPopup from './ActionsPopup';
+
+export default ActionsPopup;