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

5 lab/src/components/information/form/Info.jsx

@@ -0,0 +1,46 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+import {
+     ListGroup, Modal, Button, Form,
+     } from 'react-bootstrap';
+import useLines from '../../users/hooks/UsersHook';
+import useLinesFormModal from '../hooks/HelpFormModalHook';
+import NickModal from './InfoModal';
+
+const InfoForm = () => {
+    const { handleLinesChange } = useLines();
+    const {
+        isFormModalShow,
+        isFormValidated,
+        showFormModal,
+        handleFormClose,
+    } = useLinesFormModal(handleLinesChange);
+    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/info.png" alt="info" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <h6 className="mb-0">Информация</h6>
+                </a>
+        </ListGroup.Item>
+        <Modal show={isFormModalShow} backdrop='static' onHide={() => handleFormClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>Информация</Modal.Title>
+            </Modal.Header>
+            <Form className='m-0' noValidate validated={isFormValidated}>
+                <Modal.Body>
+                <NickModal />
+                </Modal.Body>
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button variant='secondary' className='col-5 m-0 me-2'
+                        onClick={() => handleFormClose()}>
+                        закрыть
+                    </Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>
+        </>
+    );
+};
+
+export default InfoForm;

5 lab/src/components/information/form/InfoModal.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+
+const InfoModal = () => {
+    return (
+        <div>
+      <h2>Информация</h2>
+      <p>Данный сделан специально для дисциплины интернет программирование</p>
+      <p>в 2023 году</p>
+    </div>
+    );
+};
+
+InfoModal.propTypes = {
+    password: PropTypes.string,
+    setPassword: PropTypes.func,
+};
+
+export default InfoModal;

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import useModal from '../../modal/ModalHook';
+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,
+        handleChange,
+        resetValidity,
+    } = useLinesItemForm(id, linesChangeHandle);
+
+    const showModalDialog = (ids) => {
+        setCurrentId(ids);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmitChange(event, 'password', password)) {
+            onClose();
+        }
+    };
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default useLinesFormModal;

5 lab/src/components/messages/form/MessagesForm.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+import useLinesItemForm from '../hooks/MessagesItemFormHook';
+import LinesItemForm from './MessagesItemForm.jsx';
+
+const LinesForm = ({ id, messages }) => {
+    const {
+        validated,
+    } = useLinesItemForm(id);
+    const { message } = messages;
+    if (message !== undefined) {
+    return (
+        <>
+            <Form noValidate className ="gap-2" validated={validated}>
+                {
+                message.map((messag) =>
+                    <LinesItemForm key = { messag.time } item = {messag}/>)
+                }
+            </Form>
+        </>
+    );
+    // eslint-disable-next-line no-else-return
+    } else {
+        return (<></>);
+    }
+};
+
+LinesForm.propTypes = {
+    id: PropTypes.number,
+    messages: PropTypes.object,
+};
+
+export default LinesForm;

5 lab/src/components/messages/form/MessagesItemForm.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+
+const LinesItemForm = ({ item }) => {
+    let cl;
+    // eslint-disable-next-line eqeqeq
+    if (item.senderId == localStorage.getItem('UserId')) {
+        cl = 'd-flex align-items-end flex-column gap-3';
+    } else {
+        cl = 'd-flex align-items-start flex-column gap-3';
+    }
+    return (
+        <div className = {cl} >
+        <div className = "d-flex message">
+         <p className ="ps-4 pe-4">{item.msg}</p>
+         <p className ="fs-5 mt-auto mb-1 ms-1 me-2">{item.time}</p>
+         </div>
+     </div>
+    );
+};
+
+LinesItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default LinesItemForm;

5 lab/src/components/messages/hooks/MessagesHook.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/MessagesApiService';
+
+const useLines = (typeFilter) => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [messages, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        let expand = '';
+        if (typeFilter) {
+            expand = `?groupId=${typeFilter}`;
+        }
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [linesRefresh, typeFilter]);
+
+    return {
+        messages,
+        handleLinesChange,
+    };
+};
+
+export default useLines;

5 lab/src/components/messages/hooks/MessagesItemFormHook.js

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import LinesApiService from '../service/MessagesApiService';
+import useLinesItem from './MessagesItemHook';
+import useLines from './MessagesHook';
+
+const useLinesItemForm = (id, linesChangeHandle) => {
+    const { item } = useLinesItem(id);
+    const tmp = useLines();
+    const ids = tmp.messages.length + 1;
+    const { messages } = useLines(id);
+    const [validated, setValidated] = useState(false);
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getLineObject = (formData, text, groupID) => {
+        const groupId = groupID.toString();
+        const senderId = localStorage.getItem('UserId').toString();
+        const msg = text.toString();
+        const time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
+        return {
+            groupId: groupId.toString(),
+            senderId: senderId.toString(),
+            msg: msg.toString(),
+            time: time.toString(),
+        };
+    };
+
+    const handleSubmit = async (event, text, groupId, setMessages) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        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();
+            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        resetValidity,
+    };
+};
+
+export default useLinesItemForm;

5 lab/src/components/messages/hooks/MessagesItemHook.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/MessagesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        groupId: '',
+        groupMessages: [
+            {
+                id: '',
+                senderId: '',
+                recieverId: '',
+                msg: '',
+            },
+        ],
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await LinesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useLinesItem;

5 lab/src/components/messages/service/MessagesApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const LinesApiService = new ApiService('messages');
+
+export default LinesApiService;

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

@@ -0,0 +1,38 @@
+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/messages/table/LinesTable.jsx

@@ -0,0 +1,30 @@
+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/messages/table/LinesTableRow.jsx

@@ -0,0 +1,24 @@
+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;