added sample user profile page (#133)

src/layouts/ProfileLayout/index.tsx

@@ -1,55 +1,43 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import { RouteComponentProps } from 'react-router';
 
-import { Card } from '~/components/containers/Card';
+import { usePageCover } from '~/components/containers/PageCoverProvider/usePageCover';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { Container } from '~/containers/main/Container';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
-import { ProfilePageStats } from '~/containers/profile/ProfilePageStats';
 import { useUser } from '~/hooks/auth/useUser';
 import { useGetProfile } from '~/hooks/profile/useGetProfile';
 import { useFlowStore } from '~/store/flow/useFlowStore';
 
 import styles from './styles.module.scss';
 
-type Props = RouteComponentProps<{ username: string }> & {};
+type Props = { username: string };
 
-const ProfileLayout: FC<Props> = observer(
-  ({
-    match: {
-      params: { username },
-    },
-  }) => {
-    const { nodes } = useFlowStore();
-    const { user } = useUser();
-    const { profile, isLoading } = useGetProfile(username);
+const ProfileLayout: FC<Props> = observer(({ username }) => {
+  const { nodes } = useFlowStore();
+  const { user } = useUser();
+  const { profile, isLoading } = useGetProfile(username);
 
-    return (
-      <Container className={styles.wrap}>
-        <div className={styles.grid}>
-          <div className={styles.stamp}>
-            <div className={styles.row}>
-              <ProfilePageLeft profile={profile} username={username} isLoading={isLoading} />
-            </div>
+  usePageCover(user.cover);
 
-            {!!profile?.description && (
-              <div className={styles.row}>
-                <Card className={styles.description}>{profile.description}</Card>
-              </div>
-            )}
-
-            <div className={styles.row}>
-              <ProfilePageStats />
-            </div>
+  return (
+    <Container className={styles.wrap}>
+      <div className={styles.grid}>
+        <div className={styles.stamp}>
+          <div className={styles.row}>
+            <ProfilePageLeft
+              profile={profile}
+              username={username}
+              isLoading={isLoading}
+            />
           </div>
-
-          <FlowGrid nodes={nodes} user={user} onChangeCellView={console.log} />
         </div>
-      </Container>
-    );
-  }
-);
+
+        <FlowGrid nodes={nodes} user={user} onChangeCellView={console.log} />
+      </div>
+    </Container>
+  );
+});
 
 export { ProfileLayout };

src/layouts/ProfileLayout/styles.module.scss

@@ -1,9 +1,10 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: $gap;
+  margin-top: $page_top_offset;
 }
 
 .grid {
@@ -12,6 +13,7 @@
 
 .row {
   margin-bottom: $gap;
+  height: 100%;
 }
 
 .description {