Merge pull request #5 from RaZoom-Team/no-prod

Photo pochi fix and history link working add ura
RaZoom-Team · Nov 12, 2024 · 6e8f939 · 6e8f939
2 parents e9bd0bd + 8b9c37a
commit 6e8f939
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 128 deletions.
diff --git a/frontend/src/app/index.scss b/frontend/src/app/index.scss
@@ -43,8 +43,6 @@ body {
   .g-popup_open {
       z-index: 9999999999;
   }
-
-
 }
 
 #root {

diff --git a/frontend/src/app/index.tsx b/frontend/src/app/index.tsx
@@ -9,7 +9,6 @@ createRoot(document.getElementById('root')!).render(
         <UserProvider>
             <App/>
         </UserProvider>
-
 )
 
 
diff --git a/frontend/src/entities/user/api.ts b/frontend/src/entities/user/api.ts
@@ -25,7 +25,7 @@ export async function editUser(newUser: User): Promise<User> {
 }
 
 export async function updateAvatar(avatar: FormData) {
-    return UserClient.patch('/avatar', {avatar})
+    return UserClient.patch('/avatar', avatar)
     .then(response => {
         return response.data
     }).catch(error => {

diff --git a/frontend/src/pages/edit/ui/edit.tsx b/frontend/src/pages/edit/ui/edit.tsx
@@ -4,15 +4,13 @@ import { addNotify, Card } from '../../../shared'
 import { ReactSVG } from 'react-svg'
 import PencilToSquareIcon from '@gravity-ui/icons/svgs/pencil-to-square.svg';
 import {SealCheck} from '@gravity-ui/icons';
-import { Button, Icon, Portal } from '@gravity-ui/uikit'
+import { Button, Icon } from '@gravity-ui/uikit'
 import { UserContext } from '../../../app/providers'
 import { ModalEdit } from './modal_edit';
 import { ModalAbout, ModalName, ModalClass } from './modals';
 import { CropWidget } from '../../../widgets';
 import { updateAvatar, User } from '../../../entities';
 
-const myRoot = document.getElementById('my-root');
-
 interface Props {
     verifySend: boolean
     verify_hook: React.Dispatch<React.SetStateAction<boolean>>
@@ -21,6 +19,7 @@ interface Props {
 export function Edit({verifySend, verify_hook}: Props) {
     const [animEdit, setAnimEdit] = useState(false)
     const [editModal, setEdit] = useState(false)
+    const [isCrop, setCrop] = useState(false)
     const [img, setImg] = useState<string | undefined>(undefined)
     const {user, setUser} = useContext(UserContext)
 
@@ -30,6 +29,16 @@ export function Edit({verifySend, verify_hook}: Props) {
         setAnimEdit(false)
     }
 
+    const onClose = () => {
+        setEdit(false)
+        setAnimEdit(false)
+    }
+
+    const imgUpload = (img: string) => {
+        setImg(img)
+        setCrop(true)
+    }
+
     const [litera, setLitera] = useState(false)
     const [desc, setDesc] = useState(false)
     const [name, setName] = useState(false)
@@ -54,47 +63,39 @@ export function Edit({verifySend, verify_hook}: Props) {
             title: 'Фото обновлено',
             content: 'Вы успешно обновили фотографию своего профиля'
         })
+        setImg(undefined)
     }
 
-    const onPhoto = () => {
-        setAnimEdit(false)
+    const onPhoto = (img: string | undefined) => {
         if (img) {
             fetch(img)
                 .then(res => res.blob())
                 .then(blob => {
                     const avatarForm = new FormData();
                     avatarForm.append('avatar', blob)
                     updateAvatar(avatarForm).then(afterPhoto)
+                    setAnimEdit(false)
                 })
             }
     }
 
-    if (user)
-    return <main className={styles['main']}>
-
-        {img && <CropWidget
-            img={img}
-            setImg={setImg}
-            onComplete={onPhoto}
-        />
-        }
-
+    if (img && user && isCrop){
+    return  <CropWidget
+                img={img}
+                setImg={onPhoto}
+                onComplete={() => setCrop(false)}
+            />
+    } else if (user) {
+        return <main className={styles['main']}>
 
-        {myRoot && <Portal container={myRoot}>
         <ModalEdit
         is_open={editModal} 
         open_litera={() => openModal(setLitera)}
         open_desc={() => openModal(setDesc)}
         open_name={() => openModal(setName)}
-        set_photo={setImg}
-        close_hook={() => setEdit(false)
-        }
+        set_photo={imgUpload}
+        close_hook={onClose}
         />
-        </Portal>
-        }
-
-
-
 
         <ModalAbout is_open={desc} close_hook={() => setDesc(false)} nowDesc={user.desc}></ModalAbout>
         <ModalName is_open={name} close_hook={() => setName(false)} nowName={user.name} nowSur={user.surname}></ModalName>
@@ -128,4 +129,5 @@ export function Edit({verifySend, verify_hook}: Props) {
             </div>
         </div>
     </main>
+    }
 }
diff --git a/frontend/src/pages/edit/ui/modal_edit.tsx b/frontend/src/pages/edit/ui/modal_edit.tsx
@@ -11,7 +11,7 @@ interface Props {
     open_litera: () => void
     open_desc: () => void
     open_name: () => void
-    set_photo: React.Dispatch<React.SetStateAction<string | undefined>>
+    set_photo: (img: string) => void
 }
 
 export function ModalEdit({is_open, close_hook, open_desc, open_litera, open_name, set_photo}: Props): ReactElement {

diff --git a/frontend/src/pages/edit/ui/style.module.scss b/frontend/src/pages/edit/ui/style.module.scss
@@ -20,6 +20,10 @@
     }
 }
 
+.overlay {
+    height: 100%;
+}
+
 body {
     overflow: hidden;
 }

diff --git a/frontend/src/pages/history/ui/history.tsx b/frontend/src/pages/history/ui/history.tsx
@@ -24,7 +24,7 @@ export function History() {
                         name={<Text>{user.name}</Text>}
                         description={<Text>{user.username}</Text>}>
                     </User>
-                    <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+user.username)}>Перейти в чат</Button>
+                    <Button onClick={() => Telegram.WebApp.openTelegramLink('https://t.me/'+user.username)}>Перейти в чат</Button>
                 </div>
                 )
             }
@@ -35,105 +35,13 @@ export function History() {
             </div>
         }  
     }
+
     if (user) {
-        const test = <div className={styles['list-user']}>
-        <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    <div className={styles['list-element']} key={Math.random().toString(16)}>
-        <User
-            avatar={<Avatar imgUrl={user.attachments[0]}/>}
-            name={<Text>{user.name}</Text>}
-            description={<Text>{'ramchike'}</Text>}>
-        </User>
-        <Button onClick={() => Telegram.WebApp.openTelegramLink('t.me/'+'ramchike')}>Перейти в чат</Button>
-    </div>
-    </div>
-    return <main className={styles['main']}>
-        <Text className={styles['title-list']} variant='header-2'>Взаимные лайки</Text>
-        {test}
+        return <main className={styles['main']}>
+        {historyListComponent()}
     </main>
 }
 
 
-    return <main className={styles['main']}>
-        {historyListComponent()}
-    </main>
+
 }
diff --git a/frontend/src/shared/clients.ts b/frontend/src/shared/clients.ts
@@ -8,6 +8,7 @@ export const UserClient = axios.create({
 
 UserClient.interceptors.request.use(config => {
     config.headers['Tg-Authorization'] = Telegram.WebApp.initData;
+    //config.headers['Tg-Authorization'] = "user%3D%7B%22id%22%3A1977502575%2C%22first_name%22%3A%22Zoom%22%2C%22last_name%22%3A%22%22%2C%22username%22%3A%22ramchike%22%2C%22language_code%22%3A%22en%22%2C%22allows_write_to_pm%22%3Atrue%7D%26chat_instance%3D6800930143016803379%26chat_type%3Dsender%26auth_date%3D1729890471%26hash%3Dc98f9da098efdb0e642fdfb9b078f5e8e5bf3fcbfeef932cfecc3e5b540502ec"
     return config
 })
 

diff --git a/frontend/src/widgets/crop/crop.tsx b/frontend/src/widgets/crop/crop.tsx
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export function CropWidget({img, setImg, onComplete}: Props): ReactElement {
-    const [zoom, setZoom] = useState(1.4)
+    const [zoom, setZoom] = useState(1)
     const [crop, setCrop] = useState<Point>({x: 0, y: 0})
     const [area, setArea] = useState<Area | null>(null)
 

diff --git a/frontend/src/widgets/crop/style.module.scss b/frontend/src/widgets/crop/style.module.scss
@@ -1,6 +1,6 @@
 .main {
     background: black;
-    height: 100vh;
+    height: 100%;
     .container-cropper {
         height: 100%;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,8 +43,6 @@ body { @@
       .g-popup_open {
           z-index: 9999999999;
       }
     }
     #root {
@@ Expand Down @@