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

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

@@ -30,7 +30,7 @@ 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/a.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/a.png" alt="avatar" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Изменить авaтар</h6>
                 </a>
         </ListGroup.Item>

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

@@ -22,7 +22,7 @@ const NickForm = ({ 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/nick.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/nick.png" alt="nick" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Изменить никнейм</h6>
                 </a>
         </ListGroup.Item>

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/p.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/p.png" alt="password" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Изменить пароль</h6>
                 </a>
         </ListGroup.Item>

5 lab/src/components/api/ApiService.js

@@ -21,14 +21,6 @@ class ApiService {
         return ApiClient.put(`${this.url}/${id}`, body);
     }
 
-    async createMessage(body) {
-        return ApiClient.post(`${this.url}/groupMessages`, body);
-    }
-
-    async updateMessage(id, body) {
-        return ApiClient.put(`${this.url}/${id}/groupMessages/`, body);
-    }
-
     async delete(id) {
         return ApiClient.delete(`${this.url}/${id}`);
     }

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

@@ -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/help.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
+                <img src="/src/assets/help.png" alt="help" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
                 <h6 className="mb-0">Помощь</h6>
                 </a>
         </ListGroup.Item>

5 lab/src/components/input/Select.jsx

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import { Form } from 'react-bootstrap';
-
-const Select = ({
-    values, name, label, value, onChange, className, ...rest
-}) => {
-    return (
-        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
-            <Form.Label className='form-label'>{label}</Form.Label>
-            <Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
-                <option value=''>Выберите значение</option>
-                {
-                    values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
-                }
-            </Form.Select>
-        </Form.Group>
-    );
-};
-
-Select.propTypes = {
-    values: PropTypes.array,
-    name: PropTypes.string,
-    label: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    className: PropTypes.string,
-};
-
-export default Select;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Nav } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import UseLinesItem from '../users/hooks/UsersItemHook';
-import useLines from '../messages — копия/hooks/MessagesHook';
+import useLines from '../messages/hooks/MessagesHook';
 
 const chatMessage = ({
  line, setDialogID, setMessages,

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

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

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

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

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

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

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

5 lab/src/components/messages — копия/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/messages — копия/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/messages — копия/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/types/service/TypesApiService.js

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

5 lab/src/pages/dialog.jsx

@@ -6,9 +6,9 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import useUsersItem from '../components/users/hooks/UsersItemHook';
-import LinesForm from '../components/messages — копия/form/MessagesForm';
+import LinesForm from '../components/messages/form/MessagesForm';
 import useGroupsItem from '../components/groups/hooks/GroupsItemHook';
-import useLinesItemForm from '../components/messages — копия/hooks/MessagesItemFormHook';
+import useLinesItemForm from '../components/messages/hooks/MessagesItemFormHook';
 
 const DialogPage = ({
      personId, setDialogID, messages, setMessages,

5 lab/src/pages/messages.jsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import Navigation from '../components/navigation/Navigation';
 import DialogPage from './dialog';
 import Chats from '../components/chats/Chats';
-import UseLines from '../components/messages — копия/hooks/MessagesHook';
+import UseLines from '../components/messages/hooks/MessagesHook';
 
 const messagesPage = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks

5 lab/src/pages/settings.jsx

@@ -32,13 +32,13 @@ const SettingsPage = () => {
             </div>
                   </div>
         </Form.Group>
-        <Form.Group className="col-md-3 text-center" controlId="Account">
+        <Form.Group className="col-md-3 text-center" controlId="NickCh">
                 <NickForm item = {item} setItem = {setItem}/>
         </Form.Group>
-        <Form.Group className="col-md-3 text-center" controlId="Private">
+        <Form.Group className="col-md-3 text-center" controlId="AvatCh">
                 <AvaForm item = {item} setItem={setItem}/>
         </Form.Group>
-        <Form.Group className="col-md-3 text-center" controlId="Blacklist">
+        <Form.Group className="col-md-3 text-center" controlId="PassCh">
                <PasForm/>
         </Form.Group>
         <Form.Group className="col-md-3 text-center" controlId="Help">