Можете оценить уровень кода?

Всем привет. Взял недавно проект на фрилансe. Так как у меня нету много опыта, прошу вас оценить уровень моего кода и мой уровень.

Вот ссылка на код https://github.com/Slasherio/DentistForum

Всем спасибо за ответы!
  • Вопрос задан
  • 2129 просмотров
Решения вопроса 4
rockon404
@rockon404 Куратор тега React
Frontend Developer
Навскидку:
1. В проектах по-хорошему использовать типизацию TypeScript, Flow. PropTypes в таком случае использовать не надо.

2. Тут в коде бессмысленное условие:
render() {
    const { report = {} } = this.props;
    return (
      <Fragment>
        <Head>
          <title>Doctor problem with {report.doctor.name}</title>
        </Head>
        {report && <ReportDetail showDetailButton={false} data={report} />}
      </Fragment>
    );
  }

report у вас существует всегда. Надеюсь понимаете, что пустой объект кастуется в true.

3. Про ESLint/TSLint уже писали.

4. Ваши редьюсеры не имеют ключей состояния. Какой-то запрос может быть в процессе, а ваши компоненты об этом не знают.

5. Логику работы с куками лучше вынести в actions.

6. Нет смысла разделять импорты отступами, просто соблюдайте очередность и смотрите пункт 3.

7. Компонент __app можно декомпозировать.

8. Неясно зачем тут геттер
get renderReports() { /* ... */ }

9. Для сортировки можно использовать меморизацию.

10.
handleChange = (e, key) => {
    const value = e.target.value;
    this.setState({
      [key]: value,
    });
  };

<Input
  id="outlined-name" //  зачем?
  placeholder="Problem Summary"
  value={reportTitle}
  onChange={e => handleChange(e, "reportTitle")}
/>

Можно заменить на:
handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };

<Input
  id="outlined-name" //  зачем?
  placeholder="Problem Summary"
  name="reportTitle"
  value={reportTitle}
  onChange={handleChange}
/>


11. /components/ReportDetail/constants.js зачем?

12. Где-то запросы в экшенах, где-то в компонентах.

Не знаком с next.js поэтому ничего объективного по организации кода сказать не могу, так как не до конца понимаю как этот фреймворк работает. Вижу, что авторизованных запросов пока нет. Запросы к API у вас будут происходить только на стороне клиента?
Ответ написан
@curious-101
Frontend developer
Пробежался очень быстро аки гепард, так что вот, что бросилось в глаза:
  1. Раз уж используете prop-types, то используйте их для всех компонентов, а ещё лучше в линтере это правило
    пропишите

  2. Инлайновые стили надо переписать с помощью styled-components. Таких мест много кстати.

  3. Зачем этот файл тут? классы отлично себя чувствуют в styled-components.

  4. Неиспользуемый код. Тож линтер должен ругаться. Кстати плагин Eslint в IDE подключен?

  5. В одних местах Fragment, в других <>, имхо лучше выработать единую стилистику.

  6. вот тут и тут, возможно ещё где-нибудь, при рендере сработает экшен, оно надо?


Зачем вам фриланс? Вам бы поднаточить навыки на хороших проектах, посмотреть архитектурные решения и если очень повезёт чистый код "старших" товарищей.
Ответ написан
@abmanimenja
Так себе. Но не полное говно, я рад за тебя, что то уже умеешь.

Во фриланс уходить в нулёвым опытом - путь в никуда. Точнее это путь на всю жизнь пробиваться копеечными заказами "за еду".

Гораздо больше шансов во фрилансе у уже сложившегося специалиста.
Ответ написан
saboteur_kiev
@saboteur_kiev
build engineer
В коде не шарю.
Но вместо
вместо
if (process.env.NODE_ENV === "development") {
  domen = "https://serene-forest-55840.herokuapp.com";
} else {
  domen = "https://serene-forest-55840.herokuapp.com";
}

Я бы сделал два отдельных независимых конфиг файла, которые бы целиком считывались на нужном енвайрнменте.
При этом их поправить может не программист.
При этом легко добавить еще енвайрнментов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы