From 26b5109bca65b6fcbcab030bfa8e138f6a5560e3 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Sun, 19 Jul 2020 12:56:00 -0400
Subject: [PATCH] css fixes to array / blocks, file handling improvements

---
 .../forms/DraggableSection/index.scss         | 13 ++++++----
 .../forms/field-types/Array/index.scss        |  7 +++--
 .../forms/field-types/Blocks/index.scss       |  9 +++++++
 .../forms/field-types/Upload/index.js         |  9 +++++--
 src/collections/operations/create.js          | 26 +++++++++----------
 src/collections/operations/delete.js          | 12 ++++++---
 src/collections/sanitize.js                   |  2 +-
 7 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss
index dab5355476..625bbcd0de 100644
--- a/src/client/components/forms/DraggableSection/index.scss
+++ b/src/client/components/forms/DraggableSection/index.scss
@@ -4,7 +4,7 @@
 // HELPER MIXINS
 //////////////////////
 
-@mixin realtively-position-panels {
+@mixin relatively-position-panels {
   .position-panel {
     position: relative;
     right: 0;
@@ -117,7 +117,7 @@
   }
 
   @include mid-break {
-    @include realtively-position-panels();
+    @include relatively-position-panels();
 
     .position-panel__move-forward,
     .position-panel__move-backward {
@@ -135,12 +135,15 @@
   @include absolutely-position-panels();
 
   @include mid-break {
-    @include realtively-position-panels();
+    @include relatively-position-panels();
   }
 }
 
-.field-type.array .field-type.array {
-  @include realtively-position-panels();
+.field-type.blocks .field-type.array,
+.field-type.array .field-type.array,
+.field-type.array .field-type.blocks,
+.field-type.blocks .field-type.blocks {
+  @include relatively-position-panels();
 }
 
 // remove padding above array rows to level
diff --git a/src/client/components/forms/field-types/Array/index.scss b/src/client/components/forms/field-types/Array/index.scss
index f5c4eceb5e..59a82bc0f7 100644
--- a/src/client/components/forms/field-types/Array/index.scss
+++ b/src/client/components/forms/field-types/Array/index.scss
@@ -25,13 +25,16 @@
       width: 100%;
     }
   }
+}
 
+.field-type.array,
+.field-type.blocks {
   .field-type.array {
-    .field-type.repeater__add-button-wrap {
+    .field-type.array__add-button-wrap {
       margin-left: base(2.65);
     }
 
-    .field-type.repeater__header  {
+    .field-type.array__header  {
       display: none;
     }
   }
diff --git a/src/client/components/forms/field-types/Blocks/index.scss b/src/client/components/forms/field-types/Blocks/index.scss
index b1f94c9fac..daff6276de 100644
--- a/src/client/components/forms/field-types/Blocks/index.scss
+++ b/src/client/components/forms/field-types/Blocks/index.scss
@@ -24,3 +24,12 @@
     }
   }
 }
+
+.field-type.array,
+.field-type.blocks {
+  .field-type.blocks {
+    .field-type.blocks__add-button-wrap {
+      margin-left: base(2.65);
+    }
+  }
+}
diff --git a/src/client/components/forms/field-types/Upload/index.js b/src/client/components/forms/field-types/Upload/index.js
index 304489c6f7..ddaf401129 100644
--- a/src/client/components/forms/field-types/Upload/index.js
+++ b/src/client/components/forms/field-types/Upload/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useModal } from '@faceless-ui/modal';
 import config from '../../../../config';
@@ -47,12 +47,17 @@ const Upload = (props) => {
 
   const dataToInitialize = (typeof initialData === 'object' && initialData.id) ? initialData.id : initialData;
 
+  const memoizedValidate = useCallback((value) => {
+    const validationResult = validate(value, { required });
+    return validationResult;
+  }, [validate, required]);
+
   const fieldType = useFieldType({
     path,
     required,
     initialData: dataToInitialize,
     defaultValue,
-    validate,
+    validate: memoizedValidate,
   });
 
   const {
diff --git a/src/collections/operations/create.js b/src/collections/operations/create.js
index 8c5ef6f72c..71c68431da 100644
--- a/src/collections/operations/create.js
+++ b/src/collections/operations/create.js
@@ -46,18 +46,7 @@ const create = async (args) => {
   }, Promise.resolve());
 
   // /////////////////////////////////////
-  // 3. Execute field-level access, hooks, and validation
-  // /////////////////////////////////////
-
-  data = await performFieldOperations(config, collectionConfig, {
-    data,
-    hook: 'beforeCreate',
-    operationName: 'create',
-    req,
-  });
-
-  // /////////////////////////////////////
-  // 4. Upload and resize any files that may be present
+  // 3. Upload and resize any files that may be present
   // /////////////////////////////////////
 
   if (collectionConfig.upload) {
@@ -69,7 +58,7 @@ const create = async (args) => {
       throw new MissingFile();
     }
 
-    await mkdirp(staticDir);
+    mkdirp.sync(staticDir);
 
     const fsSafeName = await getSafeFilename(staticDir, req.files.file.name);
 
@@ -95,6 +84,17 @@ const create = async (args) => {
     };
   }
 
+  // /////////////////////////////////////
+  // 4. Execute field-level access, hooks, and validation
+  // /////////////////////////////////////
+
+  data = await performFieldOperations(config, collectionConfig, {
+    data,
+    hook: 'beforeCreate',
+    operationName: 'create',
+    req,
+  });
+
   // /////////////////////////////////////
   // 5. Perform database operation
   // /////////////////////////////////////
diff --git a/src/collections/operations/delete.js b/src/collections/operations/delete.js
index 7d762d19a3..386f0692a0 100644
--- a/src/collections/operations/delete.js
+++ b/src/collections/operations/delete.js
@@ -60,14 +60,18 @@ const deleteQuery = async (args) => {
   if (collectionConfig.upload) {
     const { staticDir } = collectionConfig.upload;
 
-    fs.unlink(`${staticDir}/${resultToDelete.filename}`, () => {
-      throw new ErrorDeletingFile();
+    fs.unlink(`${staticDir}/${resultToDelete.filename}`, (err) => {
+      if (err) {
+        throw new ErrorDeletingFile();
+      }
     });
 
     if (resultToDelete.sizes) {
       Object.values(resultToDelete.sizes).forEach((size) => {
-        fs.unlink(`${staticDir}/${size.filename}`, () => {
-          throw new ErrorDeletingFile();
+        fs.unlink(`${staticDir}/${size.filename}`, (err) => {
+          if (err) {
+            throw new ErrorDeletingFile();
+          }
         });
       });
     }
diff --git a/src/collections/sanitize.js b/src/collections/sanitize.js
index 6d2f36bc8f..a99b72e71b 100644
--- a/src/collections/sanitize.js
+++ b/src/collections/sanitize.js
@@ -89,7 +89,7 @@ const sanitizeCollection = (collections, collection) => {
 
   if (sanitized.upload) {
     if (!sanitized.upload.staticDir) sanitized.upload.staticDir = sanitized.slug;
-    if (!sanitized.upload.staticURL) sanitized.upload.staticURL = sanitized.slug;
+    if (!sanitized.upload.staticURL) sanitized.upload.staticURL = `/${sanitized.slug}`;
     if (!sanitized.admin.useAsTitle) sanitized.admin.useAsTitle = 'filename';
   }