added sample user profile page (#133)

next.config.js

@@ -13,6 +13,10 @@ module.exports = withBundleAnalyzer(
           source: '/post:id',
           destination: '/node/:id',
         },
+        {
+          source: '/~:username',
+          destination: '/profile/:username',
+        }
       ];
     },
 

src/containers/profile/ProfilePageLeft/index.tsx

@@ -29,17 +29,11 @@ const ProfilePageLeft: FC<IProps> = ({ username, profile, isLoading }) => {
         <div className={styles.name}>
           {isLoading ? <Placeholder /> : profile?.fullname}
         </div>
-        `
+
         <div className={styles.username}>
           {isLoading ? <Placeholder /> : `~${profile?.username}`}
         </div>
       </div>
-
-      {!!profile?.description && (
-        <Markdown className={styles.description}>
-          {formatText(profile.description)}
-        </Markdown>
-      )}
     </div>
   );
 };

src/containers/profile/ProfilePageLeft/styles.module.scss

@@ -2,6 +2,7 @@
 
 .wrap {
   @include outer_shadow;
+  @include blur;
 
   padding: $gap $gap $gap * 2;
   box-sizing: border-box;
@@ -9,7 +10,6 @@
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
-  background: $content_bg_light;
   height: 100%;
   border-radius: $radius;
 }

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 {

src/pages/profile/[username].tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { useRouter } from 'next/router';
+import { RouteComponentProps } from 'react-router';
+
+import { PageTitle } from '~/components/common/PageTitle';
+import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
+import { ProfileLayout } from '~/layouts/ProfileLayout';
+import { FlowProvider } from '~/utils/providers/FlowProvider';
+import { getPageTitle } from '~/utils/ssr/getPageTitle';
+
+type ProfilePageProps = RouteComponentProps<{ username: string }>;
+
+const ProfilePage: FC<ProfilePageProps> = () => {
+  const { query } = useRouter();
+
+  useGlobalLoader();
+
+  return (
+    <FlowProvider>
+      <PageTitle title={getPageTitle('Флоу')} />
+      <ProfileLayout username={query.username as string} />
+    </FlowProvider>
+  );
+};
+
+export default ProfilePage;