параметны в ссылках + фикс пагинации

package-lock.json

@@ -17,7 +17,7 @@
         "styled-components": "^6.1.8"
       },
       "devDependencies": {
-        "@types/react": "^18.2.55",
+        "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
@@ -2671,9 +2671,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "version": "18.2.60",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.60.tgz",
+      "integrity": "sha512-dfiPj9+k20jJrLGOu9Nf6eqxm2EyJRrq2NvwOFsfbb7sFExZ9WELPs67UImHj3Ayxg8ruTtKtNnbjaF8olPq0A==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",

package.json

@@ -19,7 +19,7 @@
     "styled-components": "^6.1.8"
   },
   "devDependencies": {
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

src/components/UI/table/pagination/Pagination.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { I_QueryParams } from 'src/services/type'
 import styled, { css } from 'styled-components'
 
@@ -50,8 +51,9 @@ const Menu = styled.div<I_Active>`
 	left: -30%;
 	transform: translate(-50% -50%);
 	background: ${(props) => props.theme.bg};
+	cursor: pointer;
 
-	${(props) =>
+${(props) =>
 		props.active
 			? css`
 					display: flex;
@@ -124,6 +126,8 @@ export default function Pagination({
 
 	const menuRef = useRef<HTMLDivElement>(null)
 
+	const navigate = useNavigate()
+
 	useEffect(() => {
 		function handleClickOutside(event: MouseEvent) {
 			if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -140,6 +144,28 @@ export default function Pagination({
 	const changeRowsPerPage = (value: number) => {
 		setQueryParams({ ...queryParams, count: value, page: 1 })
 		setMenuState(false)
+
+		const searchParams = new URLSearchParams(window.location.search)
+		if (searchParams.has('count')) {
+			searchParams.delete('count')
+		}
+		searchParams.append('count', value.toString())
+		if (searchParams.has('page')) {
+			searchParams.delete('page')
+		}
+		searchParams.append('page', '1')
+		navigate(`?${searchParams.toString()}`)
+	}
+
+	const handleChangePage = (pageNum: number) => {
+		setQueryParams({ ...queryParams, page: pageNum })
+
+		const searchParams = new URLSearchParams(window.location.search)
+		if (searchParams.has('page')) {
+			searchParams.delete('page')
+		}
+		searchParams.append('page', pageNum.toString())
+		navigate(`?${searchParams.toString()}`)
 	}
 
 	return (
@@ -148,8 +174,7 @@ export default function Pagination({
 				<Button
 					active={queryParams.page !== 1}
 					onClick={() => {
-						queryParams.page !== 1 &&
-							setQueryParams({ ...queryParams, page: queryParams.page - 1 })
+						queryParams.page !== 1 && handleChangePage(queryParams.page - 1)
 					}}
 				>
 					<img src='/src/images/arrow.svg' alt='' />
@@ -160,9 +185,7 @@ export default function Pagination({
 							<Item
 								key={item}
 								active={item + 1 === queryParams.page}
-								onClick={() =>
-									setQueryParams({ ...queryParams, page: item + 1 })
-								}
+								onClick={() => handleChangePage(item + 1)}
 							>
 								{item + 1}
 							</Item>
@@ -175,9 +198,7 @@ export default function Pagination({
 								{[...Array(5).keys()].map((item) => (
 									<Item
 										active={item + 1 === queryParams.page}
-										onClick={() =>
-											setQueryParams({ ...queryParams, page: item + 1 })
-										}
+										onClick={() => handleChangePage(item + 1)}
 									>
 										{item + 1}
 									</Item>
@@ -186,10 +207,7 @@ export default function Pagination({
 								<Item
 									active={totalCount / queryParams.count === queryParams.page}
 									onClick={() =>
-										setQueryParams({
-											...queryParams,
-											page: totalCount / queryParams.count
-										})
+										handleChangePage(totalCount / queryParams.count)
 									}
 								>
 									{totalCount / queryParams.count}
@@ -198,40 +216,25 @@ export default function Pagination({
 						) : queryParams.page > 4 &&
 						  queryParams.page <= totalCount / queryParams.count - 4 ? (
 							<>
-								<Item
-									active={false}
-									onClick={() => setQueryParams({ ...queryParams, page: 1 })}
-								>
+								<Item active={false} onClick={() => handleChangePage(1)}>
 									1
 								</Item>
 								<Item active={false}>...</Item>
 								<Item
 									active={false}
-									onClick={() =>
-										setQueryParams({
-											...queryParams,
-											page: queryParams.page - 1
-										})
-									}
+									onClick={() => handleChangePage(queryParams.page - 1)}
 								>
 									{queryParams.page - 1}
 								</Item>
 								<Item
 									active={true}
-									onClick={() =>
-										setQueryParams({ ...queryParams, page: queryParams.page })
-									}
+									onClick={() => handleChangePage(queryParams.page)}
 								>
 									{queryParams.page}
 								</Item>
 								<Item
 									active={false}
-									onClick={() =>
-										setQueryParams({
-											...queryParams,
-											page: queryParams.page + 1
-										})
-									}
+									onClick={() => handleChangePage(queryParams.page + 1)}
 								>
 									{queryParams.page + 1}
 								</Item>
@@ -239,10 +242,7 @@ export default function Pagination({
 								<Item
 									active={false}
 									onClick={() =>
-										setQueryParams({
-											...queryParams,
-											page: totalCount / queryParams.count
-										})
+										handleChangePage(totalCount / queryParams.count)
 									}
 								>
 									10
@@ -250,15 +250,7 @@ export default function Pagination({
 							</>
 						) : (
 							<>
-								<Item
-									active={false}
-									onClick={() =>
-										setQueryParams({
-											...queryParams,
-											page: 1
-										})
-									}
-								>
+								<Item active={false} onClick={() => handleChangePage(1)}>
 									1
 								</Item>
 								<Item active={false}>...</Item>
@@ -268,9 +260,7 @@ export default function Pagination({
 											{item + 1 > totalCount / queryParams.count - 5 ? (
 												<Item
 													active={item + 1 === queryParams.page}
-													onClick={() =>
-														setQueryParams({ ...queryParams, page: item + 1 })
-													}
+													onClick={() => handleChangePage(item + 1)}
 												>
 													{item + 1}
 												</Item>
@@ -285,10 +275,10 @@ export default function Pagination({
 					</>
 				)}
 				<Button
-					active={queryParams.page !== totalCount / queryParams.count}
+					active={queryParams.page !== Math.ceil(totalCount / queryParams.count)}
 					onClick={() => {
 						queryParams.page !== totalCount / queryParams.count &&
-							setQueryParams({ ...queryParams, page: queryParams.page + 1 })
+							handleChangePage(queryParams.page + 1)
 					}}
 				>
 					<img src='/src/images/arrow.svg' alt='' />
@@ -302,9 +292,6 @@ export default function Pagination({
 						<img src='/src/images/bottom-arrow.svg' alt='' />
 					</div>
 					<Menu active={menuState} ref={menuRef}>
-						{/* for test */}
-						<p onClick={() => changeRowsPerPage(1)}>1</p>
-
 						<p onClick={() => changeRowsPerPage(5)}>5</p>
 						<p onClick={() => changeRowsPerPage(10)}>10</p>
 						<p onClick={() => changeRowsPerPage(15)}>15</p>

src/pages/Store/Store.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 import MainButton from 'src/components/UI/button/MainButton'
 import SearchInput from 'src/components/UI/input/SearchInput'
 import Loader from 'src/components/UI/loader/Loader'
@@ -35,8 +36,25 @@ export default function Store({}: Props) {
 		order: undefined
 	})
 
+	const location = useLocation()
+	const searchParams = new URLSearchParams(location.search)
+	const navigate = useNavigate()
+
 	const handleSearchQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setQueryParams({ ...queryParams, search: e.target.value })
+		const newSearchQuery = e.target.value
+		setQueryParams({ ...queryParams, search: e.target.value, page: 1 })
+		const searchParams = new URLSearchParams(window.location.search)
+		if (searchParams.has('page')) {
+			searchParams.delete('page')
+		}
+		searchParams.append('page', '1')
+		if (searchParams.has('search')) {
+			searchParams.delete('search')
+		}
+		if (newSearchQuery.trim() !== '') {
+			searchParams.append('search', newSearchQuery.trim())
+		}
+		navigate(`?${searchParams.toString()}`)
 	}
 
 	const getApps = async () => {
@@ -59,6 +77,17 @@ export default function Store({}: Props) {
 		setFirstLoadingState(false)
 	}
 	useEffect(() => {
+		const pageParam = searchParams.get('page')
+		const countParam = searchParams.get('count')
+		const searchParam = searchParams.get('search')
+		const orderParam = searchParams.get('order')
+		setQueryParams((prevState) => ({
+			...prevState,
+			page: pageParam ? parseInt(pageParam, 10) : prevState.page,
+			count: countParam ? parseInt(countParam, 10) : prevState.count,
+			search: searchParam || prevState.search,
+			order: orderParam || prevState.order
+		}))
 		getApps()
 	}, [])
 
@@ -92,17 +121,14 @@ export default function Store({}: Props) {
 	const [modal, setModal] = useState(false)
 
 	const groupDelete = async () => {
-		const Promises = checkedRows.map((item) =>
-			StoreService.delete(item)
-		)
-
+		const Promises = checkedRows.map((item) => StoreService.delete(item))
 		await Promise.all(Promises)
 		getApps()
 	}
 
 	const groupStart = async () => {
 		const Promises = checkedRows.map((item) =>
-		StoreService.interaction('enable', item)
+			StoreService.interaction('enable', item)
 		)
 
 		await Promise.all(Promises)
@@ -111,7 +137,7 @@ export default function Store({}: Props) {
 
 	const groupStop = async () => {
 		const Promises = checkedRows.map((item) =>
-		StoreService.interaction('disable', item)
+			StoreService.interaction('disable', item)
 		)
 
 		await Promise.all(Promises)
@@ -133,7 +159,7 @@ export default function Store({}: Props) {
 					{Apps.length === 0 && queryParams.search === '' ? (
 						<StoreNotification>
 							<h2>Список приложений пуст</h2>
-							<MainButton  onClick={() => setModal(true)}>
+							<MainButton onClick={() => setModal(true)}>
 								Добавить приложение
 							</MainButton>
 						</StoreNotification>
@@ -156,9 +182,9 @@ export default function Store({}: Props) {
 											<StoreSelectNotification>
 												<h3>
 													{selectAll
-														? `Выбранно: ${totalCount - notChecked.length}`
+														? `Выбрано: ${totalCount - notChecked.length}`
 														: checkedRows.length !== 0 &&
-														  `Выбранно: ${checkedRows.length}`}
+														  `Выбрано: ${checkedRows.length}`}
 												</h3>
 												<div className='menu'>
 													<img

src/pages/Store/blocks/EditAppModal.tsx

@@ -6,7 +6,7 @@ import Loader from 'src/components/UI/loader/Loader'
 import Modal from 'src/components/UI/modal/Modal'
 import { HOST_NAME } from 'src/constants/host'
 import StoreService from 'src/services/storeServices'
-import { T_App, T_NewApp } from '../../type'
+import { T_App, T_NewApp } from '../type'
 import {
 	LoaderContainer,
 	NewAppButtonBlock,
@@ -16,7 +16,7 @@ import {
 	NewAppIconBlock,
 	NewAppModalContainer,
 	NewAppScreenshotsBlock
-} from '../newAppModal/styles'
+} from './newAppModal/styles'
 
 type Props = {
 	modal: boolean
@@ -103,7 +103,7 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 		)
 		setSelectedImage(app.IconUrl)
 		setSelectedFile(app.Url)
-	}, [])
+	}, [modal])
 
 	// Иконка
 	const handleImageChange = () => {
@@ -155,11 +155,6 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 		screenshotsInputRef.current?.click()
 	}
 
-	useEffect(() => {
-		console.log(selectedScreenshots)
-		console.log(deleteScreenshots)
-	}, [selectedScreenshots])
-
 	// Файл
 	const handleFileChange = () => {
 		const file = fileInputRef.current?.files?.[0]
@@ -173,7 +168,7 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 	}
 
 	const updateApp = async () => {
-    setLoading(true)
+		setLoading(true)
 		try {
 			// Данные
 			if (
@@ -188,7 +183,7 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 				const response = await StoreService.editData(app.Id, editApp)
 				if (response.status === 406) {
 					setError({ state: true, message: response.data })
-          setLoading(false)
+					setLoading(false)
 					return
 				}
 			}
@@ -199,7 +194,7 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 					(await StoreService.addIcon(selectedImage, app.Id))
 				if (response && response.status === 406) {
 					setError({ state: true, message: response.data })
-          setLoading(false)
+					setLoading(false)
 					return
 				}
 			}
@@ -227,11 +222,11 @@ export default function EditAppModal({ modal, setModal, app, getApps }: Props) {
 				const response = await StoreService.addFile(selectedFile, app.Id)
 				if (response.status === 406) {
 					setError({ state: true, message: response.data })
-          setLoading(false)
+					setLoading(false)
 					return
 				}
 			}
-      setLoading(false)
+			setLoading(false)
 			setModal(false)
 			getApps()
 		} catch (error) {}

src/pages/Store/blocks/StoreTable.tsx

@@ -1,12 +1,12 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import ContextMenu from 'src/components/UI/contextMenu/ContextMenu'
 import Checkbox from 'src/components/UI/input/Checkbox'
 import Table from 'src/components/UI/table/Table'
 import { T_ColumnsState } from 'src/pages/Registrations/types'
-import { T_App } from '../type'
-import styled, { css } from 'styled-components'
 import { I_QueryParams } from 'src/services/type'
-import { useState } from 'react'
-import ContextMenu from 'src/components/UI/contextMenu/ContextMenu'
-import App from 'src/App'
+import styled, { css } from 'styled-components'
+import { T_App } from '../type'
 import StoreTableItem from './StoreTableItem'
 
 interface I_TableHeaderItem {
@@ -52,10 +52,10 @@ type Props = {
 	notChecked: number[]
 	setNotChecked: (param: any) => void
 	setSelectAll: (param: any) => void
-  getApps: () => void
-  queryParams: I_QueryParams
+	getApps: () => void
+	queryParams: I_QueryParams
 	setQueryParams: (param: I_QueryParams) => void
-  loadingState?: boolean
+	loadingState?: boolean
 }
 
 export default function StoreTable({
@@ -68,35 +68,67 @@ export default function StoreTable({
 	notChecked,
 	setNotChecked,
 	setSelectAll,
-  getApps,
-  queryParams,
+	getApps,
+	queryParams,
 	setQueryParams,
-  loadingState
+	loadingState
 }: Props) {
 	const [contextMenuState, setContextMenuState] = useState(false)
 
-  const [activeSort, setActiveSort] = useState('')
+	const [activeSort, setActiveSort] = useState('')
 	const [sortState, setSortState] = useState(false)
 
+	const navigate = useNavigate()
+
+	useEffect(() => {
+		const searchParams = new URLSearchParams(location.search)
+		const orderParam = searchParams.get('order')
+
+		// Проверяем наличие параметра order в URL
+		if (orderParam) {
+			const sortOptions: { [key: string]: string } = {
+				name: 'Название',
+				updated: 'Дата обновления',
+				version: 'Версия',
+				short: 'Краткое описание',
+				enabled: 'Состояние'
+			}
+
+			const activeSortValue = sortOptions[orderParam.replace('!', '')]
+			const sortStateValue = orderParam[0] === '!'
+
+			setActiveSort(activeSortValue || '')
+			setSortState(sortStateValue)
+		}
+	}, [])
+
 	const sort = (value: string) => {
-    const sortOptions: { [key: string]: string } = {
-        'Название': 'name',
-        'Дата обновления': 'updated',
-        'Версия': 'version',
-        // возможен косяк с short
-        'Краткое описание': 'short',
-        'Состояние': 'enabled',
-    };
+		const sortOptions: { [key: string]: string } = {
+			Название: 'name',
+			'Дата обновления': 'updated',
+			Версия: 'version',
+			'Краткое описание': 'short',
+			Состояние: 'enabled'
+		}
 
-    const sortParam = sortOptions[value];
-    if (!sortParam) return;
+		const sortParam = sortOptions[value]
+		if (!sortParam) return
 
-    setActiveSort(value);
-    const newOrder = queryParams.order === sortParam ? `!${sortParam}` : sortParam;
-    setQueryParams({ ...queryParams, order: newOrder });
-    setSortState(queryParams.order === sortParam);
-};
+		setActiveSort(value)
+		const newOrder =
+			queryParams.order === sortParam ? `!${sortParam}` : sortParam
+		setQueryParams({ ...queryParams, order: newOrder })
+		setSortState(queryParams.order === sortParam)
 
+		const searchParams = new URLSearchParams(window.location.search)
+		if (searchParams.has('order')) {
+			searchParams.delete('order')
+		}
+		if (newOrder.trim() !== '') {
+			searchParams.append('order', newOrder.trim())
+		}
+		navigate(`?${searchParams.toString()}`)
+	}
 
 	return (
 		<Table loaderState={loadingState}>
@@ -115,9 +147,7 @@ export default function StoreTable({
 							}
 							onClick={() => {
 								selectAll
-									? (setSelectAll(false),
-									  setNotChecked([]),
-									  setCheckedRows([]))
+									? (setSelectAll(false), setNotChecked([]), setCheckedRows([]))
 									: checkedRows.length === 0
 									? (setSelectAll(true), setNotChecked([]))
 									: setCheckedRows([])
@@ -179,7 +209,7 @@ export default function StoreTable({
 			<tbody>
 				{Apps.map((app) => (
 					<StoreTableItem
-          app={app}
+						app={app}
 						selectAll={selectAll}
 						notChecked={notChecked}
 						checkedRows={checkedRows}

src/pages/Store/blocks/StoreTableItem.tsx

@@ -9,7 +9,7 @@ import { T_ColumnsState } from 'src/pages/Registrations/types'
 import StoreService from 'src/services/storeServices'
 import styled from 'styled-components'
 import { T_App } from '../type'
-import EditAppModal from './editAppModal/EditAppModal'
+import EditAppModal from './EditAppModal'
 
 type Props = {
 	app: T_App
@@ -99,7 +99,7 @@ export default function StoreTableItem({
 					}}
 				/>
 			</td>
-			{Object.entries(activeColumns).map(([key, item]) =>
+			{Object.entries(activeColumns).map(([key, _]) =>
 				activeColumns[key as keyof typeof activeColumns].status ? (
 					<td key={key}>
 						<p>
@@ -170,7 +170,11 @@ export default function StoreTableItem({
 							<img src='/src/images/reload.svg' alt='' />
 							<p>Перепаковать</p>
 						</Item>
-						<Item onClick={() => (setEditModalState(true), setContextMenuState(false))}>
+						<Item
+							onClick={() => (
+								setEditModalState(true), setContextMenuState(false)
+							)}
+						>
 							<img src='/src/images/edit.svg' alt='' />
 							<p>Редактировать</p>
 						</Item>