diff --git a/.gitignore b/.gitignore index d6fd664..5334697 100644 --- a/.gitignore +++ b/.gitignore @@ -128,4 +128,6 @@ dist .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz -.pnp.* \ No newline at end of file +.pnp.* + +ngrok.exe \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 66b4b88..6f637f3 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,17 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import Main from './container/main'; +import useTelegram from './container/hooks/useTelegram'; const App = () => { + const { isScriptLoaded, onClose, onToggleButton, tg, user_id, username } = useTelegram(); + + useEffect(() => { + if (isScriptLoaded && tg) { + tg.ready(); // Инициализация WebApp после загрузки скрипта + console.log('Telegram WebApp готов:', tg); + } + }, [isScriptLoaded, tg]); + return
; }; diff --git a/src/container/hooks/useTelegram.tsx b/src/container/hooks/useTelegram.tsx index 7f6163b..18993ba 100644 --- a/src/container/hooks/useTelegram.tsx +++ b/src/container/hooks/useTelegram.tsx @@ -1,36 +1,61 @@ +import { useEffect, useState } from 'react'; declare global { - interface Window { - Telegram: { - WebApp: any; - }; - } + interface Window { + Telegram: { + WebApp: any; + }; } - -const useTelegram = () => { - - const tg = window.Telegram.WebApp; - const onClose = () => { - tg.close() - } - - const onToggleButton = () => { - if(tg.MainButton.isVisible) { - tg.MainButton.hide(); - } else { - tg.MainButton.show(); - } - } - - return { - onClose, - onToggleButton, - tg, - user_id: tg.initDataUnsafe?.user?.id, - user: tg.initDataUnsafe?.user, - username: tg.initDataUnsafe?.user?.username, - queryId: tg.initDataUnsafe?.query_id - } } -export default useTelegram; \ No newline at end of file +const useTelegram = () => { + const [isScriptLoaded, setIsScriptLoaded] = useState(false); + + useEffect(() => { + // Проверяем, был ли скрипт уже загружен + if (!window.Telegram) { + // Если Telegram API еще не доступен, загружаем скрипт + const script = document.createElement('script'); + script.src = 'https://telegram.org/js/telegram-web-app.js'; + script.async = true; + script.onload = () => { + setIsScriptLoaded(true); // Скрипт загружен + }; + script.onerror = () => { + console.error('Ошибка при загрузке Telegram Web App SDK'); + }; + document.body.appendChild(script); + } else { + // Если Telegram Web App уже доступен, просто обновляем состояние + setIsScriptLoaded(true); + } + }, []); + + // Логика, которая будет выполняться, когда скрипт загружен + const tg = window.Telegram?.WebApp; + + const onClose = () => { + tg?.close(); + }; + + const onToggleButton = () => { + if (tg?.MainButton?.isVisible) { + tg.MainButton.hide(); + } else { + tg.MainButton.show(); + } + }; + + return { + isScriptLoaded, + onClose, + onToggleButton, + tg, + user_id: tg?.initDataUnsafe?.user?.id, + user: tg?.initDataUnsafe?.user, + username: tg?.initDataUnsafe?.user?.username, + queryId: tg?.initDataUnsafe?.query_id, + }; +}; + +export default useTelegram; diff --git a/src/container/signup/about/index.style.ts b/src/container/signup/about/index.style.ts new file mode 100644 index 0000000..6a9f85b --- /dev/null +++ b/src/container/signup/about/index.style.ts @@ -0,0 +1,60 @@ +import styled from '@emotion/styled'; +import TextField from '@mui/material/TextField'; + +export const AboutStyled = styled(TextField)` + & .MuiInputBase-input { + color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6)); + } + + & .MuiFormLabel-root { + color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6)); + } + + & .Mui-focused .MuiFormLabel-root { + color: var(--tg-theme-label-focus-color, #0066ff); + } + + + & .MuiOutlinedInput-root { + fieldset { + border-color: var(--tg-theme-border-color, #cccccc); + } + + &:hover fieldset { + border-color: var(--tg-theme-border-hover, #888888); + } + + &.Mui-focused fieldset { + border-color: var(--tg-theme-border-focused, #0066ff); + } + + } + + @media (prefers-color-scheme: dark) { + & .MuiInputBase-input { + color: var(--tg-theme-text-color-dark, #ffffff); + } + + & .MuiFormLabel-root { + color: var(--tg-theme-label-color-dark, #ffffff); + } + + & .Mui-focused .MuiFormLabel-root { + color: var(--tg-theme-label-focus-color-dark, #0066ff); + } + + & .MuiOutlinedInput-root { + fieldset { + border-color: var(--tg-theme-border-color-dark, #ffffff); + } + + &:hover fieldset { + border-color: var(--tg-theme-border-hover-dark, #777777); + } + + &.Mui-focused fieldset { + border-color: var(--tg-theme-border-focused-dark, #0066ff); + } + } + } +`; \ No newline at end of file diff --git a/src/container/signup/about/index.tsx b/src/container/signup/about/index.tsx new file mode 100644 index 0000000..ddf20fc --- /dev/null +++ b/src/container/signup/about/index.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { AboutStyled } from './index.style'; + +const About = ({rows, id, label, name, placeholder="Введите текст...", className = null}): React.ReactElement => { + return ( + + ); +} + +export default About; \ No newline at end of file diff --git a/src/container/signup/button/index.style.ts b/src/container/signup/button/index.style.ts new file mode 100644 index 0000000..cb8c7a4 --- /dev/null +++ b/src/container/signup/button/index.style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; +import Button from '@mui/material/Button'; + +export const RegisterButtonStyled = styled(Button)` + background-color: var(--tg-theme-button-color); + color: var(--tg-theme-button-text-color); +`; \ No newline at end of file diff --git a/src/container/signup/button/index.tsx b/src/container/signup/button/index.tsx new file mode 100644 index 0000000..584c08e --- /dev/null +++ b/src/container/signup/button/index.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { RegisterButtonStyled } from './index.style'; + +const RegisterButton = ({children, id = null, name = null, className = null}): React.ReactElement => { + return ( + + {children} + + ); +} + +export default RegisterButton; \ No newline at end of file diff --git a/src/container/signup/index.css b/src/container/signup/index.css index 7d39caf..5e94c02 100644 --- a/src/container/signup/index.css +++ b/src/container/signup/index.css @@ -1,7 +1,3 @@ -.upload-input { - display: none; -} - .basic-multi-select { width: 100%; } \ No newline at end of file diff --git a/src/container/signup/index.style.ts b/src/container/signup/index.style.ts new file mode 100644 index 0000000..aa8fc5f --- /dev/null +++ b/src/container/signup/index.style.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; +import { Grid2 } from '@mui/material'; + +export const GridChildrenStyle = styled(Grid2)` + display: flex; + padding: 10px; + align-items: center; + justify-content: center; +`; \ No newline at end of file diff --git a/src/container/signup/index.tsx b/src/container/signup/index.tsx index d9df1b6..4f93048 100644 --- a/src/container/signup/index.tsx +++ b/src/container/signup/index.tsx @@ -1,17 +1,20 @@ import * as React from 'react'; -import {Button, TextField, Grid, Box, - Typography, Container +import {Button, Grid2, Box, Container } from '@mui/material'; import Title from './title'; +import Name from './name'; +import About from './about'; import Photo from './photo'; +import Interests from './interests'; +import RegisterButton from './button'; import axios from 'axios'; import student_icon from './student-icon.png'; import "./index.css"; //import useTelegram from "../hooks/useTelegram"; import Select from 'react-select'; import { useState } from 'react'; -import { useConstant } from '../Constant'; - +import { useConstant } from '../Constant'; +import { GridChildrenStyle } from './index.style'; const SingUpPage = (): React.ReactElement => { const [selectedPhoto, setSelectedPhoto] = useState(null); @@ -58,78 +61,52 @@ const SingUpPage = (): React.ReactElement => { alignItems: 'center', }} > - Регистрация + Регистрация - - - + + - - - + + + - - - + + - - - - - -