Merge pull request #352 from cofacts/change-name

Makeshift edit name function for the hackathon
cofacts · Oct 23, 2020 · 7a8327a · 7a8327a
2 parents 1dc284c + 840d606
commit 7a8327a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 9 deletions.
diff --git a/components/AppLayout/AppHeader.js b/components/AppLayout/AppHeader.js
@@ -212,6 +212,7 @@ function AppHeader({
   onMenuButtonClick,
   onLoginModalOpen,
   onLogout,
+  onNameChange,
 }) {
   const [anchor, setAnchor] = useState(null);
   const [displayLogo, setDisplayLogo] = useState(true);
@@ -263,7 +264,7 @@ function AppHeader({
                     <strong>Lv. {user?.level}</strong>
                     {LEVEL_NAMES[(user?.level)]}
                   </Ribbon>
-                  <MenuItem onClick={closeProfileMenu}>
+                  <MenuItem onClick={onNameChange}>
                     <ListItemIcon>
                       <Widgets.Avatar user={user} size={40} />
                     </ListItemIcon>

diff --git a/components/AppLayout/AppLayout.js b/components/AppLayout/AppLayout.js
@@ -1,3 +1,4 @@
+import { t } from 'ttag';
 import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
@@ -7,9 +8,10 @@ import AppHeader from './AppHeader';
 import AppSidebar from './AppSidebar';
 import AppFooter from './AppFooter';
 import gql from 'graphql-tag';
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useLazyQuery, useMutation } from '@apollo/react-hooks';
 import LoginModal from './LoginModal';
 import fetchAPI from 'lib/fetchAPI';
+import Snackbar from '@material-ui/core/Snackbar';
 
 const USER_QUERY = gql`
   query UserLevelQuery {
@@ -26,6 +28,16 @@ const USER_QUERY = gql`
     }
   }
 `;
+
+const CHANGE_NAME_QUERY = gql`
+  mutation ChangeUserName($name: String!) {
+    UpdateUser(name: $name) {
+      id
+      name
+    }
+  }
+`;
+
 const useStyles = makeStyles({
   container: {
     flex: 1,
@@ -43,15 +55,35 @@ function AppLayout({ children, container = true }) {
   const [isRouteChanging, setRouteChanging] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [snackMsg, setSnackMsg] = useState('');
 
   const [loadUser, { data, refetch }] = useLazyQuery(USER_QUERY);
+  const [changeUserName] = useMutation(CHANGE_NAME_QUERY, {
+    onCompleted() {
+      setSnackMsg(t`Your display name has been updated.`);
+    },
+  });
 
   const toggleSidebar = useCallback(() => setSidebarOpen(open => !open), []);
 
   const openLoginModal = useCallback(() => setLoginModalOpen(true), []);
 
   const logout = useCallback(() => apiLogout().then(refetch), [refetch]);
 
+  const userName = data?.GetUser?.name;
+  const handleNameChange = useCallback(() => {
+    const newName = window.prompt(t`Please enter new display name`, userName);
+    if (newName === null) return;
+
+    const trimmed = newName.trim();
+    if (trimmed.length === 0) {
+      setSnackMsg(t`Display name cannot be empty.`);
+      return;
+    }
+
+    changeUserName({ variables: { name: trimmed } });
+  }, [userName, changeUserName]);
+
   const classes = useStyles();
 
   // load user when first loaded
@@ -85,12 +117,15 @@ function AppLayout({ children, container = true }) {
         onMenuButtonClick={toggleSidebar}
         onLoginModalOpen={openLoginModal}
         onLogout={logout}
+        onNameChange={handleNameChange}
       />
       <AppSidebar
         open={sidebarOpen}
         toggle={setSidebarOpen}
         user={data?.GetUser}
         onLoginModalOpen={openLoginModal}
+        onLogout={logout}
+        onNameChange={handleNameChange}
       />
       {container ? (
         <Container className={classes.container}>{children}</Container>
@@ -101,6 +136,11 @@ function AppLayout({ children, container = true }) {
       {loginModalOpen && (
         <LoginModal onClose={() => setLoginModalOpen(false)} />
       )}
+      <Snackbar
+        open={snackMsg}
+        onClose={() => setSnackMsg('')}
+        message={snackMsg}
+      />
     </Fragment>
   );
 }

diff --git a/components/AppLayout/AppSidebar.js b/components/AppLayout/AppSidebar.js
@@ -63,7 +63,14 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
+function AppSidebar({
+  open,
+  toggle,
+  user,
+  onLoginModalOpen,
+  onLogout,
+  onNameChange,
+}) {
   const classes = useStyles();
 
   return (
@@ -82,7 +89,13 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
           <Ribbon className={classes.level}>
             <strong>Lv. {user?.level}</strong> {LEVEL_NAMES[(user?.level)]}
           </Ribbon>
-          <Box px={1.5} pb={2} display="flex" alignItems="center">
+          <Box
+            px={1.5}
+            pb={2}
+            display="flex"
+            alignItems="center"
+            onClick={onNameChange}
+          >
             <Widgets.Avatar user={user} size={60} />
             <Typography className={classes.name} variant="h6">
               {user?.name}
@@ -144,14 +157,16 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
           <GoogleWebsiteTranslator />
         </ListItem>
       </List>
-      {true && (
+      {user && (
         <>
           <Divider classes={{ root: classes.divider }} />
           <List className={classes.list}>
-            <ListItem classes={{ root: classes.listItem }} button>
-              <NavLink external href="#">
-                {t`Logout`}
-              </NavLink>
+            <ListItem
+              classes={{ root: classes.listItem }}
+              button
+              onClick={onLogout}
+            >
+              {t`Logout`}
             </ListItem>
           </List>
         </>