исправленная лабораторная 5

.idea/.gitignore

@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml

.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/rep.iml" filepath="$PROJECT_DIR$/.idea/rep.iml" />
-    </modules>
-  </component>
-</project>

.idea/rep.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

5 lab/src/components/ChangeAvatar/form/Avatar.jsx

@@ -7,6 +7,7 @@ import useLinesFormModal from '../hooks/AvaFormModalHook';
 import NickModal from './AvaModal';
 import getBase64FromFile from '../../utils/Base64';
 
+// eslint-disable-next-line react/prop-types
 const AvaForm = ({ item, setItem }) => {
     const { handleLinesChange } = useLines();
     const handleImageChange = async (event) => {
@@ -29,8 +30,8 @@ const AvaForm = ({ item, setItem }) => {
         <>
         <ListGroup.Item>
                 <a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
-                <img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/a.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
-                <h6 className="mb-0">Изменить автар</h6>
+                <h6 className="mb-0">Изменить авaтар</h6>
                 </a>
         </ListGroup.Item>
         <ModalForm show={isFormModalShow} validated={isFormValidated}

5 lab/src/components/ChangeAvatar/hooks/AvaFormModalHook.js

@@ -10,7 +10,7 @@ const useLinesFormModal = (linesChangeHandle, itemAvatar) => {
     const {
         item,
         validated,
-        handleSubmitChange,
+        handleSubmitChangeAva,
         handleChange,
         resetValidity,
     } = useLinesItemForm(id, linesChangeHandle);
@@ -27,7 +27,7 @@ const useLinesFormModal = (linesChangeHandle, itemAvatar) => {
     };
 
     const onSubmit = async (event) => {
-        if (await handleSubmitChange(event, 'avatar', itemAvatar)) {
+        if (await handleSubmitChangeAva(event, itemAvatar, itemAvatar)) {
             onClose();
         }
     };

5 lab/src/components/ChangeNickname/form/Nickname.jsx

@@ -7,7 +7,8 @@ import ModalForm from '../../modal/ModalForm';
 import useLinesFormModal from '../hooks/NickFormModalHook';
 import NickModal from './NickModal';
 
-const NickForm = ({ setItem }) => {
+// eslint-disable-next-line react/prop-types
+const NickForm = ({ item, setItem }) => {
     const { handleLinesChange } = useLines();
     const [nickname, setNickname] = useState('');
     const {
@@ -16,12 +17,12 @@ const NickForm = ({ setItem }) => {
         showFormModal,
         handleFormSubmit,
         handleFormClose,
-    } = useLinesFormModal(handleLinesChange, nickname, setItem);
+    } = useLinesFormModal(handleLinesChange, nickname, setItem, item);
     return (
         <>
         <ListGroup.Item>
                 <a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
-                <img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/nick.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Изменить никнейм</h6>
                 </a>
         </ListGroup.Item>

5 lab/src/components/ChangeNickname/hooks/NickFormModalHook.js

@@ -3,18 +3,19 @@ import useLinesItem from '../../users/hooks/UsersItemHook';
 import useModal from '../../modal/ModalHook';
 import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
 
-const useLinesFormModal = (linesChangeHandle, nickname, setItem) => {
+const useLinesFormModal = (linesChangeHandle, nickname, setItem, item2) => {
     const { isModalShow, showModal, hideModal } = useModal();
+    // eslint-disable-next-line no-unused-vars
     const [currentId, setCurrentId] = useState(0);
     const id = localStorage.getItem('UserId');
     const user = useLinesItem(localStorage.getItem('UserId'));
     const {
         item,
         validated,
-        handleSubmitChange,
+        handleSubmitChangeNick,
         handleChange,
         resetValidity,
-    } = useLinesItemForm(id, linesChangeHandle);
+    } = useLinesItemForm(id, linesChangeHandle, item2);
 
     const showModalDialog = (ids) => {
         setCurrentId(ids);
@@ -28,8 +29,10 @@ const useLinesFormModal = (linesChangeHandle, nickname, setItem) => {
     };
 
     const onSubmit = async (event) => {
-        if (await handleSubmitChange(event, 'nickname', nickname)) {
+        if (await handleSubmitChangeNick(event, nickname, item2)) {
             user.item.nickname = nickname;
+            user.item.image = item2.image;
+            console.log(user);
             setItem(user.item);
             onClose();
         }

5 lab/src/components/ChangePassword/form/Password.jsx

@@ -21,7 +21,7 @@ const PasForm = () => {
         <>
         <ListGroup.Item>
                 <a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
-                <img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/p.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Изменить пароль</h6>
                 </a>
         </ListGroup.Item>

5 lab/src/components/ChangePassword/hooks/PasFormModalHook.js

@@ -4,12 +4,13 @@ import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
 
 const useLinesFormModal = (linesChangeHandle, password) => {
     const { isModalShow, showModal, hideModal } = useModal();
+    // eslint-disable-next-line no-unused-vars
     const [currentId, setCurrentId] = useState(0);
     const id = localStorage.getItem('UserId');
     const {
         item,
         validated,
-        handleSubmitChange,
+        handleSubmitChangePass,
         handleChange,
         resetValidity,
     } = useLinesItemForm(id, linesChangeHandle);
@@ -26,7 +27,7 @@ const useLinesFormModal = (linesChangeHandle, password) => {
     };
 
     const onSubmit = async (event) => {
-        if (await handleSubmitChange(event, 'password', password)) {
+        if (await handleSubmitChangePass(event, password)) {
             onClose();
         }
     };

5 lab/src/components/chats/Chats.jsx

@@ -15,7 +15,7 @@ const Chats = ({ setDialogID, setMessages }) => {
           <ListGroup.Item>
           {
           friends.map((line) =>
-          <Message key ={line} id ={line.friendId.toString()}
+          <Message key ={line.groupId} line ={line}
           groupId = { line.groupId } setDialogID ={setDialogID} setMessages ={setMessages}/>)
           }
           </ListGroup.Item>

5 lab/src/components/comment/form/comment.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-unresolved, import/extensions
 import UseLinesItem from '../../users/hooks/UsersItemHook';
 
 const Comment = ({ item }) => {
@@ -12,7 +11,7 @@ const Comment = ({ item }) => {
         <img src={image} alt="david" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
         <h4 className="mb-0">{nickname}</h4>
         </div>
-        <small className="opacity-50 text-nowrap">{'12:11'}</small>
+        <small className="opacity-50 text-nowrap">{item.time}</small>
         </div>
         <div className="d-flex gap-2 w-100 justify-content-between">
           <div>

5 lab/src/components/comment/form/comments.jsx

@@ -5,7 +5,6 @@ import { ListGroup } from 'react-bootstrap';
 import Comment from './comment';
 
 const Comments = ({ coments }) => {
-    console.log(coments);
         if (coments.coments !== undefined) {
             // eslint-disable-next-line no-param-reassign
             coments = coments.coments;
@@ -13,7 +12,7 @@ const Comments = ({ coments }) => {
             <ListGroup>
             <ListGroup.Item>
             {
-            coments.map((line) => <Comment key={line.id} item = {line} />)
+            coments.map((line) => <Comment key={line.time} item = {line} />)
             }
             </ListGroup.Item>
             </ListGroup>

5 lab/src/components/comment/hooks/CommsItemFormHook.js

@@ -7,7 +7,7 @@ import useLines from './CommsHook';
 const useLinesItemForm = (linesChangeHandle, postIdd, setComms) => {
     const { item } = useLinesItem(-1);
     const tmp = useLines();
-    const id = tmp.comments.length + 1;
+    let id = tmp.comments.length;
     const { comments } = useLines(postIdd);
     const [validated, setValidated] = useState(false);
     const resetValidity = () => {
@@ -18,14 +18,17 @@ const useLinesItemForm = (linesChangeHandle, postIdd, setComms) => {
         const personId = parseInt(localStorage.getItem('UserId'), 10);
         const commText = formData.commText.toString();
         const postId = parseInt(postIdd, 10);
+        const time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
         return {
             personId: personId.toString(),
             commText: commText.toString(),
             postId: postId.toString(),
+            time: time.toString(),
         };
     };
 
     const handleSubmit = async (event, comment) => {
+        id += 1;
         const form = event.currentTarget;
         event.preventDefault();
         event.stopPropagation();

5 lab/src/components/comment/hooks/CommsItemHook.js

@@ -7,6 +7,7 @@ const useLinesItem = (id) => {
         id: '',
         personId: '',
         commText: '',
+        text: '',
         postId: '',
     };
     const [item, setItem] = useState({ ...emptyItem });

5 lab/src/components/groups/hooks/GroupsHook.js

@@ -13,7 +13,6 @@ const useLines = (typeFilter) => {
 
     useEffect(() => {
         getLines();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [linesRefresh, typeFilter]);
 
     return {

5 lab/src/components/groups/table/Line.jsx

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import useLines from '../../users/hooks/UsersHook';
-
-const Line = ({
-    index, personId, friendId,
-}) => {
-    const { users } = useLines();
-    let personNickname = null;
-     users.map((line) => {
-        if (line.id === personId) {
-            personNickname = line.nickname;
-            return '';
-        }
-        return '';
-    });
-    let friendNickname = null;
-     users.map((line) => {
-        if (line.id === friendId) {
-            friendNickname = line.nickname;
-            return '';
-        }
-        return '';
-    });
-    return (
-        <tr>
-            <th scope="row">{index + 1}</th>
-            <td>{personNickname}</td>
-            <td>{friendNickname}</td>
-        </tr>
-    );
-};
-Line.propTypes = {
-    index: PropTypes.number,
-    personId: PropTypes.number,
-    friendId: PropTypes.number,
-    users: PropTypes.object,
-};
-export default Line;

5 lab/src/components/groups/table/Lines.jsx

@@ -1,29 +0,0 @@
-/* eslint-disable import/extensions */
-/* eslint-disable import/no-unresolved */
-import { Button, ButtonGroup } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-import useLines from '../hooks/GroupsHook';
-import LinesTable from './LinesTable.jsx';
-import Line from './Line';
-
-const Lines = () => {
-    const { groups } = useLines();
-    return (
-        <>
-            <ButtonGroup>
-                <Button as={Link} to='/editPage' variant='success'>
-                    Добавить товар (страница)
-                </Button>
-            </ButtonGroup>
-            <LinesTable>
-                {
-                    groups.map((line, index) =>
-                    <Line key ={ line.id } index ={index} personId ={ line.personId }
-                     friendId = {line.friend}/>)
-                }
-            </LinesTable>
-        </>
-    );
-};
-
-export default Lines;

5 lab/src/components/groups/table/LinesTable.jsx

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import { Table } from 'react-bootstrap';
-
-const LinesTable = ({ children }) => {
-    return (
-        <Table className='mt-2' striped responsive>
-            <thead>
-                <tr>
-                    <th scope='col'>№</th>
-                    <th scope='col' className='w-25'>id человека</th>
-                    <th scope='col' className='w-25'>друг</th>
-                    <th scope='col'></th>
-                    <th scope='col'></th>
-                    <th scope='col'></th>
-                    <th scope='col'></th>
-                    <th scope='col'></th>
-                </tr>
-            </thead>
-            <tbody>
-                {children}
-            </tbody >
-        </Table >
-    );
-};
-
-LinesTable.propTypes = {
-    children: PropTypes.node,
-};
-
-export default LinesTable;

5 lab/src/components/groups/table/LinesTableRow.jsx

@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-
-const LinesTableRow = ({
-    index, line,
-}) => {
-    return (
-        <tr>
-            <th scope="row">{index + 1}</th>
-            <td>{line.personId}</td>
-            <td>{line.friend}</td>
-            <td>{line.nickname}</td>
-        </tr>
-    );
-};
-
-LinesTableRow.propTypes = {
-    index: PropTypes.number,
-    line: PropTypes.object,
-    onDelete: PropTypes.func,
-    onEdit: PropTypes.func,
-    onEditInPage: PropTypes.func,
-};
-
-export default LinesTableRow;

5 lab/src/components/help/form/Help.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
-import { ListGroup, Modal, Button, Form } from 'react-bootstrap';
+import {
-import { useState } from 'react';
+    ListGroup, Modal, Button, Form,
+ } from 'react-bootstrap';
 import useLines from '../../users/hooks/UsersHook';
-import ModalForm from '../../modal/ModalForm';
 import useLinesFormModal from '../hooks/HelpFormModalHook';
 import NickModal from './HelpModal';
 
@@ -19,7 +19,7 @@ const HelpForm = () => {
         <>
         <ListGroup.Item>
                 <a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
-                <img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/help.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Помощь</h6>
                 </a>
         </ListGroup.Item>

5 lab/src/components/help/form/HelpModal.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
-import Input from '../../input/Input.jsx';
 
-const NickModal = ({ password, setPassword }) => {
+const NickModal = () => {
     return (
         <>
            <p>Страница главная отображает посты и комментарии,

5 lab/src/components/help/hooks/HelpFormModalHook.js

@@ -4,6 +4,7 @@ import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
 
 const useLinesFormModal = (linesChangeHandle, password) => {
     const { isModalShow, showModal, hideModal } = useModal();
+    // eslint-disable-next-line no-unused-vars
     const [currentId, setCurrentId] = useState(0);
     const id = localStorage.getItem('UserId');
     const {

5 lab/src/components/information/index.jsx

@@ -1,50 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { useState } from 'react';
-import Modal from 'react-modal';
-import { ListGroup } from 'react-bootstrap';
-
-const customStyles = {
-    content: {
-      top: '50%',
-      left: '50%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-50%',
-      transform: 'translate(-50%, -50%)',
-    },
-  };
-
-const Information = () => {
-    const [modalIsOpen, setModalIsOpen] = useState(false);
-
-const openModal = () => {
-  setModalIsOpen(true);
-};
-
-const closeModal = () => {
-  setModalIsOpen(false);
-};
-    const modalContent = (
-    <div>
-      <h2>Информация</h2>
-      <p>Данный сделан специально для дисциплины интернет программирование</p>
-      <p>в 2023 году</p>
-      <button onClick={closeModal}>Закрыть</button>
-    </div>
-  );
-  return (
-    <div>
-        <ListGroup.Item onClick ={openModal}>
-                    <a href="#" className="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-      <img src="/src/assets/info.png" alt="info" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
-          <h6 className="mb-0">Информация</h6>
-    </a>
-    </ListGroup.Item>
-      <Modal isOpen={modalIsOpen} onRequestClose={closeModal} style={customStyles}>
-        {modalContent}
-      </Modal>
-    </div>
-  );
-};
-
-export default Information;

5 lab/src/components/information/information.css

@@ -1,21 +0,0 @@
-Modal {
-
-    position: fixed;
-    
-    top: 0;
-    
-    left: 0;
-    
-    width: 30px;
-    
-    height: 100%;
-    
-    background-color: rgba(0, 0, 0, 0.75);
-    
-    overflow: hidden;
-    
-    overflow-y: auto;
-    
-    z-index: 999;
-    
-    }

5 lab/src/components/message/message.jsx

@@ -2,22 +2,20 @@
 import PropTypes from 'prop-types';
 import { Nav } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import { useState } from 'react';
 import UseLinesItem from '../users/hooks/UsersItemHook';
 import useLines from '../messages — копия/hooks/MessagesHook';
 
 const chatMessage = ({
- id, groupId, setDialogID, setMessages,
+ line, setDialogID, setMessages,
 }) => {
+  const id = line.friendId.toString();
+  const { groupId } = line;
   const user = UseLinesItem(id);
   const { nickname, image } = user.item;
   const { messages } = useLines(groupId);
-  const tmp = messages.at(messages.length - 1);
-  const [lastmsg, setLastmsg] = useState('-');
   const onSubmit = () => {
     setDialogID({ dialogId: groupId });
     setMessages({ message: messages });
-    setLastmsg({ lastmsg: tmp });
   };
    return (
     <Nav.Link as={Link} onClick={onSubmit}>
@@ -26,11 +24,11 @@ const chatMessage = ({
         <img src={image} alt="david" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
         <h4 className="mb-0">{nickname}</h4>
         </div>
-        <small className="opacity-50 text-nowrap">{'12:11'}</small>
+        <small className="opacity-50 text-nowrap"></small>
         </div>
         <div className="d-flex gap-2 w-100 justify-content-between">
           <div>
-            <p className="mb-0 opacity-75">{lastmsg.toString()}</p>
+            <p className="mb-0 opacity-75">_</p>
           </div>
         </div>
         </Nav.Link>

5 lab/src/components/messages — копия/form/MessagesForm.jsx

@@ -14,7 +14,7 @@ const LinesForm = ({ id, messages }) => {
             <Form noValidate className ="gap-2" validated={validated}>
                 {
                 message.map((messag) =>
-                    <LinesItemForm key = { messag.id } item = {messag}/>)
+                    <LinesItemForm key = { messag.time } item = {messag}/>)
                 }
             </Form>
         </>

5 lab/src/components/messages — копия/form/MessagesItemForm.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-else-return */
 import PropTypes from 'prop-types';
 
 const LinesItemForm = ({ item }) => {

5 lab/src/components/messages — копия/hooks/MessagesItemFormHook.js

@@ -6,7 +6,9 @@ import useLines from './MessagesHook';
 
 const useLinesItemForm = (id, linesChangeHandle) => {
     const { item } = useLinesItem(id);
-    let { messages } = useLines(id);
+    const tmp = useLines();
+    const ids = tmp.messages.length + 1;
+    const { messages } = useLines(id);
     const [validated, setValidated] = useState(false);
     const resetValidity = () => {
         setValidated(false);
@@ -16,7 +18,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         const groupId = groupID.toString();
         const senderId = localStorage.getItem('UserId').toString();
         const msg = text.toString();
-        const time = new Date().toLocaleTimeString();
+        const time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
         return {
             groupId: groupId.toString(),
             senderId: senderId.toString(),
@@ -32,6 +34,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         const body = getLineObject(item, text, groupId);
         if (form.checkValidity()) {
                 await LinesApiService.create(body);
+                body.id = ids;
                 messages.push(body);
                 setMessages({ message: messages });
             if (linesChangeHandle) linesChangeHandle();

5 lab/src/components/post/post.jsx

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-
-const Post = ({
- AvatarImage, Nickname, Time, PostText, PostImage, Viewed, Liked,
-}) => {
-  return (
-        <>
-    <div className="d-flex  w-100 justify-content-between">
-      <div className='d-flex no-wrap text-pad'>
-    <img src={AvatarImage} alt="AvatarImage" width="40" height="40" className="rounded-circle flex-shrink-0"></img>
-    <h4 className="mb-0">{Nickname}</h4>
-    </div>
-    <small className="opacity-1">{Time} min</small>
-    </div>
-      <div className="d-flex  w-100 justify-content-between">
-        <div>
-          <p className="mb-0 opacity-75">{PostText}</p>
-          <div className="postImage">
-            <img src={PostImage} className="img-fluid" alt="PostImage" height="200" width="300"></img></div>
-          <div className="d-flex gap-2 w-100 justify-content-between">
-            <input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»"></input>
-            <h6 className="mb-0">{Liked}</h6>
-          </div>
-          <div className="d-flex gap-2 w-100 justify-content-between">
-            <img src="/src/assets/eye.png" alt="Просмотры" width="30" height="30"></img>
-            <h6 className="mb-0">{Viewed}</h6>
-          </div>
-          <div className="d-flex gap-2 w-50 justify-content-between">
-            <Button className="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</Button>
-          </div>
-        </div>
-      </div>
-      </>
-    );
-};
-Post.propTypes = {
-  AvatarImage: PropTypes.any,
-   Nickname: PropTypes.string,
-    Time: PropTypes.number,
-    PostText: PropTypes.string,
-    PostImage: PropTypes.any,
-    Viewed: PropTypes.number,
-    Liked: PropTypes.number,
-};
-export default Post;

5 lab/src/components/posts/form/Posts.jsx

@@ -36,7 +36,7 @@ const PostsForm = () => {
                 {
                     posts2.map((line) =>
                         <LinesItemForm key={line.id}
-                            item={line} handleLinesChange={handleLinesChange}
+                            item={line}
                         />)
                 }
                 <Form.Group className='row justify-content-center m-0 mt-3'>

5 lab/src/components/posts/form/PostsItem.jsx

@@ -10,14 +10,18 @@ import useLinesFormModal from '../../comment/hooks/CommsFormModalHook';
 import Input from '../../input/Input';
 import useLines from '../../comment/hooks/CommsHook';
 import Comments from '../../comment/form/comments';
+import useLinesItemForm from '../hooks/PostsFormHook';
 
 const Post = ({
-       item, onSubmitLike
+       item,
 }) => {
   const { handleLinesChange } = useLines();
   const [coments, setComms] = useState(useLines(item.id).comments);
   const [comment, setComment] = useState('');
-  console.log(coments);
+  const [liked, setLiked] = useState(item.Liked);
+  const {
+    handleSubmitLike,
+} = useLinesItemForm(item.id, setLiked);
   const {
     isFormModalShow,
     isFormValidated,
@@ -35,7 +39,7 @@ const Post = ({
     <img src={image} alt="AvatarImage" width="40" height="40" className="rounded-circle flex-shrink-0"></img>
     <h4 className="mb-0">{nickname}</h4>
     </div>
-    <small className="opacity-1">{item.Time} min</small>
+    <small className="opacity-1">{item.Time}</small>
     </div>
       <div className="d-flex  w-100">
         <div>
@@ -43,8 +47,8 @@ const Post = ({
           <div className="postImage">
             <img src={item.PostImage} className="img-fluid" alt=" " height="200" width="300"></img></div>
           <div className="d-flex gap-2 w-100 justify-content-between">
-            <input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»" onClick={onSubmitLike}></input>
+            <input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»" onClick={handleSubmitLike}></input>
-            <h6 className="mb-0">{item.Liked}</h6>
+            <h6 className="mb-0">{liked}</h6>
           </div>
           <div className="d-flex gap-2 w-100 justify-content-between">
             <img src="/src/assets/eye.png" alt="Просмотры" width="30" height="30"></img>

5 lab/src/components/posts/hooks/PostsFormHook.js

@@ -2,77 +2,33 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import LinesApiService from '../service/LinesApiService';
 import useLinesItem from './PostsItemHook';
-import getBase64FromFile from '../../utils/Base64';
 
-const useLinesItemForm = (id, linesChangeHandle) => {
+const useLinesItemForm = (id, setLiked) => {
-    const { item, setItem } = useLinesItem(id);
+    const { item } = useLinesItem(id);
     const [validated, setValidated] = useState(false);
-
+    const [isLiked, setIsLiked] = useState(false);
+    const resetLiked = () => {
+        setIsLiked(true);
+    };
     const resetValidity = () => {
         setValidated(false);
     };
-    const getLineObject = (formData) => {
-        const personId = localStorage.getItem('UserId');
-        const Time = parseInt(formData.Time, 10);
-        const PostText = formData.PostText.toString();
-        const PostImage = formData.PostImage.startsWith('data:image') ? formData.PostImage : '';
-        const Viewed = parseInt(formData.Viewed, 10) ? formData.Viewed : 0;
-        const Liked = parseInt(formData.Liked, 10) ? formData.Viewed : 0;
-        return {
-            personId: personId.toString(),
-            Time: Time.toString(),
-            PostText: PostText.toString(),
-            PostImage,
-            Viewed: Viewed.toString(),
-            Liked: Liked.toString(),
-        };
-    };
-    const handleImageChange = async (event) => {
-        const { files } = event.target;
-        const file = await getBase64FromFile(files.item(0));
-        setItem({
-            ...item,
-            PostImage: file,
-        });
-    };
-
-    const handleChange = (event) => {
-        if (event.target.type === 'file') {
-            handleImageChange(event);
-            return;
-        }
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-    };
-    const handleSubmitComment = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        const body = getLineObject(item);
-        if (form.checkValidity()) {
-             await LinesApiService.update(id, body);
-            if (linesChangeHandle) linesChangeHandle();
-            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
-            return true;
-        }
-        return false;
-    };
     const handleSubmitLike = async (event) => {
         const form = event.currentTarget;
         event.preventDefault();
         event.stopPropagation();
-        const body = getLineObject(item);
+        const data = await LinesApiService.get(id);
+        data.Liked = parseInt(item.Liked, 10);
         if (form.checkValidity()) {
-            if (id === undefined) {
+            if (isLiked.isLiked !== false) {
-                await LinesApiService.create(body);
+                data.Liked += 1;
+                setLiked(data.Liked);
+                setIsLiked({ isLiked: false });
             } else {
-                await LinesApiService.update(id, body);
+                setLiked(data.Liked);
+                setIsLiked({ isLiked: true });
             }
-            if (linesChangeHandle) linesChangeHandle();
+            LinesApiService.update(id, data);
             toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
             return true;
         }
@@ -83,10 +39,9 @@ const useLinesItemForm = (id, linesChangeHandle) => {
     return {
         item,
         validated,
-        handleSubmitComment,
         handleSubmitLike,
-        handleChange,
         resetValidity,
+        resetLiked,
     };
 };
 

5 lab/src/components/posts/hooks/PostsHook.js

@@ -13,7 +13,6 @@ const useLines = () => {
 
     useEffect(() => {
         getLines();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [linesRefresh]);
 
     return {

5 lab/src/components/posts/hooks/PostsItemFormHook.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/extensions */
-/* eslint-disable import/no-unresolved */
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import getBase64FromFile from '../../utils/Base64';
@@ -21,7 +19,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
 
     const getLineObject = (formData) => {
         const personId = localStorage.getItem('UserId');
-        const Time = 0;
+        const Time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
         const PostText = formData.PostText.toString();
         const PostImage = formData.PostImage.startsWith('data:image') ? formData.PostImage : '';
         const Viewed = parseInt(formData.Viewed, 10) ? formData.Viewed : 0;

5 lab/src/components/users/hooks/UsersHook.js

@@ -13,7 +13,6 @@ const useLines = (typeFilter) => {
 
     useEffect(() => {
         getLines();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [linesRefresh, typeFilter]);
 
     return {

5 lab/src/components/users/hooks/UsersItemFormHook.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import getBase64FromFile from '../../utils/Base64';
@@ -66,35 +67,38 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         setValidated(true);
         return false;
     };
-
+    const handleSubmitChangeNick = async (event, string, item2) => {
-    const handleSubmitChange = async (event, type, string) => {
-        const form = event.currentTarget;
         event.preventDefault();
         event.stopPropagation();
-        const body = getLineObject(item);
+        item2.nickname = string;
-        switch (type) {
+                    setItem({
-            case 'nickname':
+                        ...item,
-                {
+                        nickname: string,
-                    body.nickname = string;
+                    });
-                    break;
+            await LinesApiService.update(id, item2);
-                }
+            console.log(id);
-            case 'avatar':
+            setValidated(true);
-                {
+            return true;
-                    body.image = string.image;
+    };
-                    break;
+    const handleSubmitChangePass = async (event, string) => {
-                }
+        event.preventDefault();
-            case 'password':
+        event.stopPropagation();
-                {
+
-                    body.password = string;
+                    item.password = string;
-                    break;
+
-                }
+            await LinesApiService.update(id, item);
-            default:
+            console.log(id);
-                break;
+            setValidated(true);
-        }
+            return true;
-        if (form.checkValidity()) {
+    };
-                await LinesApiService.update(id, body);
+    const handleSubmitChangeAva = async (event, string, item2) => {
-            }
+        event.preventDefault();
-            if (linesChangeHandle) linesChangeHandle();
+        event.stopPropagation();
+        setItem({
+            ...item,
+            image: string.image,
+        });
+            await LinesApiService.update(id, item2);
             toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
             setValidated(true);
             return true;
@@ -104,7 +108,9 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         item,
         validated,
         handleSubmit,
-        handleSubmitChange,
+        handleSubmitChangeNick,
+        handleSubmitChangeAva,
+        handleSubmitChangePass,
         handleChange,
         resetValidity,
     };

5 lab/src/components/users/table/Users.jsx

@@ -26,7 +26,7 @@ const Lines = () => {
         <>
             <ButtonGroup>
                 <Button as={Link} to='/editPage' variant='success'>
-                    Добавить товар (страница)
+                    Добавить пользователя (страница)
                 </Button>
             </ButtonGroup>
             <LinesTable>

5 lab/src/pages/messages.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 /* eslint-disable no-tabs */
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react';
 import Navigation from '../components/navigation/Navigation';
 import DialogPage from './dialog';

5 lab/src/pages/settings.jsx

@@ -2,16 +2,17 @@
 /* eslint-disable import/no-unresolved */
 import { Nav, Form, ListGroup } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import Information from '../components/information';
 import useLinesItem from '../components/users/hooks/UsersItemHook';
 import NickForm from '../components/ChangeNickname/form/Nickname';
 import AvaForm from '../components/ChangeAvatar/form/Avatar';
 import PasForm from '../components/ChangePassword/form/Password';
 import HelpForm from '../components/help/form/Help';
+import InfoForm from '../components/information/form/Info';
 
 const SettingsPage = () => {
     const { item, setItem } = useLinesItem(localStorage.getItem('UserId'));
     return (
+
         <div className='background'>
 <Form id = "form" className = "form-horizontal">
         <Form.Group className="col-md-3 text-center" controlId="nickname">
@@ -32,7 +33,7 @@ const SettingsPage = () => {
                   </div>
         </Form.Group>
         <Form.Group className="col-md-3 text-center" controlId="Account">
-                <NickForm setItem = {setItem}/>
+                <NickForm item = {item} setItem = {setItem}/>
         </Form.Group>
         <Form.Group className="col-md-3 text-center" controlId="Private">
                 <AvaForm item = {item} setItem={setItem}/>
@@ -52,7 +53,7 @@ const SettingsPage = () => {
       </ListGroup.Item>
     </Form.Group>
     <Form.Group className="col-md-3 text-center" controlId="Info">
-                <Information/>
+                <InfoForm/>
     </Form.Group>
     <Form.Group className="col-md-3 text-center" controlId="Exit">
                 <ListGroup.Item>