Second part frontend (#57)

Author: Kimiega

frontend/package-lock.json

@@ -11,12 +11,14 @@
     "@ant-design/icons": "^5.2.6",
     "antd": "^5.13.2",
     "axios": "^1.6.7",
-    "effector-storage": "^7.0.0",
+    "effector": "^23.2.3",
+    "effector-storage": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "atomic-router": "^0.9.4",
     "atomic-router-react": "^0.9.1",
-    "history": "^5.3.0"
+    "history": "^5.3.0",
+    "swiper": "^11.1.15"
   },
   "devDependencies": {
     "@eslint/js": "^9.2.0",

frontend/package.json

@@ -1,20 +1,21 @@
 import {useEffect} from "react";
-import { router } from "./routes/api";
-import { RouterProvider } from "atomic-router-react";
+import {router} from "./routes/api";
+import {RouterProvider} from "atomic-router-react";
 
 import {$errorStore} from "@/shared/api";
 import {message} from "antd";
 import {Routes} from "@/app/routes/ui";
 
-import { init, mockTgEnv } from './telegram-sdk';
-import { retrieveLaunchParams } from '@telegram-apps/sdk';
+import {init, mockTgEnv} from './telegram-sdk';
+import {retrieveLaunchParams} from '@telegram-apps/sdk';
 
 
 export const App = () => {
-    mockTgEnv().then( () => {
-    init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV);
-}
-    )
+    mockTgEnv()
+        .then(() => {
+            init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV);
+        })
+
     const [messageApi, contextHolder] = message.useMessage();
     useEffect(() => {
         $errorStore.watch(state => {
@@ -26,7 +27,7 @@ export const App = () => {
     return (
         <RouterProvider router={router}>
             {contextHolder}
-            <Routes />
+            <Routes/>
         </RouterProvider>
     );
 };

frontend/src/app/index.tsx

@@ -5,11 +5,13 @@ const basePath = "/itmo-dating-mini-app"
 export const routes = {
     home: createRoute(),
     registration: createRoute(),
+    main: createRoute()
 };
 
 export const routesMap = [
     { path: "", route: routes.home },
     { path: "/registration", route: routes.registration},
+    { path: "/main", route: routes.main},
 ];
 
 const history =  createBrowserHistory();

frontend/src/app/routes/api/routing.ts

@@ -1,10 +1,11 @@
 import {Route} from "atomic-router-react";
 import {routes} from "../api";
-import {Registration, Home} from "@/pages";
+import {Registration, Home, Main} from "@/pages";
 
 export const Routes = () => (
     <>
         <Route route={routes.home} view={Home}/>
         <Route route={routes.registration} view={Registration}/>
+        <Route route={routes.main} view={Main}/>
     </>
 );

frontend/src/app/routes/ui/index.tsx

@@ -7,6 +7,8 @@ import {
     $debug,
     init as initSDK,
 } from '@telegram-apps/sdk';
+import {mountMainButton} from "@/entities/main-button";
+import {mountBackButton} from "@/entities/back-button";
 
 /**
  * Initializes the application and configures its dependencies.
@@ -30,7 +32,9 @@ export function init(debug: boolean): void {
     }
 
     // Mount all components used in the project.
-    backButton.mount();
+    mountMainButton()
+    mountBackButton()
+
     miniApp.mount();
     themeParams.mount();
     initData.restore();

frontend/src/app/telegram-sdk/api/init.ts

@@ -0,0 +1 @@
+export {AddPictureButton} from "./ui/AddPictureButton.tsx"

frontend/src/entities/add-picture-button/index.ts

@@ -0,0 +1,34 @@
+import {Icon28AddCircle} from "@telegram-apps/telegram-ui/dist/icons/28/add_circle";
+import {Card} from "@telegram-apps/telegram-ui";
+import {ChangeEventHandler} from "react";
+
+interface addPictureButtonProps {
+    handleUploadingPhotos: ChangeEventHandler<any>
+}
+export const AddPictureButton = ({handleUploadingPhotos}: addPictureButtonProps) => (
+    <Card style={{
+        background: 'var(--tgui--secondary_bg_color)',
+        display: "block"
+    }}>
+        <Icon28AddCircle style={{
+            display: "block",
+            margin: "auto",
+            // marginRight: "auto",
+            marginBottom: "50%",
+            marginTop: "50%",
+            transform: "scale(5)"
+        }} mode="plain"/>
+        <input type="file" multiple accept="image/*" onInput={handleUploadingPhotos} style={{
+            display: "block",
+            height: "100%",
+            width: "100%",
+            position: "absolute",
+            top: "0",
+            bottom: "0",
+            left: "0",
+            right: "0",
+            opacity: "0",
+            cursor: "pointer"
+        }}/>
+    </Card>
+)

frontend/src/entities/add-picture-button/ui/AddPictureButton.tsx

@@ -0,0 +1,13 @@
+import {backButton, offBackButtonClick, onBackButtonClick} from "@telegram-apps/sdk";
+
+export function setBackButtonOnClick(fn: VoidFunction) {
+    if (backButton.isMounted()) {
+        return onBackButtonClick(fn)
+    } else return () => {}
+}
+
+export function removeBackButtonOnClick(fn: VoidFunction) {
+    if (backButton.isMounted()) {
+        offBackButtonClick(fn)
+    }
+}

frontend/src/entities/back-button/api/backButtonOnClick.ts

@@ -0,0 +1,7 @@
+import {backButton} from "@telegram-apps/sdk";
+
+export function mountBackButton() {
+    if (backButton.mount.isAvailable()) {
+        backButton.mount()
+    }
+}

frontend/src/entities/back-button/api/mountBackButton.ts

@@ -0,0 +1,13 @@
+import {backButton} from "@telegram-apps/sdk";
+
+export function setBackButtonVisible(isVisible: boolean) {
+    if (backButton.isMounted()) {
+        if (backButton.isSupported()) {
+            if (isVisible) {
+                backButton.show()
+            } else {
+                backButton.hide()
+            }
+        }
+    }
+}

frontend/src/entities/back-button/api/setBackButtonVisible.ts

@@ -0,0 +1,2 @@
+export {setBackButtonVisible} from "./api/setBackButtonVisible.ts"
+export {mountBackButton} from "./api/mountBackButton.ts"

frontend/src/entities/back-button/index.ts

@@ -0,0 +1,18 @@
+import {mainButton, offMainButtonClick, onMainButtonClick} from "@telegram-apps/sdk";
+
+export function setMainButtonOnClick(fn: VoidFunction) {
+    if (mainButton.isMounted()) {
+        return onMainButtonClick(fn)
+    } else return () => {}
+}
+
+export function removeMainButtonOnClick(fn: VoidFunction) {
+    if (mainButton.isMounted()) {
+        offMainButtonClick(fn)
+    }
+}
+
+export function setMainButtonOnAndOffClick(fn: VoidFunction) {
+    const fun = () => {fn(); removeMainButtonOnClick(fun)}
+    setMainButtonOnClick(fun)
+}

frontend/src/entities/main-button/api/mainButtonOnClick.ts

@@ -0,0 +1,7 @@
+import {mainButton} from "@telegram-apps/sdk";
+
+export function mountMainButton() {
+    if (mainButton.mount.isAvailable()) {
+        mainButton.mount()
+    }
+}

frontend/src/entities/main-button/api/mountMainButton.ts

@@ -0,0 +1,17 @@
+import {mainButton} from "@telegram-apps/sdk";
+
+export function setMainButtonParams(
+    text: string,
+    hasShineEffect: boolean,
+    isEnabled: boolean,
+) {
+    if (mainButton.isMounted()) {
+        if (mainButton.setParams.isAvailable()) {
+            mainButton.setParams({
+                text: text,
+                isEnabled: isEnabled,
+                hasShineEffect: hasShineEffect,
+            });
+        }
+    }
+}

frontend/src/entities/main-button/api/setMainButtonParams.ts

@@ -0,0 +1,11 @@
+import {mainButton} from "@telegram-apps/sdk";
+
+export function setMainButtonVisible(isVisible: boolean) {
+    if (mainButton.isMounted()) {
+        if (mainButton.setParams.isAvailable()) {
+            mainButton.setParams({
+                isVisible: isVisible
+            });
+        }
+    }
+}

frontend/src/entities/main-button/api/setMainButtonVisible.ts

@@ -0,0 +1,4 @@
+export {setMainButtonVisible} from "./api/setMainButtonVisible.ts"
+export {setMainButtonParams} from "./api/setMainButtonParams.ts"
+export {mountMainButton} from "./api/mountMainButton.ts"
+export {setMainButtonOnClick, setMainButtonOnAndOffClick, removeMainButtonOnClick} from "./api/mainButtonOnClick.ts"

frontend/src/entities/main-button/index.ts

@@ -0,0 +1,15 @@
+export interface PersonPatch {
+    status: string,
+    firstName: string,
+    lastName: string,
+    interests: Topic[],
+    height: number,
+    birthday: string,
+    facultyId: number,
+    locationId: number
+}
+
+export interface Topic {
+    topicId: number,
+    level: number
+}

frontend/src/entities/person-patch/model/PersonPatch.ts

@@ -0,0 +1,4 @@
+export interface Coordinates {
+    latitude: number,
+    longitude: number
+}

frontend/src/entities/person/model/Coordinates.ts

@@ -0,0 +1,6 @@
+import {Topic} from "@/entities/person/model/Topic.ts";
+
+export interface Interest {
+    topic: Topic
+    level: number
+}

frontend/src/entities/person/model/Interest.ts

@@ -0,0 +1,7 @@
+import {Coordinates} from "./Coordinates.ts";
+
+export interface Location {
+    name: string,
+    coordinates: Coordinates
+
+}

frontend/src/entities/person/model/Location.ts

@@ -0,0 +1,17 @@
+import {Picture} from "./Picture.ts";
+import {Interest} from "./Interest.ts";
+import {Location} from "./Location.ts";
+
+export interface Person {
+    id: number,
+    zodiac: string,
+    updateMoment: Date,
+    firstName: string,
+    lastName: string,
+    pictures: Picture[],
+    interests: Interest[],
+    height: number,
+    birthday: Date,
+    faculty: string,
+    location: Location
+}

frontend/src/entities/person/model/Person.ts

@@ -0,0 +1,6 @@
+export interface Picture {
+    id: number,
+    small: string,
+    medium: string,
+    large: string
+}

frontend/src/entities/person/model/Picture.ts

@@ -0,0 +1,8 @@
+import {Picture} from "./Picture.ts";
+
+export interface Topic {
+    id: number,
+    name: string,
+    icon: Picture,
+    color: string
+}

frontend/src/entities/person/model/Topic.ts

@@ -1,7 +1,13 @@
+import {Interest} from "./interest.ts";
+import {Picture} from "./picture.ts";
+
 export type RegistrationData = {
     tgId: string;
     name: string;
     surname: string;
     height: number;
     faculty: string;
+    birthday: Date;
+    pictures: Picture[],
+    interests: Interest[]
 };

frontend/src/entities/registration-data/model/RegistartionData.ts

@@ -0,0 +1,4 @@
+export interface Interest {
+    topicId: number,
+    level: number,
+}

frontend/src/entities/registration-data/model/interest.ts

@@ -0,0 +1,6 @@
+export interface Picture {
+    id: number,
+    small: string,
+    medium: string,
+    large: string
+}

frontend/src/entities/registration-data/model/picture.ts

@@ -0,0 +1,6 @@
+export interface Topic {
+    id: number,
+    name: string,
+    icon: any,
+    color: any
+}

frontend/src/entities/registration-data/model/topic.ts

@@ -0,0 +1,33 @@
+export interface PersonDraft {
+    firstName: string,
+    lastName: string,
+    pictures: Picture[],
+    interests: Interest[],
+    height: number,
+    birthday: Date,
+    faculty: string,
+    location: Location
+}
+
+interface Picture {
+    id: number,
+    small: string,
+    medium: string | null,
+    large: string | null
+}
+
+interface Interest {
+    topicId: number,
+    level: number
+}
+
+interface Location {
+    name: string,
+    coordinates: Coordinates
+
+}
+
+interface Coordinates {
+    latitude: number,
+    longitude: number
+}

frontend/src/entities/registration-person-draft/model/PersonDraft.ts

@@ -0,0 +1 @@
+export {RegistrationPictureElement} from "./ui/RegistrationPictureElement.tsx"