From 95e5849be878a9a817432902f7558744f9e23d8f Mon Sep 17 00:00:00 2001
From: Travis Kohlbeck <me+git@travisk.info>
Date: Sat, 21 Dec 2019 18:10:24 -0500
Subject: [PATCH] adds masonry layout to local and public feeds

---
 package.json         |  3 ++-
 src/pages/Home.tsx   | 12 ++++------
 src/pages/Local.tsx  | 53 +++++++++++++++++++++++++++++++++++---------
 src/pages/Public.tsx | 53 +++++++++++++++++++++++++++++++++++---------
 4 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 1354618..ae2a9a4 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
     "dependencies": {
         "electron-notarize": "^0.1.1",
         "electron-updater": "^4.1.2",
-        "electron-window-state": "^5.0.3"
+        "electron-window-state": "^5.0.3",
+        "react-masonry-css": "^1.0.14"
     },
     "main": "public/electron.js",
     "scripts": {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 90f0354..7a3aced 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -15,11 +15,8 @@ import { Status } from "../types/Status";
 import Mastodon, { StreamListener } from "megalodon";
 import { withSnackbar } from "notistack";
 import Masonry from 'react-masonry-css'
+import { getUserDefaultBool } from "../utilities/settings";
 import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
-import {
-    getConfig,
-    getUserDefaultBool
-} from "../utilities/settings";
 
 interface IHomePageState {
     posts?: [Status];
@@ -214,8 +211,8 @@ class HomePage extends Component<any, IHomePageState> {
                                     </div>
                                 );
                             })}
-                            </Masonry>)
-                        : (
+                            </Masonry>
+                        ) : (
                             <div>
                                 {this.state.posts.map((post: Status) => {
                                     return (
@@ -229,8 +226,7 @@ class HomePage extends Component<any, IHomePageState> {
                                     );
                                 })}
                             </div>
-                            )
-                        }
+                        )}
                         <br />
                         {this.state.viewDidLoad && !this.state.viewDidError ? (
                             <div
diff --git a/src/pages/Local.tsx b/src/pages/Local.tsx
index 46c9eb2..10094f8 100644
--- a/src/pages/Local.tsx
+++ b/src/pages/Local.tsx
@@ -14,6 +14,8 @@ import Post from "../components/Post";
 import { Status } from "../types/Status";
 import Mastodon, { StreamListener } from "megalodon";
 import { withSnackbar } from "notistack";
+import Masonry from 'react-masonry-css';
+import { getUserDefaultBool } from "../utilities/settings";
 import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
 
 interface ILocalPageState {
@@ -23,6 +25,7 @@ interface ILocalPageState {
     viewDidLoad?: boolean;
     viewDidError?: boolean;
     viewDidErrorCode?: any;
+    isMasonryLayout?: boolean;
 }
 
 class LocalPage extends Component<any, ILocalPageState> {
@@ -34,7 +37,8 @@ class LocalPage extends Component<any, ILocalPageState> {
 
         this.state = {
             viewIsLoading: true,
-            backlogPosts: null
+            backlogPosts: null,
+            isMasonryLayout: getUserDefaultBool('isMasonryLayout'),
         };
 
         this.client = new Mastodon(
@@ -186,15 +190,44 @@ class LocalPage extends Component<any, ILocalPageState> {
                 ) : null}
                 {this.state.posts ? (
                     <div>
-                        {this.state.posts.map((post: Status) => {
-                            return (
-                                <Post
-                                    key={post.id}
-                                    post={post}
-                                    client={this.client}
-                                />
-                            );
-                        })}
+                        {this.state.isMasonryLayout ? (
+                            <Masonry
+                                breakpointCols={{
+                                    default: 4,
+                                    2000: 3,
+                                    1400: 2,
+                                    1050: 1,
+                                }}
+                                className={classes.masonryGrid}
+                                columnClassName={classes['my-masonry-grid_column']}
+                            >
+                                {this.state.posts.map((post: Status) => {
+                                    return (
+                                        <div className={classes.masonryGrid_item}>
+                                            <Post
+                                                key={post.id}
+                                                post={post}
+                                                client={this.client}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </Masonry>
+                        ) : (
+                            <div>
+                                {this.state.posts.map((post: Status) => {
+                                    return (
+                                        <div className={classes.masonryGrid_item}>
+                                            <Post
+                                                key={post.id}
+                                                post={post}
+                                                client={this.client}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        )}
                         <br />
                         {this.state.viewDidLoad && !this.state.viewDidError ? (
                             <div
diff --git a/src/pages/Public.tsx b/src/pages/Public.tsx
index 01c7c8e..faa022f 100644
--- a/src/pages/Public.tsx
+++ b/src/pages/Public.tsx
@@ -14,6 +14,8 @@ import Post from "../components/Post";
 import { Status } from "../types/Status";
 import Mastodon, { StreamListener } from "megalodon";
 import { withSnackbar } from "notistack";
+import Masonry from 'react-masonry-css';
+import { getUserDefaultBool } from "../utilities/settings";
 import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
 
 interface IPublicPageState {
@@ -23,6 +25,7 @@ interface IPublicPageState {
     viewDidLoad?: boolean;
     viewDidError?: boolean;
     viewDidErrorCode?: any;
+    isMasonryLayout?:boolean;
 }
 
 class PublicPage extends Component<any, IPublicPageState> {
@@ -34,7 +37,8 @@ class PublicPage extends Component<any, IPublicPageState> {
 
         this.state = {
             viewIsLoading: true,
-            backlogPosts: null
+            backlogPosts: null,
+            isMasonryLayout: getUserDefaultBool('isMasonryLayout')
         };
 
         this.client = new Mastodon(
@@ -185,15 +189,44 @@ class PublicPage extends Component<any, IPublicPageState> {
                 ) : null}
                 {this.state.posts ? (
                     <div>
-                        {this.state.posts.map((post: Status) => {
-                            return (
-                                <Post
-                                    key={post.id}
-                                    post={post}
-                                    client={this.client}
-                                />
-                            );
-                        })}
+                        {this.state.isMasonryLayout ? (
+                            <Masonry
+                                breakpointCols={{
+                                    default: 4,
+                                    2000: 3,
+                                    1400: 2,
+                                    1050: 1,
+                                }}
+                                className={classes.masonryGrid}
+                                columnClassName={classes['my-masonry-grid_column']}
+                            >
+                                {this.state.posts.map((post: Status) => {
+                                    return (
+                                        <div className={classes.masonryGrid_item}>
+                                            <Post
+                                                key={post.id}
+                                                post={post}
+                                                client={this.client}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </Masonry>
+                        ) : (
+                            <div>
+                                {this.state.posts.map((post: Status) => {
+                                    return (
+                                        <div className={classes.masonryGrid_item}>
+                                            <Post
+                                                key={post.id}
+                                                post={post}
+                                                client={this.client}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        )}
                         <br />
                         {this.state.viewDidLoad && !this.state.viewDidError ? (
                             <div