made sample profile page

src/layouts/ProfileLayout/index.tsx

@@ -4,9 +4,13 @@ import { Route, RouteComponentProps, Switch } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { authLoadProfile } from '~/redux/auth/actions';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
-import { selectAuthProfile } from '~/redux/auth/selectors';
+import { selectAuthProfile, selectUser } from '~/redux/auth/selectors';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { Container } from '~/containers/main/Container';
+import { FlowGrid } from '~/components/flow/FlowGrid';
+import { FlowLayout } from '~/layouts/FlowLayout';
+import { Sticky } from '~/components/containers/Sticky';
+import { selectFlow } from '~/redux/flow/selectors';
 
 type Props = RouteComponentProps<{ username: string }> & {};
 
@@ -15,6 +19,9 @@ const ProfileLayout: FC<Props> = ({
     params: { username },
   },
 }) => {
+  const { nodes } = useShallowSelect(selectFlow);
+  const user = useShallowSelect(selectUser);
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -25,7 +32,15 @@ const ProfileLayout: FC<Props> = ({
 
   return (
     <Container className={styles.wrap}>
-      <ProfilePageLeft profile={profile} username={username} />
+      <div className={styles.left}>
+        <Sticky>
+          <ProfilePageLeft profile={profile} username={username} />
+        </Sticky>
+      </div>
+
+      <div className={styles.grid}>
+        <FlowGrid nodes={nodes} user={user} onChangeCellView={console.log} />
+      </div>
     </Container>
   );
 };

src/layouts/ProfileLayout/styles.module.scss

@@ -1,20 +1,16 @@
 @import "src/styles/variables";
 
 .wrap {
-  flex: 1;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  border-radius: $radius;
+  display: grid;
+  grid-template-columns: $cell auto;
+  grid-column-gap: $gap;
 }
 
+.grid {
+  @include flow_grid;
+}
 .left {
-  flex: 1;
-  background: darken($content_bg, 2%);
-  border-radius: 0 $radius $radius 0;
-  box-sizing: border-box;
 }
 
 .right {
-  flex: 4;
 }