From 8cd63206d4bee49b56591591387f5c394a9ba80b Mon Sep 17 00:00:00 2001 From: platoff aeeee Date: Mon, 25 Dec 2023 15:47:21 +0400 Subject: [PATCH] workin lab5 --- .../components/lines/form/LinesItemForm.jsx | 2 +- .../components/lines/videos/UpdateVideo.jsx | 36 +++ .../components/lines/videos/UpdateVideos.jsx | 69 ++++++ .../components/lines/videos/UpdateVideos2.jsx | 60 +++++ .../searching/hooks/SearchApiService.js | 5 + .../components/searching/hooks/SearchHooks.js | 22 ++ .../components/searching/search/Search.jsx | 20 ++ .../components/searching/search/Searching.jsx | 40 +++ .../src/components/searching/search/Table.css | 3 + .../searching/search/TableSearch.jsx | 27 +++ lab5/src/pages/StartPage.jsx | 227 +++++++++--------- 11 files changed, 398 insertions(+), 113 deletions(-) create mode 100644 lab5/src/components/lines/videos/UpdateVideo.jsx create mode 100644 lab5/src/components/lines/videos/UpdateVideos.jsx create mode 100644 lab5/src/components/lines/videos/UpdateVideos2.jsx create mode 100644 lab5/src/components/searching/hooks/SearchApiService.js create mode 100644 lab5/src/components/searching/hooks/SearchHooks.js create mode 100644 lab5/src/components/searching/search/Search.jsx create mode 100644 lab5/src/components/searching/search/Searching.jsx create mode 100644 lab5/src/components/searching/search/Table.css create mode 100644 lab5/src/components/searching/search/TableSearch.jsx diff --git a/lab5/src/components/lines/form/LinesItemForm.jsx b/lab5/src/components/lines/form/LinesItemForm.jsx index 2b7313c..25d74f3 100644 --- a/lab5/src/components/lines/form/LinesItemForm.jsx +++ b/lab5/src/components/lines/form/LinesItemForm.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import imgPlaceholder from '../../../assets/200.png'; +import imgPlaceholder from '/src/assets/twitchLogo.png'; import Input from '../../input/Input.jsx'; import Select from '../../input/Select.jsx'; import useTypes from '../../types/hooks/TypesHook'; diff --git a/lab5/src/components/lines/videos/UpdateVideo.jsx b/lab5/src/components/lines/videos/UpdateVideo.jsx new file mode 100644 index 0000000..886c17f --- /dev/null +++ b/lab5/src/components/lines/videos/UpdateVideo.jsx @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import { + PencilFill, Trash3, +} from 'react-bootstrap-icons'; + +const UpdateVideo = ({ + item, onEdit, onDelete, +}) => { + const handleAnchorClick = (event, action) => { + event.preventDefault(); + action(); + }; + return ( +
+
+ {item.name} +
+ + handleAnchorClick(event, onEdit)}> + handleAnchorClick(event, onDelete)}> + {item.description} + +
+
+
+ ); +}; + +UpdateVideo.propTypes = { + index: PropTypes.number, + item: PropTypes.object, + onDelete: PropTypes.func, + onEdit: PropTypes.func, +}; + +export default UpdateVideo; diff --git a/lab5/src/components/lines/videos/UpdateVideos.jsx b/lab5/src/components/lines/videos/UpdateVideos.jsx new file mode 100644 index 0000000..1ea958a --- /dev/null +++ b/lab5/src/components/lines/videos/UpdateVideos.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Button, Container,} from 'react-bootstrap'; + +import ModalConfirm from '../../modal/ModalConfirm.jsx'; +import ModalForm from '../../modal/ModalForm.jsx'; +import UpdateVideo from './UpdateVideo.jsx'; +import useLinesDeleteModal from '../hooks/LinesDeleteModalHook'; +import useLinesFormModal from '../hooks/LinesFormModalHook'; +import LinesItemForm from '../form/LinesItemForm.jsx'; +import useLines from '../hooks/LinesHook'; +// linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle +// должно все перерисовываться + +const UpdateVideos = () => { + const { lines, handleLinesChange } = useLines(); + const { + isDeleteModalShow, + showDeleteModal, + handleDeleteConfirm, + handleDeleteCancel, + } = useLinesDeleteModal(handleLinesChange); + const { + isFormModalShow, + isFormValidated, + showFormModal, + currentItem, + handleItemChange, + handleFormSubmit, + handleFormClose, + } = useLinesFormModal(handleLinesChange); + + return ( + <> + + + Новости + +
+ +
+
+ {lines.map((item) => ( + showDeleteModal(item.id)} + onEdit={() => showFormModal(item.id)} + /> + ))} +
+ + + + + + + ); +}; + +UpdateVideos.propTypes = { + item: PropTypes.object, +}; + +export default UpdateVideos; \ No newline at end of file diff --git a/lab5/src/components/lines/videos/UpdateVideos2.jsx b/lab5/src/components/lines/videos/UpdateVideos2.jsx new file mode 100644 index 0000000..6ab8f0d --- /dev/null +++ b/lab5/src/components/lines/videos/UpdateVideos2.jsx @@ -0,0 +1,60 @@ +import React, { useEffect, useState } from 'react'; +import { PencilFill, Trash3 } from 'react-bootstrap-icons'; +import PropTypes from 'prop-types'; +import {Button, Container,} from 'react-bootstrap'; + +import ModalConfirm from '../../modal/ModalConfirm.jsx'; +import ModalForm from '../../modal/ModalForm.jsx'; +import UpdateVideo from './UpdateVideo.jsx'; +import useLinesDeleteModal from '../hooks/LinesDeleteModalHook'; +import useLinesFormModal from '../hooks/LinesFormModalHook'; +import LinesItemForm from '../form/LinesItemForm.jsx'; +import useLines from '../hooks/LinesHook'; // Замените 'путь_к_вашим_хукам' на актуальный путь к ваших хукам +// import { createAnchor } from ''; // Замените 'путь_к_вашему_утилитарному_модулю' на актуальный путь к вашему утилитарному модулю + +const VideoComponent = ({ item, onEdit, onDelete }) => { + const handleAnchorClick = (event, handler) => { + event.preventDefault(); + handler(item); + }; + + return ( +
+
+ {item.name} +
+ + handleAnchorClick(event, onEdit)}> + handleAnchorClick(event, onDelete)}> + {item.description} + +
+
+
+ ); +}; + +const UpdateVideos2 = () => { + const { lines, handleLinesChange } = useLines(); + + useEffect(() => { + handleLinesChange(); + }, []); + + return ( +
+
+ {lines.map((item) => ( + showDeleteModal(item.id)} + onEdit={() => showFormModal(item.id)} + /> + ))} +
+
+ ); +}; + +export default UpdateVideos2; diff --git a/lab5/src/components/searching/hooks/SearchApiService.js b/lab5/src/components/searching/hooks/SearchApiService.js new file mode 100644 index 0000000..6bfd6d0 --- /dev/null +++ b/lab5/src/components/searching/hooks/SearchApiService.js @@ -0,0 +1,5 @@ +import ApiService from '../../api/ApiService'; + +const LinesApiService = new ApiService('searching'); + +export default LinesApiService; diff --git a/lab5/src/components/searching/hooks/SearchHooks.js b/lab5/src/components/searching/hooks/SearchHooks.js new file mode 100644 index 0000000..06d6113 --- /dev/null +++ b/lab5/src/components/searching/hooks/SearchHooks.js @@ -0,0 +1,22 @@ +import { useEffect, useState } from 'react'; +import SearchApiService from './SearchApiService'; + +const useSearching = () => { + const [searching, setSearching] = useState([]); + + const getSearching = async () => { + const data = await SearchApiService.getAll(); + setSearching(data ?? []); + }; + + useEffect(() => { + getSearching(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return { + searching, + }; +}; + +export default useSearching; diff --git a/lab5/src/components/searching/search/Search.jsx b/lab5/src/components/searching/search/Search.jsx new file mode 100644 index 0000000..28dae3c --- /dev/null +++ b/lab5/src/components/searching/search/Search.jsx @@ -0,0 +1,20 @@ +import PropTypes from 'prop-types'; + +const Search = ({ item }) => { + return ( + + {item.id + 1} + {item.code} + {item.name} + {item.department} + {item.things} + + ); +}; + +Search.propTypes = { + index: PropTypes.number, + item: PropTypes.object, +}; + +export default Search; diff --git a/lab5/src/components/searching/search/Searching.jsx b/lab5/src/components/searching/search/Searching.jsx new file mode 100644 index 0000000..ae3a4fe --- /dev/null +++ b/lab5/src/components/searching/search/Searching.jsx @@ -0,0 +1,40 @@ +import { useState } from 'react'; +import TableDirect from './TableDirect.jsx'; +import Search from './Search.jsx'; +import useSearching from '../hooks/SearchHooks.js'; +import Input from '../../input/Input.jsx'; +import useTypeFilter from '../../lines/hooks/LinesFilterHook.js'; + +const Searching = () => { + const { type, currentFilter } = useTypeFilter; + const { searching } = useSearching(); + const [searchValue, setSearchValue] = useState(''); + const {lines} =useLines(currentFilter); + + return ( + <> +
+ setSearchValue(e.target.value)} + type='text' required /> +
+
+ + { + searching.map((item) => { + if (searchValue === '' + || item.name.toLowerCase().includes(searchValue.toLowerCase()) + || item.department.toLowerCase().includes(searchValue.toLowerCase()) + || item.things.toLowerCase().includes(searchValue.toLowerCase()) + || item.code.toLowerCase().includes(searchValue.toLowerCase())) { + return ; + } + return null; + }) + } + +
+ + ); +}; + +export default Searching; diff --git a/lab5/src/components/searching/search/Table.css b/lab5/src/components/searching/search/Table.css new file mode 100644 index 0000000..dcfe4b4 --- /dev/null +++ b/lab5/src/components/searching/search/Table.css @@ -0,0 +1,3 @@ +.tableRow{ + text-align: center; +} \ No newline at end of file diff --git a/lab5/src/components/searching/search/TableSearch.jsx b/lab5/src/components/searching/search/TableSearch.jsx new file mode 100644 index 0000000..a1a170d --- /dev/null +++ b/lab5/src/components/searching/search/TableSearch.jsx @@ -0,0 +1,27 @@ +import PropTypes from 'prop-types'; +import { Table } from 'react-bootstrap'; + +const TableSearch = ({ children }) => { + return ( + + + + + + + + + + + + {children} + +
№КодНаправлениеКафедраПредметы(ЕГЭ) по выбору
+); +}; + +TableSearch.propTypes = { + children: PropTypes.node, +}; + +export default TableSearch; diff --git a/lab5/src/pages/StartPage.jsx b/lab5/src/pages/StartPage.jsx index 6523de4..cd4c28f 100644 --- a/lab5/src/pages/StartPage.jsx +++ b/lab5/src/pages/StartPage.jsx @@ -1,123 +1,126 @@ -import { Link } from 'react-router-dom'; +// import { Link } from 'react-router-dom'; +import UpdateVideos2 from '../components/lines/videos/UpdateVideos2.jsx'; const StartPage = () => { return ( -
-
-
-
-

Welcome to our streaming service

-

Explore the whole streaming world!

- Главная страница -
+ + + //
+ //
+ //
+ //
+ //

Welcome to our streaming service

+ //

Explore the whole streaming world!

+ // Главная страница + //
-
-

Популярные трансляции

-
- {/* Video Recommendation 1 */} -
-
- Video 1 -
-
-
-
-

NEVER GONNA GIVE YOU UP

-

Rick Astley

-
-
- Subscribe -
-
-
-
-
-
+ //
+ //

Популярные трансляции

+ //
+ // {/* Video Recommendation 1 */} + //
+ //
+ // Video 1 + //
+ //
+ //
+ //
+ //

NEVER GONNA GIVE YOU UP

+ //

Rick Astley

+ //
+ //
+ // Subscribe + //
+ //
+ //
+ //
+ //
+ //
- {/* Video Recommendation 2 */} -
-
- Video 2 -
-
-
-
-

Streamer1

-

CS-3

-
-
- Subscribe -
-
-
-
-
-
+ // {/* Video Recommendation 2 */} + //
+ //
+ // Video 2 + //
+ //
+ //
+ //
+ //

Streamer1

+ //

CS-3

+ //
+ //
+ // Subscribe + //
+ //
+ //
+ //
+ //
+ //
- {/* Video Recommendation 3 */} -
-
- Video 2 -
-
-
-
-

Streamer1

-

CS-3

-
-
- Subscribe -
-
-
-
-
-
+ // {/* Video Recommendation 3 */} + //
+ //
+ // Video 2 + //
+ //
+ //
+ //
+ //

Streamer1

+ //

CS-3

+ //
+ //
+ // Subscribe + //
+ //
+ //
+ //
+ //
+ //
- {/* Video Recommendation 4 */} -
-
- Video 4 -
-
-
-
-

WORLD FINAL CS

-

CHANNEL

-
-
- Subscribe -
-
-
-
-
-
- {/* Video Recommendation 5 */} -
-
- Video 5 -
-
-
-
-

name of video

-

name of channel

-
-
- Subscribe -
-
-
-
-
-
+ // {/* Video Recommendation 4 */} + //
+ //
+ // Video 4 + //
+ //
+ //
+ //
+ //

WORLD FINAL CS

+ //

CHANNEL

+ //
+ //
+ // Subscribe + //
+ //
+ //
+ //
+ //
+ //
+ // {/* Video Recommendation 5 */} + //
+ //
+ // Video 5 + //
+ //
+ //
+ //
+ //

name of video

+ //

name of channel

+ //
+ //
+ // Subscribe + //
+ //
+ //
+ //
+ //
+ //
-
-
-
-
-
+ //
+ //
+ // + // + // ); };