Frontend add finished

frontend/src/app/index.scss

@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+@font-face {
+  font-family: "LeMurmure";
+  src: url('../shared/assets/fonts/le-murmure.otf') format('opentype');
+}
+
+:root {
+
+  --bg-main: radial-gradient(58.01% 47.04% at 50% 50%,rgb(99, 7, 33),rgb(19, 19, 19) 100%);
+  --font-system: Roboto;
+  --font-card: Roboto;
+
+  --photo-form-size-w: 290px;
+  --photo-form-size-h: 552px;
+
+  --bg-auth: linear-gradient(180.00deg, rgba(24, 24, 24, 0.69),rgba(10, 10, 10, 0.83) 100%),rgb(35, 35, 35);
+  --pink: rgb(255, 108, 166);
+  --white-pink: rgb(255, 198, 221);
+  --blue: rgb(113, 108, 255);
+  --white: rgb(255, 255, 255);
+  --bg-input: rgb(9, 9, 9);
+  --button-color: rgb(34, 31, 33);
+  --main-color: var(--white);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-system);
+
+}
+
+#root {
+  height: 100vh;
+}
+

frontend/src/app/index.tsx

@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client'
+import {App} from './ui/app.tsx'
+import './index.scss'
+import UserProvider from './providers/userProvider.tsx'
+import {ThemeProvider, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit'
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
+
+createRoot(document.getElementById('root')!).render(
+    <ThemeProvider theme='dark'>
+        <UserProvider>
+            <ToasterProvider>
+                <App/>
+                <ToasterComponent mobile={true}></ToasterComponent>
+            </ToasterProvider>
+        </UserProvider>
+    </ThemeProvider>
+)
+
+

frontend/src/app/providers/index.ts

@@ -0,0 +1 @@
+export * from './userProvider'

frontend/src/app/providers/userProvider.tsx

@@ -0,0 +1,38 @@
+import { createContext, Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
+import { getUser, User } from "../../entities";
+
+interface IChildren {
+    children: ReactNode;
+}
+
+interface Props {
+    user: User | undefined | null;
+    updateUser: () => void;
+    setUser: Dispatch<SetStateAction<User | null | undefined>>;
+}
+
+export const UserContext = createContext<Props>({} as Props);
+
+export default function UserProvider({ children }: IChildren) {
+
+    const [user, setUser] = useState<User | undefined | null>(undefined);
+
+    const updateUser = () => {
+        getUser().then(setUser)
+        console.log(user)
+    }
+
+    useEffect(() => {
+        updateUser();
+    }, []);
+
+    useEffect(() => {
+        console.log(user)
+    }, [user])
+
+    return (
+        <UserContext.Provider value={{ user, updateUser, setUser }}>
+            {children}
+        </UserContext.Provider>
+    );
+}

frontend/src/app/router/router.tsx

@@ -0,0 +1,22 @@
+import { FocusUser} from "../../entities";
+import { Feed, Edit, History } from "../../pages";
+import { Page } from "../ui/app";
+
+interface Props {
+    page: Page
+    focus: FocusUser
+}
+
+export function Router({page, focus}: Props) {
+    const nowPage = () => {
+        switch (page) {
+            case 'feed':
+                return <Feed focus={focus}/>
+            case 'edit':
+                return <Edit/>
+            case 'history':
+                return <History/>
+        }
+    }
+    return nowPage()
+}

frontend/src/app/ui/app.tsx

@@ -0,0 +1,36 @@
+import styles from './style.module.scss'
+import { useContext, useState} from 'react'
+import {Auth} from '../../pages'
+import { UserContext } from '../providers'
+import { editIcon, feedIcon, historyIcon, NavBar, NavIcon } from '../../shared'
+import { Router } from '../router/router'
+import { ReactNotifications } from 'react-notifications-component'
+
+export type Page = 'feed' | 'history' | 'edit'
+
+export function App() {
+  const {user} = useContext(UserContext)
+  const [page, setPage] = useState<Page>('feed')
+
+  if (user === undefined) {
+    return <>Загрузка</>
+  } 
+  else if (user === null) {
+    return <Auth/>
+  } 
+  else {
+
+    const buttons: NavIcon[] = [
+      {src: editIcon, hook: () => setPage('edit'), active: page == 'edit'},
+      {src: feedIcon, hook: () => setPage('feed'), active: page == 'feed'},
+      {src: historyIcon, hook: () => setPage('history'), active: page == 'history'},
+    ]
+
+    return <main className={styles['main']}>
+      <ReactNotifications></ReactNotifications>
+      <NavBar buttons={buttons}/>
+      <Router page={page} focus={user.focus_user}/>
+    </main>
+  }
+}
+

frontend/src/app/ui/style.module.scss

@@ -0,0 +1,4 @@
+.main {
+    background: var(--bg-main);
+    height: 100svh;
+}

frontend/src/entities/index.ts

@@ -0,0 +1 @@
+export * from './user'

frontend/src/entities/user/api.ts

@@ -0,0 +1,24 @@
+import { UserClient } from "../../shared";
+import { User } from "./model";
+
+export async function getUser(): Promise<User|null> {
+    return UserClient.get('').then(
+        response => {
+            return response.data
+        }
+    ).catch(error => {
+        console.log(error)
+        return null
+    })
+}
+
+export async function genKey (username: string): Promise<string> {
+    return UserClient.post('/getauth', {username}).then(
+        response => {
+            return response.data
+        }
+    ).catch(error => {
+        console.log(error)
+        throw error
+    })
+}

frontend/src/entities/user/index.ts

@@ -0,0 +1,2 @@
+export * from './api'
+export * from './model'

frontend/src/entities/user/model.ts

@@ -0,0 +1,14 @@
+export type User = {
+    name: string
+    surname: string
+    desc: string
+    literal: string
+    male: boolean
+    is_active: boolean
+    attachments: string[]
+    focus_user: FocusUser
+    focus_is_liked: boolean
+    verify: boolean
+}
+
+export type FocusUser = Omit<User, 'is_active, focus_is_liked'>

frontend/src/features/index.ts

@@ -0,0 +1,2 @@
+export * from './like'
+export * from './report'

frontend/src/features/like/api/api.ts

@@ -0,0 +1,24 @@
+import { FocusUser, User } from "../../../entities";
+import { UserClient } from "../../../shared";
+
+export async function likeSend (status: boolean): Promise<User | null> {
+    return UserClient.post('/likes', {status})
+    .then(response => {
+        return response.data;
+    })
+    .catch(error => {
+        console.log(error)
+        throw error
+    })
+}
+
+export async function getLikes (): Promise<FocusUser[]> {
+    return UserClient.get('/likes')
+    .then(response => {
+        return response.data;
+    })
+    .catch(error => {
+        console.log(error)
+        throw error
+    })
+} 

frontend/src/features/like/index.ts

@@ -0,0 +1 @@
+export * from './api/api'

frontend/src/features/report/api/api.ts

@@ -0,0 +1,13 @@
+import { User } from "../../../entities";
+import { UserClient } from "../../../shared";
+
+export async function reportSend (reason: string): Promise<User> {
+    return UserClient.post('/likes/report', {reason})
+    .then(response => {
+        return response.data
+    })
+    .catch(error => {
+        console.log(error)
+        throw error
+    })
+}

frontend/src/features/report/index.ts

@@ -0,0 +1,2 @@
+export * from './api/api'
+export * from './ui/report'

frontend/src/features/report/ui/report.tsx

@@ -0,0 +1,21 @@
+import styles from './style.module.scss'
+import { Button, Sheet, TextInput } from "@gravity-ui/uikit"
+import { ReactElement} from "react"
+
+interface Props {
+    is_open: boolean
+    close_hook: () => void
+    func_hook: () => void
+    content: string
+    content_hook: React.Dispatch<React.SetStateAction<string>>
+}
+
+export function ModalReport({is_open, close_hook, func_hook, content, content_hook}: Props): ReactElement {
+
+    return <Sheet title='Жалоба' visible={is_open} onClose={close_hook}>
+        <div className={styles['content']}>
+            <TextInput view='normal' value={content} onChange={(e) => content_hook(e.target.value)} size="l" type="text" placeholder="Напишите сюда причину жалобы" autoFocus={true}></TextInput>
+            <Button width='max' onClick={func_hook} size="l" view="action">Пожаловаться</Button>
+        </div>
+    </Sheet>
+}

frontend/src/features/report/ui/style.module.scss

@@ -0,0 +1,12 @@
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+    padding-bottom: 12px;
+    --g-sheet-content-padding: 10px;
+    --g-button-background-color: var(--pink);
+    --g-button-background-color-hover: var(--pink);
+    --g-text-body-font-weight: 400;
+}

frontend/src/pages/auth/api/api.ts

@@ -0,0 +1,11 @@
+import { User } from "../../../entities";
+import { UserClient } from "../../../shared";
+import { UserRegister } from "../model/types";
+
+export async function register(user: UserRegister, avatar: FormData): Promise<User> {
+    return UserClient.post('', avatar, {params: user}).then(response => {
+        return response.data;
+    }).catch(error => {
+        throw error;
+    });
+} 

frontend/src/pages/auth/model/types.ts

@@ -0,0 +1,19 @@
+export enum Stage {
+    SUBINFO = 0,
+    NAME = 1,
+    PHOTO = 2,
+    ABOUT = 3
+}
+
+export enum Sex {
+    MALE = "Мужчина",
+    WOMAN = "Женщина",
+}
+
+export interface UserRegister {
+    name: string
+    surname: string
+    literal: string
+    male: boolean
+    desc: string
+}