Assessment of your level. How to improve the code?

Question

JavaScript

Hello, in recent months I have been actively studying JS and React, I try to write code as much as possible and work on practical tasks, I mainly take information from open sources, but there are no experienced comrades who could evaluate how correctly I use it. Now I plan to start interviewing and I want to at least roughly understand my level and the amount of shit code in my projects.
The last thing I wrote - https://pink-react-app.firebaseapp.com/ - Git - https://github.com/waytolax/pink-react-app
I would appreciate any comments, ratings and advice, what else is worth work to pay attention to.

Answer 1

1. Use constinstead letto define variables that are not redefined in the code. This helps reduce the cognitive load on the person reading the code and is an unspoken standard in React development.
2. Things like globalStyles and store configuration should be placed in separate files. They can grow well over time.
Regarding globalStyles, you can generally put them in a separate css file.
3. Instead of:

{
  isModal
  ? <Route path="/auth" component={AuthPopup} />
  : null
}

it is better:
4. Instead of:

function mapDispatchToProps(dispatch) {
    return {
        autoLogin: () => dispatch(autoLogin()),
        getBrowser: () => dispatch(getBrowser()),
        getMedia: () => dispatch(getMedia())
    }
}

it is better:

const mapDispatchToProps = {
  autoLogin,
  getBrowser,
  getMedia,
};

5. Semicolons at the end either yes or no. Decide and bring the code to one form.
6.

& label {}
& input {}
& span {}

This is not a very good approach. First, your styles are not isolated, which can lead to unexpected results . Secondly, you have a lot of duplication of styles. Define Input and Label as base components and use in different places, same with the rest if any.
7. Why is the folder with pages called Containers? Tribute to boilerplates?
8. Using trailing comma is good practice.
nine.

import {combineReducers} from 'redux';
import photoReducer from './photoReducer';
import authReducer from './authReducer';
import globalReducer from './globalReducer';

export default combineReducers({
    photoReducer, authReducer, globalReducer
})

Still, it’s more pleasant to work with a repository in which the keys do not have the word reducer in the name:

import {combineReducers} from 'redux';
import photo from './photoReducer';
import auth from './authReducer';
import global from './globalReducer';

export default combineReducers({
  photo, 
  auth,
  global,
});

10. Forget in general that the language has the ability to use a nested ternary operator:

return e === 'invalid-email' ? 'Неверно указан e-mail'
    : e === 'user-not-found' ? 'Указанный e-mail на найден'
    : e === 'wrong-password' ? 'Неверный пароль'
    : e === 'email-already-in-use' ? 'Указанный e-mail уже используется'
    : e === 'network-request-failed' ? 'Нет подключения к интернету'
    : e === 'operation-not-allowed' ? 'Произошла ошибка, попробуйте снова'
    : e === 'popup-closed-by-user' ? 'Окно авторизации закрыто пользователем'
    : e === 'account-exists-with-different-credential' ? 'Аккаунт уже существует с другими данными, используйте другой способ авторизации'
    : e

This is one of the worst practices in JavaScript development. Construction 11 is better suited here. It is better to move the actionTypes constants to the constants folder and decompose into different files, otherwise over time you will have a dump there. 12. Instead of:switch case
It is better:

import {
  SET_ACTIVE,
  CHANGE_VALUE,
  SET_DEFAULT, UPLOAD,  
  UPDATE_IMAGE,
  SET_IMAGE_ERROR,
  SET_LIKE,
  SET_COMMENT,
  ADD_ARTICLE_SUCCESS,
  FETCH_ARTICLES_START,
  FETCH_ARTICLES_SUCCESS,
  FETCH_ARTICLES_ERROR,
} from '../actions/actionTypes';

13. Try injecting the reselect library . And to get the value from the store instead of writing a view:

function mapStateToProps(state) {
    return {
        browser: state.globalReducer.browser
    }
}

use selector:

const mapStateToProps = state => ({
  browser: browserSelector(state),
});