From b05f42fcbb7d2b8a3ffb44c0db6a438352361101 Mon Sep 17 00:00:00 2001 From: Martina Date: Fri, 11 Sep 2020 15:25:33 -0700 Subject: [PATCH] switched alerts to Alert component --- common/file-utilities.js | 20 ++++++- components/core/Alert.js | 49 +++++++++++++++ components/core/Application.js | 48 +++++++++++---- components/core/DataView.js | 52 ++++++++++++++-- components/core/Slate.js | 28 ++++++++- components/sidebars/SidebarAddFileToBucket.js | 47 +++++++++++---- .../sidebars/SidebarCreatePaymentChannel.js | 8 ++- components/sidebars/SidebarCreateSlate.js | 38 ++++++++++-- .../sidebars/SidebarDeleteWalletAddress.js | 8 ++- components/sidebars/SidebarFilecoinArchive.js | 8 ++- .../sidebars/SidebarSingleSlateSettings.js | 31 ++++++++-- components/sidebars/SidebarWalletSendFunds.js | 13 +++- components/system/components/Typography.js | 41 +++++++++++-- .../modules/CreateFilecoinStorageDeal.js | 19 +++++- pages/_/experiences/create-address.js | 10 +++- pages/_/experiences/filecoin-settings.js | 8 ++- pages/_/experiences/make-storage-deal.js | 9 ++- pages/_/experiences/send-address-filecoin.js | 12 +++- pages/_/integration-page.js | 20 ++++++- scenes/SceneEditAccount.js | 43 ++++++++++++-- scenes/SceneProfile.js | 21 ++++++- scenes/SceneSettingsDeveloper.js | 54 +++++++++++++---- scenes/SceneSignIn.js | 40 +++++++++++-- scenes/SceneSlate.js | 59 ++++++++++++++++--- scenes/SceneWallet.js | 6 +- 25 files changed, 594 insertions(+), 98 deletions(-) diff --git a/common/file-utilities.js b/common/file-utilities.js index b2d0a9f0..6c1c04fb 100644 --- a/common/file-utilities.js +++ b/common/file-utilities.js @@ -1,3 +1,5 @@ +import { dispatchCustomEvent } from "~/common/custom-events"; + export const upload = async ({ file, slate, context }) => { let formData = new FormData(); const HEIC2ANY = require("heic2any"); @@ -93,9 +95,21 @@ export const upload = async ({ file, slate, context }) => { body: JSON.stringify({ slate, data: { title: file.name, ...json.data } }), }); - if (!addResponse || addResponse.error) { - console.log(addResponse.error); - alert("TODO: Adding an image to Slate went wrong."); + if (!addResponse) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + } else if (addResponse.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: addResponse.decorator } }, + }); } } diff --git a/components/core/Alert.js b/components/core/Alert.js index 47e4374c..908dffda 100644 --- a/components/core/Alert.js +++ b/components/core/Alert.js @@ -73,3 +73,52 @@ export class Alert extends React.Component { ); } } + +export class Confirm extends React.Component { + state = { + alert: null, + }; + + componentDidMount = () => { + window.addEventListener("create-alert", this._handleCreate); + window.addEventListener("click", this._handleDelete); + }; + + componentWillUnmount = () => { + window.removeEventListener("create-alert", this._handleCreate); + window.removeEventListener("click", this._handleDelete); + }; + + _handleCreate = (e) => { + this.setState({ alert: e.detail.alert }); + }; + + _handleDelete = (e) => { + if (this.state.alert) { + this.setState({ alert: null }); + } + }; + + render() { + if (!this.state.alert) { + return null; + } + return ( +
+ {this.state.alert.message + ? this.state.alert.message + : this.state.alert.decorator + ? error[this.state.alert.decorator] || + "Whoops something went wrong! Please try again." + : "Whoops something went wrong! Please try again."} +
+ ); + } +} diff --git a/components/core/Application.js b/components/core/Application.js index 983ee4d5..ba0f502e 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -115,7 +115,17 @@ export default class ApplicationPage extends React.Component { } _handleOnlineStatus = async () => { - window.alert(navigator.onLine ? "online" : "offline"); + if (navigator.onLine) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: "Back online!", status: "INFO" } }, + }); + } else { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: "Offline. Trying to reconnect" } }, + }); + } this.setState({ online: navigator.onLine }); }; @@ -176,8 +186,7 @@ export default class ApplicationPage extends React.Component { this.setState({ fileLoading: true }); - // TODO(jim): - // Refactor later + // TODO(jim): Refactor later const navigation = NavigationData.generate(this.state.viewer); const next = this.state.history[this.state.currentIndex]; const current = NavigationData.getCurrentById(navigation, next.id); @@ -213,7 +222,14 @@ export default class ApplicationPage extends React.Component { } if (!files.length) { - alert("TODO: Files not supported error"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "File type not supported. Please try a different file", + }, + }, + }); this._handleRegisterFileLoading({ fileLoading: null }); return; } @@ -239,7 +255,14 @@ export default class ApplicationPage extends React.Component { const response = await Actions.hydrateAuthenticatedUser(); if (!response || response.error) { - alert("TODO: error fetching authenticated viewer"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "We encountered issues while refreshing. Please try again", + }, + }, + }); return null; } @@ -299,8 +322,7 @@ export default class ApplicationPage extends React.Component { }; _handleDeleteYourself = async () => { - // TODO(jim): - // Put this somewhere better for messages. + // TODO(jim): Put this somewhere better for messages. const message = "Do you really want to delete your account? It will be permanently removed"; if (!window.confirm(message)) { @@ -391,11 +413,17 @@ export default class ApplicationPage extends React.Component { } if (options.type === "ACTION") { - return alert(JSON.stringify(options)); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: JSON.stringify(options), status: "INFO" } }, + }); } if (options.type === "DOWNLOAD") { - return alert(JSON.stringify(options)); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: JSON.stringify(options), status: "INFO" } }, + }); } if (options.type === "SIDEBAR") { @@ -405,7 +433,7 @@ export default class ApplicationPage extends React.Component { }); } - return alert(JSON.stringify(options)); + return alert(JSON.stringify(options)); //TODO(martina): convert to alert? }; _handleNavigateTo = (next, data = null) => { diff --git a/components/core/DataView.js b/components/core/DataView.js index b18dee8a..a0a76f93 100644 --- a/components/core/DataView.js +++ b/components/core/DataView.js @@ -235,8 +235,22 @@ export default class DataView extends React.Component { body: JSON.stringify({ slate, data: { title: data.name, ...data } }), }); - if (!addResponse || addResponse.error) { - alert("We could not add this object to your slate."); + if (!addResponse) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + return null; + } else if (addResponse.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: addResponse.decorator } }, + }); return null; } @@ -279,7 +293,15 @@ export default class DataView extends React.Component { detail: { loading: false }, }); - alert("We failed to remove the object from your Slate."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now and weren't able to delete that. Please try again later", + }, + }, + }); return null; } @@ -289,7 +311,14 @@ export default class DataView extends React.Component { detail: { loading: false }, }); - alert("We failed to remove the object from your Slate."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + decorator: response.decorator, + }, + }, + }); return null; } @@ -354,13 +383,24 @@ export default class DataView extends React.Component { if (!response) { this._handleLoading({ cid }); - alert("TODO: Broken response error"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); return null; } if (response.error) { this._handleLoading({ cid }); - alert("TODO: Bucket delete error"); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return null; } diff --git a/components/core/Slate.js b/components/core/Slate.js index aac17261..0b7358b9 100644 --- a/components/core/Slate.js +++ b/components/core/Slate.js @@ -6,6 +6,7 @@ import * as Actions from "~/common/actions"; import { Responsive, WidthProvider } from "react-grid-layout"; import { css } from "@emotion/react"; import { LoaderSpinner } from "~/components/system/components/Loaders"; +import { dispatchCustomEvent } from "~/common/custom-events"; import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview"; import CircleButtonGray from "~/components/core/CircleButtonGray"; @@ -164,12 +165,35 @@ export default class Slate extends React.Component { }); if (!response.data) { - alert("Could not find Slate."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now and could not locate that slate. Please try again later", + }, + }, + }); + return; + } + + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return; } if (!response.data.slate) { - alert("Could not find Slate."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "We could not locate that slate. Please try again later", + }, + }, + }); return; } diff --git a/components/sidebars/SidebarAddFileToBucket.js b/components/sidebars/SidebarAddFileToBucket.js index 40b4b6ee..54c1eb07 100644 --- a/components/sidebars/SidebarAddFileToBucket.js +++ b/components/sidebars/SidebarAddFileToBucket.js @@ -73,15 +73,25 @@ export default class SidebarAddFileToBucket extends React.Component { let file = e.target.files[i]; if (!file) { - alert("We could not find any files to upload."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "We could not find any files to upload." }, + }, + }); continue; } const isAllowed = Validations.isFileTypeAllowed(file.type); if (!isAllowed) { - alert( - `We currently do not accept ${file.type} yet but may in the future.` - ); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: `We currently do not accept ${file.type} yet but may in the future!`, + }, + }, + }); continue; } @@ -94,7 +104,12 @@ export default class SidebarAddFileToBucket extends React.Component { } if (!files.length) { - alert("We could not find any files to upload."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "We could not find any files to upload." }, + }, + }); // return this.props.onRegisterFileLoading({ fileLoading: null }); } @@ -113,16 +128,23 @@ export default class SidebarAddFileToBucket extends React.Component { }); if (!response) { - alert( - "Something went wrong with saving your new file. Please refresh your browser." - ); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "Something went wrong while saving your new file. Please refresh your browser.", + }, + }, + }); continue; } if (response.error) { - alert( - "Something went wrong with saving your new file. Please refresh your browser." - ); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); continue; } } @@ -188,7 +210,7 @@ export default class SidebarAddFileToBucket extends React.Component { )} . - {/* //change this to allways allow uploads */} + )} - {/* maybe send an alert if fails here */} )) diff --git a/components/sidebars/SidebarCreatePaymentChannel.js b/components/sidebars/SidebarCreatePaymentChannel.js index 63389589..a9a43b00 100644 --- a/components/sidebars/SidebarCreatePaymentChannel.js +++ b/components/sidebars/SidebarCreatePaymentChannel.js @@ -5,6 +5,7 @@ import * as SVG from "~/common/svg"; import * as System from "~/components/system"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_FOCUS = css` font-size: ${Constants.typescale.lvl1}; @@ -31,7 +32,12 @@ export default class SidebarCreatePaymentChannel extends React.Component { state = { address: "", amount: "" }; _handleSubmit = () => { - alert("TODO: Create a new payment channel"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Creating payment channel...", status: "INFO" }, + }, + }); this.props.onSubmit({}); }; diff --git a/components/sidebars/SidebarCreateSlate.js b/components/sidebars/SidebarCreateSlate.js index 2ad3c3ca..30a116dd 100644 --- a/components/sidebars/SidebarCreateSlate.js +++ b/components/sidebars/SidebarCreateSlate.js @@ -4,6 +4,8 @@ import * as Constants from "~/common/constants"; import * as System from "~/components/system"; import * as Validations from "~/common/validations"; +import { dispatchCustomEvent } from "~/common/custom-events"; + const SLATE_LIMIT = 20; export default class SidebarCreateSlate extends React.Component { @@ -14,14 +16,24 @@ export default class SidebarCreateSlate extends React.Component { _handleSubmit = async () => { if (this.props.viewer.slates.length >= SLATE_LIMIT) { - alert("You have reached the limit of 20 Slates."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "You have reached the limit of 20 Slates!" }, + }, + }); return; } this.setState({ loading: true }); if (!Validations.slatename(this.state.name)) { - alert("Please provide a name under 48 characters."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Please provide a name under 48 characters." }, + }, + }); this.setState({ loading: false }); return; } @@ -31,10 +43,24 @@ export default class SidebarCreateSlate extends React.Component { name: this.state.name, }); - if (response && response.error) { - alert( - "Something went wrong while trying to create your new slate. Please try again." - ); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + return; + } + + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return; } diff --git a/components/sidebars/SidebarDeleteWalletAddress.js b/components/sidebars/SidebarDeleteWalletAddress.js index 65447d6b..59569f03 100644 --- a/components/sidebars/SidebarDeleteWalletAddress.js +++ b/components/sidebars/SidebarDeleteWalletAddress.js @@ -5,10 +5,16 @@ import * as SVG from "~/common/svg"; import * as System from "~/components/system"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; export default class SidebarDeleteWalletAddress extends React.Component { _handleSubmit = () => { - alert("TODO: Delete wallet address"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Deleting wallet address...", status: "INFO" }, + }, + }); this.props.onSubmit({}); }; diff --git a/components/sidebars/SidebarFilecoinArchive.js b/components/sidebars/SidebarFilecoinArchive.js index a34b6af1..4fac2eb4 100644 --- a/components/sidebars/SidebarFilecoinArchive.js +++ b/components/sidebars/SidebarFilecoinArchive.js @@ -6,6 +6,7 @@ import * as SVG from "~/common/svg"; import * as System from "~/components/system"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; export default class SidebarFilecoinArchive extends React.Component { async componentDidMount() {} @@ -13,7 +14,12 @@ export default class SidebarFilecoinArchive extends React.Component { _handleMakeDeal = async () => { const response = await Actions.archive(); console.log(response); - alert("TODO: Still working on archiving issues."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Deal archiving is still under development" }, + }, + }); }; _handleSubmit = async (e) => { diff --git a/components/sidebars/SidebarSingleSlateSettings.js b/components/sidebars/SidebarSingleSlateSettings.js index 7dbf66b3..1c8aa814 100644 --- a/components/sidebars/SidebarSingleSlateSettings.js +++ b/components/sidebars/SidebarSingleSlateSettings.js @@ -5,6 +5,7 @@ import * as System from "~/components/system"; import * as Strings from "~/common/strings"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_GROUP = css` display: flex; @@ -56,12 +57,23 @@ export default class SidebarSingleSlateSettings extends React.Component { }); if (!response) { - alert("TODO: Server Error"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); return this.setState({ loading: false }); } if (response.error) { - alert(`TODO: ${response.decorator}`); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return this.setState({ loading: false }); } @@ -92,12 +104,23 @@ export default class SidebarSingleSlateSettings extends React.Component { }); if (!response) { - alert("TODO: Server Error"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); return this.setState({ loading: false }); } if (response.error) { - alert(`TODO: ${response.decorator}`); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return this.setState({ loading: false }); } diff --git a/components/sidebars/SidebarWalletSendFunds.js b/components/sidebars/SidebarWalletSendFunds.js index 80ae0917..da36a75d 100644 --- a/components/sidebars/SidebarWalletSendFunds.js +++ b/components/sidebars/SidebarWalletSendFunds.js @@ -4,6 +4,7 @@ import * as Constants from "~/common/constants"; import * as System from "~/components/system"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_FOCUS = css` font-size: ${Constants.typescale.lvl1}; @@ -43,9 +44,15 @@ export default class SidebarWalletSendFunds extends React.Component { const currentAddress = addresses[this.props.selected.address]; if (currentAddress.address === this.state.address) { - alert( - "TODO: Proper message for not allowing poeple to send funds to the same address." - ); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "You cannot send funds from an address to itself. Please enter a different address", + }, + }, + }); this.setState({ loading: false }); return; diff --git a/components/system/components/Typography.js b/components/system/components/Typography.js index 8461c6c2..8288884b 100644 --- a/components/system/components/Typography.js +++ b/components/system/components/Typography.js @@ -4,6 +4,7 @@ import * as Actions from "~/common/actions"; import * as StringReplace from "~/vendor/react-string-replace"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const LINK_STYLES = ` font-family: ${Constants.font.text}; @@ -37,12 +38,38 @@ const onDeepLink = async (object) => { deeplink: true, }); - if (!response.data) { - alert("TODO: Can not find deeplink"); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + return; } - if (!response.data.slate) { - alert("TODO: Can not find deeplink"); + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); + return; + } + + if (!response.data || !response.data.slate) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We encountered issues while locating that deeplink. Please try again later", + }, + }, + }); + return; } return window.open( @@ -64,7 +91,8 @@ export const ProcessedText = ({ text }) => { css={STYLES_LINK} key={match + i} target="_blank" - href={`/${match}`.toLowerCase()}> + href={`/${match}`.toLowerCase()} + > @{match} )); @@ -73,7 +101,8 @@ export const ProcessedText = ({ text }) => { onDeepLink({ deeplink: match.toLowerCase() })}> + onClick={() => onDeepLink({ deeplink: match.toLowerCase() })} + > #{match} )); diff --git a/components/system/modules/CreateFilecoinStorageDeal.js b/components/system/modules/CreateFilecoinStorageDeal.js index 6704b2a7..207c3307 100644 --- a/components/system/modules/CreateFilecoinStorageDeal.js +++ b/components/system/modules/CreateFilecoinStorageDeal.js @@ -6,6 +6,7 @@ import { } from "~/components/system/components/Buttons"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_CONTAINER = css` font-family: ${Constants.font.text}; @@ -53,7 +54,16 @@ const STYLES_ITEM = css` export class CreateFilecoinStorageDeal extends React.Component { static defaultProps = { - onSubmit: () => alert("onSubmit"), + onSubmit: () => { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "Filecoin storage deals are still under development", + }, + }, + }); + }, }; state = { file: null }; @@ -63,7 +73,12 @@ export class CreateFilecoinStorageDeal extends React.Component { let file = e.target.files[0]; if (!file) { - alert("Something went wrong"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Something went wrong. Please try again" }, + }, + }); return; } diff --git a/pages/_/experiences/create-address.js b/pages/_/experiences/create-address.js index 1e46c9dc..c3e1e706 100644 --- a/pages/_/experiences/create-address.js +++ b/pages/_/experiences/create-address.js @@ -5,6 +5,8 @@ import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; import CodeBlock from "~/components/system/CodeBlock"; +import { dispatchCustomEvent } from "~/common/custom-events"; + const EXAMPLE_CODE = `import * as React from "react"; import { CreateFilecoinAddress } from "slate-react-system"; import { createPow } from "@textile/powergate-client"; @@ -32,7 +34,13 @@ class Example extends React.Component { export default class SystemPageCreateAddress extends React.Component { _handleSubmit = ({ name, type, makeDefault }) => { - alert(JSON.stringify({ name, type, makeDefault })); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: JSON.stringify({ name, type, makeDefault }) }, + status: "INFO", + }, + }); }; render() { diff --git a/pages/_/experiences/filecoin-settings.js b/pages/_/experiences/filecoin-settings.js index 95fddd7f..0802752a 100644 --- a/pages/_/experiences/filecoin-settings.js +++ b/pages/_/experiences/filecoin-settings.js @@ -5,6 +5,8 @@ import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; import CodeBlock from "~/components/system/CodeBlock"; +import { dispatchCustomEvent } from "~/common/custom-events"; + const addrsList = [ { addr: @@ -82,7 +84,11 @@ class Example extends React.Component { export default class SystemPageFilecoinSettings extends React.Component { _handleSave = async (storageConfig) => { - alert("Saved"); + // TODO(jim): Send setings data to server. + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: "Saved!", status: "INFO" } }, + }); }; render() { diff --git a/pages/_/experiences/make-storage-deal.js b/pages/_/experiences/make-storage-deal.js index c4824e3b..7de1cf58 100644 --- a/pages/_/experiences/make-storage-deal.js +++ b/pages/_/experiences/make-storage-deal.js @@ -5,6 +5,8 @@ import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; import CodeBlock from "~/components/system/CodeBlock"; +import { dispatchCustomEvent } from "~/common/custom-events"; + const EXAMPLE_CODE = `import * as React from "react"; import { CreateFilecoinStorageDeal } from "slate-react-system"; import { createPow } from "@textile/powergate-client"; @@ -58,7 +60,12 @@ class Example extends React.Component { export default class SystemPageMakeStorageDeal extends React.Component { _handleSubmit = async ({ file }) => { // TODO(jim): Send file data to server. - alert(file); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Storage deals are still under development" }, + }, + }); }; render() { diff --git a/pages/_/experiences/send-address-filecoin.js b/pages/_/experiences/send-address-filecoin.js index a8d621c6..766785fd 100644 --- a/pages/_/experiences/send-address-filecoin.js +++ b/pages/_/experiences/send-address-filecoin.js @@ -5,6 +5,8 @@ import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; import CodeBlock from "~/components/system/CodeBlock"; +import { dispatchCustomEvent } from "~/common/custom-events"; + const EXAMPLE_CODE = `import * as React from "react"; import { SendAddressFilecoin } from "slate-react-system"; import { createPow } from "@textile/powergate-client"; @@ -31,7 +33,15 @@ class Example extends React.Component { export default class SystemPageSendAddressFilecoin extends React.Component { _handleSubmit = ({ source, target, amount }) => { - alert(JSON.stringify({ source, target, amount })); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: JSON.stringify({ source, target, amount }), + status: "INFO", + }, + }, + }); }; render() { diff --git a/pages/_/integration-page.js b/pages/_/integration-page.js index 7d134623..e0362f70 100644 --- a/pages/_/integration-page.js +++ b/pages/_/integration-page.js @@ -4,6 +4,7 @@ import * as System from "~/components/system"; import * as Actions from "~/common/actions"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; const STYLES_ITEM = css` font-size: 12px; @@ -53,11 +54,26 @@ export default class IntegrationPage extends React.Component { _handleUpdate = async (e) => { const response = await Actions.hydrateAuthenticatedUser(); - if (!response || response.error) { - alert("TODO: error fetching authenticated viewer"); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); return null; } + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); + } + const updates = { viewer: response.data, }; diff --git a/scenes/SceneEditAccount.js b/scenes/SceneEditAccount.js index 893ca885..0cf4c461 100644 --- a/scenes/SceneEditAccount.js +++ b/scenes/SceneEditAccount.js @@ -7,6 +7,7 @@ import * as Validations from "~/common/validations"; import * as FileUtilities from "~/common/file-utilities"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; import ScenePage from "~/components/core/ScenePage"; import Avatar from "~/components/core/Avatar"; @@ -48,20 +49,35 @@ export default class SceneEditAccount extends React.Component { let file = e.target.files[0]; if (!file) { - alert("TODO: Something went wrong"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "Something went wrong with the upload. Please try again", + }, + }, + }); return; } // NOTE(jim): Only allow images for account avatar. if (!file.type.startsWith("image/")) { - alert("TODO: Error message for not an image."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Upload failed. Only images and gifs are allowed" }, + }, + }); return; } const json = await FileUtilities.upload({ file }); if (json.error) { - alert("TODO: Image already exists in bucket error message"); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: json.decorator } }, + }); this.setState({ changingAvatar: false }); return; } @@ -100,7 +116,14 @@ export default class SceneEditAccount extends React.Component { this.setState({ changingUsername: true }); if (!Validations.username(this.state.username)) { - alert("TODO: Not a valid username"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "Please include only letters and numbers in your username", + }, + }, + }); this.setState({ changingUsername: false }); return; } @@ -126,13 +149,21 @@ export default class SceneEditAccount extends React.Component { _handleChangePassword = async (e) => { this.setState({ changingPassword: true }); if (this.state.password !== this.state.confirm) { - alert("TODO: Error message for non-matching passwords"); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: "Passwords did not match" } }, + }); this.setState({ changingPassword: false }); return; } if (!Validations.password(this.state.password)) { - alert("TODO: Not a valid password"); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Password length must be more than 8 characters" }, + }, + }); this.setState({ changingPassword: false }); return; } diff --git a/scenes/SceneProfile.js b/scenes/SceneProfile.js index 1f0a6b85..37cfac8f 100644 --- a/scenes/SceneProfile.js +++ b/scenes/SceneProfile.js @@ -9,6 +9,7 @@ import { ButtonPrimary, ButtonSecondary, } from "~/components/system/components/Buttons"; +import { dispatchCustomEvent } from "~/common/custom-events"; import ScenePage from "~/components/core/ScenePage"; import Profile from "~/components/core/Profile"; @@ -75,8 +76,24 @@ export default class SceneProfile extends React.Component { _handleUpdate = async (e) => { let response = await this.props.onRehydrate(); - if (!response || response.error) { - alert("TODO: error fetching authenticated viewer"); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + return null; + } + + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return null; } diff --git a/scenes/SceneSettingsDeveloper.js b/scenes/SceneSettingsDeveloper.js index c69a1a28..d28e826f 100644 --- a/scenes/SceneSettingsDeveloper.js +++ b/scenes/SceneSettingsDeveloper.js @@ -5,6 +5,7 @@ import * as System from "~/components/system"; import * as SVG from "~/common/svg"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; import ScenePage from "~/components/core/ScenePage"; import ScenePageHeader from "~/components/core/ScenePageHeader"; @@ -83,7 +84,8 @@ class Key extends React.Component { onClick={this._handleToggleVisible} style={{ marginRight: 8, - }}> + }} + > this._handleDelete(this.props.data.id)} style={{ marginRight: 4, - }}> + }} + > @@ -192,9 +195,24 @@ export default class SceneSettingsDeveloper extends React.Component { this.setState({ loading: true }); const response = await Actions.generateAPIKey(); - if (response && response.error) { - // TODO(jim): Proper error message. - alert(response.decorator); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); + return this.setState({ loading: false }); + } + + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); return this.setState({ loading: false }); } @@ -216,15 +234,26 @@ export default class SceneSettingsDeveloper extends React.Component { } const response = await Actions.deleteAPIKey({ id }); - if (response && response.error) { - // TODO(jim): Proper error message. - alert(response.decorator); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); return this.setState({ loading: false }); } - await this.props.onRehydrate(); - - this.setState({ loading: false }); + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); + return this.setState({ loading: false }); + } }; async componentDidMount() { @@ -278,7 +307,8 @@ export default class SceneSettingsDeveloper extends React.Component {
+ loading={this.state.loading} + > Generate
diff --git a/scenes/SceneSignIn.js b/scenes/SceneSignIn.js index 932f7677..ccd9e248 100644 --- a/scenes/SceneSignIn.js +++ b/scenes/SceneSignIn.js @@ -7,6 +7,7 @@ import * as Strings from "~/common/strings"; import { css } from "@emotion/react"; import { Logo } from "~/common/logo"; +import { dispatchCustomEvent } from "~/common/custom-events"; import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader"; import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter"; @@ -123,15 +124,25 @@ export default class SceneSignIn extends React.Component { await delay(100); if (!Validations.username(this.state.username)) { - alert( - "Your username was invalid, only characters and numbers are allowed." - ); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: "Only characters and numbers are allowed in usernames", + }, + }, + }); this.setState({ loading: false }); return; } if (!Validations.password(this.state.password)) { - alert("Your password must be at least 8 characters."); + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { message: "Your password must be at least 8 characters" }, + }, + }); this.setState({ loading: false }); return; } @@ -141,8 +152,25 @@ export default class SceneSignIn extends React.Component { password: this.state.password, }); - if (!response || response.error) { - alert("We could not sign you into your account, try again later."); + if (!response) { + dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We could not sign you into your account, try again later.", + }, + }, + }); + this.setState({ loading: false }); + return; + } + + if (response.error) { + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); this.setState({ loading: false }); return; } diff --git a/scenes/SceneSlate.js b/scenes/SceneSlate.js index 24f66216..32cd434e 100644 --- a/scenes/SceneSlate.js +++ b/scenes/SceneSlate.js @@ -182,12 +182,23 @@ export default class SceneSlate extends React.Component { if (!response) { this.setState({ loading: false, saving: "ERROR" }); - alert("TODO: Server Error"); + System.dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); } if (response.error) { this.setState({ loading: false, saving: "ERROR" }); - alert(`TODO: ${response.decorator}`); + System.dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); } await this.props.onRehydrate(); @@ -297,7 +308,15 @@ export default class SceneSlate extends React.Component { name: "state-global-carousel-loading", detail: { loading: false }, }); - alert("TODO: Server Error"); + System.dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble connecting right now. Please try again later", + }, + }, + }); } if (response.error) { @@ -305,7 +324,10 @@ export default class SceneSlate extends React.Component { name: "state-global-carousel-loading", detail: { loading: false }, }); - alert(`TODO: ${response.decorator}`); + System.dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); } this._handleUpdateCarousel({ @@ -358,13 +380,36 @@ export default class SceneSlate extends React.Component { deeplink: true, }); - if (!response.data) { - alert("Could not find Slate."); + if (!response || !response.data) { + System.dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble finding that slate right now. Please try again later", + }, + }, + }); return; } + if (response.error) { + System.dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { decorator: response.decorator } }, + }); + } + if (!response.data.slate) { - alert("Could not find Slate."); + System.dispatchCustomEvent({ + name: "create-alert", + detail: { + alert: { + message: + "We're having trouble finding that slate right now. Please try again later", + }, + }, + }); return; } diff --git a/scenes/SceneWallet.js b/scenes/SceneWallet.js index aba70818..88e2120c 100644 --- a/scenes/SceneWallet.js +++ b/scenes/SceneWallet.js @@ -5,6 +5,7 @@ import * as SVG from "~/common/svg"; import * as System from "~/components/system"; import { css } from "@emotion/react"; +import { dispatchCustomEvent } from "~/common/custom-events"; import Section from "~/components/core/Section"; import ScenePage from "~/components/core/ScenePage"; @@ -101,7 +102,10 @@ export default class SceneWallet extends React.Component { _handleCopy = (text) => { Strings.copyText(text); - alert(`${text} Added to clipboard.`); + dispatchCustomEvent({ + name: "create-alert", + detail: { alert: { message: "Copied to clipboard!", status: "INFO" } }, + }); }; render() {