From 5ef19f49c51e214f048fb3a9b496934d34a55a27 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 22 Jan 2025 14:36:26 +0700
Subject: [PATCH] change user profile page layout

---
 src/constants/api.ts                          |  2 +-
 .../profile/ProfilePageLeft/index.tsx         | 44 ++++++++++++-------
 .../ProfilePageLeft/styles.module.scss        | 18 +++-----
 src/layouts/ProfileLayout/index.tsx           | 14 ++++--
 src/layouts/ProfileLayout/styles.module.scss  | 17 +++++--
 5 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/src/constants/api.ts b/src/constants/api.ts
index b9a287f4..6fa89637 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -11,7 +11,7 @@ export const API = {
     ME: '/auth',
     UPDATE_PHOTO: '/auth/photo',
     UPDATE_COVER: '/auth/photo',
-    PROFILE: (username: string) => `/users/${username}/profile`,
+    PROFILE: (username: string) => `/users/${username}`,
     MESSAGES: (username: string) => `/users/${username}/messages`,
     MESSAGE_SEND: (username: string) => `/users/${username}/messages`,
     MESSAGE_DELETE: (username: string, id: number) =>
diff --git a/src/containers/profile/ProfilePageLeft/index.tsx b/src/containers/profile/ProfilePageLeft/index.tsx
index 62734d49..983ca368 100644
--- a/src/containers/profile/ProfilePageLeft/index.tsx
+++ b/src/containers/profile/ProfilePageLeft/index.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
+import { Card } from '~/components/common/Card';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { imagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
@@ -11,28 +12,39 @@ interface Props {
   profile: IUser;
   isLoading: boolean;
   username: string;
+  description: string;
 }
 
-const ProfilePageLeft: FC<Props> = ({ username, profile, isLoading }) => {
+const ProfilePageLeft: FC<Props> = ({
+  username,
+  profile,
+  description,
+  isLoading,
+}) => {
   return (
-    <div className={styles.wrap}>
-      <Avatar
-        username={username}
-        url={profile?.photo?.url}
-        className={styles.avatar}
-        preset={imagePresets['600']}
-      />
+    <Card className={styles.wrap} elevation={0} seamless>
+      <Card seamless>
+        <Avatar
+          username={username}
+          url={profile?.photo?.url}
+          className={styles.avatar}
+          preset={imagePresets['600']}
+        />
 
+        <div className={styles.region}>
+          <div className={styles.name}>
+            {isLoading ? <Placeholder /> : profile?.fullname}
+          </div>
+
+          <div className={styles.username}>
+            {isLoading ? <Placeholder /> : `~${profile?.username}`}
+          </div>
+        </div>
+      </Card>
       <div className={styles.region}>
-        <div className={styles.name}>
-          {isLoading ? <Placeholder /> : profile?.fullname}
-        </div>
-
-        <div className={styles.username}>
-          {isLoading ? <Placeholder /> : `~${profile?.username}`}
-        </div>
+        <div className={styles.description}>{description}</div>
       </div>
-    </div>
+    </Card>
   );
 };
 
diff --git a/src/containers/profile/ProfilePageLeft/styles.module.scss b/src/containers/profile/ProfilePageLeft/styles.module.scss
index b94b662c..fc3f0347 100644
--- a/src/containers/profile/ProfilePageLeft/styles.module.scss
+++ b/src/containers/profile/ProfilePageLeft/styles.module.scss
@@ -1,29 +1,26 @@
 @import 'src/styles/variables';
 
 .wrap {
-  @include outer_shadow;
-  @include blur;
-
-  padding: $gap $gap $gap * 2;
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
-  height: 100%;
   border-radius: $radius;
 }
 
+.top {
+  padding: 0;
+}
+
 .avatar {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
-  margin-bottom: $gap * 2;
 }
 
 .region {
-  width: 100%;
-  text-align: center;
+  padding: $gap;
 }
 
 .name {
@@ -44,8 +41,7 @@
 
 .description {
   @include clamp(3, 21px * 3);
-  line-height: 21px;
   font: $font_14_regular;
-  margin-top: $gap * 3;
-  display: none;
+  line-height: 1.25em;
+  opacity: 0.5;
 }
diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx
index fcdc8d66..48c0afdc 100644
--- a/src/layouts/ProfileLayout/index.tsx
+++ b/src/layouts/ProfileLayout/index.tsx
@@ -2,7 +2,10 @@ import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
+import { Card } from '~/components/common/Card';
 import { Container } from '~/components/common/Container';
+import { Sticky } from '~/components/common/Sticky';
+import { FlowGrid } from '~/containers/flow/FlowGrid';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { useUser } from '~/hooks/auth/useUser';
 import { useGetProfile } from '~/hooks/profile/useGetProfile';
@@ -24,16 +27,21 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
     <Container className={styles.wrap}>
       <div className={styles.grid}>
         <div className={styles.stamp}>
-          <div className={styles.row}>
+          <Sticky>
             <ProfilePageLeft
+              description={profile.description}
               profile={profile}
               username={username}
               isLoading={isLoading}
             />
-          </div>
+          </Sticky>
         </div>
 
-        <div>here should be grid</div>
+        <Card className={styles.description}>{profile.description}</Card>
+
+        <div className={styles.nodes}>
+          <FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
+        </div>
       </div>
     </Container>
   );
diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss
index 5684cc64..5de4d336 100644
--- a/src/layouts/ProfileLayout/styles.module.scss
+++ b/src/layouts/ProfileLayout/styles.module.scss
@@ -8,7 +8,10 @@
 }
 
 .grid {
-  @include flow_grid;
+  grid-template-columns: 250px 5fr;
+  display: grid;
+  column-gap: $gap;
+  row-gap: $gap;
 }
 
 .row {
@@ -18,10 +21,18 @@
 
 .description {
   font: $font_14_semibold;
-  text-align: center;
-  padding: $gap * 2 $gap;
 }
 
 .stamp {
   grid-row-end: span 2;
 }
+
+.nodes {
+  @include flow_grid();
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}