• Как отобразить определенное кол-во элементов массива и переключаться между ними по клику?

    search
    @search
    мама говорит что я особенный
    Идея такая:

    const [page, setPage] = useState(1);
    const itemsPerPage = 8;
    ...
    {orgs.slice((page - 1) * itemsPerPage, page * itemsPerPage).map(...)}
    ...
    <button onClick={() => setPage(page + 1)}>Next</button>
    <button onClick={() => setPage(page - 1)}>Previous</button>


    Конечно, нужно предусмотреть чтоб по нажатию на кнопки Next и Previous мы не уезжали за пределы мыссива.
    Ответ написан
    1 комментарий
  • Как удалить ключ в обьекте из LocalStorage?

    search
    @search
    мама говорит что я особенный
    К сожалению, удаление ключа из объекта при помощи деструктурирования выглядет как ужасное уродство как ни старайся. Советую создать вспомогательную функцию `omit(keys, object)` наподобии омита из библиотеки lodash или ramda. https://github.com/ramda/ramda/blob/master/source/...
    Ответ написан
    1 комментарий
  • Как заполнить state?

    search
    @search
    мама говорит что я особенный
    Не совсем понял проблему, но стены находятся в первом элементе массива action. Если вы хотите передать их в state, то это можно сделать как-то так

    game$.subscribe((action) => {
      switch (action[0]) {
        case 'ArrowUp':
          if(state.y > 0) { state.y--; }
          break;
        case 'ArrowRight':
          if(state.x < gameWidth - 1) { state.x++; }
          break;
        case 'ArrowDown':
          if(state.y < gameHeight - 1) { state.y++; }
          break;
        case 'ArrowLeft':
          if(state.x > 0) { state.x--; }
          break;    
      }
      
      state.walls = action[1];  
      renderGame(state);
      console.log(state)
    });
    Ответ написан
    Комментировать
  • Почему не обновляется state в хранилище Redux?

    search
    @search
    мама говорит что я особенный
    1. В редьюсере не должно быть асинхронных операций. Уберите axios из редьюсера. Так не получится.
    2. Вам нужен thunk. Вот пример как это делается правильно https://alligator.io/redux/redux-thunk/
    Ответ написан
  • Нужны ли бумашки с школы?

    search
    @search
    мама говорит что я особенный
    "бумажки не нужны" - это совковая тема, которую вам сейчас озвучат в ответах к этому посту. По 14 летнему опыту разработки в различных командах скажу что встречал очень мало адекватных людей без бумажек (возможно мне просто не повезло). Если честно, так мало, что на месте работодателя не стал бы тратить время на людей без бумажек. Это крайне непопулярное мнение в странах СНГ, но очень популярное мнение на западе. Фильтр в виде обязательного диплома бакалавра или магистра установлен почти на всех западных вакансиях, которые можно встретить на линкдине.
    Ответ написан
  • Как написать такое регулярное выражение?

    search
    @search
    мама говорит что я особенный
    ^[1-9]|[1-9]{1}[0-9а-яА-ЯёЁ\/]*[0-9а-яА-ЯёЁ]$

    Спасибо, shurshur !
    Ответ написан
    7 комментариев
  • Есть ли более грамотный способ отображать контент в зависимости от маршрута?

    search
    @search
    мама говорит что я особенный
    Сейчас как раз (для души) решаю примерено такую же задачу. Началось всё с того что не нашел в интернете удовлетворительного решения вот таких проблем:

    1. Иерархическая структура страниц
    2. Динамическая навигация
    3. Динамические хлебные крошки (ссылки на верхние страницы в иерархии)
    4. DRY


    Вот такой велосипед получился в итоге https://github.com/sneas/react-nested-routes-example

    Иерархия навигации задаётся в отдельном конфиге. Где component - это тело страницы.

    На данный момент все компоненты, отвечающие за генерацию страниц и построение меню сгружены в App.js.

    Общие (динамические) элементы страницы помещаются в компонент Page. Сейчас он рендерит только меню и хлебные крошки, но туда можно, по сути, поместить всё что угодно.

    Вот демка: https://sneas.github.io/react-nested-routes-example/
    Ответ написан
    1 комментарий
  • Как связать компоненты между страницами?

    search
    @search
    мама говорит что я особенный
    Вынесите объявление сервиса в `providers` главного модуля. И уберите объявление сервиса из `providers` других модулей.

    Каждый раз когда вы добавляете сервис в `providers` модуля, анугяр создаёт экземпляр сервиса именно для этого модуля. И в другом модуле этот экземпляр виден не будет.
    Ответ написан
    Комментировать
  • Как работает (arg)=>(arg)=> и т.д?

    search
    @search
    мама говорит что я особенный
    Это называется "стрелочная функция" https://developer.mozilla.org/ru/docs/Web/JavaScri...

    (arg) => arg

    это то же самое что и

    function (arg) {
      return arg;
    }


    а

    arg => arg => arg;

    это то же самое что

    function(arg) {
      return function(arg) {
        return arg;
      }
    }


    Последний пример не имеет особого смысла потому что первый arg никак не учитывается в дальнейшем.

    У стрелочных функций есть одна особенность, отличающая их от обычных функций: стрелочная функция получает тот контекст this, где она была объявлена. За это их все безумно любят и предпочитают использовать вместо обычной function.
    Ответ написан
    1 комментарий
  • Количество цифр в зависимости от совпадения маски?

    search
    @search
    мама говорит что я особенный
    ^(?:7\d{10}|421\d{9})$

    https://regex101.com/r/FTME89/1
    Ответ написан
    Комментировать
  • Как исправить ошибку после установки jest?

    search
    @search
    мама говорит что я особенный
    У вас сейчас 2 файла: package-lock.json и yarn.lock. Должен быть один. Скорее всего yarn.lock, потому что react-проекты предпочитают yarn.

    Вам нужно:
    1. Убрать jest из devDependencies
    2. Удалить package-lock.json
    3. Выполнить `yarn add -D jest` для того чтоб добавить jest тем способом, который от вас ждёт create-react-app

    Собственно именно это и написано в сообщении, которое выводится при старте приложения.
    Ответ написан
  • Зачем нужны абстрактные классы и интерфейсы в php?

    search
    @search
    мама говорит что я особенный
    Интерфейс - это контракт, который реализовывает класс, а пользователи класса знают как этот класс использовать. Это альтернатива множественному наследованию. Например у вас есть два типа коллекции: бинарное дерево и граф. Это довольно отличающиеся структуры данных. Но каждая из коллекций может реализовать интерфейс Iterator и в этом случае интерпретатор будет знать как перебрать коллекцию в цикле foreach.

    Абстрактные классы в основном используются в том случае, если какую-то часть кода можно описать в родительском классе, но для того чтоб эта часть приобрела смысл, нужна конкретика: дополнить общую картину подробностями в виде методов или полей. Если вы присмотритесь к абстрактным классам в современных фреймворках, то увидите что сам по себе абстрактный класс не имеет смысла. Например, если создать объект такого класса оператором new, то этому объекту всё равно будет чего-то не хватать и именно это что-то и добавляют дочерние классы.
    Ответ написан
    2 комментария
  • Как создать дочерний класс, который виден в родительском в PHP?

    search
    @search
    мама говорит что я особенный
    Смотрите на это так: каждая кнопка реализует интерфейс `Button`. К тому же каждая кнопка может иметь общего родителя. Это если вы так захотите. Это не обязательно. Так же у вас существует класс `Panel`, который хранит коллекцию объектов, реализующих интерфейс `Button`.

    Вообще, тема ООП мягко говоря непростая и людей, который написали что-то приличное с первого раза не так уж и много (лично таких не встречал). Но тема сама по себе интересная и стоит того чтоб в неё погрузиться. Сейчас хочу заранее попросить прощения за совет, который звучит весьма высокомерно, он не для того чтоб как-то вас обидеть, а наоборот чтоб помочь побыстрее разобраться в вопросе: выучите наизусть принципы SOLID и повторяйте их каждый день перед сном. Где-то через полгода-год ежедневных повторений и тренировок в ООП, эти принципы начнут приобретать для вас смысл и тогда ваш ООП код будет похож на код за который компании готовы платить зарплату миддл-левел программиста.
    Ответ написан
  • Головоломки помогают айтишникам улучшить мышление?

    search
    @search
    мама говорит что я особенный
    Головоломки по программированию очень неплохо помогают устроиться на нормальную работу.

    Оффтоп, лет 5 назад научился жонглировать. Может это накрут, но заметил как сильно выросла способность концентрироваться. Гораздо дольше могу удерживать внимание на предмете/задаче чем раньше. Вот например сейчас одновременно пишу этот комментарий, пишу код и еще и жонглирую.
    Ответ написан
    2 комментария
  • Angular - Не работают стандартные значения переменой?

    search
    @search
    мама говорит что я особенный
    Только ручками, тайпскрипт за вас это чинить не будет.

    // Класс здесь не нужен. Старайтесь предпочитать интерфейсы классам если у объекта нет методов
    export interface NameSurName {
      name: string;
      surname: string;
    }
    
    ...
    
    this.nameSurName = {
      name: '',
      surename: 'Иванов',
      ...resp.data
    }


    На вопрос "почему так" ответ: тайпскрит не добавляет в код никакой магии. Конечный код скомпилированный из тайпскрипта выглядет в JS почти так же как и с тайпскриптом, только без типов. Короче, TS не занимается преобразованием типов за вас.

    Вот есть официальный playground от создателей. Можно ради интереса иногда попроверять что получится из вашего TS кода.
    Ответ написан
    Комментировать
  • Merge несколько observable - как узнать какой именно observable сработал?

    search
    @search
    мама говорит что я особенный
    В таком случае было бы разумно сделать сделать нужные действия для каждого из обзёрваблов по отдельности.

    merge(
      observable1.pipe(
        // do stuff related to form 1
      ),
      observable2.pipe(
        // do stuff related to form 2
      ),
      ...
    )
    Ответ написан
    Комментировать
  • Для чего в react используют регулярно метод bind?

    search
    @search
    мама говорит что я особенный
    Люди древности так привязывали метод к контексту. В давние времена не существовало стрелочных функций.

    В вашем примере мы передаём функцию this.addFriend в обработчик события addNew. JS так устроен что когда вы передаёте this.addFriend (куда угодно, хоть в обработчик, хоть в переменную), то будет передан только addFriend без this. Bind как раз нужен для того чтоб прибить FriendsContainer к контексту метода addFriend.

    В современном мире принято делать так:

    class FriendsContainer extends React.Component {
      addFriend = (friend) = >{
        this.setState((state) => ({
          friends: state.friends.concat([friend])
        }))
      }
    }


    Это по сути тот же bind, только без лишних телодвижений.
    Ответ написан
    Комментировать
  • Не могу пройти задание на FCC?

    search
    @search
    мама говорит что я особенный
    Ваш код возвращает массив строк типа "Inception:8.8".

    А в задании хотят чтоб он возвращал массив объектов типа {title: 'Inception', rating: '8.8}.

    Нужно как-то так:

    rating = watchList.map(({ "Title": title, "imdbRating": rating }) => ({title, rating}));
    Ответ написан
    4 комментария
  • Rxjs - как сделать двойной subscribe?

    search
    @search
    мама говорит что я особенный
    Обзёрвер не выполняет никакой работы до тех пор пока не была вызвана функция subscribe. Сам процесс вызова subscribe называется "подписка". Как только функция subscribe была вызвана (т.е. на обзёрвер подписались) - дело пошло и обзёрвер начал свою работу. До тех пор пока subscribe не вызван, обзёрвер - это просто рецепт того что нужно делать когда прийдут данные.

    Сама функция subscribe возвращает деструктор. Деструктор - это что-то что нужно выполнить, если вдруг понадобилось остановить обсёрвер (например прервать HttpConnection).

    Код ниже возвращает функцию-деструктор

    let get = () => {
        return this.http.get(url)
            .subscribe((response: ResponseObject) => {...});
    }


    На функцию-деструктор невозможно подписаться. Коллбеков у неё тоже нет. Её можно только выполнить для того чтоб остановить обзёрвер.

    Поэтому, универсальный рецепт - это никогда не подписываться в самих сервисах. Если вам нужно что-то проделать с данными из обзёрвера в самом сервисе, то можно воcпользоваться оператором tap:

    let get = () => {
        return this.http.get(url)
            .pipe(
              tap((response: ResponseObject) => {...})
            );
    }
    
    // а дальше где-то в коде сделать
    
    service.get().subscribe((response: ResponseObject) => {...})


    Более того, вы можете делать tap (и любой друго pipe оператор) пока у вас есть обзёрвбл:

    service.get()
      .pipe(
        tap(...),
        map(...),
        whatever(...),
      ).subscribe((response: ResponseObject) => {...})


    Вам будет проще понять механизм работы обзёрвблов, если вы будите рассматривать обзёрвбл как функцию, а метод subscribe как способ выполнить эту функцию.

    Учитывая вышесказанное:

    const observable = service.get();
    observable.subscribe((result) => {...}); //выполнит запрос к серверу
    observable.subscribe((result) => {...}); //выполнит запрос к серверу еще раз
    // запрос к серверу будет инициироваться каждый раз когда будет выполняться функция subscribe
    Ответ написан
    2 комментария