added answer users

src/assets/styles/viewForm.module.scss

@@ -9,19 +9,59 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 
 .form {
+    overflow-y: auto;
     width: 70%;
-    min-height: 80%;
+    height: 80%;
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+    // box-shadow: 0 -1px 5px 1px rgb(200, 200, 200);
+    border: 2px solid rgb(220, 220, 220);
+    &::-webkit-scrollbar {
+        width: 7px;
+        border-left: 1px solid rgb(200, 200, 200);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: rgb(200, 200, 200);
+    }
     &__header {
-
+        border-bottom: 1px solid rgb(220, 220, 220);
+        width: 100%;
+        height: 10%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 20px;
     }
     &__content {
+        width: 100%;
+        height: 80%;
+    }
+    &__unexists {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+            display: block;
+            font-size: 18px;
+            font-family: "Montserrat", sans-serif;
+            font-style: italic;
+            color: rgb(200, 200, 200);
+        }
+    }
+}
 
-    }
+.footer {
-    &__footer {
+    // box-shadow: 0 1px 5px 1px rgb(220, 220, 220);
-
+    width: 70%;
-    }
+    height: 10%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border: 2px solid rgb(220, 220, 220);
+    border-top: none;
 }

src/components/GeneratingFormFields.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import classes from "../assets/styles/generatingFormFields.module.scss";
 
-const GeneratingFormFields = ({newForm, listTypeAnswer}) => {
+const GeneratingFormFields = ({newForm, listTypeAnswer, answers, updateAnswersForm}) => {
     return (
         newForm.map((item, i) => 
             <div className={classes.item} key={i}>
@@ -11,7 +11,13 @@ const GeneratingFormFields = ({newForm, listTypeAnswer}) => {
                 </div>
                 <div className={classes.item__answer}>
                     {
-                        listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({postfix: i, answers: item.optionAnswer})
+                        listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({
+                            postfix: i, 
+                            optionAnswer: item.optionAnswer, 
+                            answers: answers ? answers : false, 
+                            id: i,
+                            updateAnswersForm: updateAnswersForm ? updateAnswersForm : false
+                        })
                     }
                 </div>
             </div>

src/components/typeAnswer/DropDownList.jsx

@@ -10,7 +10,7 @@ const DropDownList = (props) => {
                 )}
             </select> */}
             <select>
-                {props.answers.map((item, i) => 
+                {props.optionAnswer.map((item, i) => 
                     <option value={item.id} key={i}>{item.text}</option>
                 )}
             </select>

src/components/typeAnswer/InputMultipleRadio.jsx

@@ -4,7 +4,7 @@ import classes from "../../assets/styles/components/typeAnswer/inputMultiple.mod
 const InputMultipleRadio = (props) => {
     return (
         <div className={classes.main}>
-            {props.answers.map((item, i) => 
+            {props.optionAnswer.map((item, i) => 
                 <div class="form-check" key={i}>
                     <input class="form-check-input" type="checkbox" name={`inputMultiple_${props.postfix}`} id={`inputMultiple_${props.postfix}`}/>
                     <label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>

src/components/typeAnswer/InputRadio.jsx

@@ -4,9 +4,16 @@ import classes from "../../assets/styles/components/typeAnswer/inputRadio.module
 const InputRadio = (props) => {
     return (
         <div className={classes.main}>
-            {props.answers.map((item, i) => 
+            {props.optionAnswer.map((item, i) => 
                 <div class="form-check" key={i}>
-                    <input class="form-check-input" type="radio" name={`inputRadio_${props.postfix}`} id={`choice_${item.id}`}/>
+                    <input 
+                        class="form-check-input" 
+                        type="radio" 
+                        name={`inputRadio_${props.postfix}`} 
+                        id={`choice_${item.id}`} 
+                        value={i} 
+                        checked={props.answers ? props.answers[props.id].answer === i : false}
+                        onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}/>
                     <label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
                 </div>
             )}

src/components/typeAnswer/InputText.jsx

@@ -4,7 +4,11 @@ import classes from "../../assets/styles/components/typeAnswer/inputText.module.
 const InputText = (props) => {
     return (
         <div className={classes.main}>
-            <input type="text" placeholder={"Ответ..."}/>
+            <input 
+                type="text" 
+                placeholder={"Ответ..."} 
+                value={props.answers ? props.answers[props.id].answer : ""} 
+                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}/>
         </div>
     )
 }

src/components/typeAnswer/TextArea.jsx

@@ -4,7 +4,11 @@ import classes from "../../assets/styles/components/typeAnswer/textArea.module.s
 const TextArea = (props) => {
     return (
         <div className={classes.main}>
-            <textarea placeholder={"Ответ..."}></textarea>
+            <textarea 
+                placeholder={"Ответ..."} 
+                value={props.answers ? props.answers[props.id].answer : ""} 
+                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}
+            ></textarea>
         </div>
     )
 }

src/pages/NewForm.jsx

@@ -102,7 +102,7 @@ const NewForm = () => {
             forms.map(item => {
                 if (item.id === location.state.id) {
                     item.title = 'Новая форма',
-                    item.answers = 'Без изменений',
+                    item.datetime = 'Без изменений',
                     item.update = '01/01/24',
                     item.listAnswer = newForm                
                 }
@@ -118,9 +118,10 @@ const NewForm = () => {
             [...forms, {
                 id: nextID(forms),
                 title: 'Новая форма',
-                answers: 'Без изменений',
+                datetime: 'Без изменений',
                 update: '01/01/24',
-                listAnswer: newForm
+                listAnswer: newForm,
+                answers: []
             }]
         );
         cleanStates();

src/pages/ViewForm.jsx

@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import classes from "../assets/styles/viewForm.module.scss";
 import { FormsData, TypeAnswerData } from "../context";
 import GeneratingFormFields from "../components/GeneratingFormFields.jsx";
+import MyButton from "../components/MyButton.jsx";
 
 const ViewForm = () => {
     const navigate = useNavigate();
@@ -11,29 +12,56 @@ const ViewForm = () => {
     const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData);
 
     function newForm() {
-        const searchForm = forms.find(item => item.id === Number(formId))
+        return forms.find(item => item.id === Number(formId))
+    };
 
-        if (searchForm) {
+    const [answers, setAnswers] = useState(
-            return searchForm.listAnswer
+        newForm() ? newForm().listAnswer.map(item => (
-        }
+            {id: item.id, answer: ""}
-        return []
+        )) : ""
+    );
+
+    function updateAnswersForm(value, id) {
+        console.log(value, id)
+        setAnswers(
+            answers.map((item, i) => {
+                if (id === i) {
+                    item.answer = value;
                 }
+                return item
+            })
+        )
+    };
 
     return (
         <div className={classes.main}>
+            {newForm() ? 
             <div className={classes.wrapper}>
                 <div className={classes.form}>
                     <div className={classes.form__header}>
-
+                        <div className={classes.form__header__title}>
+                            <span>{newForm().title}</span>
+                        </div>
+                        <div className={classes.form__header__id}>
+                            <span>#{formId}</span>
+                        </div>
                     </div>
                     <div className={classes.form__content}>
-                        <GeneratingFormFields newForm={newForm()} listTypeAnswer={listTypeAnswer}/>
+                        <GeneratingFormFields newForm={newForm().listAnswer} listTypeAnswer={listTypeAnswer} answers={answers} updateAnswersForm={updateAnswersForm}/>
-                    </div>
-                    <div className={classes.form__footer}>
-
                     </div>
                 </div>
+                <div className={classes.footer}>
+                    <MyButton text={"Отправить"}/>
+                    <MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => console.log(answers)}/>
                 </div>                 
+            </div> :
+            <div className={classes.wrapper}>
+                <div className={classes.form}>
+                    <div className={classes.form__unexists}>
+                        <span>Форма с идентификатором #{formId} отсутствует.</span>
+                    </div>
+                </div>                 
+            </div>}
         </div>     
     )
 }