data page polish and no repeats in slates

This commit is contained in:
Martina 2020-09-24 12:42:32 -07:00
parent 60b2a31280
commit 014934c844
8 changed files with 129 additions and 59 deletions

View File

@ -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="m3.5 18h17" />
<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="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="M22 12H2" />
<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="M6 16H6.01" />
<path d="M10 16H10.01" />
</g>
</svg>
);

View File

@ -332,23 +332,18 @@ export default class ApplicationPage extends React.Component {
const { added, skipped } = response.data;
if (!added && !skipped) return;
let message = "";
if (added) {
message += `${added || 0} file${added !== 1 ? "s" : ""} uploaded. `;
}
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: "INFO" },
alert: { message, status: !added ? null : "INFO" },
},
});
}
});
};

View File

@ -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" />,
};

View File

@ -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>

View File

@ -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>
);
}

View File

@ -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({

View File

@ -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,

View File

@ -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 addlObjects = newObjects.map((each) => {
let slateIDs = slate.data.objects.map((file) => file.id);
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
.status(200)
.send({ decorator: "SERVER_SLATE_ADD_TO_SLATE", slate });
return res.status(200).send({
decorator: "SERVER_SLATE_ADD_TO_SLATE",
slate,
added: addlObjects.length,
skipped: newObjects.length - addlObjects.length,
});
};