We Keep Coding

how to make proper default props with single objects

I have this code:
const setup = (props: SchemaModalProps = { isOpen: false, onClose: () => { }, row: {}, onSchemaChange: () => { }, updateSchema: () => { }, hasPermission: false }) => {
const wrapper: any = mount(<SchemaModal {...props} />);
const driver = new SchemaModalDriver(wrapper);
return driver;
};
and when I call the setup function I need to specify the inner object items like so:
const driver = setup({ isOpen: true, row: someTriggerConfiguration, onClose: () => { }, onSchemaChange: () => { }, updateSchema: () => { }, hasPermission: true });
how can I rewrite the code in such a way that if I do setup({isOpen:false}) it will only overwrite the isOpen and not the rest of them ( use their default values).

You can destructure the props object and declare the function like below:
const setup = ({
isOpen = false,
onClose = () => {},
row = {},
onSchemaChange = () => {},
updateSchema = () => {},
hasPermission = false
}: SchemaModalProps) => {
/**
* Your code
*/
return <></>;
};
Now setup({isOpen:false}) will only override the isOpen property.

You can use Object.assign() to combine two objects. This way only supplied new values will override default.
const setup = (props: SchemaModalProps) =>
{
SchemaModalProps = Object.assign({
isOpen: false,
onClose: () => { },
row: {},
onSchemaChange: () => { },
updateSchema: () => { },
hasPermission: false
}, SchemaModalProps || {});
const wrapper: any = mount(<SchemaModal {...props} />);
const driver = new SchemaModalDriver(wrapper);
return driver;
};

Based on previous questions I found this to work best:
const setup = ({ isOpen = false, onClose = () => { }, row = {}, onInfoChange = () => { }, hasPermission = false }) => {
const props: TriggerInfoModalProps = { isOpen, onClose, row, onInfoChange, hasPermission }
const wrapper: any = mount(<TriggerInfoModal {...props} />);
const driver = new TriggerInfoModalDriver(wrapper);
return driver;
};

Update tvWidget in charting component using hooks

I am adding the tradingview charting library into my project and am having troubles getting the chart to re-render when I change the selected symbol.
When the chart loads initially it was calling a componentDidMount to submit parameters to their chart component which returns the chart. This is the charting component and I have a list of securities beside it that update redux state for symbol when clicked.
what I want to do is force the chart to update when the state changes so the correct symbol is displayed.
It is the same issue mentioned in this question, but I'm using hooks instead of class based components and when I try to use useEffect as componentDidUpdate I am getting symbol undefined.
Update:: in other question they said to use something like this in componentDidUpdate
this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name)
but I cannot figure out how to do something similar with hooks
charting.js
export function TVChartContainer(props) {
const [symbol, setSymbol] = useState(props.symbol);
const tvWidget = null;
useEffect(() => {
setSymbol(props.symbol)
}, [props.symbol])
const componentDidMount = () => {
// setSymbol(props.symbol)
const widgetOptions = {
symbol: symbol,
//symbol: 'BTC/USDT',
//symbol: 'BTC/USD', //getUrlVars()["symbol"],
datafeed: Datafeed,
container_id: 'tv_chart_container',
library_path: '/charting_library/',
locale: getLanguageFromURL() || 'en',
disabled_features: ['use_localstorage_for_settings'],
enabled_features: ['study_templates'],
charts_storage_url: props.chartsStorageUrl,
charts_storage_api_version: props.chartsStorageApiVersion,
fullscreen: false,
autosize: true,
width: '100%',
timezone: 'America/New_York',
client_id: 'Hubcap',
user_id: 'public_user_id',
auto_save_delay: 10,
theme: 'Light',
loading_screen: { backgroundColor: '#222222', foregroundColor: '#229712' },
custom_indicators_getter: indicators,
};
const tvWidget = new widget(widgetOptions);
// tvWidget = tvWidget;
const thisComponent = props;
tvWidget.onChartReady(() => {
tvWidget.headerReady().then(() => {
const button = tvWidget.createButton();
button.setAttribute('title', 'Click to show a notification popup');
button.classList.add('apply-common-tooltip');
button.addEventListener('click', () =>
tvWidget.showNoticeDialog({
title: 'Notification',
body: 'TradingView Charting Library API works correctly',
callback: () => {
console.log('Noticed!');
},
})
);
button.innerHTML = '';
// thisComponent.getPattern(); //might need to uncomment later
tvWidget
.chart()
.onIntervalChanged()
.subscribe(null, function (interval, obj) {
console.log('On interval change');
thisComponent.getPattern();
});
tvWidget
.chart()
.onSymbolChanged()
.subscribe(null, function (symbolData) {
console.log('Symbol change ' + symbolData);
// thisComponent.getPattern();
});
// tvWidget.chart().createStudy('Strange Indicator', false, true);
// tvWidget.chart().createStudy('ESS Indicator', false, true);
// tvWidget.chart().createStudy('ESL Indicator', false, true);
// tvWidget.chart().createStudy('EPS Indicator', false, true);
// tvWidget.chart().createStudy('EPL Indicator', false, true);
// tvWidget.chart().createStudy('ETS Indicator', false, true);
// tvWidget.chart().createStudy('ETL Indicator', false, true);
});
});
};
const componentWillUnmount = () => {
if (tvWidget !== null) {
tvWidget.remove();
tvWidget = null;
}
};
// useEffect(() => {
// componentDidMount();
// // getPattern();
// // drawPattern();
// // // removeAllShape();
// return () => {
// componentWillUnmount();
// }
// }, [symbol])
useEffect(() => {
setSymbol(props.symbol)
componentDidMount();
// getPattern();
// drawPattern();
// // removeAllShape();
return () => {
componentWillUnmount();
}
}, []);
return <div id="tv_chart_container" className={'TVChartContainer'} />;
main page componenet
const TestPage = ({selected}) => {
const [symbol, setSymbol] = useState('AAPL');
useEffect(() => {
setSymbol(selected)
}, [selected])
return (
<div>
<TVChartContainer symbol={symbol} />
</div>
);
}
const mapStateToProps = (state) => {
return {
selected: state.Watchlist.stock.selected,
}
}
export default connect(mapStateToProps)(TestPage)
watchlist
const Security = ({index, name, stocks, selected}) => {
const dispatch = useDispatch();
const [taskName, setTaskName] =useState(name)
const [prevState, setPrevState] = useState(stocks)
const removeTask = (e) => {
e.stopPropagation()
setPrevState(stocks)
dispatch(removeStock(index))
}
const selectAStock = () => {
dispatch(stockSelected(name))
}
useEffect(() => {
setPrevState(stocks)
}, [])
useEffect(() => {
if(prevState !== stocks) dispatch(updateWatchlist(stocks, selected))
}, [stocks])
return (
<Row className="list-group-item">
<div className="item-titles" onClick={() => selectAStock()}>
{name}
</div>
<button onClick={(e) => removeTask(e)} className="remove-item">
<i className="glyphicon glyphicon-remove"></i>
</button>
</Row>
);
}
const mapStateToProps = (state) => {
return {
stocks: state.Watchlist.stock.watchlist,
}
}
export default connect(mapStateToProps, {removeStock, updateWatchlist, stockSelected})(Security);

this.tvWidget?.setSymbol("BINANCE", "5" as ResolutionString, () => null)
The setSymbol accept 3 parameters.
(symbol: string, interval: ResolutionString, callback: EmptyCallback): void
Symbol: which is a string
Interval: which is of type ResolutionString. ("5" as ResolutionString) use the 'as' to prevent error)
callback: just an empty callback
on componentDidUpdate() you can update the tradingView Widget with the following parameters.

Generate random object

I have someone who is responsible for opening / closing the window, I am trying to have one of the three gifts displayed randomly when opened. While there is no progress, how can I do this.
I understand that I need to do this through state.random, but now I don’t understand how. Apparently I'm completely blond ))))
// start open box
var TOGGLE_BOX = '[GiftBox] Toggle';
var toggleBox = function () {
return { type: TOGGLE_BOX };
};
//REDUCERS (Update)
var DEFAULT = { open: false, wasOpen: false };
var reducer = function (state, action) {
if (state === void 0) {state = DEFAULT;}
switch (action.type) {
case TOGGLE_BOX:{
return {
open: state.open ? false : true,
wasOpen: state.open };
}
default:return state;}
};
var store = Redux.createStore(reducer, DEFAULT);
var mapStateToProps = function (state) {
return { open: state.open, wasOpen: state.wasOpen };
};
var mapDispatchToProps = function (dispatch) {
return { dispatch: dispatch };
};
var cGiftBox = function (_a) {
var wasOpen = _a.wasOpen,open = _a.open,dispatch = _a.dispatch;
return React.createElement("div", { className: "floor" },
React.createElement("div", { className: "box" },
open ?
React.createElement("button", { className: "heart-gift", }, "gift1") :
React.createElement(React.Fragment, null),
React.createElement("div", { className: open ?
'lid open' :
wasOpen ?
'lid close' :
'lid', onClick: function (e) {return dispatch(toggleBox());} },
React.createElement("div", { className: "qcube" }, open ? '!' : '?'),
React.createElement("div", { className: "face ltop" }),
React.createElement("div", { className: "face lleft" }),
React.createElement("div", { className: "face lright" })),
React.createElement("div", { className: "face top" }),
React.createElement("div", { className: "face left" }),
React.createElement("div", { className: "face right" }),
));
};
// connect and render
var Provider = ReactRedux.Provider,connect = ReactRedux.connect;
var GiftBox = connect(mapStateToProps, mapDispatchToProps)(cGiftBox);
ReactDOM.render(React.createElement(Provider, { store: store },
React.createElement(GiftBox, null)), document.getElementById('root'));

Create React SyntheticEvent to hide/show div onClick and onTouchEnd?

I have a notification component that looks like this:
When I click the bell button, a notification container pops up, like so:
I have the functionality set up so that when a user clicks or touches outside of the notification container, the box closes. However, I do not want to add events to the DOM directly. I'd much rather take advantage of React's SyntheticEvent wrapper. Does anyone know how I could use SyntheticEvent, instead of the DOM events I currently have?
Here is my code so far:
import React from 'react';
import { PropTypes } from 'prop-types';
import './Notification.scss';
export default class Notification extends React.Component {
constructor(props) {
super(props);
this.setNotificationWrapper = this.setNotificationWrapper.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
this.state = {
visible: false,
hasNotifications: false,
expanded: false,
};
this.toggleNotificationContainer = this.toggleNotificationContainer
.bind(this);
}
componentDidMount() {
document.addEventListener('touchend', this.handleClickOutside);
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('touchend', this.handleClickOutside);
document.removeEventListener('mousedown', this.handleClickOutside);
}
setNotificationWrapper(node) {
this.notificationWrapper = node;
}
handleClickOutside(event) {
if (this.notificationWrapper &&
!this.notificationWrapper.contains(event.target)) {
this.toggleNotificationContainer();
event.preventDefault();
}
}
toggleNotificationContainer() {
this.setState({
visible: !this.state.visible,
hasNotifications: this.state.hasNotifications,
expanded: !this.state.expanded,
});
}
createNotificationItems(option, index) {
this.state.hasNotifications = true;
return (
<li
key={index}
value={index}
>
{option.label}
</li>
);
}
render() {
// set up the details to show in the list.
let notificationOptions = null;
let optionCount = 0;
let toggleDivDetails = null;
let buttonStyleName = '';
let buttonText = null;
if (this.props.notificationButtonIcon) {
buttonStyleName = 'notificationButton';
} else {
buttonText = this.props.notificationButtonText;
buttonStyleName = 'notificationButtonWithText';
}
toggleDivDetails = (
<button
onClick={this.toggleNotificationContainer}
styleName={this.state.expanded ? 'expanded' : buttonStyleName}
disabled={this.state.expanded}
>
{buttonText}
</button>
);
if (this.props.options) {
optionCount = this.props.options.length;
notificationOptions = this.props.options.map((option, index) =>
this.createNotificationItems(option, index));
}
if (optionCount === 0) {
this.state.hasNotifications = false;
}
return (
<div styleName="notificationBar">
{toggleDivDetails}
<span
styleName={
this.state.hasNotifications ? 'notificationCount' : 'hidden'
}
>
{optionCount}
</span>
{
this.state.visible &&
<div
styleName="notificationContainer"
ref={this.setNotificationWrapper}
>
<h3 styleName="notificationHeading">Notifications</h3>
<h4 styleName="notificationSubHeading">
{optionCount} notifications
</h4>
<ul styleName="notificationList">
{notificationOptions}
</ul>
</div>
}
</div>
);
}
}
Notification.propTypes = {
options: PropTypes.arrayOf(PropTypes.object),
notificationButtonIcon: PropTypes.bool.isRequired,
notificationButtonText: PropTypes.string.isRequired,
};
Notification.defaultProps = {
options: [],
NotificationButtonIcon: true,
notificationButtonText: 'Toggle Notifications',
};

setState after windows resize error with react. Trying to pass dynamic width as props

Trying to calculate width of my scatterplot on the fly so I can pass it as props to my d3 component. I'm having no problem console logging in the handleResize function that is being called by window.addEventListener('resize', this.handleResize) in my ComponentDidMount but I can't setState in the handleResize function or seem to access anything outside of it. I've also tried var self = this; to rebind it but am still getting either a this.setState is not a function or self.setState is not a function.
import React, { PropTypes, Component } from 'react';
import { getDataRange, getTeams, getFile, getAllHitsData, getPlayers} from 'api/index.js';
import {Table, Thead, Th, Tr, Td} from 'components/Reactable';
import Autosuggest from 'react-autosuggest';
import { Link } from 'react-router';
import ScatterChart from 'components/scatterchart';
import DashboardStats from 'components/dashboard-stats';
import DateRangeComponent from 'components/date-range';
import AdminSquare from 'components/admin-square';
import { connect } from 'react-redux';
import { changeStartDate, changeEndDate } from '../../redux/modules/redux-date-change';
import { sendHitData } from '../../redux/modules/send-hit.js';
import { Loading } from 'react-loading';
let allHitDatas = [];
let hitDatas = [];
let teams = [];
// let selectedTeamID = null;
// let selectedTeamName = 'all_teams';
let newFile = '';
// let teamId = '';
let players = [];
let width;
class Dashboard extends Component {
static propTypes = {
team: PropTypes.object.isRequired,
startDate: PropTypes.string.isRequired,
endDate: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired
};
static contextTypes = {
router: PropTypes.object
};
constructor(props, context) {
super(props, context);
this.state = {
showRangePicker: false,
hitDatas: [],
teams: [],
start: "",
end: "",
team: this.props.team,
selectedTeamID: null,
selectedTeamName: "",
newFileConfirmation: false,
players: [],
allHitDatas: [],
suggestions: this.getSuggestions(''),
selected: '',
showDatePickerControls: false,
// maxHic: 0
// showScatterPlot: true
};
this.onChange = this.onChange.bind(this);
this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this);
}
componentWillReceiveProps() {
this.setState({
maxHic: 0,
team: this.props.team,
selectedTeamID: this.props.team.id,
startDate: this.props.startDate,
endDate: this.props.endDate
// allHitDatas: []
}, () => {
// this.getDomains();
this.dataChangeHelper();
return this.state;
});
}
componentDidMount() {
this.dataChangeHelper();
window.addEventListener('resize', this.handleResize);
getTeams().then((response) => {
teams = response.data;
this.setState({teams: teams});
});
getPlayers().then((response) => {
players = response.data;
this.setState({
players: players
}, () => {
return this.state;
});
});
}
getDomains() {
let dates = [];
let hicArray = [];
console.log(this.state.allHitDatas);
if (this.state.allHitDatas.length === 0) {
return allHitDatas.map((hitData) => {
let date = Date.parse(hitData.EventTime);
dates.push(date);
hicArray.push(hitData.Hic);
let maxDate = Math.max.apply(null, dates);
let maxHic = 0;
let minDate = Math.min.apply(null, dates);
let minHic = 0;
this.setState({
minDate: minDate,
maxDate: maxDate,
minHic: minHic,
maxHic: maxHic
}, () => {
console.log(this.state.maxHic);
return this.state;
});
});
}
return this.state.allHitDatas.map((hitData) => {
let date = Date.parse(hitData.EventTime);
dates.push(date);
hicArray.push(hitData.Hic);
let maxDate = Math.max.apply(null, dates);
let maxHic = Math.max.apply(null, hicArray);
let minDate = Math.min.apply(null, dates);
let minHic = Math.min.apply(null, hicArray);
this.setState({
minDate: minDate,
maxDate: maxDate,
minHic: minHic,
maxHic: maxHic
}, () => {
console.log(this.state.maxHic)
return this.state;
});
});
}
dataChangeHelper() {
const newConfig = {
start: this.props.startDate,
end: this.props.endDate,
team: this.props.team.id
};
getDataRange(newConfig)
.then((response) => {
hitDatas = response.data;
this.setState({
hitDatas: hitDatas
}, () => {
return this.state;
});
});
getAllHitsData(newConfig)
.then((response) => {
allHitDatas = response.data;
this.setState({
allHitDatas: allHitDatas
}, () => {
this.getDomains();
return this.state;
});
});
}
handleResize() {
// const self = this;
let elem = document.getElementById('scatter-chart');
width = elem.offsetWidth * 0.9;
console.log(width);
this.setState({
scatterWidth: width
}, () => {
console.log(this.state.scatterWidth);
});
}
render () {
if (this.state.teams.length === 0 || this.state.players.length === 0) {
return (
<div className="no-data-container">
<div className="no-data-message">We don't have any data for you right now. Would you like
to add some players, teams, or devices?
</div>
<ul className="no-data-links">
<AdminSquare title="PLAYER ADMIN" icon="person" link="/player"/>
<AdminSquare title="TEAM ADMIN" icon="group" link="/team"/>
<AdminSquare title="DEVICE ADMIN" icon="sd_storage" link="/device"/>
</ul>
</div>
);
}
const { value, suggestions } = this.state;
const inputProps = {
placeholder: 'Search for a player',
value,
onChange: this.onChange
};
return (
<div>
<ScatterChart
data={this.state.allHitDatas}
domain={{x: [this.state.minDate, this.state.maxDate], y: [this.state.maxHic, 0]}}
statOneTitle="HIC"
sendHitData={(d) => this.handleImpactClick(d)}
width={ width }
/>
</div>
);
}
}
function mapStateToProps(state) {
console.log(state);
return {
startDate: state.startDate,
endDate: state.endDate
};
}
export default connect(mapStateToProps)(Dashboard);

handleResize doesn't have Dashboard object associated with 'this'. You need to bind to the event hanler
replace window.addEventListener('resize', this.handleResize); with
window.addEventListener('resize',this.handleResize.bind(this));
which will bind the this keyword..so that you can do like this.setState or access any object defined in Dashboard

If you plan on using this inside of a method and the method is not a part of react component's lifecycle, then you need to set it's context to the component instance. In your case you haven't set the correct context for the handleResize, getDomains, dataChangeHelper methods, so the constructor needs some additional bindings:
this.handleResize = this.handleResize.bind(this);
getDomains ...
dataChangeHelper ...