Alexander

Везде

Тут описаны все доступные атрибуты для инпута, включая тот, что тебе нужен `multiple` https://developer.mozilla.org/en-US/docs/Web/HTML/...

А код выбора файла переделать на работу с массивом файлов.

const ImageSelect: React.FC<{
  max?: number;
}> = ({ max = 4 }) => {
  const [images, setImages] = React.useState<ImageObj[]>([])

  const onSelectImage = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []).slice(0, max);

    setImages(files.map((file) => ({
      file,
      blobUrl: URL.createObjectURL(new Blob([file]))
    })));
  }, [])

  return <input type="file" accept="image/*" onChange={(e) => { onSelectImage(e) }} />
}

React сам по себе довольно декларативен, по этому лучше выносить логику в отдельную функцию ИМХО.

Как-то так:

const ClickableArea = ({ component: Component = 'div', to, children, ...props }) => {
	const history = useHistory();
	const control = useRef(null);

	const handleClick = useCallback((event) => {
		if (event.target === control.current) {
			history.push(to);
		}
	}, [history, control, to]);

	return (
		<Component ref={control} onClick={handleClick} tabIndex={-1} {...props}>
			{children}
		</Component>
	);
};

<ClickableArea
	className={classes.tweet}
	component={Paper}
	variant="outlined"
	to={`/home/tweet/${_id}`}
>...</ClickableArea>

Ещё можно внутри Paper создать NavLink на нужную страницу, при помощи ::after на ссылке растянуть её на весь контейнер. При помощи display: grid/flex на родителе можно будет поправить всем остальным элементам z-index.

Для удобства и лучшей читаемости кода конечно нужно выносить в отдельные функции.
Только если компонент небольшой и выполняется что-то по типу: setState((prev) => --prev) тогда можете не выносить.

export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  const [closing, setClosing] = useState(false);
  const handleClose = () => setClosing(true);
  
  useEffect(() => {
    if (isOpen) {
      setClosing(false);
    }
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <Dialog TransitionComponent={Transition} open={!closing && isOpen} onExited={onClose} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={handleClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  );
};

case 'SN/PROFILE/ADD_POST': {
  let newPost = {
    id: 1,
    postMessage: action.post.postMessage,
    file: action.post.file,
  }
+ let previousPost = state.posts[state.posts.length - 1] || null;
+ if (previousPost !== null) {
+   newPost.id = previousPost.id + 1;
+ }
  return {
    ...state,
    posts: [...state.posts, newPost],
  }
}

case 'SN/PROFILE/ADD_POST': {
      let newPost = {
        id: state.posts.length, // or state.posts[state.posts.length - 1].id + 1;
        postMessage: action.post.postMessage,
        file: action.post.file,
      }
      return {
        ...state,
        posts: [...state.posts, newPost],
      }
    }

Создаешь функцию, которая возвращает тебе компонент material UI по ключу?

getIcon = key => {
  switch(key) {
      case: 'facebook': 
         return {
              <MaterialUiComponent {...rest} />
         }
   }
}



const Contact: React.FC<ContactPropsType> = ({ key, contactTitle, contactLink }) => {
  return (
    <div>
      <span>
        {getIcon(key)}
        {contactTitle}: {contactLink}
      </span>
    </div>
  )
}

https://codesandbox.io/s/qna-q963407-lgkp1

avatar: {
  '&:hover': {
    '& $changePhoto': {
      display: 'block',
    },
  },
},
changePhoto: {},

Используйте localStorage. При первом запросе сохранить, затем при инициализации стора, пробовать доставать нужные данные из localStorage, если их нет, делать запрос

useEffect(() => {
   refreshProfile()
}, [props.match.params.userId]);

Если значение props.match.params.userId не изменилось, React не запустит useEffect.

можно попробовать найти тут
https://github.com/public-apis/public-apis

это список публичных открытых апи

Если ты работаешь с react, значит знаешь js, если знаешь js, значит бери express и делай api на нём, или возьми что то вроде json-server, не думаю что может быть что то еще проще.

Добавь dispatch в массивы к остальным зависимостям, как советует warning

если всегда по умолчанию активен этот элемент, то лучше в html