Merge pull request #93 from ekzhang/develop

Release 3.0.5
ekzhang · Feb 19, 2021 · b7e9a25 · b7e9a25
2 parents 95ab719 + 9bc2b35
commit b7e9a25
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/src/components/PromptDialog.js b/src/components/PromptDialog.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useContext } from "react";
 
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
@@ -9,10 +9,12 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
 import { filter } from "../util";
+import { UserContext } from "../context";
 
 function PromptDialog(props) {
   const { open, onClose, title, message, label, maxLength } = props;
   const [value, setValue] = useState("");
+  const user = useContext(UserContext);
 
   function handleClose() {
     onClose(null);
@@ -24,6 +26,11 @@ function PromptDialog(props) {
       alert(
         "We detected that your input contains profane language. If you think this was a mistake, please let us know!"
       );
+    } else if (
+      !user.patron &&
+      !value.match(/^[\p{L}\p{M}\p{N}\p{P}\p{Zs}]*$/u)
+    ) {
+      alert("Please use only letters, numbers, and punctuation.");
     } else {
       onClose(value);
       setValue("");

diff --git a/src/components/User.js b/src/components/User.js
@@ -1,17 +1,37 @@
-import { useTheme } from "@material-ui/core/styles";
+import { useHistory } from "react-router-dom";
+import { useTheme, makeStyles } from "@material-ui/core/styles";
 import WhatshotIcon from "@material-ui/icons/Whatshot";
 
 import useFirebaseRef from "../hooks/useFirebaseRef";
 import { colors } from "../util";
 
+const useStyles = makeStyles((theme) => ({
+  patronIcon: {
+    cursor: "pointer",
+    "&:hover": {
+      filter: `drop-shadow(0.1rem 0rem 0.2rem)`,
+    },
+  },
+}));
+
 function User(props) {
   const theme = useTheme();
+  const history = useHistory();
 
   const { id, style, component, render, forcePatron, ...other } = props;
   const [user, loading] = useFirebaseRef(`users/${id}`);
+
+  const classes = useStyles();
+
   if (loading) {
     return null;
   }
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    history.push("/donate");
+  };
+
   const Component = component || "span";
   const userEl = (
     <Component
@@ -26,16 +46,19 @@ function User(props) {
     >
       {(user.patron || forcePatron) && (
         <WhatshotIcon
+          className={classes.patronIcon}
+          onClick={handleClick}
           fontSize="inherit"
           style={{
             display: "inline",
             position: "relative",
             left: "-0.1em",
             top: "0.15em",
+            color: "inherit",
           }}
         />
       )}
-      {user.name}
+      <span>{user.name}</span>
     </Component>
   );
   return render ? render(user, userEl) : userEl;

diff --git a/src/pages/DonatePage.js b/src/pages/DonatePage.js
@@ -80,6 +80,10 @@ function DonatePage() {
               <User id={user.id} forcePatron />
               ).
             </li>
+            <li>
+              Freedom to create a name without limiting to just letters,
+              numbers, and punctuation.
+            </li>
             <li>More to come soon!</li>
           </ul>
         </Typography>