adds masonry layout to search page, adds forgotten semi-colons to ProfilePage.tsx

src/pages/PageLayout.styles.tsx

@@ -335,5 +335,9 @@ export const styles = (theme: Theme) =>
         "my-masonry-grid_column": {
             // non-standard name fixes react-masonry-css bug :shrug:
             padding: 5
-        }
+        },
+        noTopPaddingMargin: {
+            marginTop: 0,
+            paddingTop: 0,
+        },
     });

src/pages/ProfilePage.tsx

@@ -309,7 +309,7 @@ class ProfilePage extends Component<any, IProfilePageState> {
         }
     }
 
-    renderPosts(posts: [Status]) {
+    renderPosts(posts: Status[]) {
         const { classes } = this.props;
         const postComponents = posts.map((post: Status) => {
             return (
@@ -318,8 +318,8 @@ class ProfilePage extends Component<any, IProfilePageState> {
                     post={post}
                     client={this.client}
                 />
-            )
-        })
+            );
+        });
         if (this.state.isMasonryLayout) {
             return (
                 <Masonry
@@ -334,13 +334,13 @@ class ProfilePage extends Component<any, IProfilePageState> {
                 >
                     {postComponents}
                 </Masonry>
-            )
+            );
         } else {
             return (
                 <div>
                     {postComponents}
                 </div>
-            )
+            );
         }
     }
 

src/pages/Search.tsx

@@ -26,6 +26,8 @@ import { withSnackbar } from "notistack";
 import Post from "../components/Post";
 import { Status } from "../types/Status";
 import { Account } from "../types/Account";
+import Masonry from "react-masonry-css";
+import { getUserDefaultBool } from "../utilities/settings";
 
 interface ISearchPageState {
     query: string[] | string;
@@ -36,6 +38,7 @@ interface ISearchPageState {
     viewDidLoad?: boolean;
     viewDidError?: boolean;
     viewDidErrorCode?: string;
+    isMasonryLayout: boolean;
 }
 
 class SearchPage extends Component<any, ISearchPageState> {
@@ -54,7 +57,8 @@ class SearchPage extends Component<any, ISearchPageState> {
         this.state = {
             viewIsLoading: true,
             query: searchParams.query,
-            type: searchParams.type
+            type: searchParams.type,
+            isMasonryLayout: getUserDefaultBool("isMasonryLayout"),
         };
 
         if (searchParams.type === "tag") {
@@ -195,7 +199,7 @@ class SearchPage extends Component<any, ISearchPageState> {
     showAllAccountsFromQuery() {
         const { classes } = this.props;
         return (
-            <div>
+            <div className={classes.pageLayoutConstraints}>
                 <ListSubheader>Accounts</ListSubheader>
 
                 {this.state.results &&
@@ -260,22 +264,55 @@ class SearchPage extends Component<any, ISearchPageState> {
         );
     }
 
+
+    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>
+            );
+        }
+    }
+
     showAllPostsFromQuery() {
         const { classes } = this.props;
+        const containerClasses = `${classes.pageLayoutConstraints} ${
+            this.state.isMasonryLayout
+                ? classes.pageLayoutMasonry + " " + classes.noTopPaddingMargin
+                : ""
+        }`;
         return (
-            <div>
+            <div className={containerClasses}>
                 <ListSubheader>Posts</ListSubheader>
                 {this.state.results ? (
                     this.state.results.statuses.length > 0 ? (
-                        this.state.results.statuses.map((post: Status) => {
-                            return (
-                                <Post
-                                    key={post.id}
-                                    post={post}
-                                    client={this.client}
-                                />
-                            );
-                        })
+                        this.renderPosts(this.state.results.statuses)
                     ) : (
                         <Typography
                             variant="caption"
@@ -291,20 +328,17 @@ class SearchPage extends Component<any, ISearchPageState> {
 
     showAllPostsWithTag() {
         const { classes } = this.props;
+        const containerClasses = `${classes.pageLayoutMaxConstraints} ${
+            this.state.isMasonryLayout
+                ? classes.pageLayoutMasonry
+                : ""
+        }`;
         return (
-            <div>
+            <div className={containerClasses}>
                 <ListSubheader>Tagged posts</ListSubheader>
                 {this.state.tagResults ? (
                     this.state.tagResults.length > 0 ? (
-                        this.state.tagResults.map((post: Status) => {
-                            return (
-                                <Post
-                                    key={post.id}
-                                    post={post}
-                                    client={this.client}
-                                />
-                            );
-                        })
+                        this.renderPosts(this.state.tagResults)
                     ) : (
                         <Typography
                             variant="caption"
@@ -321,7 +355,7 @@ class SearchPage extends Component<any, ISearchPageState> {
     render() {
         const { classes } = this.props;
         return (
-            <div className={classes.pageLayoutConstraints}>
+            <div>
                 {this.state.type && this.state.type === "tag" ? (
                     this.showAllPostsWithTag()
                 ) : (