• Как протестировать enzyme мини компонент?

    @slide13
    frontend/web-developer
    Через find
    const wrapper = shallow(<Boz/>);
    expect(wrapper.find(MuiBoz)).to.have.lengthOf(1);

    Возможно, потребуется пропы замокать еще через wrapper.setProps
    Ответ написан
    Комментировать
  • Как вытащить значение по ключу из вложенного объекта?

    @slide13
    frontend/web-developer
    usersList.forEach(user => console.log(user.company.name))
    Ответ написан
    Комментировать
  • Почему так работает useState?

    @slide13
    frontend/web-developer
    Так работает из-за StrictMode в реакте, потому что в этом режиме на этапе разработки Реакт делает дополнительную проверку и делает вызовы некоторых методов дважды (собственно, это и видно в консоли):

    Строгий режим не способен автоматически обнаруживать побочные эффекты, но помогает их отследить, сделав более детерминированными. Такое поведение достигается путём двойного вызова следующих методов:
    1. Методы constructor, render, и shouldComponentUpdate классового компонента
    2. Статический метод классового компонента getDerivedStateFromProps
    3. Тело функционального компонента
    4. Функции обновления (первый аргумент setState)
    5. Функции, переданные в useState, useMemo, или useReducer


    В продакшен сборке будет все ок, можно проверить убрав обертку StrictMode, тогда в теле компонента и в useEffect значение test будет одинаковым и вызываться console.log("component", test); будет только один раз при вводе в инпут.
    Ответ написан
    1 комментарий
  • Как подключить стили в nextjs?

    @slide13
    frontend/web-developer
    Я nextjs не использовал, но судя по ошибке он говорит, что глобальные css файлы можно хранить только в одном месте, а если требуется инкапсулировать css по компонентам, то нужно использовать css модули.
    Т.е. по идее css модули должны работать по дефолту, следовательно переименовываем файл в Footer.module.scss и также его и импортируем.
    Ответ написан
    Комментировать
  • Как получить значение switch в vkui?

    @slide13
    frontend/web-developer
    Также, как и с обычным input type="checkbox" в реакт - либо передаете значение checked в компонент сами и функцию onChange для изменения этого значения, либо через ref, что в данном случае проще будет

    Документация
    Ответ написан
    Комментировать
  • Рандомное число в диапазоне с равным шансом выпадения?

    @slide13
    frontend/web-developer
    Вот ответ с MDN

    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    Ответ написан
    3 комментария
  • Почему возвращает Failed to fetch?

    @slide13
    frontend/web-developer
    Подозреваю, что проблема в https и запрос на http://localhost:5000/add-user/ будет работать. Для https нужен ssl сертификат, а в коде сервера не вижу создания https сервера.
    Ответ написан
    Комментировать
  • Почему данные из localstorage отображаются при переходе на другую страницу со 2 раза?

    @slide13
    frontend/web-developer
    Отправка запроса на сервер это асинхронная операция, а вы делаете переход на "/metric" сразу же после начала отправки запроса, не дожидаясь его выполнения. Поэтому вначале осуществляется переход на другой роут, а потом записываются данные в localStorage, следовательно они и начинают отображаться после повторного захода на "/metric"
    Ответ написан
    Комментировать
  • Как в react передать функции новое состояние?

    @slide13
    frontend/web-developer
    Вариант по сути только один, наверное - сохранять состояние в ref.

    Но все равно придется обновлять ref в useEffect:
    useEffect(() => {
        ref.current = status;
      }, [status]);

    Из ref уже читать статус в вашей функции getStatus, где ref.current будет содержать всегда последнее значение status.
    Ответ написан
  • Почему у элемента появляется style="display: none;"?

    @slide13
    frontend/web-developer
    Ну так у вас в if вызывается метод fadeOut на классе box, а в jquery fadeout после того как opacity элемента достигнет 0 убирает его полностью как раз через установку display в none
    Ответ написан
    Комментировать
  • Как считать данные с ссылки в форму?

    @slide13
    frontend/web-developer
    Если IE не нужен, то можно через URLSearchParams

    let url = 'email=user%40mail.com&phone=380989035745&date=19911225&offer=1&lang=ua&country=ua'
    console.log([...new URLSearchParams(url).entries()].reduce((query, [key, value]) => Object.assign(query, {[key]: value}), {}))
    Ответ написан
    Комментировать
  • Связь Javascript с интернетом?

    @slide13
    frontend/web-developer
    Вам нужен сервер для этого. Я для парсинга веб страниц использовал cheerio для nodejs сервера. Соответственно, отправляете данные с инпута к себе на сервер, а дальше уже с помощь cheerio делаете запросы куда вам нужно, парсите результаты и отправляете себе на сайт обратно нужные результаты. Можно и периодически фоном нужные данные парсить и через вебсокет пушить результаты на сайт
    Ответ написан
    Комментировать
  • Как работает функция componentDidUpdate?

    @slide13
    frontend/web-developer
    1. Вы ввели "1", нажали кнопку: у родителя меняется состояние на {value: "1"}, Child обновляется первый раз
    2. componentDidUpdate не срабатывает при первом рендере, поэтому в Child просто выводится Hello!
    3. В инпуте все еще "1", вы нажали второй раз кнопку. Снова вызывается setState с {value: "1"}, но каждый вызов setState приводит к перерендеру компонента, поэтому после второго клика происходит обновление родителя и вслед за ним потомка
    4. На второй перерендер у Child срабатывает componentDidUpdate, и т.к. состояние в потомке не определено, т.е. по дефолту равно null, то срабатывает условие в if в componentDidUpdate
    5. Child обновляет свой state и записывает туда {value: "1"}, после снова обновляется, но т.к. теперь предыдущий state был равен null, а текущий {value: "1"}, то условие if в componentDidUpdate уже не выполняется
    6. Добавляете в инпуте цифру "2", нажимаете кнопку. Родитель меняет состояние на {value: "12"} и обновляется вместе с потомком
    7. И дальше ответ на ваш вопрос: у Child снова после обновления срабатывает componentDidUpdate. При этом предыдущее значение у него в state осталось то, что было записано в пункте 5 и текущее тоже равно этому же значению, т.е. в этом случае опять сработает if и в Child изменится состояние на {value: "12"}
    8. Child снова обновляется после изменения своего состояния, срабатывает componentDidUpdate, предыдущее значение состояния value выводит "1", а текущее уже "12" так что if снова не срабатывает


    Надеюсь понятно написал ) Не понятно только зачем вам в Child нужно состояние, которое дублирует пропы, так делать не надо
    Ответ написан
    3 комментария
  • Почему выдаёт ошибку cannot get?

    @slide13
    frontend/web-developer
    чтобы отдавать статику по прямому урлу, в том числе и html - надо вначале подключить express.static мидлвар с указанием папки, где эти статичные файлы лежат, т.е. в данном случае лучше переместить html, например, в папку public, далее использовать ее для отдачи статики:
    app.use(express.static('public'))

    а в редиректе добавить путь к папке:
    res.redirect("/public/cA.html");
    это если именно редирект нужен на статику.

    из более правильного варианта - добавить роут на get "/ca" и отдавать на запрос файл, как и на "/", чтобы по одному файлу отдавать, а не статику расшаривать всю

    ну и 3й вариант - вместо редиректа сразу отдавать файл, тут уже смотря как тебе надо.
    Ответ написан
    2 комментария
  • Как сделать сброс стилей в styled components?

    @slide13
    frontend/web-developer
    Либо вытаскивай нужные стили для сброса и указывай в createGlobalStyle, либо есть библиотека styled-normalize, просто компонент выше приложения вставляется:

    import { Normalize } from 'styled-normalize'
    ...
    <Normalize />
    <App />

    Можно и через createGlobalStyle вставить, все в доке есть по styled-normalize
    Аналогично для reset css
    Ответ написан
    1 комментарий
  • Стоит ли использовать хуки вроде useState когда уже управляешь состоянием с помощью Redux?

    @slide13
    frontend/web-developer
    Про редакс уже все сказали, часто есть необходимость использовать useState при наличии redux и это нормально.

    Про replace. Т.к. в replace у строки вторым параметром можно передать функцию, то здесь явно можно этим и воспользоваться:
    сделать объект, где ключом была бы подстрока из совпадения, а значением - то, на что ее нужно заменить и потом по совпадению подставлять нужное значение из объекта, примерно так:
    let matches = {
      ",": "",
      "в": "В",
      "с": "С",
      " г.": ""
    }
    
    .replace(/с|в|\sг./g, (match) => matches[match])

    Но из того, что я вижу, проще взять библиотеку dayjs и спокойно форматировать даты, 2KB вряд ли стоят времени на написание своих реализаций форматирования дат

    Далее, естественно, не надо хранить функции в редаксе. Различные доп. функции лучше выносить в отдельную папку и разбивать по типам, например, для работы с датами, для форматирования чисел и т.д. и импортировать в нужные компоненты непосредственно оттуда.
    Это полезно, т.к. никто не знает, когда и кому она пригодится снова, а тем более если это большой проект. Написав ее где-то у себя в компонентах ее могут не найти и создать копию где-то еще. Также ее придется тестировать, импортировать утилиты для тестов проще из одного места, чем искать по компонентам, а утилиты все равно придется тестить отдельно от ui.
    Ответ написан
    Комментировать
  • Как прекратить отмену dragover на краю картинки (dragover постоянно слетает)?

    @slide13
    frontend/web-developer
    Если коротко, то dragleave всплывает от каждого дочернего элемента у дроп зоны, поэтому, в идеале, у зоны не должно быть дочерних элементов. Т.е. надо поверх картинок создать, например, полупрозрачный div, который и будет дроп зоной.

    Но, как быстрый вариант, можно добавить:
    pointer-events: none;
    для класса preview-image

    это как раз отменит эффекты указателя для всех дочерних элементов текущей дроп зоны, чтобы на них не срабатывал dragleave
    Ответ написан
    Комментировать
  • Как сделать чтобы значение прогрессбара начиналось с нужного процента?

    @slide13
    frontend/web-developer
    установить в условии определении процента дефолтный процент (10) на нулевой индекс

    index == 0 ? 10 : ...
    Ответ написан
    Комментировать
  • Как правельно поправить скрипт?

    @slide13
    frontend/web-developer
    У тебя обе функции для очистки таймера и ивентов для 1го и 2го ряда называются одинаково - flipped. Из 2х одинаковых функций выполняется только последняя. Т.е. когда наводишь на любой элемент 1го ряда срабатывает 2й flipped, который, соответственно, для 2го ряда добавляет css класс flip-card_flipped и поэтому весь второй ряд переворачивается. Что нужно будет сделать теперь, думаю, понятно.
    Ответ написан
  • Настроить страницу (pagination material ui)?

    @slide13
    frontend/web-developer
    Сколько вам нужно выводить на странице статей - на это число и делите общее кол-во статей. articlesTotalCount / MAX_ARTICLES_ON_PAGE, ну и округлить не забудьте на всякий.

    Только у вас интересный бэк какой-то - он на любой offset выдает статьи даже за пределом возвращаемого максимального кол-ва, я 200 000 пробовал и статьи там есть )
    Ответ написан