про это и речь

в каком ключе? подход "выкинуть все и написать с нуля" оправдан крайне редко, обычно этим страдают зеленые кодеры, которые не могут по каким-то причинам или не хотят разбираться в существующем

Ну не... Завязывай. Я вообще знаю около 5 людей, которые смогут нормально проект портировать из говна в сказку.

Дай их контакты

1. Прогресс неостановим 2. Работать всё равно ничего не будет)

в каком ключе? подход "выкинуть все и написать с нуля" оправдан крайне редко, обычно этим страдают зеленые кодеры, которые не могут по каким-то причинам или не хотят разбираться в существующем

не, имел ввиду речь была про то, что ценится не выкинуть, а постепенно сделать хорошо.

Дай их контакты

Тебя какая сфера интересует?)

в каком ключе? подход "выкинуть все и написать с нуля" оправдан крайне редко, обычно этим страдают зеленые кодеры, которые не могут по каким-то причинам или не хотят разбираться в существующем

Мне повезло. Дали с нуля проект переписать

не, имел ввиду речь была про то, что ценится не выкинуть, а постепенно сделать хорошо.

ну там много кто агрится на вторую фразу про архитектуру

Тебя какая сфера интересует?)

Мне почту надо переписать

так вот я не о ней

Мне повезло. Дали с нуля проект переписать

мб это был тот самый случай

Мне почту надо переписать

Эм... Ну, по фронту я не смогу посоветовать. Я почти в тусовке не кручусь.

Мне хочется верить, что я смогу постепенно из говна сделать няшку, но пока на практике это не проверил.

Проверяю.

У кого-нибудь бывало такое, что prop-types выкидывает странные ошибки типа Warning: Failed prop type: TextField: prop type `tag is invalid; it must be a function, usually from the prop-types package, but received string., хотя у `TextField для пропса tag присвоино значение PropTypes.string, а не PropTypes.func. Вот полная типизация TextField: TextField.propTypes = { id: PropTypes.string, className: PropTypes.string, tag: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string, icon: { svg: PropTypes.any.isRequired, position: PropTypes.string, rotation: PropTypes.number, }, disabled: PropTypes.bool, error: PropTypes.bool, fullWidth: PropTypes.bool, onChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, };

А тех, которые могут в несколько технологий(бек + фронт) и того меньше.

да лан, несколько лет назад фулстек считай был мейнстримом

я когда начинал вообще не видел особо, чтобы где то разделяли фронт/бек

да лан, несколько лет назад фулстек считай был мейнстримом

Я не говорю про бек js.

я тоже

Я говорю про, к примеру, java+js

Всем привет, я правильно понимаю, от этого паттерна нет толку если этот компонент управляется react-router 4? (так как он пересоздает компоненты при роутинге, и вместе с компонентом и селекторы будут умирать) // reselect example const makeMapStateToProps = () => { const getVisibleTodos = makeGetVisibleTodos() // memoized selector const mapStateToProps = (state, props) => { return { todos: getVisibleTodos(state, props) } } return mapStateToProps } const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( makeMapStateToProps, mapDispatchToProps )(TodoList)

Селектор будет умирать че рил?

У кого-нибудь бывало такое, что prop-types выкидывает странные ошибки типа Warning: Failed prop type: TextField: prop type `tag is invalid; it must be a function, usually from the prop-types package, but received string., хотя у `TextField для пропса tag присвоино значение PropTypes.string, а не PropTypes.func. Вот полная типизация TextField: TextField.propTypes = { id: PropTypes.string, className: PropTypes.string, tag: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string, icon: { svg: PropTypes.any.isRequired, position: PropTypes.string, rotation: PropTypes.number, }, disabled: PropTypes.bool, error: PropTypes.bool, fullWidth: PropTypes.bool, onChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, };

если я правильно понял перевод, то типа PropTypes.string вернуло не то… хотя в string сложно ошибиться, русский символ не вставить

У кого-нибудь бывало такое, что prop-types выкидывает странные ошибки типа Warning: Failed prop type: TextField: prop type `tag is invalid; it must be a function, usually from the prop-types package, but received string., хотя у `TextField для пропса tag присвоино значение PropTypes.string, а не PropTypes.func. Вот полная типизация TextField: TextField.propTypes = { id: PropTypes.string, className: PropTypes.string, tag: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string, icon: { svg: PropTypes.any.isRequired, position: PropTypes.string, rotation: PropTypes.number, }, disabled: PropTypes.bool, error: PropTypes.bool, fullWidth: PropTypes.bool, onChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, };

импорт PropTypes проверь на всякий случай, или еще какую подобную ошибку… + это какой-то компонент ? что за либа? там в issues глянь

У кого-нибудь бывало такое, что prop-types выкидывает странные ошибки типа Warning: Failed prop type: TextField: prop type `tag is invalid; it must be a function, usually from the prop-types package, but received string., хотя у `TextField для пропса tag присвоино значение PropTypes.string, а не PropTypes.func. Вот полная типизация TextField: TextField.propTypes = { id: PropTypes.string, className: PropTypes.string, tag: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string, icon: { svg: PropTypes.any.isRequired, position: PropTypes.string, rotation: PropTypes.number, }, disabled: PropTypes.bool, error: PropTypes.bool, fullWidth: PropTypes.bool, onChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, };

defaultProps делал?

Селектор будет умирать че рил?

Потому что ссылок на него не будет больше, селектор живет внутри функции mapStateToProps умрет компонент => умрет коннект => умрет mapStateToProps => умрет селектор

Всем привет, если изменить данные в "description" или "cost", а затем задать теги, то форма обновиться, как можно это пофиксить? При том что обязательно должны обновляться пропсы с родителя https://codesandbox.io/s/n4okm8ww04

Это и ценится. А написать клёвую архитектуру с нуля любой может.

не правда

Ой, прицепились к архитектуре.

в сложных системах проектирование архитектуры - один из сложнейших квестов

особенно, если с нуля

всем привет

Суть моего сообщения в том, что рефакторить к нужной архитектуре куда сложнее, чем строить её с нуля.

рефакторинг к нужной архитектуре != рефакторинг :) это уже чот другое

даже реинжинирингом не назовёшь

есть вопрос пытаюсь поменять из класса состояние компонента вот так

class Progressbar extends Skil{ constructor(){ super(Skil) } Bar(argument, number){ console.log(argument); let timebar = setInterval(()=>{ let reez = this.stateargument+10; super.setState({argument:reez}); if (argument >=number ){ clearInterval(timebar) } },20) }

это правельно ?

это правельно ?

нет

нет

Не подскажите как правильно это сделать ?

для начала прочитать хотя бы вот это

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes

Не подскажите как правильно это сделать ?

не наследовать ничего кроме Component и PureComponent для начала

class Progressbar extends Skil{ constructor(){ super(Skil) } Bar(argument, number){ console.log(argument); let timebar = setInterval(()=>{ let reez = this.stateargument+10; super.setState({argument:reez}); if (argument >=number ){ clearInterval(timebar) } },20) }

шо та тут усе не правильно

шо та тут усе не правильно

лол

вызываю класс

componentDidMount(){ let bars = new Progressbar() bars.Bar(this.state.bar,100) }

нормас.

Максим, прочитай доку по ссылке выше

?

импорт PropTypes проверь на всякий случай, или еще какую подобную ошибку… + это какой-то компонент ? что за либа? там в issues глянь

импорт есть, из либ только sc)

componentDidMount(){ let bars = new Progressbar() bars.Bar(this.state.bar,100) }

??

defaultProps делал?

да

Мне почту надо переписать

ты ж вроде в яндексе работаешь?)

??

жалко смайла ноги нет

да

что там?

ты ж вроде в яндексе работаешь?)

на листочек

что там?

TextField.defaultProps = { tag: 'input', icon: { position: 'right', rotation: 0, }, disabled: false, error: false, fullWidth: false, };

ты ж вроде в яндексе работаешь?)

Да

я конечно понимаюю что это смешно но я еще совсем зеленый в реакт

жалко смайла ноги нет

??? ✊️

я конечно понимаюю что это смешно но я еще совсем зеленый в реакт

тут проболема не в реакт, а ванила жс

на листочек

?

что там?

так мб будет поудобнее - https://gist.github.com/SilencerWeb/4b969bbe587bb63c51d21bce8bb09784

Мне почту надо переписать

А сам чего не займёшься?

А сам чего не займёшься?

Не мой основой проект)

Неужели почта - это то, что стараются максимально спихнуть куда-нибудь?)

ERROR: S client not available

так мб будет поудобнее - https://gist.github.com/SilencerWeb/4b969bbe587bb63c51d21bce8bb09784

думаю проблема в импорте либо наличии/отсутствии пакета/сломанной сборке

думаю проблема в импорте либо наличии/отсутствии пакета/сломанной сборке

ну я, кажется, понимаю в чем ошибка.

Неужели почта - это то, что стараются максимально спихнуть куда-нибудь?)

Нет. Медленно переписывают

это получилось пофиксить, но осталась одна ошибка. я случай вместо TextField.defaultProps объявил TextField.propTypes

Можно еще немного помочь попросить? render() { const { map } = this.props; console.log("RENDER1"); return ( <Query query={QUERY}> {q => { if (q.loading) return <Icon type="loading" style={{ fontSize: 24 }} spin />; if (q.error) return <p>Ошибка...</p>; if ( !q.data.ui.visiblePanels.includes("attrTable") || q.data.ui.visiblePanels.includes("search") || q.data.ui.controlsSelected.includes("routes") || q.data.ui.controlsSelected.includes("panoramas") || !this.state.features || this.state.features === null ) { console.warn("Must return null"); console.log("RENDER2"); return null; } else { const visiblePanels = q.data.ui.visiblePanels; console.log("RENDER3"); console.error(!this.state.features, this.state.features === null); // return null; return ( <Mutation mutation={UiMutation}> {(uiMutation, { data }) => ( <ErrorBoundary> <Container> <AttributiveTable hasHeader map={map} header={this.state.tableHeader} point={this.state.point} pixel={this.state.pixel} features={this.state.features} onClose={() => { uiMutation({ variables: { ui: { visiblePanels: this.closeTable(visiblePanels) } } }); }} /> </Container> </ErrorBoundary> )} </Mutation> ); } }} </Query> ); } } При соблюдении моей дурацкой кучи условий, в консоль пишется рендер1-рендер2-рендер3. ЧЯДНТ? Помимо говнокода, конечно...

Можно еще немного помочь попросить? render() { const { map } = this.props; console.log("RENDER1"); return ( <Query query={QUERY}> {q => { if (q.loading) return <Icon type="loading" style={{ fontSize: 24 }} spin />; if (q.error) return <p>Ошибка...</p>; if ( !q.data.ui.visiblePanels.includes("attrTable") || q.data.ui.visiblePanels.includes("search") || q.data.ui.controlsSelected.includes("routes") || q.data.ui.controlsSelected.includes("panoramas") || !this.state.features || this.state.features === null ) { console.warn("Must return null"); console.log("RENDER2"); return null; } else { const visiblePanels = q.data.ui.visiblePanels; console.log("RENDER3"); console.error(!this.state.features, this.state.features === null); // return null; return ( <Mutation mutation={UiMutation}> {(uiMutation, { data }) => ( <ErrorBoundary> <Container> <AttributiveTable hasHeader map={map} header={this.state.tableHeader} point={this.state.point} pixel={this.state.pixel} features={this.state.features} onClose={() => { uiMutation({ variables: { ui: { visiblePanels: this.closeTable(visiblePanels) } } }); }} /> </Container> </ErrorBoundary> )} </Mutation> ); } }} </Query> ); } } При соблюдении моей дурацкой кучи условий, в консоль пишется рендер1-рендер2-рендер3. ЧЯДНТ? Помимо говнокода, конечно...

Такое обычно кидают в гист. Ибо в чате не читабельно

Можно еще немного помочь попросить? render() { const { map } = this.props; console.log("RENDER1"); return ( <Query query={QUERY}> {q => { if (q.loading) return <Icon type="loading" style={{ fontSize: 24 }} spin />; if (q.error) return <p>Ошибка...</p>; if ( !q.data.ui.visiblePanels.includes("attrTable") || q.data.ui.visiblePanels.includes("search") || q.data.ui.controlsSelected.includes("routes") || q.data.ui.controlsSelected.includes("panoramas") || !this.state.features || this.state.features === null ) { console.warn("Must return null"); console.log("RENDER2"); return null; } else { const visiblePanels = q.data.ui.visiblePanels; console.log("RENDER3"); console.error(!this.state.features, this.state.features === null); // return null; return ( <Mutation mutation={UiMutation}> {(uiMutation, { data }) => ( <ErrorBoundary> <Container> <AttributiveTable hasHeader map={map} header={this.state.tableHeader} point={this.state.point} pixel={this.state.pixel} features={this.state.features} onClose={() => { uiMutation({ variables: { ui: { visiblePanels: this.closeTable(visiblePanels) } } }); }} /> </Container> </ErrorBoundary> )} </Mutation> ); } }} </Query> ); } } При соблюдении моей дурацкой кучи условий, в консоль пишется рендер1-рендер2-рендер3. ЧЯДНТ? Помимо говнокода, конечно...

вот такое на гист плез

@popuguy, @sergeysova А в гист не обязательно рабочий код кидать, который как на кодпене заводится?

нормально ли в рендере писать new Intl.DateTimeFormat().format(), или лучше создать инстанс и прокинуть его через контекст?

Можно еще немного помочь попросить? render() { const { map } = this.props; console.log("RENDER1"); return ( <Query query={QUERY}> {q => { if (q.loading) return <Icon type="loading" style={{ fontSize: 24 }} spin />; if (q.error) return <p>Ошибка...</p>; if ( !q.data.ui.visiblePanels.includes("attrTable") || q.data.ui.visiblePanels.includes("search") || q.data.ui.controlsSelected.includes("routes") || q.data.ui.controlsSelected.includes("panoramas") || !this.state.features || this.state.features === null ) { console.warn("Must return null"); console.log("RENDER2"); return null; } else { const visiblePanels = q.data.ui.visiblePanels; console.log("RENDER3"); console.error(!this.state.features, this.state.features === null); // return null; return ( <Mutation mutation={UiMutation}> {(uiMutation, { data }) => ( <ErrorBoundary> <Container> <AttributiveTable hasHeader map={map} header={this.state.tableHeader} point={this.state.point} pixel={this.state.pixel} features={this.state.features} onClose={() => { uiMutation({ variables: { ui: { visiblePanels: this.closeTable(visiblePanels) } } }); }} /> </Container> </ErrorBoundary> )} </Mutation> ); } }} </Query> ); } } При соблюдении моей дурацкой кучи условий, в консоль пишется рендер1-рендер2-рендер3. ЧЯДНТ? Помимо говнокода, конечно...

ЧЯДНТ?

@popuguy, @sergeysova А в гист не обязательно рабочий код кидать, который как на кодпене заводится?

Хотя бы читабельно. Ну а вообще есть codesandbox для рабочих примеров

@popuguy, @sergeysova А в гист не обязательно рабочий код кидать, который как на кодпене заводится?

гисты ж просто для хранения

Не знал, спасибо!

для Redux есть отдельный чат в Телеграме?

хотя я больше на пастбин кидаю всё

нормально ли в рендере писать new Intl.DateTimeFormat().format(), или лучше создать инстанс и прокинуть его через контекст?

в рендере у тебя будет каждый раз создаваться

спасибо

я даж не знал о его существовании, лол

нормально ли в рендере писать new Intl.DateTimeFormat().format(), или лучше создать инстанс и прокинуть его через контекст?

если надо создать и забыть, то лучше инстанс

так легко находятся эти русскоговорящие сообщества

спасибо

это не совсем чатик о редакс

https://gist.github.com/columnistdc/84d0ec6e19af18835e38af1944504b40 - помогите плиз с методом рендер

а зачем он ? зачем в разные чаты выносить реакт / редакс ?

а зачем он ? зачем в разные чаты выносить реакт / редакс ?

хотят люди чат с более узкой тематикой, почему бы и нет)

это не совсем чатик о редакс

а что тогда?

а зачем он ? зачем в разные чаты выносить реакт / редакс ?

там не особо редакс чатик

хотят люди чат с более узкой тематикой, почему бы и нет)

не, ну законом не запрещено, согласен, но всё же... )

там не особо редакс чатик

98 человек, а сообщений прям как тут

https://gist.github.com/columnistdc/84d0ec6e19af18835e38af1944504b40 - помогите плиз с методом рендер

а как должно?

https://gist.github.com/columnistdc/84d0ec6e19af18835e38af1944504b40 - помогите плиз с методом рендер

я бы все проверки вынес в отдельные функции, а в реднере оставил бы только компонент

ты оверхедишь

и что это за компонент query