From d956cda20a92f368bed1ded701d7de4d238e62dd Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Wed, 5 Aug 2020 01:00:56 -0700
Subject: [PATCH] Show locked squeak with icon (#226)

* Show lock icon when squeak thread item is locekd

* Squeak thread item locked display now looks good

* Show squeak detail item differently when locked
---
 .../SqueakDetailItem/SqueakDetailItem.js      | 56 ++++++++++++++---
 .../SqueakThreadItem/SqueakThreadItem.js      | 62 ++++++++++++++-----
 2 files changed, 95 insertions(+), 23 deletions(-)

diff --git a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
index 7b30e22d..5ccf34c1 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
+++ b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
@@ -14,6 +14,8 @@ import { MoreVert as MoreIcon } from "@material-ui/icons";
 import {useHistory} from "react-router-dom";
 import classnames from "classnames";
 
+import LockIcon from '@material-ui/icons/Lock';
+
 import ReplyIcon from '@material-ui/icons/Reply';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import FavoriteIcon from '@material-ui/icons/Favorite';
@@ -65,11 +67,54 @@ export default function SqueakDetailItem({
     }
   }
 
+  function SqueakUnlockedContent() {
+    return (
+      <Typography
+        variant="h4"
+        style={{whiteSpace: 'pre-line'}}
+        >{squeak.getContentStr()}
+      </Typography>
+    )
+  }
+
+  function SqueakLockedContent() {
+    return (
+      <>
+        <LockIcon />
+      </>
+    )
+  }
+
+  function SqueakContent() {
+    return (
+      <>
+      {squeak.getIsUnlocked()
+          ? SqueakUnlockedContent()
+          : SqueakLockedContent()
+        }
+      </>
+    )
+  }
+
+  function SqueakLockedBackgroundColor() {
+    return {backgroundColor: 'lightgray'};
+  }
+
+  function SqueakUnlockedBackgroundColor() {
+    return {backgroundColor: 'white'};
+  }
+
+  function SqueakBackgroundColor() {
+    return squeak.getIsUnlocked()
+            ? SqueakUnlockedBackgroundColor()
+            : SqueakLockedBackgroundColor()
+  }
+
   return (
     <Box
       p={1}
       m={0}
-      bgcolor="background.paper"
+      style={SqueakBackgroundColor()}
       >
           <Grid
             container
@@ -95,14 +140,7 @@ export default function SqueakDetailItem({
             alignItems="flex-start"
           >
           <Grid item>
-            <Typography
-              variant="h4"
-              style={{whiteSpace: 'pre-line'}}
-              >{squeak.getIsUnlocked()
-                  ? squeak.getContentStr()
-                  : "Content is locked."
-                }
-            </Typography>
+            {SqueakContent()}
           </Grid>
           </Grid>
           <Grid
diff --git a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js b/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
index ef8057d8..8e5e848b 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
+++ b/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
@@ -13,6 +13,8 @@ import { MoreVert as MoreIcon } from "@material-ui/icons";
 import {useHistory} from "react-router-dom";
 import classnames from "classnames";
 
+import LockIcon from '@material-ui/icons/Lock';
+
 // styles
 import useStyles from "./styles";
 
@@ -26,10 +28,6 @@ export default function SqueakThreadItem({
 }) {
   var classes = useStyles();
 
-  // local
-  // var [moreButtonRef, setMoreButtonRef] = useState(null);
-  // var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
-
   const history = useHistory();
 
   const onAddressClick = (event) => {
@@ -49,11 +47,54 @@ export default function SqueakThreadItem({
     }
   }
 
+  function SqueakUnlockedContent() {
+    return (
+      <Typography
+        size="md"
+        style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
+        >{squeak.getContentStr()}
+      </Typography>
+    )
+  }
+
+  function SqueakLockedContent() {
+    return (
+      <>
+        <LockIcon />
+      </>
+    )
+  }
+
+  function SqueakContent() {
+    return (
+      <>
+      {squeak.getIsUnlocked()
+          ? SqueakUnlockedContent()
+          : SqueakLockedContent()
+        }
+      </>
+    )
+  }
+
+  function SqueakLockedBackgroundColor() {
+    return {backgroundColor: 'lightgray'};
+  }
+
+  function SqueakUnlockedBackgroundColor() {
+    return {backgroundColor: 'white'};
+  }
+
+  function SqueakBackgroundColor() {
+    return squeak.getIsUnlocked()
+            ? SqueakUnlockedBackgroundColor()
+            : SqueakLockedBackgroundColor()
+  }
+
   return (
     <Box
       p={1}
       m={0}
-      bgcolor="background.paper"
+      style={SqueakBackgroundColor()}
       onClick={onSqueakClick}
       >
           <Grid
@@ -80,14 +121,7 @@ export default function SqueakThreadItem({
             alignItems="flex-start"
           >
           <Grid item>
-            <Typography
-              size="md"
-              style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
-              >{squeak.getIsUnlocked()
-                  ? squeak.getContentStr()
-                  : "Content is locked."
-                }
-            </Typography>
+            {SqueakContent()}
           </Grid>
           </Grid>
           <Grid
@@ -97,7 +131,7 @@ export default function SqueakThreadItem({
             alignItems="flex-start"
           >
             <Grid item>
-                <Box color="secondary.main">
+                <Box color="secondary.main" fontWeight="fontWeightBold">
                   {new Date(squeak.getBlockTime()*1000).toString()} (Block # {squeak.getBlockHeight()})
                 </Box>
             </Grid>