data page polish and no repeats in slates

common/svg.js

@@ -260,13 +260,14 @@ export const HardDrive = (props) => (
     <g
       fill="none"
       stroke="currentColor"
+      strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <path d="m2.5 21c-1.10456 0-2-.89544-2-2v-4c0-1.10456.89544-2 2-2h19c1.10456 0 2 .89544 2 2v4c0 1.10456-.89544 2-2 2z" />
+      <path d="M22 12H2" />
-      <path d="m3.5 18h17" />
+      <path d="M5.45 5.11L2 12V18C2 18.5304 2.21071 19.0391 2.58579 19.4142C2.96086 19.7893 3.46957 20 4 20H20C20.5304 20 21.0391 19.7893 21.4142 19.4142C21.7893 19.0391 22 18.5304 22 18V12L18.55 5.11C18.3844 4.77679 18.1292 4.49637 17.813 4.30028C17.4967 4.10419 17.1321 4.0002 16.76 4H7.24C6.86792 4.0002 6.50326 4.10419 6.18704 4.30028C5.87083 4.49637 5.61558 4.77679 5.45 5.11V5.11Z" />
-      <path d="m20.25 15.5h-.00000001c-.138071.00000001-.25.111929-.25.25.00000001.138071.111929.25.25.25.138071-.00000001.25-.111929.25-.25 0-.138071-.111929-.25-.25-.25" />
+      <path d="M6 16H6.01" />
-      <path d="m23.438 14.505-2.459-9.624.00000002.00000009c-.28282-1.10668-1.27976-1.88093-2.422-1.881h-13.114-.00000012c-1.14224.00007126-2.13918.774322-2.422 1.881l-2.459 9.624" />
+      <path d="M10 16H10.01" />
     </g>
   </svg>
 );

components/core/Application.js

@@ -332,23 +332,18 @@ export default class ApplicationPage extends React.Component {
 
         const { added, skipped } = response.data;
         if (!added && !skipped) return;
-        let message = "";
+        let message = `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
-        if (added) {
-          message += `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
-        }
         if (skipped) {
           message += `${skipped || 0} duplicate / existing file${
             added !== 1 ? "s were" : " was"
           } skipped.`;
         }
-        if (message) {
         dispatchCustomEvent({
           name: "create-alert",
           detail: {
-              alert: { message, status: "INFO" },
+            alert: { message, status: !added ? null : "INFO" },
           },
         });
-        }
       });
   };
 

components/core/ApplicationNavigation.js

@@ -14,13 +14,13 @@ const IconMap = {
   FOLDER: <SVG.Folder height="20px" />,
   WALLET: <SVG.OldWallet height="20px" />,
   DEALS: <SVG.Deals height="20px" />,
-  MAKE_DEAL: <SVG.Deals height="20px" />,
+  MAKE_DEAL: <SVG.HardDrive height="20px" />,
   SLATES: <SVG.Layers height="20px" />,
   SLATE: <SVG.Slate height="20px" />,
   LOCAL_DATA: <SVG.HardDrive height="20px" />,
   PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
   SETTINGS_DEVELOPER: <SVG.Tool height="20px" />,
-  SETTINGS: <SVG.Layers height="20px" />,
+  SETTINGS: <SVG.Settings height="20px" />,
   DIRECTORY: <SVG.Directory height="20px" />,
   FILECOIN: <SVG.Wallet height="20px" />,
 };

components/core/DataView.js

@@ -435,7 +435,9 @@ export default class DataView extends React.Component {
         },
       });
       return null;
-    } else if (addResponse.error) {
+    }
+
+    if (addResponse.error) {
       dispatchCustomEvent({
         name: "create-alert",
         detail: { alert: { decorator: addResponse.decorator } },
@@ -443,6 +445,20 @@ export default class DataView extends React.Component {
       return null;
     }
 
+    const { added, skipped } = addResponse;
+    let message = `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
+    if (skipped) {
+      message += `${skipped || 0} duplicate / existing file${
+        added !== 1 ? "s were" : " was"
+      } skipped.`;
+    }
+    dispatchCustomEvent({
+      name: "create-alert",
+      detail: {
+        alert: { message, status: !added ? null : "INFO" },
+      },
+    });
+
     await this.props.onRehydrate();
     await this._handleUpdate();
 
@@ -670,14 +686,12 @@ export default class DataView extends React.Component {
               </ButtonWarning>
               <div
                 css={STYLES_ICON_BOX}
-                style={{
-                  marginLeft: 8,
-                  position: "relative",
-                  left: 10,
-                }}
                 onClick={() => this.setState({ checked: {} })}
               >
-                <SVG.Dismiss height="20px" />
+                <SVG.Dismiss
+                  height="20px"
+                  style={{ color: Constants.system.darkGray }}
+                />
               </div>
             </div>
           </div>

components/sidebars/SidebarAddFileToSlate.js

@@ -8,7 +8,10 @@ import * as Actions from "~/common/actions";
 
 import { dispatchCustomEvent } from "~/common/custom-events";
 import { css } from "@emotion/react";
-import { ButtonPrimary } from "~/components/system/components/Buttons";
+import {
+  ButtonPrimary,
+  ButtonDisabled,
+} from "~/components/system/components/Buttons";
 
 const STYLES_SLATE_NAME = css`
   overflow: hidden;
@@ -95,13 +98,29 @@ export default class SidebarAddFileToSlate extends React.Component {
           },
         });
         return;
-      } else if (addResponse.error) {
+      }
+
+      if (addResponse.error) {
         dispatchCustomEvent({
           name: "create-alert",
           detail: { alert: { decorator: addResponse.decorator } },
         });
         return;
       }
+
+      const { added, skipped } = addResponse;
+      let message = `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
+      if (skipped) {
+        message += `${skipped || 0} duplicate / existing file${
+          added !== 1 ? "s were" : " was"
+        } skipped.`;
+      }
+      dispatchCustomEvent({
+        name: "create-alert",
+        detail: {
+          alert: { message, status: !added ? null : "INFO" },
+        },
+      });
     }
     await this.props.onRehydrate();
     dispatchCustomEvent({
@@ -121,7 +140,8 @@ export default class SidebarAddFileToSlate extends React.Component {
             marginBottom: "64px",
           }}
         >
-          Add files to slate
+          Add {this.props.sidebarData.files.length || 0} file
+          {this.props.sidebarData.files.length === 1 ? "" : "s"} to slate
         </System.P>
 
         <System.P css={STYLES_HEADER}>Slates</System.P>
@@ -132,7 +152,11 @@ export default class SidebarAddFileToSlate extends React.Component {
         >
           <SVG.Plus
             height="24px"
-            style={{ color: Constants.system.brand, marginRight: 8 }}
+            style={{
+              color: Constants.system.brand,
+              marginRight: 8,
+              pointerEvents: "none",
+            }}
           />
           <div
             css={STYLES_SLATE_NAME}
@@ -146,11 +170,18 @@ export default class SidebarAddFileToSlate extends React.Component {
             <div css={STYLES_SLATE_LINE} onClick={() => this._handleAdd(slate)}>
               <div css={STYLES_ICON_BOX}>
                 {this.state.selected[slate.id] ? (
-                  <SVG.Slate height="24px" style={{ marginRight: 8 }} />
+                  <SVG.Slate
+                    height="24px"
+                    style={{ marginRight: 8, pointerEvents: "none" }}
+                  />
                 ) : (
                   <SVG.PlusCircle
                     height="24px"
-                    style={{ color: Constants.system.darkGray, marginRight: 8 }}
+                    style={{
+                      color: Constants.system.darkGray,
+                      marginRight: 8,
+                      pointerEvents: "none",
+                    }}
                   />
                 )}
               </div>
@@ -167,6 +198,7 @@ export default class SidebarAddFileToSlate extends React.Component {
             </div>
           ))}
         </div>
+        {Object.keys(this.state.selected).length ? (
           <ButtonPrimary
             full
             onClick={this._handleSubmit}
@@ -174,6 +206,11 @@ export default class SidebarAddFileToSlate extends React.Component {
           >
             Add to slates
           </ButtonPrimary>
+        ) : (
+          <ButtonDisabled full style={{ marginTop: 32 }}>
+            Add to slates
+          </ButtonDisabled>
+        )}
       </div>
     );
   }

components/sidebars/SidebarCreateSlate.js

@@ -122,6 +122,22 @@ export default class SidebarCreateSlate extends React.Component {
         return;
       }
 
+      const { added, skipped } = addResponse;
+      let message = `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
+      if (skipped) {
+        message += `${skipped || 0} duplicate / existing file${
+          added !== 1 ? "s were" : " was"
+        } skipped.`;
+      }
+      if (message) {
+        dispatchCustomEvent({
+          name: "create-alert",
+          detail: {
+            alert: { message, status: !added ? null : "INFO" },
+          },
+        });
+      }
+
       await this.props.onRehydrate();
 
       dispatchCustomEvent({

components/system/components/fragments/Boundary.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+//NOTE(martina): This component behaves unusually sometimes when there is a click on an SVG. It will count it as an out of rectangle event. Solve this issue with adding { pointerEvents: "none" } to the SVG
 export class Boundary extends React.PureComponent {
   static defaultProps = {
     className: undefined,

pages/api/slates/add-url.js

@@ -75,15 +75,18 @@ export default async (req, res) => {
   } else {
     newObjects = [req.body.data];
   }
-  const isArray = req.body.data && req.body.data.length;
-  if (isArray) {
-    newObjects = [...req.body.data];
-  } else {
-    newObjects = [req.body.data];
-  }
 
-  //data takes an array rather than a single one now
+  let slateIDs = slate.data.objects.map((file) => file.id);
-  let addlObjects = newObjects.map((each) => {
+  let newIDs = [];
+  let addlObjects = newObjects
+    .filter((each) => {
+      if (slateIDs.includes(each.id) || newIDs.includes(each.id)) {
+        return false;
+      }
+      newIDs.push(each.id);
+      return true;
+    })
+    .map((each) => {
       let cid = each.ipfs.replace("/ipfs/", "");
       return {
         id: each.id,
@@ -124,7 +127,10 @@ export default async (req, res) => {
     });
   }
 
-  return res
+  return res.status(200).send({
-    .status(200)
+    decorator: "SERVER_SLATE_ADD_TO_SLATE",
-    .send({ decorator: "SERVER_SLATE_ADD_TO_SLATE", slate });
+    slate,
+    added: addlObjects.length,
+    skipped: newObjects.length - addlObjects.length,
+  });
 };