reorder fields on the application form, improve labels

ivelum · Oct 1, 2023 · 4b076d3 · 4b076d3
1 parent d0d5b97
commit 4b076d3
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 48 deletions.
diff --git a/src/components/ApplyForm.jsx → src/components/DeveloperForm.jsx b/src/components/ApplyForm.jsx → src/components/DeveloperForm.jsx
@@ -19,7 +19,7 @@ import FormErrorMessage from './FormErrorMessage';
 import HrLine from './HrLine';
 import Row from './Row';
 
-import * as styles from './ApplyForm.module.scss';
+import * as styles from './DeveloperForm.module.scss';
 
 export { allExperienceTypes };
 
@@ -53,7 +53,7 @@ const submitData = async (data) => {
   return response.json();
 };
 
-export default function ApplyForm({ job, experienceTypes }) {
+export default function DeveloperForm({ job, experienceTypes }) {
   useEffect(() => {
     if (!job.active) navigate(job.url);
   }, [job.active]);
@@ -97,7 +97,7 @@ export default function ApplyForm({ job, experienceTypes }) {
     linuxCommands: yup.string().required(),
     lovedTasks: yup.string().required(),
     unlovedTasks: yup.string().required(),
-    sourceCode: yup.string().required(),
+    portfolio: yup.string().required(),
     english: yup.string().required(),
     referrer: yup.string().required(),
   };
@@ -243,39 +243,41 @@ export default function ApplyForm({ job, experienceTypes }) {
                 },
               })}
             </div>
-            <div className={styles.formCol2}>
+            <div className={styles.formCol1}>
               {renderField({
-                name: 'experienceOverall',
-                label: 'Сколько у вас лет опыта в программировании?',
+                name: 'education',
+                label: 'Какое у вас образование?',
+                helpText: 'Учебное заведение, год окончания, специальность',
                 componentProps: {
                   className: styles.formControl,
                 },
               })}
             </div>
-            <div className={styles.formCol2}>
+            <div className={styles.formCol1}>
               {renderField({
-                name: 'experienceWeb',
-                label: 'Сколько из них связано с веб-разработкой?',
+                name: 'english',
+                label: 'Как у вас с английским?',
+                helpText: 'С письменным, с устным?',
                 componentProps: {
                   className: styles.formControl,
                 },
               })}
             </div>
-            <div className={styles.formCol1}>
+          </Row>
+          <Row>
+            <div className={styles.formCol2}>
               {renderField({
-                name: 'education',
-                label: 'Какое у вас образование?',
-                helpText: 'Учебное заведение, год окончания, специальность.',
+                name: 'experienceOverall',
+                label: 'Сколько у вас лет опыта в программировании?',
                 componentProps: {
                   className: styles.formControl,
                 },
               })}
             </div>
-            <div className={styles.formCol1}>
+            <div className={styles.formCol2}>
               {renderField({
-                name: 'english',
-                label: 'Как у вас с английским?',
-                helpText: 'С письменным, с устным?',
+                name: 'experienceWeb',
+                label: 'Сколько из них связано с веб-разработкой?',
                 componentProps: {
                   className: styles.formControl,
                 },
@@ -311,35 +313,30 @@ export default function ApplyForm({ job, experienceTypes }) {
               {renderField({
                 name: 'linuxCommands',
                 label: 'Назовите консольные команды Linux, '
-                  + 'состоящих из 3 символов, сколько вспомните?',
-                helpText: 'Подглядывать нечестно.',
+                  + 'состоящих из 3 символов, сколько вспомните',
+                helpText: 'Подглядывать нечестно',
                 componentProps: {
                   className: styles.formControl,
                 },
               })}
             </div>
             <div className={styles.formCol1}>
               {renderField({
-                name: 'lovedTasks',
-                label: 'Какого рода задачами вам больше '
-                  + 'всего нравится заниматься?',
-                helpText: 'Кто-то любит проектировать архитектуру, '
-                  + 'кто-то UI, кто-то заниматься исследованиями нового. '
-                  + 'То, что нравится, обычно делается легко и быстро.',
-                component: TextareaAutosize,
+                name: 'portfolio',
+                label: 'Где можно посмотреть ваш код? GitHub, '
+                  + 'GitLab, иное.',
+                helpText: 'Желательно ссылки на свои проекты, не форки',
                 componentProps: {
                   className: styles.formControl,
-                  maxRows: textareaMaxRows,
                 },
               })}
             </div>
             <div className={styles.formCol1}>
               {renderField({
-                name: 'unlovedTasks',
-                label: 'А чем не нравится заниматься?',
-                helpText: 'Бывают вещи, от которых воротит, которые '
-                  + 'приходится делать через силу. Их не получется делать '
-                  + 'быстро или не получается делать совсем.',
+                name: 'lovedTasks',
+                label: 'Какого рода задачами вам больше '
+                  + 'всего нравится заниматься?',
+                helpText: 'То, что нравится, обычно делается легко и быстро',
                 component: TextareaAutosize,
                 componentProps: {
                   className: styles.formControl,
@@ -349,12 +346,14 @@ export default function ApplyForm({ job, experienceTypes }) {
             </div>
             <div className={styles.formCol1}>
               {renderField({
-                name: 'sourceCode',
-                label: 'Где можно посмотреть ваш код? GitHub, '
-                  + 'GitLab, иное.',
-                helpText: 'Желательно ссылки на свои проекты, не форки.',
+                name: 'unlovedTasks',
+                label: 'А чем не нравится заниматься?',
+                helpText: 'Бывают вещи, которые приходится делать '
+                  + 'через силу или не хочется делать совсем',
+                component: TextareaAutosize,
                 componentProps: {
                   className: styles.formControl,
+                  maxRows: textareaMaxRows,
                 },
               })}
             </div>
@@ -363,9 +362,8 @@ export default function ApplyForm({ job, experienceTypes }) {
                 name: 'recommendedBy',
                 label: 'Знакомы ли вы с кем-то из ivelum?',
                 helpText: 'Если кто-то из наших сотрудников может вас '
-                  + 'порекомендовать, это упростит прохождение собеседований и '
-                  + 'предоставит дополнительные бонусы. Если вы знаете такого '
-                  + 'человека, укажите его имя здесь',
+                  + 'порекомендовать, это упростит прохождение собеседований. '
+                  + 'Если вы знаете такого человека, укажите его имя здесь',
                 isRequired: false,
                 componentProps: {
                   className: styles.formControl,
@@ -376,8 +374,8 @@ export default function ApplyForm({ job, experienceTypes }) {
               {renderField({
                 name: 'referrer',
                 label: 'Откуда вы узнали о вакансии?',
-                helpText: 'Наименование сайта с объявлением / может, '
-                  + 'мы вам написали сами / или друзья прислали ссылку',
+                helpText: 'Название сайта или чата с объявлением / может, '
+                  + 'мы вам сами написали / или друзья прислали ссылку',
                 componentProps: {
                   className: styles.formControl,
                 },
@@ -416,7 +414,7 @@ export default function ApplyForm({ job, experienceTypes }) {
   );
 }
 
-ApplyForm.propTypes = {
+DeveloperForm.propTypes = {
   job: PropTypes.shape({
     name: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,

diff --git a/src/components/ApplyForm.module.scss → src/components/DeveloperForm.module.scss b/src/components/ApplyForm.module.scss → src/components/DeveloperForm.module.scss
diff --git a/src/pages/frontend/form.jsx b/src/pages/frontend/form.jsx
@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React from 'react';
 
 import Jobs from '@/Jobs';
-import ApplyForm, { allExperienceTypes } from '@/components/ApplyForm';
+import DeveloperForm, { allExperienceTypes } from '@/components/DeveloperForm';
 import Layout from '@/components/layout/Layout';
 
 const backLink = { url: '/', text: 'Все вакансии' };
@@ -15,7 +15,7 @@ export default function FrontendForm() {
       metaDescription={Jobs.frontend.description}
       backLink={backLink}
     >
-      <ApplyForm
+      <DeveloperForm
         job={Jobs.frontend}
         experienceTypes={omit(allExperienceTypes, ['php', 'python', 'django'])}
       />

diff --git a/src/pages/php/form.jsx b/src/pages/php/form.jsx
@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React from 'react';
 
 import Jobs from '@/Jobs';
-import ApplyForm, { allExperienceTypes } from '@/components/ApplyForm';
+import DeveloperForm, { allExperienceTypes } from '@/components/DeveloperForm';
 import Layout from '@/components/layout/Layout';
 
 const backLink = { url: '/', text: 'Все вакансии' };
@@ -15,7 +15,7 @@ export default function PHPForm() {
       metaDescription={Jobs.php.description}
       backLink={backLink}
     >
-      <ApplyForm
+      <DeveloperForm
         job={Jobs.php}
         experienceTypes={omit(allExperienceTypes, ['django'])}
       />

diff --git a/src/pages/python/form.jsx b/src/pages/python/form.jsx
@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React from 'react';
 
 import Jobs from '@/Jobs';
-import ApplyForm, { allExperienceTypes } from '@/components/ApplyForm';
+import DeveloperForm, { allExperienceTypes } from '@/components/DeveloperForm';
 import Layout from '@/components/layout/Layout';
 
 const backLink = { url: '/', text: 'Все вакансии' };
@@ -15,7 +15,7 @@ export default function PythonForm() {
       metaDescription={Jobs.python.description}
       backLink={backLink}
     >
-      <ApplyForm
+      <DeveloperForm
         job={Jobs.python}
         experienceTypes={omit(allExperienceTypes, ['php'])}
       />