adds masonry layout to profile page

src/pages/ProfilePage.tsx

@@ -25,6 +25,8 @@ import Post from "../components/Post";
 import { withSnackbar } from "notistack";
 import { LinkableIconButton } from "../interfaces/overrides";
 import { emojifyString } from "../utilities/emojis";
+import Masonry from "react-masonry-css";
+import { getUserDefaultBool } from "..//utilities/settings";
 
 import AccountEditIcon from "mdi-material-ui/AccountEdit";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
@@ -44,6 +46,7 @@ interface IProfilePageState {
     viewDidError?: boolean;
     viewDidErrorCode?: string;
     blockDialogOpen: boolean;
+    isMasonryLayout?: boolean;
 }
 
 class ProfilePage extends Component<any, IProfilePageState> {
@@ -59,7 +62,8 @@ class ProfilePage extends Component<any, IProfilePageState> {
 
         this.state = {
             viewIsLoading: true,
-            blockDialogOpen: false
+            blockDialogOpen: false,
+            isMasonryLayout: getUserDefaultBool("isMasonryLayout"),
         };
     }
 
@@ -305,8 +309,46 @@ class ProfilePage extends Component<any, IProfilePageState> {
         }
     }
 
+    renderPosts(posts: [Status]) {
+        const { classes } = this.props;
+        const postComponents = posts.map((post: Status) => {
+            return (
+                <Post
+                    key={post.id}
+                    post={post}
+                    client={this.client}
+                />
+            )
+        })
+        if (this.state.isMasonryLayout) {
+            return (
+                <Masonry
+                    className={classes.masonryGrid}
+                    columnClassName={classes["my-masonry-grid_column"]}
+                    breakpointCols={{
+                        default: 4,
+                        2000: 3,
+                        1400: 2,
+                        1050: 1,
+                    }}
+                >
+                    {postComponents}
+                </Masonry>
+            )
+        } else {
+            return (
+                <div>
+                    {postComponents}
+                </div>
+            )
+        }
+    }
+
     render() {
         const { classes } = this.props;
+        const containerClasses = `${classes.pageContentLayoutConstraints} ${
+            this.state.isMasonryLayout ? classes.pageLayoutMasonry : ""
+        }`
         return (
             <div className={classes.pageLayoutMinimalConstraints}>
                 <div className={classes.pageHeroBackground}>
@@ -482,15 +524,7 @@ class ProfilePage extends Component<any, IProfilePageState> {
                     )}
                     {this.state.posts ? (
                         <div>
-                            {this.state.posts.map((post: Status) => {
+                            {this.renderPosts(this.state.posts)}
-                                return (
-                                    <Post
-                                        key={post.id}
-                                        post={post}
-                                        client={this.client}
-                                    />
-                                );
-                            })}
                             <br />
                             {this.state.viewDidLoad &&
                             !this.state.viewDidError ? (