@performant-software/semantic-components 1.0.4-beta.4 → 1.0.4-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.4-beta.4",
+  "version": "1.0.4-beta.6",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.4-beta.4",
+    "@performant-software/shared-components": "^1.0.4-beta.6",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "citeproc": "^2.4.62",

package/src/components/FileUploadModal.js

@@ -85,13 +85,19 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   const [items, setItems] = useState([]);
   const [uploadCount, setUploadCount] = useState(0);
   const [uploading, setUploading] = useState(false);
-  // const [statuses, setStatuses] = useState({});
+  const [statuses, setStatuses] = useState({});
 
   /**
    * Sets the <code>hasErrors</code> value to <code>true</code> if at least one item on the state contains errors.
    */
   const hasErrors = useMemo(() => !!_.find(items, (item) => !_.isEmpty(item.errors)), [items]);
 
+  /**
+   * Sets the <code>hasUploadErrors</code> value to <code>true</code> if at least one file uploaded with
+   * an error status.
+   */
+  const hasUploaderErrors = useMemo(() => _.find(_.values(statuses), (status) => status === Status.error), [statuses]);
+
   /**
    * Calls the <code>onAddFile</code> prop for each item in the passed collection of files and adds them
    * to the items on the state.
@@ -157,13 +163,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
    *
    * @type {function(*, *): void}
    */
-  // const setStatus = useCallback((index, status, message = null) => (
-  //   setStatuses((prevStatuses) => ({ ...prevStatuses, [index]: { status, message } }))
-  // ));
-
-  const setStatus = useCallback((item, status, message = null) => (
-    setItems(_.map(items, (i) => (i !== item ? i : { ...i, status, errors: [message] })))
-  ), [items]);
+  const setStatus = useCallback((index, status) => (
+    setStatuses((prevStatuses) => ({ ...prevStatuses, [index]: status }))
+  ));
 
   /**
    * Iterates of the list of items and sequentially calls the <code>onSave</code> prop for each.
@@ -175,7 +177,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       const item = items[i];
 
       // Update the status for the item
-      setStatus(i, Status.processing);
+      setStatus(item, Status.processing);
 
       let error;
 
@@ -189,9 +191,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
 
       // Update the status for the item
       if (error) {
-        setStatus(i, Status.error, error.message);
+        setStatus(item, Status.error);
       } else {
-        setStatus(i, Status.complete);
+        setStatus(item, Status.complete);
       }
 
       // Update the upload count
@@ -373,6 +375,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                 </Message.List>
               </Message>
             )}
+            { hasUploaderErrors && (
+              <Message
+                content={i18n.t('FileUploadModal.errors.upload.content')}
+                header={i18n.t('FileUploadModal.errors.upload.header')}
+                error
+              />
+            )}
             <FileUpload
               onFilesAdded={onAddFiles}
             />

package/src/i18n/en.json

@@ -129,7 +129,11 @@
   "FileUploadModal": {
     "errors": {
       "header": "There was an error processing your files",
-      "required": "File {{filename}} - The following fields are required: {{fields}}"
+      "required": "File {{filename}} - The following fields are required: {{fields}}",
+      "upload": {
+        "content": "Check the status on each file to see which were unsuccessful.",
+        "header": "Some of the files did not upload"
+      }
     },
     "loader": "Uploading files...",
     "title": "Upload Files"

package/types/components/FileUploadModal.js.flow

@@ -85,13 +85,19 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   const [items, setItems] = useState([]);
   const [uploadCount, setUploadCount] = useState(0);
   const [uploading, setUploading] = useState(false);
-  // const [statuses, setStatuses] = useState({});
+  const [statuses, setStatuses] = useState({});
 
   /**
    * Sets the <code>hasErrors</code> value to <code>true</code> if at least one item on the state contains errors.
    */
   const hasErrors = useMemo(() => !!_.find(items, (item) => !_.isEmpty(item.errors)), [items]);
 
+  /**
+   * Sets the <code>hasUploadErrors</code> value to <code>true</code> if at least one file uploaded with
+   * an error status.
+   */
+  const hasUploaderErrors = useMemo(() => _.find(_.values(statuses), (status) => status === Status.error), [statuses]);
+
   /**
    * Calls the <code>onAddFile</code> prop for each item in the passed collection of files and adds them
    * to the items on the state.
@@ -157,13 +163,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
    *
    * @type {function(*, *): void}
    */
-  // const setStatus = useCallback((index, status, message = null) => (
-  //   setStatuses((prevStatuses) => ({ ...prevStatuses, [index]: { status, message } }))
-  // ));
-
-  const setStatus = useCallback((item, status, message = null) => (
-    setItems(_.map(items, (i) => (i !== item ? i : { ...i, status, errors: [message] })))
-  ), [items]);
+  const setStatus = useCallback((index, status) => (
+    setStatuses((prevStatuses) => ({ ...prevStatuses, [index]: status }))
+  ));
 
   /**
    * Iterates of the list of items and sequentially calls the <code>onSave</code> prop for each.
@@ -175,7 +177,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       const item = items[i];
 
       // Update the status for the item
-      setStatus(i, Status.processing);
+      setStatus(item, Status.processing);
 
       let error;
 
@@ -189,9 +191,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
 
       // Update the status for the item
       if (error) {
-        setStatus(i, Status.error, error.message);
+        setStatus(item, Status.error);
       } else {
-        setStatus(i, Status.complete);
+        setStatus(item, Status.complete);
       }
 
       // Update the upload count
@@ -373,6 +375,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                 </Message.List>
               </Message>
             )}
+            { hasUploaderErrors && (
+              <Message
+                content={i18n.t('FileUploadModal.errors.upload.content')}
+                header={i18n.t('FileUploadModal.errors.upload.header')}
+                error
+              />
+            )}
             <FileUpload
               onFilesAdded={onAddFiles}
             />