cester

newStr = template.replace(/{(.*?)}/g, (m,m1) => obj[m1])

type AcceptedFile = {
  name: string;
  type: string;
};
...
  const [files, setFiles] = useState<AcceptedFile[]>([]);
...
  const handleDrop = (acceptedFiles: AcceptedFile[]) => {
   setFiles((currentFiles) => {
     return isMultiple
      ? [...currentFiles, ...acceptedFiles]
      : [acceptedFiles[0]];
   });
  };

const arr = [
{ val: 1, from: 0, to: 25 }, 
{ val: 2, from: 9, to: 13 }, 
{ val: 3, from: 14, to: 20 }]
const output = arr
    .map(el=>[el.from, el.to])
    .flat()
    .sort((a,b)=>a-b)
    .map((el, index, array)=>array[index+1] && [el, array[index+1]])
    .filter(el=>el)

хотя я не учел пробел между 13 14 но он не укладывается в логику остального примера, короче пример кода думаю даст пояснение как можно работать с массивами

Без параметров:

const withSort = WrappedComponent => props => {
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:
export default withSort(Component);

C параметрами:

const withSort = (...params) => WrappedComponent => props => {
  // params usage
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:

export default withSort(param1, param2)(Component);

Хорошо знать, что они есть и какие задачи решают. Стоит понимать, что JavaScript и, в частности, код React приложения, сильно далек от классического ООП и во многих классических паттернах тут нет необходимости. А что-то уже реализовано в браузерных API и библиотеках которые вы используете.
В JavaScript и в React разработке используются свои паттерны и приемы. Просто вбейте в поисковике React patterns . Так же хорошо знать что такое принципы SOLID, DRY и прочее.

Подозреваю, что нужно понять как именно работает rebase.
При выполнении git rebase master, git сделает так:

• найдет начало текущей ветки
  
• git checkout master
  
• в цикле будет применять по одному коммиту от начала текущей ветки, до крайнего. Если будет конфликт, процесс встанет, гит предложит разрешить конфликт, и далее позволит продолжить.
  

Это примерное поведение при rebase.
В вашем же случае, подозреваю, есть конфликты, поэтому гит не доходит до тех коммитов, где появились нужные вам файлы. Если конфликт разрешить и сделать git rebase --continue процесс продолжится.
Сам по себе rebase удаления каких либо файлов не подразумевает, только применение коммитов.

А так верно заметили, что rebase уже опубликованной ветки делать не стоит.

Собрать новый объект:

const newData = Object
  .entries(data)
  .filter(n => n[1].length)
  .reduce((acc, n) => (acc[n[0]] = n[1], acc), {});

Удалить свойства существующего:

Object.keys(data).forEach(n => data[n].length || delete data[n]);

Можно использовать Lodash.

const newData = _.pickBy(data, n => n.length);

// или

_.each(data, (v, k) => v.length || delete data[k]);

Поставьте prettier.
Добавьте его в .eslintrc:

{
  "extends": [
    "airbnb",
    "prettier",
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint"
}

Исправить код можно командой:
prettier --write

ставьте плагин eslint-plugin-react. Дополнительно если не установлены:
eslint
babel-eslint
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier
eslint-config-airbnb
eslint-plugin-prettier
Добавляйте так:

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "no-plusplus": 0,
    "no-confusing-arrow": 0,
    "no-restricted-syntax": 0,
    "guard-for-in": 0,
    "class-methods-use-this": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/no-danger": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
    "import/no-unresolved": ["error", { "commonjs": true }],
    "import/extensions": 0,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
    "import/prefer-default-export": 0,
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]
  }
}

Правила настройте под себя.

Если хотите precommit проверку, то поставьте lint-stаged и husky, и добавьте следующие строки в package.json:

"scripts": {
    // ваши скрипты
    "precommit": "./node_modules/.bin/lint-staged",
  },
  "lint-staged": {
    "**/*.js": [
      "./node_modules/.bin/prettier --write",
      "./node_modules/.bin/eslint --fix",
      "./node_modules/.bin/stylelint './app/**/*.js'", // если используете  css in js
      "git add"
    ]
  },

Теперь перед каждым вашим коммитом код будет приводиться в порядок на автомате если это возможно. И прерывать коммит ошибкой если нарушены правила.

Да состояние собирается на сервере для каждого клиента (request'a), скажем на уровне мидлвара мы собираем состояние (текущего авторизованного пользователя, какие-то другие глобальные данные), далее отрабатывает обработчик маршрута, мы получили данные какой-то страницы из бд и передали их как контекст, примерно так:

import React from 'react';
import { StaticRouter } from 'react-router'
import { Provider } from 'react-redux'
import ReactDOMServer from 'react-dom/server';

import App from './client/components/App.jsx'

ReactDOMServer.renderToString(
	<Provider store={ReduxStore}>
		<StaticRouter
			location={Url}
			context={Context}>
			<App/>
		</StaticRouter>
	</Provider>
);

Где, ReduxStore сгенерированное нами глобальное состояние (redux) запроса, Url запрошенный урл, Context контекст (будет передано как this.props.staticContext в компонент). Реакт вытянет нужный контейнер роута (по вашим маршрутам в App) и передаст ему контекст, компонент рендерится исходя из полученных данных. Результатом работы метода renderToString будет html строка (размеченная реактом), которую мы шаблонизатором или как угодно впиливаем в блок моунта компонента (в верстке), дополнительно в шаблонизатор передаем сгенерированное состояние, в документации выглядит вот так:

window.__PRELOADED_STATE__ = JSON.stringify(preloadedState || {}).replace(/</g, '\\u003c')

Теперь что происходит после того как страница загрузилась и подхватились клиент-скрипты? Все просто мы подхватываем состояние из window.__PRELOADED_STATE__ и вообщем-то все, глобальное состояние передано, компонент уже отрендерен, стоит учитывать что результаты при клиент-рендере и при сервер-рендере должны быть всегда одинаковыми, так же не использовать методы доступные браузеру, но не доступные серверу (на уровне моунта и первого рендера) и хорошенько следить за своим кодом в плане памяти, иначе при какой-либо утечке, память на сервере не будет вычищаться после каждого рендера.
---
Как-то так, надеюсь помог, хотя там еще довольно много заковык

Можено сделать с callback'ом

var getDataFromDatabase = function () {
  var arr = []
  var con = mysql.createConnection(conf.config);
  con.connect(function (err) {

    if(err) throw err;
    con.query("SELECT DID, DName FROM Device")
    .on('result', function (data) {
      arr.push(data)
    })
    .on('end', function () {
      return callback(null, arr);
    })
    .on('error', function(err){
        return callback (err, null);
    });
}

module.exports = {
    getDataFromDatabase
}

Потом вызываете

var fromDB = require(./modulName);
fromDB.getDataFromDatabase(function(err, result){
    if(err){
        console.log(err);
    } else {
        console.log(result);
    }
})

Можно сделать через промис

var getDataFromDatabase = function (callback) {
    return new Promise((resolve, reject) => {
        var arr = []
        var con = mysql.createConnection(conf.config);
        con.connect(function (err) {

            if (err) throw err;
            con.query("SELECT DID, DName FROM Device")
                .on('result', function (data) {
                    arr.push(data)
                })
                .on('end', function () {
                    return resolve(arr);
                })
                .on('error', function (err) {
                    return reject(err);
                })
        });
    })
}

module.exports = {
    getDataFromDatabase
}

Вызов

var fromDB = require("./modulName");
fromDB.getDataFromDatabase()
    .then(result =>{
        console.log(result);
    },(err)=>{
        console.log(err);
    })

Ну и через асинхрнные функции тоже

var getDataFromDatabase = async function (callback) {
    return new Promise((resolve, reject) => {
        var arr = []
        var con = mysql.createConnection(conf.config);
        con.connect(function (err) {

            if (err) throw err;
            con.query("SELECT DID, DName FROM Device")
                .on('result', function (data) {
                    arr.push(data)
                })
                .on('end', function () {
                    return callback(null, arr);
                })
                .on('error', function (err) {
                    return callback(err, null);
                })
        });
    })
}

module.exports = {
    getDataFromDatabase
}

Вызов

var fromDB = require("./modulName");
var test = await fromDB.getDataFromDatabase();

Возможно я где-то ошибся, писал по памяти.
Вот тут я почти всё писал на асинхронных функциях может быть что-то полезное найдёте.

import thunk from "redux-thunk";

По-нормальному это сделать невозможно по юридическим причинам - и Гугл, и Яндекс запрещают лицензионным соглашением использовать свои данные где-либо вне собственных АПИ.
Существую плагины к Leaflet, которые "решают" эту проблему, но там адский костыль. Из лифлета загружается апи того же яндекса, и карта показывается внутри карты, как матрешка. Всё это очень неудобно, костыльно, глючно, несовместимо со сторонними плагинами...
Ну то есть для простых случаев, когда нужно просто показать карту и чтобы она двигалась - ещё сгодится. Но если у вас "много динамических данных, разные маршруты, кластеризации и много всего" - забудьте. Придётся выбрать какой-то один движок и его придерживаться.