From 13a8e7d11e0a3f6f5b20c14238500917747e9cd2 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Mon, 6 Dec 2021 10:54:42 +0000 Subject: [PATCH] add key change to frontend --- frontend/src/components/NewDashboard.js | 751 +++++++++--------- .../core/providers/OverlayProvider/index.js | 47 +- 2 files changed, 411 insertions(+), 387 deletions(-) diff --git a/frontend/src/components/NewDashboard.js b/frontend/src/components/NewDashboard.js index 840fb26c..12a3c4a7 100644 --- a/frontend/src/components/NewDashboard.js +++ b/frontend/src/components/NewDashboard.js @@ -36,7 +36,7 @@ const NewDashboard = (props) => { "new_dashboard", { name: "", - subscriptions: [ + subscription_settings: [ { label: "", abi: false, @@ -62,11 +62,11 @@ const NewDashboard = (props) => { const subscriptions = useSubscriptions(); const [pickerItems, setPickerItems] = React.useState( - subscriptions.subscriptionsCache.data?.subscriptions + subscriptions.subscriptionsCache?.data?.subscriptions ); useEffect(() => { - newDashboardForm.subscriptions.forEach((element, idx) => { + newDashboardForm.subscription_settings.forEach((element, idx) => { const subscription = subscriptions.subscriptionsCache.data?.subscriptions.find( (subscription_item) => @@ -76,10 +76,10 @@ const NewDashboard = (props) => { if ( element.subscription_id && subscription && - newDashboardForm.subscriptions[idx].abi !== subscription?.abi + newDashboardForm.subscription_settings[idx].abi !== subscription?.abi ) { const newestDashboardForm = { ...newDashboardForm }; - newestDashboardForm.subscriptions[idx].abi = subscription.abi; + newestDashboardForm.subscription_settings[idx].abi = subscription.abi; setNewDashboardForm(newestDashboardForm); } }); @@ -110,6 +110,8 @@ const NewDashboard = (props) => { item.address.toUpperCase().includes(inputValue.toUpperCase()) || item.label.toUpperCase().includes(inputValue.toUpperCase())); + console.log("dbg", newDashboardForm); + return ( <> @@ -187,379 +189,400 @@ const NewDashboard = (props) => { - {newDashboardForm?.subscriptions.map((subscibedItem, idx) => { - return ( - - - {!subscriptions.subscriptionsCache.isLoading && - subscriptions.subscriptionsCache.data && - pickerItems && ( - <> - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx] = { - label: selectedItem.label, - address: selectedItem.address, - subscription_id: selectedItem.id, - abi: selectedItem.abi, - isMethods: false, - isEvents: false, - generic: { - transactions: { - in: false, - out: false, + {newDashboardForm?.subscription_settings.map( + (subscibedItem, idx) => { + return ( + + + {!subscriptions.subscriptionsCache.isLoading && + subscriptions.subscriptionsCache.data && + pickerItems && ( + <> + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[idx] = { + label: selectedItem.label, + address: selectedItem.address, + subscription_id: selectedItem.id, + abi: selectedItem.abi, + isMethods: false, + isEvents: false, + generic: { + transactions: { + in: false, + out: false, + }, + value: { + in: false, + out: false, + balance: false, + }, }, - value: { - in: false, - out: false, - balance: false, - }, - }, - }; - setNewDashboardForm(newState); - }} - itemToString={(item) => (item ? item.label : "")} - initialSelectedItem={subscibedItem ?? undefined} - > - {({ - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - getToggleButtonProps, - isOpen, - inputValue, - highlightedIndex, - getRootProps, - }) => { - const labelColor = - subscibedItem.color && - color(`${subscibedItem.color}`); - return ( - - - - - {`#${idx}:`} - - - - - {" "} - - - - - {isOpen ? ( - + item ? item.label : "" + } + initialSelectedItem={subscibedItem ?? undefined} + > + {({ + getInputProps, + getItemProps, + getLabelProps, + getMenuProps, + getToggleButtonProps, + isOpen, + inputValue, + highlightedIndex, + getRootProps, + }) => { + const labelColor = + subscibedItem.color && + color(`${subscibedItem.color}`); + return ( + + - {pickerItems && - pickerItems.filter((item) => - filterFn(item, inputValue) - ).length === 0 && ( + + + {`#${idx}:`} + + + + + {" "} + + + + + {isOpen ? ( + + {pickerItems && + pickerItems.filter((item) => + filterFn(item, inputValue) + ).length === 0 && ( + + )} + {pickerItems && + pickerItems + .filter((item) => + filterFn(item, inputValue) + ) + .map((item, index) => { + const badgeColor = color( + `${item.color}` + ); + + return ( + + + {item.label} + + + ABI + + + {item.address} + + + ); + })} + {inputValue === "" && ( )} - {pickerItems && - pickerItems - .filter((item) => - filterFn(item, inputValue) - ) - .map((item, index) => { - const badgeColor = color( - `${item.color}` - ); - - return ( - - - {item.label} - - - ABI - - - {item.address} - - - ); - })} - {inputValue === "" && ( - - )} - - ) : null} - {/* */} - - ); - }} - - + + ) : null} + {/* */} + + ); + }} + + + )} + + + {subscibedItem.abi && subscibedItem.address && ( + )} - - - {subscibedItem.abi && subscibedItem.address && ( - - )} - {!subscibedItem.abi && ( - - )} - + {!subscibedItem.abi && ( + + )} + - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx] = { - ...newState.subscriptions[idx], - isMethods: !newState.subscriptions[idx].isMethods, - }; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.isMethods} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx] = { - ...newState.subscriptions[idx], - isEvents: !newState.subscriptions[idx].isEvents, - }; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.isEvents} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx].generic.transactions.in = - !newState.subscriptions[idx].generic.transactions - .in; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.generic.transactions.in} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx].generic.transactions.out = - !newState.subscriptions[idx].generic.transactions - .out; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.generic.transactions.out} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx].generic.value.in = - !newState.subscriptions[idx].generic.value.in; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.generic.value.in} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx].generic.value.out = - !newState.subscriptions[idx].generic.value.out; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.generic.value.out} - > - - - { - const newState = { ...newDashboardForm }; - newState.subscriptions[idx].generic.balance = - !newState.subscriptions[idx].generic.balance; - setNewDashboardForm(newState); - }} - isChecked={subscibedItem.generic.balance} - > - - - - {idx > 0 && ( - { - const hardcopy = [ - ...newDashboardForm?.subscriptions, - ]; - hardcopy.splice(idx, 1); - setNewDashboardForm((prevState) => { - return { - ...prevState, - subscriptions: [...hardcopy], - }; - }); + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[idx] = { + ...newState.subscription_settings[idx], + isMethods: + !newState.subscription_settings[idx].isMethods, + }; + setNewDashboardForm(newState); }} - /> - )} - - - ); - })} + isChecked={subscibedItem.isMethods} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[idx] = { + ...newState.subscription_settings[idx], + isEvents: + !newState.subscription_settings[idx].isEvents, + }; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.isEvents} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[ + idx + ].generic.transactions.in = + !newState.subscription_settings[idx].generic + .transactions.in; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.generic.transactions.in} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[ + idx + ].generic.transactions.out = + !newState.subscription_settings[idx].generic + .transactions.out; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.generic.transactions.out} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[ + idx + ].generic.value.in = + !newState.subscription_settings[idx].generic.value + .in; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.generic.value.in} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[ + idx + ].generic.value.out = + !newState.subscription_settings[idx].generic.value + .out; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.generic.value.out} + > + + + { + const newState = { ...newDashboardForm }; + newState.subscription_settings[ + idx + ].generic.balance = + !newState.subscription_settings[idx].generic + .balance; + setNewDashboardForm(newState); + }} + isChecked={subscibedItem.generic.balance} + > + + + + {idx > 0 && ( + { + const hardcopy = [ + ...newDashboardForm?.subscription_settings, + ]; + hardcopy.splice(idx, 1); + setNewDashboardForm((prevState) => { + return { + ...prevState, + subscriptions: [...hardcopy], + }; + }); + }} + /> + )} + + + ); + } + )}
@@ -572,7 +595,7 @@ const NewDashboard = (props) => { _active={{ textDecor: "none" }} onClick={() => { const newState = { ...newDashboardForm }; - newState.subscriptions.push({ + newState.subscription_settings.push({ label: "", abi: false, subscription_id: null, diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js index 253671c3..4f4c7e39 100644 --- a/frontend/src/core/providers/OverlayProvider/index.js +++ b/frontend/src/core/providers/OverlayProvider/index.js @@ -258,31 +258,32 @@ const OverlayProvider = ({ children }) => { ); createDashboard.mutate({ name: dashboardState.name, - subscriptions: dashboardState.subscriptions.map( - (pickedSubscription) => { - const retval = { - subscription_id: pickedSubscription.subscription_id, - generic: [], - all_methods: !!pickedSubscription.isMethods, - all_events: !!pickedSubscription.isEvents, - }; + subscription_settings: + dashboardState.subscription_settings.map( + (pickedSubscription) => { + const retval = { + subscription_id: pickedSubscription.subscription_id, + generic: [], + all_methods: !!pickedSubscription.isMethods, + all_events: !!pickedSubscription.isEvents, + }; - pickedSubscription.generic.transactions.in && - retval.generic.push({ name: "transactions_in" }); - pickedSubscription.generic.transactions.out && - retval.generic.push({ name: "transactions_out" }); - pickedSubscription.generic.value.in && - retval.generic.push({ name: "value_in" }); - pickedSubscription.generic.value.out && - retval.generic.push({ name: "value_out" }); - pickedSubscription.generic.balance && - retval.generic.push({ name: "balance" }); - retval["methods"] = []; - retval["events"] = []; + pickedSubscription.generic.transactions.in && + retval.generic.push({ name: "transactions_in" }); + pickedSubscription.generic.transactions.out && + retval.generic.push({ name: "transactions_out" }); + pickedSubscription.generic.value.in && + retval.generic.push({ name: "value_in" }); + pickedSubscription.generic.value.out && + retval.generic.push({ name: "value_out" }); + pickedSubscription.generic.balance && + retval.generic.push({ name: "balance" }); + retval["methods"] = []; + retval["events"] = []; - return retval; - } - ), + return retval; + } + ), }); }} >