Fix TS errors

Author: modularcoder

src/Dashboard/_common/TheHeader/HeaderProfile.tsx

@@ -18,9 +18,16 @@ import IconAccount from '@material-ui/icons/AccountBalance'
 import IconSettings from '@material-ui/icons/Settings'
 import IconLogout from '@material-ui/icons/ExitToApp'
 
+import { useDashboardData } from '../../_state'
+
 const HeaderProfile = () => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const { user } = useDashboardData()
+
+  if (!user) {
+    return <div className={clsx('headerProfile', classes.headerProfile)} />
+  }
 
   function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
     setAnchorEl(event.currentTarget)
@@ -43,10 +50,10 @@ const HeaderProfile = () => {
       >
         <Avatar
           className={classes.profileAvatar}
-          alt="John Doe"
+          alt={user.firstName}
           src="https://avatars3.githubusercontent.com/u/3959008?v=3&s=40"
         />
-        <span className={classes.profileName}>Gevorg</span>
+        <span className={classes.profileName}>{user.firstName}</span>
         <IconArrowDropDown />
       </IconButton>
       <Menu

src/Dashboard/_state/dashboard.ts

@@ -11,15 +11,17 @@ export interface DashboardStateData {
   user?: User
 }
 export interface DashboardState extends DashboardStateStatus {
-  data?: DashboardStateData
+  data: DashboardStateData
+}
+
+const initialState: DashboardState = {
+  loading: false,
+  error: undefined,
+  data: {},
 }
 
 const model = createModel({
-  state: {
-    loading: false,
-    error: null,
-    data: null,
-  },
+  state: initialState,
   reducers: {
     setStatus: (
       state: DashboardState,

src/Dashboard/_state/index.ts

@@ -1,12 +1,18 @@
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState, RootDispatch } from '_store'
 
-import dashboard from './dashboard'
+import dashboard, { DashboardState, DashboardStateData } from './dashboard'
 
 export function useDashboardState() {
   return useSelector((state: RootState) => state.dashboard)
 }
 
+export function useDashboardData(): DashboardStateData {
+  const { data } = useDashboardState()
+
+  return data
+}
+
 export function useDashboardEffects() {
   const dispatch = useDispatch<RootDispatch>()
   return dispatch.dashboard

src/_api/_data/usersData.ts

@@ -5,8 +5,8 @@ import organizationsToUsersData from './organizationsToUsersData'
 const list: User[] = [
   {
     id: 1,
-    firstName: 'John',
-    lastName: 'Doe',
+    firstName: 'Gevorg',
+    lastName: 'H',
     username: 'johndoe1',
     email: 'john@doe.com',
     avatarUrl: 'https://avatars3.githubusercontent.com/u/3959008?v=3&s=40',