From a7dc770135000ddee283340222f1fb2f03740df7 Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Thu, 14 Jun 2018 10:16:45 +0200
Subject: [PATCH] refactor main app bar, move getUseFullname fn to user model

Feature #13590

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 .../main-app-bar/main-app-bar.test.tsx        |  7 +++--
 src/components/main-app-bar/main-app-bar.tsx  | 31 ++++++++++---------
 src/models/user.ts                            |  4 +++
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/main-app-bar/main-app-bar.test.tsx b/src/components/main-app-bar/main-app-bar.test.tsx
index cf24b29cc5..f08c939285 100644
--- a/src/components/main-app-bar/main-app-bar.test.tsx
+++ b/src/components/main-app-bar/main-app-bar.test.tsx
@@ -10,15 +10,18 @@ import SearchBar from "./search-bar/search-bar";
 import Breadcrumbs from "../breadcrumbs/breadcrumbs";
 import DropdownMenu from "./dropdown-menu/dropdown-menu";
 import { Button, MenuItem, IconButton } from "@material-ui/core";
+import { User } from "../../models/user";
 
 configure({ adapter: new Adapter() });
 
 describe("<MainAppBar />", () => {
 
-    const user = {
+    const user: User = {
         firstName: "Test",
         lastName: "User",
-        email: "test.user@example.com"
+        email: "test.user@example.com",
+        uuid: "",
+        ownerUuid: ""
     };
 
     it("renders all components and the menu for authenticated user if user prop has value", () => {
diff --git a/src/components/main-app-bar/main-app-bar.tsx b/src/components/main-app-bar/main-app-bar.tsx
index d0dee6504d..27cd8bd4d3 100644
--- a/src/components/main-app-bar/main-app-bar.tsx
+++ b/src/components/main-app-bar/main-app-bar.tsx
@@ -10,7 +10,7 @@ import HelpIcon from "@material-ui/icons/Help";
 import SearchBar from "./search-bar/search-bar";
 import Breadcrumbs, { Breadcrumb } from "../breadcrumbs/breadcrumbs";
 import DropdownMenu from "./dropdown-menu/dropdown-menu";
-import { User } from "../../models/user";
+import { User, getUserFullname } from "../../models/user";
 
 export interface MainAppBarMenuItem {
     label: string;
@@ -39,9 +39,8 @@ export interface MainAppBarActionProps {
 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
 
 export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
-    const { classes, searchText, breadcrumbs, searchDebounce, user } = props;
-    return <AppBar className={classes.appBar} position="static">
-        <Toolbar className={classes.toolbar}>
+    return <AppBar className={props.classes.appBar} position="static">
+        <Toolbar className={props.classes.toolbar}>
             <Grid
                 container
                 justify="space-between"
@@ -57,9 +56,9 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
                 <Grid item xs={6} container alignItems="center">
                     {
                         props.user && <SearchBar
-                            value={searchText}
+                            value={props.searchText}
                             onSearch={props.onSearch}
-                            debounce={searchDebounce}
+                            debounce={props.searchDebounce}
                         />
                     }
                 </Grid>
@@ -71,8 +70,8 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
             </Grid>
         </Toolbar>
         {
-            props.user && <Toolbar className={classes.toolbar}>
-                <Breadcrumbs items={breadcrumbs} onClick={props.onBreadcrumbClick} />
+            props.user && <Toolbar className={props.classes.toolbar}>
+                <Breadcrumbs items={props.breadcrumbs} onClick={props.onBreadcrumbClick} />
             </Toolbar>
         }
     </AppBar>;
@@ -88,7 +87,9 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps
                 </Badge>
             </IconButton>
             <DropdownMenu icon={PersonIcon} id="account-menu">
-                <MenuItem>{getUserFullname(user)}</MenuItem>
+                <MenuItem>
+                    {getUserFullname(user)}
+                </MenuItem>
                 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
             </DropdownMenu>
             <DropdownMenu icon={HelpIcon} id="help-menu">
@@ -100,20 +101,20 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps
 
 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
     return menuItems.anonymousMenu.map((item, index) => (
-        <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>{item.label}</Button>
+        <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
+            {item.label}
+        </Button>
     ));
 };
 
 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
     return menuItems.map((item, index) => (
-        <MenuItem key={index} onClick={() => onMenuItemClick(item)}>{item.label}</MenuItem>
+        <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
+            {item.label}
+        </MenuItem>
     ));
 };
 
-const getUserFullname = (user?: User) => {
-    return user ? `${user.firstName} ${user.lastName}` : "";
-};
-
 type CssRules = "appBar" | "toolbar";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
diff --git a/src/models/user.ts b/src/models/user.ts
index ae7cf436b2..4cc29ba779 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -9,3 +9,7 @@ export interface User {
     uuid: string;
     ownerUuid: string;
 }
+
+export const getUserFullname = (user?: User) => {
+    return user ? `${user.firstName} ${user.lastName}` : "";
+};
\ No newline at end of file
-- 
2.39.5