completed PsychTest page

pairent_backend/pairent_app/migrations/0006_alter_user_options_alter_user_about_me_and_more.py

@@ -97,7 +97,6 @@ class Migration(migrations.Migration):
                 ('tenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на десятый вопрос')),
                 ('eleventh_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на одиннадцатый вопрос')),
                 ('twelfth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на двенадцатый вопрос')),
-                ('thirteenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на тринадцатый вопрос')),
                 ('users', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='pairent_app.user', verbose_name='Пользователь')),
             ],
         ),

pairent_backend/pairent_app/models.py

@@ -122,7 +122,6 @@ class PsychTestAnswers(models.Model):
     tenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на десятый вопрос")
     eleventh_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на одиннадцатый вопрос")
     twelfth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на двенадцатый вопрос")
-    thirteenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на тринадцатый вопрос")
 
     class Meta:
         verbose_name = "Ответ на психологический тест"

pairent_backend/pairent_app/views.py

@@ -98,19 +98,18 @@ class PsychTestAddResultViewSet(viewsets.ViewSet):
         results = request.data
         PsychTestAnswers.objects.create(
             user=user,
-            first_question=results['first'],
-            second_question=results['second'],
-            third_question=results['third'],
-            fourth_question=results['fourth'],
-            fifth_question=results['fifth'],
-            sixth_question=results['sixth'],
-            seventh_question=results['seventh'],
-            eighth_question=results['eighth'],
-            nineth_question=results['nineth'],
-            tenth_question=results['tenth'],
-            eleventh_question=results['eleventh'],
-            twelfth_question=results['twelfth'],
-            thirteenth_question=results['thirteenth']
+            first_question=results[0],
+            second_question=results[1],
+            third_question=results[2],
+            fourth_question=results[3],
+            fifth_question=results[4],
+            sixth_question=results[5],
+            seventh_question=results[6],
+            eighth_question=results[7],
+            nineth_question=results[8],
+            tenth_question=results[9],
+            eleventh_question=results[10],
+            twelfth_question=results[11]
         )
         return Response({'successfully': 'results post'})
 

pairent_frontend_react/src/components/PsychTestForm/index.jsx

@@ -0,0 +1,116 @@
+import PsychTestQuestion from "../PsychTestQuestion";
+import React, { useState } from "react";
+import PsychTestAddResult from "../../API/PsychTestAddResult";
+import { useNavigate } from "react-router-dom";
+import "./styles/PsychTestForm.css";
+
+const PsychTestForm = () => {
+    const [isValid, setIsValid] = useState(true);
+    const navigate = useNavigate();
+    const [answers, setAnswers] = useState(new Array(12));
+
+    const answerChangeHandler = (answer, account) => {
+        answers[account] = answer;
+        setAnswers(answers);
+    };
+
+    const submitHandler = async (event) => {
+        event.preventDefault();
+        let isTrue = true;
+        for (let i = 0; i < 12; i++) {
+            if (answers[i] == undefined) {
+                setIsValid(false);
+                isTrue = false;
+            }
+        }
+        if (isTrue) {
+            await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя TODO: приделать логин систему
+            navigate("/");
+        }
+    };
+
+    return (
+        <form onSubmit={submitHandler} className="form">
+            <PsychTestQuestion
+                name="На сколько Вам важна национальность вашего соседа/соседки?"
+                account="0"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="Согласны ли Вы делить одну комнату с вашим соседом/соседкой?"
+                account="1"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="Какое число людей, снимающих квартиру (включая Вас), для вас приемлемо?"
+                account="2"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое коммуникативное качество, как общительность, в вашем соседе/соседке?"
+                account="3"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое коммуникативное качество, как эмпатия, в вашем соседе/соседке?"
+                account="4"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое коммуникативное качество, как доброжелательность, в вашем соседе/соседке?"
+                account="5"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое коммуникативное качество, как тактичность, в вашем соседе/соседке?"
+                account="6"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое личностное качество, как ответственность, в вашем соседе/соседке?"
+                account="7"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое личностное качество, как аккуратность, в вашем соседе/соседке?"
+                account="8"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое личностное качество, как честность (искренность) , в вашем соседе/соседке ?"
+                account="9"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важно такое личностное качество, как чистоплотность , в вашем соседе/соседке ?"
+                account="10"
+                onChangeAnswer={answerChangeHandler}
+            />
+            <PsychTestQuestion
+                name="На сколько вам важна такия черта характера, как трудолюбие , в вашем соседе/соседке ?"
+                account="11"
+                onChangeAnswer={answerChangeHandler}
+            />
+            {isValid && (
+                <div className="btn-box">
+                    <button className="btn-box__form-btn" type="submit">
+                        Отправить
+                    </button>
+                </div>
+            )}
+            {!isValid && (
+                <div className="btn-box">
+                    <button className="btn-box__form-btn" type="submit">
+                        Отправить
+                    </button>
+                    <p className="btn-box__text">
+                        Вы не ответили на один из вопросов
+                    </p>
+                </div>
+            )}
+            {/* <button type="submit">Отправить</button> */}
+        </form>
+    );
+};
+
+export default PsychTestForm;

pairent_frontend_react/src/components/PsychTestForm/styles/PsychTestForm.css

@@ -0,0 +1,25 @@
+.form {
+    position: relative;
+}
+
+.btn-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.btn-box__form-btn {
+    background-color: #007eff;
+    width: 192px;
+    height: 33px;
+    border-radius: 12px;
+    font-size: 14px;
+    color: white;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.btn-box__text {
+    color: red;
+    padding-left: 37.5px;
+}

pairent_frontend_react/src/components/PsychTestHeader/index.jsx

@@ -0,0 +1,14 @@
+import "./styles/PsychTestHeader.css";
+
+const PsychTestHeader = () => {
+    return (
+        <div className="header">
+            <button type="button" className="header__btn">
+                Вернуться назад
+            </button>
+            <h1 className="header__title">Тест на совместимость</h1>
+        </div>
+    );
+};
+
+export default PsychTestHeader;

pairent_frontend_react/src/components/PsychTestHeader/styles/PsychTestHeader.css

@@ -0,0 +1,22 @@
+.header {
+    display: flex;
+    padding-left: 40px;
+    padding-top: 14px;
+    align-items: center;
+    margin-bottom: 55px;
+}
+
+.header__title {
+    font-size: 20px;
+}
+
+.header__btn {
+    color: #bababa;
+    font-size: 15px;
+    width: 180px;
+    height: 36px;
+    background-color: white;
+    border: 1px solid #cccccc;
+    border-radius: 12px;
+    margin-right: 13px;
+}

pairent_frontend_react/src/components/PsychTestQuestion/index.jsx

@@ -1,57 +1,63 @@
 import React, { useState } from "react";
+import "./styles/PsychTestQuestion.css";
 
 const PsychTestQuestion = (props) => {
     const answerChangeHandler = (event) => {
         props.onChangeAnswer(event.target.value, event.target.name);
     };
     return (
-        <div>
-            <label>{props.name}</label>
-            <label>
-                <input
-                    name={props.account}
-                    type="radio"
-                    value="1"
-                    onChange={answerChangeHandler}
-                />
-                1
-            </label>
-            <label>
-                <input
-                    name={props.account}
-                    type="radio"
-                    value="2"
-                    onChange={answerChangeHandler}
-                />
-                2
-            </label>
-            <label>
-                <input
-                    name={props.account}
-                    type="radio"
-                    value="3"
-                    onChange={answerChangeHandler}
-                />
-                3
-            </label>
-            <label>
-                <input
-                    name={props.account}
-                    type="radio"
-                    value="4"
-                    onChange={answerChangeHandler}
-                />
-                4
-            </label>
-            <label>
-                <input
-                    name={props.account}
-                    type="radio"
-                    value="5"
-                    onChange={answerChangeHandler}
-                />
-                5
-            </label>
+        <div className="question">
+            <div className="question__account">{+props.account + 1}</div>
+            <p className="question__title">{props.name}</p>
+            <div className="question__answers">
+                <p>Не важно</p>
+                <label className="question__answer">
+                    <input
+                        name={props.account}
+                        type="radio"
+                        value="1"
+                        onChange={answerChangeHandler}
+                    />
+                    <span>1</span>
+                </label>
+                <label className="question__answer">
+                    <input
+                        name={props.account}
+                        type="radio"
+                        value="2"
+                        onChange={answerChangeHandler}
+                    />
+                    <span>2</span>
+                </label>
+                <label className="question__answer">
+                    <input
+                        name={props.account}
+                        type="radio"
+                        value="3"
+                        onChange={answerChangeHandler}
+                    />
+                    <span>3</span>
+                </label>
+                <label className="question__answer">
+                    <input
+                        name={props.account}
+                        type="radio"
+                        value="4"
+                        onChange={answerChangeHandler}
+                    />
+                    <span>4</span>
+                </label>
+                <label className="question__answer">
+                    <input
+                        name={props.account}
+                        type="radio"
+                        value="5"
+                        onChange={answerChangeHandler}
+                    />
+                    <span>5</span>
+                </label>
+                <p>Очень важно</p>
+            </div>
         </div>
     );
 };

pairent_frontend_react/src/components/PsychTestQuestion/styles/PsychTestQuestion.css

@@ -0,0 +1,68 @@
+.question {
+    padding-top: 4px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    width: 799px;
+    min-height: 151px;
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 34.5px;
+}
+
+.question__account {
+    color: #cccccc;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 2px solid #cccccc;
+    border-radius: 100px;
+}
+
+.question__answers input {
+    width: 16px;
+    height: 16px;
+}
+
+.question__title {
+    margin-bottom: 80px;
+    text-align: center;
+    width: 638px;
+    font-size: 16px;
+    margin-right: 0;
+}
+
+.question__answers {
+    display: flex;
+    margin-bottom: 29.5px;
+}
+
+.question__answers p,
+span {
+    font-size: 14px;
+}
+
+.question__answer {
+    position: relative;
+}
+
+.question__answer span {
+    position: absolute;
+    top: -17px;
+    left: 3.5px;
+}
+
+.question__answers input,
+p {
+    margin-right: 32px;
+}
+
+.question__answers *:last-child {
+    margin-right: 0;
+}

pairent_frontend_react/src/pages/PsychTest/index.jsx

@@ -1,175 +1,12 @@
-import PsychTestQuestion from "../../components/PsychTestQuestion";
-import React, { useState } from "react";
-import PsychTestAddResult from "../../API/PsychTestAddResult";
-import { useNavigate } from "react-router-dom";
+import PsychTestForm from "../../components/PsychTestForm";
+import PsychTestHeader from "../../components/PsychTestHeader";
 
 const PsychTest = () => {
-    const navigate = useNavigate();
-    const [answers, setAnswers] = useState({
-        first: 0,
-        second: 0,
-        third: 0,
-        fourth: 0,
-        fifth: 0,
-        sixth: 0,
-        seventh: 0,
-        eighth: 0,
-        nineth: 0,
-        tenth: 0,
-        eleventh: 0,
-        twelfth: 0,
-        thirteenth: 0,
-    });
-
-    // TODO: Может как-то изменить, а то я сидел и тупил только не ругайте
-    const answerChangeHandler = (answer, account) => {
-        if (account == "first") {
-            setAnswers((previous) => ({
-                ...previous,
-                first: answer,
-            }));
-        } else if (account == "second") {
-            setAnswers((previous) => ({
-                ...previous,
-                second: answer,
-            }));
-        } else if (account == "third") {
-            setAnswers((previous) => ({
-                ...previous,
-                third: answer,
-            }));
-        } else if (account == "fourth") {
-            setAnswers((previous) => ({
-                ...previous,
-                fourth: answer,
-            }));
-        } else if (account == "fifth") {
-            setAnswers((previous) => ({
-                ...previous,
-                fifth: answer,
-            }));
-        } else if (account == "sixth") {
-            setAnswers((previous) => ({
-                ...previous,
-                sixth: answer,
-            }));
-        } else if (account == "seventh") {
-            setAnswers((previous) => ({
-                ...previous,
-                seventh: answer,
-            }));
-        } else if (account == "eight") {
-            setAnswers((previous) => ({
-                ...previous,
-                eight: answer,
-            }));
-        } else if (account == "nineth") {
-            setAnswers((previous) => ({
-                ...previous,
-                nineth: answer,
-            }));
-        } else if (account == "tenth") {
-            setAnswers((previous) => ({
-                ...previous,
-                tenth: answer,
-            }));
-        } else if (account == "eleventh") {
-            setAnswers((previous) => ({
-                ...previous,
-                eleventh: answer,
-            }));
-        } else if (account == "twelfth") {
-            setAnswers((previous) => ({
-                ...previous,
-                twelfth: answer,
-            }));
-        } else if (account == "thirteenth") {
-            setAnswers((previous) => ({
-                ...previous,
-                thirteenth: answer,
-            }));
-        }
-    };
-
-    const submitHandler = async (event) => {
-        event.preventDefault();
-        const result = await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя
-        console.log(result);
-        navigate("/");
-    };
-
     return (
-        <div>
-            <h1>Название теста</h1>
-            <form onSubmit={submitHandler}>
-                <PsychTestQuestion
-                    name="Название вопроса 1"
-                    account="first"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 2"
-                    account="second"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 3"
-                    account="third"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 4"
-                    account="fourth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 5"
-                    account="fifth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 6"
-                    account="sixth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 7"
-                    account="seventh"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 8"
-                    account="eighth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 9"
-                    account="nineth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 10"
-                    account="tenth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 11"
-                    account="eleventh"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 12"
-                    account="twelfth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <PsychTestQuestion
-                    name="Название вопроса 13"
-                    account="thirteenth"
-                    onChangeAnswer={answerChangeHandler}
-                />
-                <button type="submit">Отправить</button>
-            </form>
-        </div>
+        <>
+            <PsychTestHeader />
+            <PsychTestForm />
+        </>
     );
 };