Make toast lib monolithic

frontend/__test_support__/mock_fbtoaster.ts

@@ -1,5 +1,5 @@
 jest.resetAllMocks();
-jest.mock("farmbot-toastr", () => ({
+jest.mock("../toast/toast", () => ({
   fun: jest.fn(),
   init: jest.fn(),
   success: jest.fn(),

frontend/__tests__/app_test.tsx

@@ -17,9 +17,9 @@ import { fakeState } from "../__test_support__/fake_state";
 import {
   buildResourceIndex
 } from "../__test_support__/resource_index_builder";
-import { error } from "farmbot-toastr";
 import { ResourceName } from "farmbot";
 import { fakeTimeSettings } from "../__test_support__/fake_time_settings";
+import { error } from "../toast/toast";
 
 const FULLY_LOADED: ResourceName[] = [
   "Sequence", "Regimen", "FarmEvent", "Point", "Tool", "Device"];

frontend/__tests__/interceptors_test.ts

@@ -28,8 +28,8 @@ import { SafeError } from "../interceptor_support";
 import { API } from "../api";
 import { auth } from "../__test_support__/fake_state/token";
 import { dispatchNetworkUp, dispatchNetworkDown } from "../connectivity";
-import { error } from "farmbot-toastr";
 import { Session } from "../session";
+import { error } from "../toast/toast";
 
 const A_STRING = expect.any(String);
 

frontend/account/__tests__/request_account_exports_test.ts

@@ -10,7 +10,7 @@ jest.mock("axios",
 import { API } from "../../api";
 import { Content } from "../../constants";
 import { requestAccountExport, generateFilename } from "../request_account_export";
-import { success } from "farmbot-toastr";
+import { success } from "../../toast/toast";
 import axios from "axios";
 import { fakeDevice } from "../../__test_support__/resource_index_builder";
 

frontend/account/components/__tests__/test_change_password.tsx

@@ -4,7 +4,7 @@ import { mount } from "enzyme";
 import { SpecialStatus } from "farmbot";
 import * as moxios from "moxios";
 import { API } from "../../../api/api";
-import { error } from "farmbot-toastr";
+import { error } from "../../../toast/toast";
 
 describe("<ChangePassword/>", function () {
   function testCase() {

frontend/account/components/change_password.tsx

@@ -10,11 +10,11 @@ import { SpecialStatus } from "farmbot";
 import Axios from "axios";
 import { API } from "../../api/index";
 import { prettyPrintApiErrors, equals, trim } from "../../util";
-import { success, error } from "farmbot-toastr/dist";
 import { Content } from "../../constants";
 import { uniq } from "lodash";
 import { BlurablePassword } from "../../ui/blurable_password";
 import { t } from "../../i18next_wrapper";
+import { success, error } from "../../toast/toast";
 
 interface PasswordForm {
   new_password: string;

frontend/account/dev/__tests__/dev_mode_test.tsx

@@ -10,7 +10,7 @@ import { range } from "lodash";
 import {
   setWebAppConfigValue
 } from "../../../config_storage/actions";
-import { warning } from "farmbot-toastr";
+import { warning } from "../../../toast/toast";
 
 describe("<DevMode/>", () => {
   it("triggers callbacks after 15 clicks", () => {

frontend/account/dev/dev_mode.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { warning } from "farmbot-toastr";
+import { warning } from "../../toast/toast";
 import { setWebAppConfigValue } from "../../config_storage/actions";
 import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
 import { DevSettings } from "./dev_support";

frontend/account/index.tsx

@@ -10,7 +10,6 @@ import { User } from "../auth/interfaces";
 import { edit, save } from "../api/crud";
 import { updateNO } from "../resources/actions";
 import { deleteUser, resetAccount } from "./actions";
-import { success } from "farmbot-toastr/dist";
 import { LabsFeatures } from "./labs/labs_features";
 import { requestAccountExport } from "./request_account_export";
 import { DevWidget } from "./dev/dev_widget";
@@ -18,6 +17,7 @@ import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
 import { DevMode } from "./dev/dev_mode";
 import { t } from "../i18next_wrapper";
 import { Content } from "../constants";
+import { success } from "../toast/toast";
 
 const KEYS: (keyof User)[] = ["id", "name", "email", "created_at", "updated_at"];
 

frontend/account/request_account_export.ts

@@ -1,6 +1,6 @@
 import { API } from "../api";
 import { Content } from "../constants";
-import { success } from "farmbot-toastr";
+import { success } from "../toast/toast";
 
 import axios, { AxiosResponse } from "axios";
 import { DeviceAccountSettings } from "farmbot/dist/resources/api_resources";

frontend/app.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { init, error } from "farmbot-toastr";
+import { init, error } from "./toast/toast";
 import { NavBar } from "./nav";
 import { Everything, TimeSettings } from "./interfaces";
 import { LoadingPlant } from "./loading_plant";

frontend/connectivity/__tests__/connect_device/index_test.ts

@@ -33,7 +33,6 @@ import { onLogs } from "../../log_handlers";
 import { Actions, Content } from "../../../constants";
 import { Log } from "farmbot/dist/resources/api_resources";
 import { ALLOWED_CHANNEL_NAMES, ALLOWED_MESSAGE_TYPES, Farmbot } from "farmbot";
-import { success, error, info, warning } from "farmbot-toastr";
 import { dispatchNetworkUp, dispatchNetworkDown } from "../../index";
 import { getDevice } from "../../../device";
 import { fakeState } from "../../../__test_support__/fake_state";
@@ -41,6 +40,7 @@ import { talk } from "browser-speech";
 import { globalQueue } from "../../batch_queue";
 import { MessageType } from "../../../sequences/interfaces";
 import { FbjsEventName } from "farmbot/dist/constants";
+import { info, error, success, warning } from "../../../toast/toast";
 
 const A_STRING = expect.any(String);
 describe("readStatus()", () => {

frontend/connectivity/connect_device.ts

@@ -4,7 +4,7 @@ import { Log } from "farmbot/dist/resources/api_resources";
 import { Farmbot, BotStateTree, TaggedResource } from "farmbot";
 import { FbjsEventName } from "farmbot/dist/constants";
 import { noop } from "lodash";
-import { success, error, info, warning } from "farmbot-toastr";
+import { success, error, info, warning } from "../toast/toast";
 import { HardwareState } from "../devices/interfaces";
 import { GetState, ReduxAction } from "../redux/interfaces";
 import { Content, Actions } from "../constants";

frontend/controls/peripherals/__tests__/index_test.tsx

@@ -6,7 +6,7 @@ import { PeripheralsProps } from "../../../devices/interfaces";
 import { fakePeripheral } from "../../../__test_support__/fake_state/resources";
 import { clickButton } from "../../../__test_support__/helpers";
 import { SpecialStatus } from "farmbot";
-import { error } from "farmbot-toastr";
+import { error } from "../../../toast/toast";
 
 describe("<Peripherals />", () => {
   function fakeProps(): PeripheralsProps {

frontend/controls/peripherals/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { PeripheralList } from "./peripheral_list";
 import { PeripheralForm } from "./peripheral_form";
 import { Widget, WidgetBody, WidgetHeader, SaveBtn } from "../../ui/index";

frontend/controls/sensors/__tests__/index_test.tsx

@@ -4,9 +4,9 @@ import { Sensors } from "../index";
 import { bot } from "../../../__test_support__/fake_state/bot";
 import { SensorsProps } from "../../../devices/interfaces";
 import { fakeSensor } from "../../../__test_support__/fake_state/resources";
-import { error } from "farmbot-toastr";
 import { clickButton } from "../../../__test_support__/helpers";
 import { SpecialStatus } from "farmbot";
+import { error } from "../../../toast/toast";
 
 describe("<Sensors />", () => {
   function fakeProps(): SensorsProps {

frontend/controls/sensors/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { SensorList } from "./sensor_list";
 import { SensorForm } from "./sensor_form";
 import { Widget, WidgetBody, WidgetHeader, SaveBtn } from "../../ui/index";

frontend/controls/webcam/index.tsx

@@ -4,7 +4,7 @@ import { Edit } from "./edit";
 import { WebcamPanelProps } from "./interfaces";
 import { TaggedWebcamFeed, SpecialStatus } from "farmbot";
 import { edit, save, destroy, init } from "../../api/crud";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 
 import { WebcamFeed } from "farmbot/dist/resources/api_resources";
 import { t } from "../../i18next_wrapper";

frontend/devices/__tests__/actions_test.ts

@@ -39,7 +39,7 @@ import { Actions } from "../../constants";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import { API } from "../../api/index";
 import axios from "axios";
-import { success, error, warning, info } from "farmbot-toastr";
+import { success, error, warning, info } from "../../toast/toast";
 import { edit, save } from "../../api/crud";
 
 describe("checkControllerUpdates()", function () {

frontend/devices/actions.ts

@@ -1,6 +1,6 @@
 
 import axios from "axios";
-import { success, warning, info, error } from "farmbot-toastr";
+import { success, warning, info, error } from "../toast/toast";
 import { getDevice } from "../device";
 import { Everything } from "../interfaces";
 import {

frontend/devices/components/__tests__/mcu_input_box_test.tsx

@@ -2,11 +2,11 @@ jest.mock("../../actions", () => ({ updateMCU: jest.fn() }));
 
 import * as React from "react";
 import { McuInputBox } from "../mcu_input_box";
-import { warning } from "farmbot-toastr";
 import { shallow } from "enzyme";
 import { McuInputBoxProps } from "../../interfaces";
 import { bot } from "../../../__test_support__/fake_state/bot";
 import { updateMCU } from "../../actions";
+import { warning } from "../../../toast/toast";
 
 describe("McuInputBox", () => {
   const fakeProps = (): McuInputBoxProps => {

frontend/devices/components/fbos_settings/__tests__/camera_selection_test.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import { mount, shallow } from "enzyme";
 import { CameraSelection } from "../camera_selection";
 import { CameraSelectionProps } from "../interfaces";
-import { info, error } from "farmbot-toastr";
+import { info, error } from "../../../../toast/toast";
 
 describe("<CameraSelection/>", () => {
   const fakeProps = (): CameraSelectionProps => {

frontend/devices/components/fbos_settings/board_type.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Row, Col, DropDownItem, FBSelect } from "../../../ui";
-import { info } from "farmbot-toastr";
+import { info } from "../../../toast/toast";
 import { FirmwareHardware } from "farmbot";
 import { ColWidth } from "../farmbot_os_settings";
 import { updateConfig } from "../../actions";

frontend/devices/components/fbos_settings/camera_selection.tsx

@@ -3,7 +3,7 @@ import { DropDownItem, Row, Col, FBSelect } from "../../../ui/index";
 import {
   CameraSelectionProps, CameraSelectionState
 } from "./interfaces";
-import { info, success, error } from "farmbot-toastr";
+import { info, success, error } from "../../../toast/toast";
 import { getDevice } from "../../../device";
 import { ColWidth } from "../farmbot_os_settings";
 import { Feature } from "../../interfaces";

frontend/devices/components/fbos_settings/change_ownership_form.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Row, Col, BlurableInput } from "../../../ui/index";
 
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../../toast/toast";
 import { getDevice } from "../../../device";
 import { transferOwnership } from "../../transfer_ownership/transfer_ownership";
 import { API } from "../../../api";

frontend/devices/components/hardware_settings/__tests__/homing_and_calibration_test.tsx

@@ -10,7 +10,7 @@ import { updateMCU } from "../../../actions";
 import {
   fakeFirmwareConfig
 } from "../../../../__test_support__/fake_state/resources";
-import { warning, error } from "farmbot-toastr";
+import { error, warning } from "../../../../toast/toast";
 
 describe("<HomingAndCalibration />", () => {
   function testAxisLengthInput(

frontend/devices/components/mcu_input_box.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { warning } from "farmbot-toastr";
+import { warning } from "../../toast/toast";
 import { McuInputBoxProps } from "../interfaces";
 import { updateMCU } from "../actions";
 import { BlurableInput } from "../../ui/index";

frontend/devices/pin_bindings/__tests__/pin_binding_input_group_test.tsx

@@ -25,13 +25,13 @@ import {
   PinBindingInputGroup, PinNumberInputGroup, BindingTypeDropDown,
   ActionTargetDropDown, SequenceTargetDropDown
 } from "../pin_binding_input_group";
-import { error, warning } from "farmbot-toastr";
 import {
   fakeResourceIndex
 } from "../../../sequences/locals_list/test_helpers";
 import {
   PinBindingType, PinBindingSpecialAction
 } from "farmbot/dist/resources/api_resources";
+import { error, warning } from "../../../toast/toast";
 
 describe("<PinBindingInputGroup/>", () => {
   function fakeProps(): PinBindingInputGroupProps {

frontend/devices/pin_bindings/__tests__/pin_bindings_list_test.tsx

@@ -36,8 +36,8 @@ import {
 import { destroy } from "../../../api/crud";
 import { PinBindingsList } from "../pin_bindings_list";
 import { PinBindingsListProps } from "../interfaces";
-import { error } from "farmbot-toastr";
 import { sysBtnBindingData } from "../tagged_pin_binding_init";
+import { error } from "../../../toast/toast";
 
 describe("<PinBindingsList/>", () => {
   function fakeProps(): PinBindingsListProps {

frontend/devices/pin_bindings/pin_binding_input_group.tsx

@@ -11,7 +11,7 @@ import {
 import { isNumber, includes } from "lodash";
 import { initSave } from "../../api/crud";
 import { pinBindingBody } from "./tagged_pin_binding_init";
-import { error, warning } from "farmbot-toastr";
+import { error, warning } from "../../toast/toast";
 import {
   validGpioPins, sysBindings, generatePinLabel, RpiPinList,
   bindingTypeLabelLookup, specialActionLabelLookup, specialActionList,

frontend/devices/pin_bindings/pin_bindings_list.tsx

@@ -4,7 +4,7 @@ import {
   generatePinLabel, sortByNameAndPin
 } from "./list_and_label_support";
 import { destroy } from "../../api/crud";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { Row, Col } from "../../ui";
 import { findSequenceById } from "../../resources/selectors";
 import { PinBindingColWidth } from "./pin_bindings";

frontend/devices/transfer_ownership/__tests__/create_transfer_cert_failure_test.ts

@@ -15,8 +15,8 @@ import { getDevice } from "../../../device";
 import {
   submitOwnershipChange
 } from "../../components/fbos_settings/change_ownership_form";
-import { error } from "farmbot-toastr";
 import { API } from "../../../api";
+import { error } from "../../../toast/toast";
 
 API.setBaseUrl("http://foo.bar");
 

frontend/farm_designer/farm_events/__tests__/edit_fe_form_test.tsx

@@ -22,7 +22,6 @@ import {
 import { isString, isFunction } from "lodash";
 import { repeatOptions } from "../map_state_to_props_add_edit";
 import { SpecialStatus, ParameterApplication } from "farmbot";
-import { success, error, warning } from "farmbot-toastr";
 import moment from "moment";
 import { fakeState } from "../../../__test_support__/fake_state";
 import { history } from "../../../history";
@@ -33,6 +32,7 @@ import { fakeVariableNameSet } from "../../../__test_support__/fake_variables";
 import { clickButton } from "../../../__test_support__/helpers";
 import { destroy } from "../../../api/crud";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
+import { error, success, warning } from "../../../toast/toast";
 
 const mockSequence = fakeSequence();
 

frontend/farm_designer/farm_events/edit_fe_form.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import moment from "moment";
-import { success, error, warning } from "farmbot-toastr";
+import { success, error, warning } from "../../toast/toast";
 import {
   TaggedFarmEvent, SpecialStatus, TaggedSequence, TaggedRegimen,
   ParameterApplication

frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.tsx

@@ -29,8 +29,8 @@ import {
   fakeMapTransformProps
 } from "../../../../../__test_support__/map_transform_props";
 import { movePlant } from "../../../../actions";
-import { error } from "farmbot-toastr";
 import { fakeCropLiveSearchResult } from "../../../../../__test_support__/fake_crop_search_result";
+import { error } from "../../../../../toast/toast";
 
 describe("newPlantKindAndBody()", () => {
   it("returns new PlantTemplate", () => {

frontend/farm_designer/map/layers/plants/plant_actions.tsx

@@ -1,4 +1,3 @@
-import { error } from "farmbot-toastr";
 import { Content } from "../../../../constants";
 import { initSave, edit, save } from "../../../../api/crud";
 import {
@@ -15,6 +14,7 @@ import { transformXY, round } from "../../util";
 import { movePlant } from "../../../actions";
 import { cachedCrop } from "../../../../open_farm/cached_crop";
 import { t } from "../../../../i18next_wrapper";
+import { error } from "../../../../toast/toast";
 
 /** Return a new plant or plantTemplate object. */
 export const newPlantKindAndBody = (props: {

frontend/farm_designer/saved_gardens/__tests__/saved_gardens_test.tsx

@@ -27,7 +27,6 @@ import { mount, shallow } from "enzyme";
 import {
   SavedGardens, mapStateToProps, SavedGardensLink, SavedGardenHUD, savedGardenOpen
 } from "../saved_gardens";
-import { error } from "farmbot-toastr";
 import { clickButton } from "../../../__test_support__/helpers";
 import {
   fakePlantTemplate, fakeSavedGarden
@@ -40,6 +39,7 @@ import {
 import { SavedGardensProps } from "../interfaces";
 import { applyGarden, destroySavedGarden, closeSavedGarden } from "../actions";
 import { Actions } from "../../../constants";
+import { error } from "../../../toast/toast";
 
 describe("<SavedGardens />", () => {
   const fakeProps = (): SavedGardensProps => ({

frontend/farm_designer/saved_gardens/actions.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { API } from "../../api";
-import { success, info } from "farmbot-toastr";
+import { success, info } from "../../toast/toast";
 import { history } from "../../history";
 import { Actions } from "../../constants";
 import { destroy, initSave, initSaveGetId } from "../../api/crud";

frontend/farm_designer/saved_gardens/garden_list.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { Row, Col, BlurableInput } from "../../ui";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { isNumber, isString } from "lodash";
 import { openOrCloseGarden, applyGarden, destroySavedGarden } from "./actions";
 import {

frontend/farmware/__tests__/farmware_config_menu_test.tsx

@@ -24,7 +24,7 @@ import { FarmwareConfigMenuProps } from "../interfaces";
 import { getDevice } from "../../device";
 import { toggleWebAppBool } from "../../config_storage/actions";
 import { destroyAll } from "../../api/crud";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../toast/toast";
 import { BooleanSetting } from "../../session_keys";
 
 describe("<FarmwareConfigMenu />", () => {

frontend/farmware/__tests__/farmware_info_test.tsx

@@ -17,7 +17,7 @@ import { destroy } from "../../api/crud";
 import {
   fakeFarmwareInstallation
 } from "../../__test_support__/fake_state/resources";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { retryFetchPackageName } from "../actions";
 
 describe("<FarmwareInfo />", () => {

frontend/farmware/farmware_config_menu.tsx

@@ -4,7 +4,7 @@ import { FarmwareConfigMenuProps } from "./interfaces";
 import { commandErr } from "../devices/actions";
 import { toggleWebAppBool } from "../config_storage/actions";
 import { destroyAll } from "../api/crud";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../toast/toast";
 import { Feature } from "../devices/interfaces";
 import { t } from "../i18next_wrapper";
 import { BooleanSetting } from "../session_keys";

frontend/farmware/farmware_info.tsx

@@ -5,7 +5,7 @@ import { commandErr } from "../devices/actions";
 import { Content } from "../constants";
 import { ShouldDisplay, Feature } from "../devices/interfaces";
 import { destroy } from "../api/crud";
-import { error } from "farmbot-toastr";
+import { error } from "../toast/toast";
 import { isPendingInstallation } from "./state_to_props";
 import { Popover } from "@blueprintjs/core";
 import { retryFetchPackageName } from "./actions";

frontend/farmware/images/__tests__/photos_test.tsx

@@ -13,9 +13,9 @@ import { fakeImages } from "../../../__test_support__/fake_state/images";
 import { destroy } from "../../../api/crud";
 import { clickButton } from "../../../__test_support__/helpers";
 import { PhotosProps } from "../interfaces";
-import { success, error } from "farmbot-toastr";
 import { selectImage } from "../actions";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
+import { success, error } from "../../../toast/toast";
 
 describe("<Photos/>", () => {
   const fakeProps = (): PhotosProps => ({

frontend/farmware/images/photos.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import moment from "moment";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../toast/toast";
 import { ImageFlipper } from "./image_flipper";
 import { PhotosProps, PhotoButtonsProps } from "./interfaces";
 import { getDevice } from "../../device";

frontend/farmware/weed_detector/__tests__/actions_tests.ts

@@ -26,9 +26,9 @@ import { deletePoints } from "../actions";
 import { scanImage, test } from "../actions";
 import axios from "axios";
 import { API } from "../../../api";
-import { success, error } from "farmbot-toastr";
 import { times } from "lodash";
 import { Actions } from "../../../constants";
+import { error, success } from "../../../toast/toast";
 
 describe("scanImage()", () => {
   it("calls out to the device", () => {

frontend/farmware/weed_detector/actions.tsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../toast/toast";
 import { Thunk } from "../../redux/interfaces";
 import { API } from "../../api";
 import { Progress, ProgressCallback, trim } from "../../util";

frontend/front_page/__tests__/create_account_test.tsx

@@ -15,7 +15,7 @@ import {
 } from "../create_account";
 import { shallow } from "enzyme";
 import { BlurableInput } from "../../ui/index";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../toast/toast";
 import { resendEmail } from "../resend_verification";
 import { ResendPanelBody } from "../resend_panel_body";
 import { BlurablePassword } from "../../ui/blurable_password";

frontend/front_page/__tests__/front_page_test.tsx

@@ -32,7 +32,7 @@ import { FrontPage, setField, PartialFormEvent } from "../front_page";
 import axios from "axios";
 import { API } from "../../api";
 import { Session } from "../../session";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../../toast/toast";
 import { Content } from "../../constants";
 import { AuthState } from "../../auth/interfaces";
 import { auth } from "../../__test_support__/fake_state/token";

frontend/front_page/create_account.tsx

@@ -10,7 +10,7 @@ import {
 } from "../ui/index";
 
 import { resendEmail } from "./resend_verification";
-import { success, error } from "farmbot-toastr";
+import { success, error } from "../toast/toast";
 import { bail } from "../util";
 import { ResendPanelBody } from "./resend_panel_body";
 import { BlurablePassword } from "../ui/blurable_password";

frontend/front_page/front_page.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import axios from "axios";
 
-import { error as log, success, init as logInit } from "farmbot-toastr";
+import { error as log, success, init as logInit } from "../toast/toast";
 import { AuthState } from "../auth/interfaces";
 import { prettyPrintApiErrors, attachToRoot } from "../util";
 import { API } from "../api";

frontend/interceptors.ts

@@ -1,9 +1,4 @@
-
-import { error } from "farmbot-toastr";
-import {
-  SafeError,
-  isSafeError
-} from "./interceptor_support";
+import { SafeError, isSafeError } from "./interceptor_support";
 import { API } from "./api/index";
 import { AuthState } from "./auth/interfaces";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
@@ -14,6 +9,7 @@ import { outstandingRequests } from "./connectivity/data_consistency";
 import { Session } from "./session";
 import { get } from "lodash";
 import { t } from "./i18next_wrapper";
+import { error } from "./toast/toast";
 
 export function responseFulfilled(input: AxiosResponse): AxiosResponse {
   dispatchNetworkUp("user.api", undefined, "responseFulfilled()");

frontend/messages/__tests__/actions_test.ts

@@ -15,7 +15,7 @@ jest.mock("../../api/api", () => ({
 
 import axios from "axios";
 import { fetchBulletinContent, seedAccount } from "../actions";
-import { info, error } from "farmbot-toastr";
+import { info, error } from "../../toast/toast";
 
 describe("fetchBulletinContent()", () => {
   it("fetches data", async () => {

frontend/messages/actions.ts

@@ -4,7 +4,7 @@ import { Bulletin } from "./interfaces";
 import { DropDownItem } from "../ui";
 import { UnsafeError } from "../interfaces";
 import { toastErrors } from "../toast_errors";
-import { info } from "farmbot-toastr";
+import { info } from "../toast/toast";
 import { t } from "../i18next_wrapper";
 
 const url = (slug: string) => `${API.current.globalBulletinPath}${slug}`;

frontend/password_reset/password_reset.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import axios from "axios";
-import { error as log, init as logInit } from "farmbot-toastr";
+import { error as log, init as logInit } from "../toast/toast";
 import { prettyPrintApiErrors } from "../util";
 import { API } from "../api";
 import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../ui/index";

frontend/redux/__tests__/upgrade_reminder_test.ts

@@ -1,4 +1,4 @@
-import { info } from "farmbot-toastr";
+import { info } from "../../toast/toast";
 
 describe("createReminderFn", () => {
   it("reminds the user as-needed, but never more than once", async () => {

frontend/redux/upgrade_reminder.ts

@@ -1,4 +1,4 @@
-import { info } from "farmbot-toastr";
+import { info } from "../toast/toast";
 import { semverCompare, SemverResult, MinVersionOverride } from "../util";
 import { Content } from "../constants";
 import { Dictionary } from "lodash";

frontend/regimens/bulk_scheduler/__tests__/actions_test.ts

@@ -14,11 +14,11 @@ import {
 import { Actions } from "../../../constants";
 import { Everything } from "../../../interfaces";
 import { ToggleDayParams } from "../interfaces";
-import { error, warning } from "farmbot-toastr";
 import { newTaggedResource } from "../../../sync/actions";
 import { arrayUnwrap } from "../../../resources/util";
 import { overwrite } from "../../../api/crud";
 import { fakeVariableNameSet } from "../../../__test_support__/fake_variables";
+import { error, warning } from "../../../toast/toast";
 
 const sequence_id = 23;
 const regimen_id = 32;

frontend/regimens/bulk_scheduler/actions.ts

@@ -1,5 +1,5 @@
 import { isNaN, isNumber } from "lodash";
-import { error, warning, success } from "farmbot-toastr";
+import { error, warning, success } from "../../toast/toast";
 import { ReduxAction, Thunk } from "../../redux/interfaces";
 import { ToggleDayParams } from "./interfaces";
 import { findSequence, findRegimen } from "../../resources/selectors";

frontend/resources/selectors_by_kind.ts

@@ -27,7 +27,7 @@ import {
   sanityCheck,
 } from "./tagged_resources";
 import { bail } from "../util";
-import { error } from "farmbot-toastr";
+import { error } from "../toast/toast";
 import { assertUuid } from "./util";
 import { joinKindAndId } from "./reducer_support";
 import { findAll } from "./find_all";

frontend/sequences/__tests__/test_button_test.tsx

@@ -21,7 +21,7 @@ import {
 } from "farmbot";
 import { mount } from "enzyme";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
-import { warning } from "farmbot-toastr";
+import { warning } from "../../toast/toast";
 import { fakeVariableNameSet } from "../../__test_support__/fake_variables";
 import { SequenceMeta } from "../../resources/sequence_meta";
 import { clickButton } from "../../__test_support__/helpers";

frontend/sequences/step_buttons/__tests__/index_test.tsx

@@ -4,7 +4,7 @@ import { StepButton, stepClick } from "../index";
 import { shallow } from "enzyme";
 import { fakeSequence } from "../../../__test_support__/fake_state/resources";
 import { Actions } from "../../../constants";
-import { error } from "farmbot-toastr";
+import { error } from "../../../toast/toast";
 
 function props(): StepButtonParams {
   return {

frontend/sequences/step_buttons/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { SequenceBodyItem as Step, TaggedSequence } from "farmbot";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 import { StepDragger, NULL_DRAGGER_ID } from "../../draggable/step_dragger";
 import { pushStep, closeCommandMenu } from "../actions";
 import { StepButtonParams } from "../interfaces";

frontend/sequences/test_button.tsx

@@ -12,9 +12,9 @@ import {
 } from "./locals_list/variable_support";
 import { ResourceIndex, VariableNameSet, UUID } from "../resources/interfaces";
 import { ShouldDisplay } from "../devices/interfaces";
-import { warning } from "farmbot-toastr";
 import { Actions } from "../constants";
 import { t } from "../i18next_wrapper";
+import { warning } from "../toast/toast";
 
 /** Can't test without saving and syncing sequence. */
 const saveAndSyncWarning = () =>

frontend/toast/toast.tsx

@@ -0,0 +1,214 @@
+/**
+ * Warnings and errors fire once, to avoid bombarding the user with repetition.
+ * Eg: "Can"t connect to server!" might get repetitive.
+ */
+const messageQueue: string[] = [];
+
+/**
+ * The function responsible for attaching the messages to the container.
+ */
+const createToast = (message: string, title: string, color: string) => {
+
+  /**
+   * Container element for all of the messages created from init().
+   */
+  const tc = document.querySelector(".toast-container");
+
+  if (!tc) {
+    /**
+     * If there's no container created from the init() function, throw an error.
+     */
+    throw new Error("toast-container is null.");
+  } else {
+
+    /**
+     * Amount of time before each element is removed.
+     */
+    let timer = 7;
+
+    /**
+     * Declare if the user's mouse is hovering over the message.
+     */
+    let isHovered = false;
+
+    /**
+     * Create elements.
+     */
+    const toastEl = document.createElement("div");
+    const titleEl = document.createElement("h4");
+    const messageEl = document.createElement("div");
+    const loaderEl = document.createElement("div");
+    const leftLoaderEl = document.createElement("div");
+    const rightLoaderEl = document.createElement("div");
+    const spinnerLoaderEl = document.createElement("div");
+
+    /**
+     * Fill contents.
+     */
+    titleEl.innerText = title;
+    messageEl.innerText = message;
+
+    /**
+     * Add classes.
+     */
+    toastEl.classList.add("toast");
+    toastEl.classList.add(color);
+    titleEl.classList.add("toast-title");
+    messageEl.classList.add("toast-message");
+    loaderEl.classList.add("toast-loader");
+    leftLoaderEl.classList.add("toast-loader-left");
+    leftLoaderEl.classList.add(color);
+    rightLoaderEl.classList.add("toast-loader-right");
+    spinnerLoaderEl.classList.add("toast-loader-spinner");
+
+    /**
+     * Click (makes the message go away entirely).
+     */
+    toastEl.addEventListener("click", e => {
+      (e.currentTarget as Element).classList.add("poof");
+      setTimeout(() => {
+        if (!tc) {
+          throw (Error("toast-container is null."));
+        } else {
+          tc.removeChild(toastEl);
+          const index = messageQueue.indexOf(message);
+          messageQueue.splice(index, 1);
+        }
+      }, 200);
+    });
+
+    /**
+     * MouseEnter (pauses the timer).
+     */
+    toastEl.addEventListener("mouseenter", e => {
+      const children = (e.currentTarget as HTMLElement).children[2].children;
+      for (let i = 0; i < children.length; i++) {
+        (children[i] as HTMLElement).style.animationPlayState = "paused";
+      }
+      isHovered = true;
+    });
+
+    /**
+     * MouseLeave (resumes the timer).
+     */
+    toastEl.addEventListener("mouseleave", e => {
+      const children = (e.currentTarget as HTMLElement).children[2].children;
+      for (let i = 0; i < children.length; i++) {
+        (children[i] as HTMLElement).style.animationPlayState = "running";
+      }
+      isHovered = false;
+    });
+
+    /**
+     * Append children.
+     */
+    loaderEl.appendChild(leftLoaderEl);
+    loaderEl.appendChild(rightLoaderEl);
+    loaderEl.appendChild(spinnerLoaderEl);
+    toastEl.appendChild(titleEl);
+    toastEl.appendChild(messageEl);
+    toastEl.appendChild(loaderEl);
+    tc.appendChild(toastEl);
+
+    /**
+     * Start timer.
+     */
+    const interval = setInterval(() => {
+      if (timer <= 7) {
+        toastEl.classList.add("active");
+      }
+      if (!isHovered && timer <= .800) {
+        toastEl.classList.add("poof");
+      }
+      if (!isHovered) {
+        timer -= 0.100;
+        if (timer <= 0) {
+          clearInterval(interval);
+          if (toastEl && toastEl.parentNode === tc) {
+            if (!tc) {
+              throw (Error("toast-container is null."));
+            } else {
+              tc.removeChild(toastEl);
+              const index = messageQueue.indexOf(message);
+              messageQueue.splice(index, 1);
+            }
+          }
+        }
+      }
+    }, 100);
+  }
+};
+
+/**
+ * Yellow message with "Warning" as the default title.
+ */
+export const warning = (
+  message: string,
+  title = "Warning",
+  color = "yellow"
+) => {
+  if (messageQueue.indexOf(message) > -1) {
+    console.warn(message);
+  } else {
+    createToast(message, title, color);
+    messageQueue.push(message);
+  }
+};
+
+/**
+ *  Red message with "Error" as the default title.
+ */
+export const error = (
+  message: string,
+  title = "Error",
+  color = "red"
+) => {
+  if (messageQueue.indexOf(message) > -1) {
+    console.error(message);
+  } else {
+    createToast(message, title, color);
+    messageQueue.push(message);
+  }
+};
+
+/**
+ *  Green message with "Success" as the default title.
+ */
+export const success = (
+  message: string,
+  title = "Success",
+  color = "green"
+) => {
+  createToast(message, title, color);
+};
+
+/**
+ *  Red message with "FYI" as the default title.
+ */
+export const info = (
+  message: string,
+  title = "FYI",
+  color = "blue"
+) => {
+  createToast(message, title, color);
+};
+
+/**
+ *  Blue message with "Did you know?" as the default title.
+ */
+export const fun = (
+  message: string,
+  title = "Did you know?",
+  color = "dark-blue"
+) => {
+  createToast(message, title, color);
+};
+
+/**
+ *  Adds a hidden container div for holding toast messages.
+ */
+export const init = () => {
+  const toastContainer = document.createElement("div");
+  toastContainer.classList.add("toast-container");
+  document.body.appendChild(toastContainer);
+};

frontend/toast_errors.ts

@@ -1,6 +1,6 @@
 import { UnsafeError } from "./interfaces";
-import { error } from "farmbot-toastr";
 import { prettyPrintApiErrors } from "./util";
+import { error } from "./toast/toast";
 
 export function toastErrors({ err }: UnsafeError) {
   return error(prettyPrintApiErrors(err));

frontend/tos_update/__tests__/component_test.tsx

@@ -14,7 +14,7 @@ import { shallow, mount } from "enzyme";
 import axios from "axios";
 import { API } from "../../api/index";
 import { Session } from "../../session";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 
 type E = React.FormEvent<HTMLInputElement>;
 

frontend/tos_update/component.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import axios from "axios";
 
-import { fun as log, error as logError, init as logInit } from "farmbot-toastr";
+import { fun as log, error as logError, init as logInit } from "../toast/toast";
 import { AuthState } from "../auth/interfaces";
 import { Session } from "../session";
 import { prettyPrintApiErrors } from "../util";

frontend/ui/__tests__/blurable_input_test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { shallow } from "enzyme";
 import { BlurableInput, BIProps } from "../blurable_input";
-import { error } from "farmbot-toastr";
+import { error } from "../../toast/toast";
 
 describe("<BlurableInput />", () => {
   const fakeProps = (): BIProps => {

frontend/ui/blurable_input.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { equals, parseIntInput } from "../util";
 import { isNumber } from "lodash";
-import { error } from "farmbot-toastr";
 
 import { InputError } from "./input_error";
 import { t } from "../i18next_wrapper";
+import { error } from "../toast/toast";
 
 export interface BIProps {
   value: string | number;

package.json

@@ -44,7 +44,6 @@
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
     "farmbot": "8.0.1-rc8",
-    "farmbot-toastr": "1.0.3",
     "i18next": "17.0.4",
     "jest": "24.8.0",
     "jest-cli": "24.8.0",