project set up
This commit is contained in:
Kakabay
commit
80b1881f68
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import react from 'eslint-plugin-react'
|
||||
|
||||
export default tseslint.config({
|
||||
// Set the react version
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
// Add the react plugin
|
||||
react,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "turkmentv_shop_client_react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/uuid": "^10.0.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.27.0",
|
||||
"uuid": "^10.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.11.1",
|
||||
"@types/react": "^18.3.10",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.12",
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.7.0",
|
||||
"vite": "^5.4.8"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1 className="text-red-400">Hello</h1>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,78 @@
|
|||
'use client';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface IProps {
|
||||
id: string;
|
||||
placeholder: string;
|
||||
type: 'email' | 'text' | 'password';
|
||||
required?: boolean;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const Input = ({ id, placeholder, type, required, label }: IProps) => {
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||
return (
|
||||
<div className="auth-input relative w-full flex flex-col gap-1">
|
||||
{label ? (
|
||||
<label className="leading-[150%] text-base font-semibold" htmlFor={id}>
|
||||
{label}
|
||||
</label>
|
||||
) : null}
|
||||
<div className="w-full relative">
|
||||
<input
|
||||
type={type === 'password' ? (isVisible ? 'text' : type) : type}
|
||||
required={required}
|
||||
name={id}
|
||||
id={id}
|
||||
placeholder={placeholder}
|
||||
className="text-[#000000] font-medium text-base bg-[#E6E6FA] rounded-[12px] px-[16px] py-[12px] w-full outline-none"
|
||||
/>
|
||||
{type === 'password' ? (
|
||||
<>
|
||||
{/* Password Hidden icon */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="absolute right-5 top-[50%] -translate-y-[50%] transition-all opacity-100 cursor-pointer"
|
||||
style={
|
||||
!isVisible
|
||||
? { opacity: 1, pointerEvents: 'all' }
|
||||
: { opacity: 0, pointerEvents: 'none' }
|
||||
}
|
||||
onClick={() => setIsVisible(!isVisible)}>
|
||||
<path
|
||||
d="M12 17.5C8.2 17.5 4.8 15.4 3.2 12H1C2.7 16.4 7 19.5 12 19.5C17 19.5 21.3 16.4 23 12H20.8C19.2 15.4 15.8 17.5 12 17.5Z"
|
||||
fill="#636370"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Password Visible icon */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="absolute right-5 top-[50%] -translate-y-[50%] transition-all opacity-100 cursor-pointer"
|
||||
style={
|
||||
isVisible
|
||||
? { opacity: 1, pointerEvents: 'all' }
|
||||
: { opacity: 0, pointerEvents: 'none' }
|
||||
}
|
||||
onClick={() => setIsVisible(!isVisible)}>
|
||||
<path
|
||||
d="M12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9ZM12 4.5C17 4.5 21.27 7.61 23 12C21.27 16.39 17 19.5 12 19.5C7 19.5 2.73 16.39 1 12C2.73 7.61 7 4.5 12 4.5ZM3.18 12C3.98825 13.6503 5.24331 15.0407 6.80248 16.0133C8.36165 16.9858 10.1624 17.5013 12 17.5013C13.8376 17.5013 15.6383 16.9858 17.1975 16.0133C18.7567 15.0407 20.0117 13.6503 20.82 12C20.0117 10.3497 18.7567 8.95925 17.1975 7.98675C15.6383 7.01424 13.8376 6.49868 12 6.49868C10.1624 6.49868 8.36165 7.01424 6.80248 7.98675C5.24331 8.95925 3.98825 10.3497 3.18 12Z"
|
||||
fill="#636370"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Input;
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Input from './input';
|
||||
import Button from '../shared/button';
|
||||
|
||||
interface LoginFormProps {
|
||||
label: string;
|
||||
password?: boolean;
|
||||
login?: boolean;
|
||||
}
|
||||
|
||||
const LoginForm = ({ label, password = false, login = true }: LoginFormProps) => {
|
||||
const [lotNumber, setLotNumber] = useState<string>('');
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(event) => event.preventDefault()}
|
||||
className="p-[40px] flex flex-col gap-[40px] bg-fillLightBgLightContr rounded-[25px]">
|
||||
<h1 className="text-[40px] font-semibold leading-[100%]">{label}</h1>
|
||||
<div className="w-[442px] flex flex-col gap-[30px]">
|
||||
<div className="flex flex-col w-full gap-[20px]">
|
||||
{login ? (
|
||||
<input
|
||||
required={true}
|
||||
name={'login'}
|
||||
id={'Введите свой логин'}
|
||||
placeholder={'kod'}
|
||||
type="text"
|
||||
value={lotNumber}
|
||||
onChange={(e) => setLotNumber(e.target.value)}
|
||||
className="text-[#000000] font-medium text-base bg-[#E6E6FA] rounded-[12px] px-[16px] py-[12px] w-full outline-none"
|
||||
/>
|
||||
) : // <Input label="Логин" id="Введите свой логин" placeholder="Введите свой логин" type="text" value={inputValue}/>
|
||||
null}
|
||||
{password ? (
|
||||
<Input label="Пароль" id="password" placeholder="Введите свой пароль" type="password" />
|
||||
) : null}
|
||||
</div>
|
||||
<Button buttonLink={`/lot/${lotNumber}`} size="small" disabled={lotNumber.length != 6}>
|
||||
Giriş
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface ButttonProps {
|
||||
size: 'small' | 'big';
|
||||
buttonLink: string;
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}
|
||||
const Button = ({ buttonLink, size = 'small', children, disabled }: ButttonProps) => {
|
||||
return (
|
||||
<Link
|
||||
to={!disabled ? buttonLink : '/'}
|
||||
className={`${
|
||||
size === 'small' ? 'py-3' : 'py-5'
|
||||
} px-4 bg-fillButtonAccentDefault text-center rounded-xl w-full text-[18px] text-white font-medium leading-[150%] ${
|
||||
disabled ? 'opacity-70 pointer-events-auto cursor-default' : 'cursor-pointer'
|
||||
}`}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
interface ContainerProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
const Container = ({ children }: ContainerProps) => {
|
||||
return <div className="container">{children}</div>;
|
||||
};
|
||||
|
||||
export default Container;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
|
||||
const LotList = () => {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-[40px] w-full">
|
||||
<h1 className="text-[60px] leading-[100%] text-textBlack font-bold text-center max-w-[900px] w-full">
|
||||
Username
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-col rounded-[25px] overflow-hidden max-w-[500px] w-full">
|
||||
<div className="bg-fillTableHead flex p-5">
|
||||
<span className="text-base text-textBlack font-semibold block max-w-[270px] w-full">
|
||||
Лот №
|
||||
</span>
|
||||
<span className="text-base text-textBlack font-semibold block max-w-[166px] w-full">
|
||||
Код
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col w-full">
|
||||
<Link href={`/lot/2342424`} className="flex p-5 w-full bg-fillTableRow">
|
||||
<span className="text-base text-textBlack font-semibold block max-w-[270px] w-full">
|
||||
Лот №123456789
|
||||
</span>
|
||||
<span className="text-base text-textBlack font-semibold block max-w-[166px] w-full">
|
||||
1234
|
||||
</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.58984 16.58L13.1698 12L8.58984 7.41L9.99984 6L15.9998 12L9.99984 18L8.58984 16.58Z"
|
||||
fill="#7A7ACC"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LotList;
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import Button from '../shared/button';
|
||||
import { LotData, Datum } from '../../models/lotData.model';
|
||||
import { dateSplitYear, dateSplitDays } from '../../utils/stringFormaters';
|
||||
|
||||
interface IProps {
|
||||
params: string;
|
||||
}
|
||||
|
||||
const ShopTable = ({ params }: IProps) => {
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [lastPage, setLastPage] = useState<number>(1);
|
||||
const [totalItems, setTotalItems] = useState<number>(1);
|
||||
const [data, setData] = useState<LotData>();
|
||||
const [lots, setLots] = useState<Datum[]>([]);
|
||||
const [err, setErr] = useState<boolean>(false);
|
||||
const [dataFilter, setDataFilter] = useState<string>('old');
|
||||
const [smsNumber, setSmsNumber] = useState<string>();
|
||||
const [isFetching, setIsFetching] = useState<boolean>(false); // To prevent redundant fetches
|
||||
|
||||
const [socket, setSocket] = useState<WebSocket | null>(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
// Fetch data when page or filter changes
|
||||
const fetchData = useCallback(async () => {
|
||||
if (isFetching) return; // Prevent duplicate fetches
|
||||
|
||||
setIsFetching(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://sms.turkmentv.gov.tm/api/shop/messages-by-code?page=${currentPage}`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
unique_code: params,
|
||||
sort_by_dt_descending: dataFilter === 'old' ? false : true,
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data: LotData = await response.json();
|
||||
setErr(false);
|
||||
setData(data);
|
||||
setSmsNumber(data.data.unique_code);
|
||||
setLastPage(data.data.lot_sms_messages.meta.last_page);
|
||||
setTotalItems(data.data.lot_sms_messages.meta.total);
|
||||
|
||||
// Efficiently manage lot state updates
|
||||
setLots(
|
||||
(prevLots) =>
|
||||
currentPage === 1
|
||||
? [...data.data.lot_sms_messages.data] // Replace if first page
|
||||
: [...prevLots, ...data.data.lot_sms_messages.data], // Append otherwise
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setErr(true);
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
}
|
||||
}, [currentPage, dataFilter, params, isFetching]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [currentPage, dataFilter, fetchData]);
|
||||
|
||||
// WebSocket connection handling with cleanup
|
||||
// useEffect(() => {
|
||||
// let reconnectTimeout: NodeJS.Timeout | null = null;
|
||||
// let pingInterval: NodeJS.Timeout | null = null;
|
||||
|
||||
// const connectWebSocket = () => {
|
||||
// if (!smsNumber) return;
|
||||
|
||||
// const ws = new WebSocket(`wss://sms.turkmentv.gov.tm/ws/quiz?dst=${smsNumber}`);
|
||||
// setSocket(ws);
|
||||
|
||||
// ws.onopen = () => {
|
||||
// console.log('WebSocket is connected');
|
||||
// setIsConnected(true);
|
||||
|
||||
// // Ping WebSocket every 25 seconds to keep connection alive
|
||||
// pingInterval = setInterval(() => {
|
||||
// if (ws.readyState === WebSocket.OPEN) {
|
||||
// ws.send(JSON.stringify({ type: 'ping' }));
|
||||
// }
|
||||
// }, 25000);
|
||||
// };
|
||||
|
||||
// ws.onmessage = (event) => {
|
||||
// try {
|
||||
// console.log('Message received from WebSocket:', event.data);
|
||||
// const message = JSON.parse(event.data);
|
||||
// // Handle received message if needed
|
||||
// } catch (error) {
|
||||
// console.error('Error processing message:', error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// ws.onerror = (error) => {
|
||||
// console.error('WebSocket error:', error);
|
||||
// };
|
||||
|
||||
// ws.onclose = () => {
|
||||
// console.log('WebSocket closed, attempting to reconnect...');
|
||||
// setIsConnected(false);
|
||||
// if (pingInterval) clearInterval(pingInterval);
|
||||
|
||||
// // Attempt to reconnect after a delay
|
||||
// reconnectTimeout = setTimeout(connectWebSocket, 5000);
|
||||
// };
|
||||
|
||||
// return () => {
|
||||
// if (ws) ws.close();
|
||||
// if (pingInterval) clearInterval(pingInterval);
|
||||
// if (reconnectTimeout) clearTimeout(reconnectTimeout);
|
||||
// };
|
||||
// };
|
||||
|
||||
// const cleanup = connectWebSocket();
|
||||
|
||||
// return () => cleanup && cleanup();
|
||||
// }, [smsNumber]);
|
||||
|
||||
// Filter handler with memoization to prevent re-creation
|
||||
const filterClickHandler = useCallback((dataType: string) => {
|
||||
setDataFilter(dataType);
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
return data?.data && !err ? (
|
||||
<div className="flex items-center flex-col gap-[40px] ">
|
||||
<h1 className="text-[60px] leading-[100%] text-textBlack font-bold text-center max-w-[900px] w-full">
|
||||
{data?.data.seller_name}
|
||||
</h1>
|
||||
<div className="flex flex-col items-end w-full gap-[20px] max-w-[900px]">
|
||||
<div className="flex flex-col items-end w-full gap-[10px]">
|
||||
<div className="table_sort flex gap-[10px] items-center">
|
||||
{/* <h3 className="text-textLight text-sm">Показать:</h3> */}
|
||||
<button
|
||||
className={`block px-2 py-1 rounded-md ${
|
||||
dataFilter === 'old'
|
||||
? 'text-fillLinkActive font-bold cursor-default bg-fillTableHead pointer-events-none'
|
||||
: 'text-fillLinkRest'
|
||||
} hover:text-fillLinkHover hover:bg-fillTableHead text-base font-bold cursor-pointer`}
|
||||
onClick={() => filterClickHandler('old')}>
|
||||
Oldest
|
||||
</button>
|
||||
<button
|
||||
className={`block px-2 py-1 rounded-md ${
|
||||
dataFilter === 'new'
|
||||
? 'text-fillLinkActive font-bold cursor-default bg-fillTableHead pointer-events-none'
|
||||
: 'text-fillLinkRest'
|
||||
} hover:text-fillLinkHover hover:bg-fillTableHead text-base font-bold cursor-pointer`}
|
||||
onClick={() => filterClickHandler('new')}>
|
||||
Newest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="table_body flex flex-col w-full rounded-[25px] overflow-hidden">
|
||||
<div className="table_head flex w-full justify-between bg-fillTableHead border border-b rounded-t-[25px] border-fillTableStrokeTableHead">
|
||||
<span className="block text-textBlack py-[20px] px-[24px] w-[80px] text-base leading-[125%] font-semibold">
|
||||
№
|
||||
</span>
|
||||
<span className="block text-textBlack py-[20px] px-[24px] w-[200px] text-base leading-[125%] font-semibold">
|
||||
Telefon belgisi
|
||||
</span>
|
||||
<span className="block text-textBlack py-[20px] px-[24px] w-[230px] text-base leading-[125%] font-semibold">
|
||||
Kod
|
||||
</span>
|
||||
<span className="block text-textBlack py-[20px] px-[24px] w-[180px] text-base leading-[125%] font-semibold">
|
||||
Wagty
|
||||
</span>
|
||||
</div>
|
||||
<div className="table_row_body flex flex-col w-full rounded-b-[25px]">
|
||||
{lots.map((lot, index) =>
|
||||
dataFilter === 'old' ? (
|
||||
<div
|
||||
className={`table_row flex w-full justify-between ${
|
||||
index % 2 === 0 ? 'bg-fillTableRow2' : 'bg-fillTableRow'
|
||||
} border border-b border-fillTableStrokeTableRow`}
|
||||
key={v4()}>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[80px] text-base leading-[125%] font-normal">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[200px] text-base leading-[125%] font-normal">
|
||||
{lot.client}
|
||||
</span>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[230px] text-base leading-[125%] font-normal">
|
||||
{lot.msg.toString()}
|
||||
</span>
|
||||
<div className="flex flex-col py-[20px] px-[24px] w-[180px] leading-[125%] font-normal">
|
||||
<span className="text-textDarkt text-base">{dateSplitYear(lot.dt)}</span>
|
||||
<span className="text-textLight text-sm">{dateSplitDays(lot.dt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`table_row flex w-full justify-between ${
|
||||
index % 2 === 0 ? 'bg-fillTableRow2' : 'bg-fillTableRow'
|
||||
} border border-b border-fillTableStrokeTableRow`}
|
||||
key={v4()}>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[80px] text-base leading-[125%] font-normal">
|
||||
{totalItems - index}
|
||||
</span>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[200px] text-base leading-[125%] font-normal">
|
||||
{lot.client}
|
||||
</span>
|
||||
<span className="block text-textDarkt py-[20px] px-[24px] w-[230px] text-base leading-[125%] font-normal">
|
||||
{lot.msg}
|
||||
</span>
|
||||
<div className="flex flex-col py-[20px] px-[24px] w-[180px] leading-[125%] font-normal">
|
||||
<span className="text-textDarkt text-base">{dateSplitYear(lot.dt)}</span>
|
||||
<span className="text-textLight text-sm">{dateSplitDays(lot.dt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentPage !== lastPage ? (
|
||||
<button
|
||||
className="p-[20px] w-full text-white text-[18px] text-medium leading-[125%] bg-fillButtonAccentDefault rounded-[25px]"
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}>
|
||||
Ýenede goş
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : err ? (
|
||||
<div className="h-full flex items-center justify-center text-2xl font-semibold text-textDarkt">
|
||||
<div className="gap-5 flex flex-col w-[200px] items-center">
|
||||
<p>Kod nädogry</p>
|
||||
<Button size="small" buttonLink="/">
|
||||
Yza
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full w-full flex items-center justify-center text-2xl font-semibold text-textDarkt">
|
||||
Loading...
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShopTable;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Dispatch, DispatchWithoutAction, SetStateAction, createContext } from 'react';
|
||||
|
||||
interface LotContext {
|
||||
LotNumberContext: {
|
||||
lotNumber: string | undefined;
|
||||
setLotNumber: Dispatch<SetStateAction<string | undefined>>;
|
||||
};
|
||||
}
|
||||
|
||||
export const LotContext = createContext<LotContext>({} as LotContext);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1348px;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import LotNumber from './pages/LotNumber.tsx';
|
||||
import Home from './pages/Auth.tsx';
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
// element: <App />,
|
||||
children: [
|
||||
{ path: '', element: <Home /> },
|
||||
{ path: 'lot/:lot_number', element: <LotNumber />, errorElement: <p>ERROR</p> },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</StrictMode>,
|
||||
);
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
export interface LotData {
|
||||
data: Data;
|
||||
}
|
||||
|
||||
export interface Data {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
unique_code: string;
|
||||
starts_at: string;
|
||||
ends_at: string;
|
||||
seller_name: string;
|
||||
seller_phone: string;
|
||||
lot_sms_messages: LotSMSMessages;
|
||||
}
|
||||
|
||||
export interface LotSMSMessages {
|
||||
data: Datum[];
|
||||
meta: Meta;
|
||||
}
|
||||
|
||||
export interface Datum {
|
||||
id: number;
|
||||
client: string;
|
||||
msg: string;
|
||||
dt: string;
|
||||
}
|
||||
|
||||
export interface Meta {
|
||||
current_page: number;
|
||||
total_pages: number;
|
||||
count: number;
|
||||
from: number;
|
||||
last_page: number;
|
||||
path: string;
|
||||
per_page: number;
|
||||
to: number;
|
||||
total: number;
|
||||
next: null;
|
||||
prev: null;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import LoginForm from '../components/auth/loginForm';
|
||||
import Container from '../components/shared/container';
|
||||
import LotProvider from '../providers/LotProvider';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen py-6 flex items-center justify-center">
|
||||
<Container>
|
||||
<div className="flex justify-center items-center">
|
||||
<LotProvider>
|
||||
<LoginForm label="Koduňyzy giriziň" />
|
||||
</LotProvider>
|
||||
</div>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import Container from '../components/shared/container';
|
||||
import ShopTable from '../components/shop/shopTable';
|
||||
import LotProvider from '../providers/LotProvider';
|
||||
|
||||
const LotNumber = () => {
|
||||
let { lot_number } = useParams();
|
||||
|
||||
return (
|
||||
<main className="my-[100px]">
|
||||
<Container>
|
||||
<LotProvider>{lot_number && <ShopTable params={lot_number} />}</LotProvider>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default LotNumber;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { PropsWithChildren, useMemo, useState } from 'react';
|
||||
import { LotContext } from '../context/LotContext';
|
||||
|
||||
const LotProvider = ({ children }: PropsWithChildren) => {
|
||||
const [lotNumber, setLotNumber] = useState<string>();
|
||||
const LotNumberContext = useMemo(() => ({ lotNumber, setLotNumber }), [lotNumber, setLotNumber]);
|
||||
|
||||
return <LotContext.Provider value={{ LotNumberContext }}>{children}</LotContext.Provider>;
|
||||
};
|
||||
|
||||
export default LotProvider;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export const dateSplitYear = (date: string) => {
|
||||
const formatedString = date.split(' ')[0].split('-').reverse().join('.');
|
||||
return formatedString;
|
||||
};
|
||||
export const dateSplitDays = (date: string) => {
|
||||
const formatedString = date.split(' ')[1];
|
||||
return formatedString;
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
textBlack: '#242429',
|
||||
textLight: '#878799',
|
||||
textDarkt: '#636370',
|
||||
fillLightBgLightContr: '#F5F5FA',
|
||||
fillButtonAccentDefault: '#7A7ACC',
|
||||
fillTableHead: '#E1E1F5',
|
||||
fillTableRow: '#F0F0FA',
|
||||
fillTableRow2: '#F5F5FA',
|
||||
fillTableStrokeTableHead: '#dcdcfa',
|
||||
fillTableStrokeTableRow: '#E6E6FA',
|
||||
|
||||
fillLinkRest: '#878799',
|
||||
fillLinkHover: '#5C5C99',
|
||||
fillLinkActive: '#4D4D99',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue