Migrate BasePageToolbar to TypeScript

Migrate BaseLogo to TypeScript
Migrate AppHeader to Typescript

Author: modularcoder

src/App.test.tsxr renamed to src/App.test.tsx

@@ -16,7 +16,7 @@ const Dashboard = () => {
     <BasePageContainer>
       <BasePageToolbar
         title={'Dashboard'}
-        actionsComponent={DashboardActions}
+        actions={<DashboardActions />}
       ></BasePageToolbar>
       <Grid container spacing={3}>
         <KeyMetrics />

src/Dashboard/Dashboard.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import Typography from '@material-ui/core/Typography'
 import Link from '@material-ui/core/Link'
 import { makeStyles } from '@material-ui/core/styles'
-// import pkg from '../../../package.json'
+import pkg from '../../../package.json'
 
-const Footer = () => {
+const Footer: React.FC = () => {
   const classes = useStyles()
 
   return (
@@ -15,7 +15,7 @@ const Footer = () => {
           color="secondary"
           href="https://github.com/modularcode/modular-admin-react/releases"
         >
-          {/* v{pkg.version} */}
+          v{pkg.version}
         </Link>
         {' | '}
         <Link

src/_common/AppFooter/AppFooter.js renamed to src/_common/AppFooter/AppFooter.tsx

@@ -1,21 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import clsx from 'clsx'
 
 import { makeStyles } from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import IconButton from '@material-ui/core/IconButton'
-
 import IconMenu from '@material-ui/icons/Menu'
 
-import HeaderDemo from './AppHeaderDemoButtons'
+import { ITheme } from '_theme/'
 
+import HeaderDemo from './AppHeaderDemoButtons'
+import HeaderProfile from './AppHeaderProfile'
 // import HeaderSearch from './AppHeaderSearch'
 // import HeaderNotifications from './AppHeaderNotifications'
-import HeaderProfile from './AppHeaderProfile'
 
-const AppHeader = ({ onToggleClick }) => {
+export interface IAppHeader {
+  onToggleClick(): void
+}
+
+const AppHeader: React.FC<IAppHeader> = ({ onToggleClick }) => {
   const classes = useStyles()
 
   return (
@@ -39,11 +42,7 @@ const AppHeader = ({ onToggleClick }) => {
   )
 }
 
-AppHeader.propTypes = {
-  onToggleClick: PropTypes.func,
-}
-
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<ITheme>((theme) => ({
   header: {
     background: '#fff',
     color: '#7b7b7b',

src/_common/AppFooter/index.js renamed to src/_common/AppFooter/index.ts

@@ -7,7 +7,9 @@ import IconCode from '@material-ui/icons/Code'
 import IconStar from '@material-ui/icons/Star'
 import IconDownload from '@material-ui/icons/GetApp'
 
-const AppHeaderDemoButtons = (props) => {
+export interface IAppHeaderDemoButtonsProps {}
+
+const AppHeaderDemoButtons: React.FC<IAppHeaderDemoButtonsProps> = (props) => {
   const classes = useStyles(props)
 
   return (

src/_common/AppHeader/AppHeader.js renamed to src/_common/AppHeader/AppHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { MouseEvent } from 'react'
 
 import { makeStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
@@ -12,6 +12,8 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar'
 import Avatar from '@material-ui/core/Avatar'
 import Typography from '@material-ui/core/Typography'
 
+import { ITheme } from '_theme/'
+
 const notifications = [
   {
     user: {
@@ -39,16 +41,16 @@ const notifications = [
   },
 ]
 
-const AppHeaderNotifications = () => {
+const AppHeaderNotifications: React.FC = () => {
   const classes = useStyles()
-  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>()
 
-  function handleClick(event) {
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
     setAnchorEl(event.currentTarget)
   }
 
   function handleClose() {
-    setAnchorEl(null)
+    setAnchorEl(undefined)
   }
 
   return (
@@ -120,7 +122,7 @@ const AppHeaderNotifications = () => {
 //   return <List className={classes.notifications}></List>
 // }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<ITheme>((theme) => ({
   headerNotifications: {
     marginRight: 23,
     // position: 'relative',

src/_common/AppHeader/AppHeaderDemoButtons.js renamed to src/_common/AppHeader/AppHeaderDemoButtons.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { MouseEvent } from 'react'
 import clsx from 'clsx'
 
 import { Link } from 'react-router-dom'
@@ -18,9 +18,9 @@ import IconAccount from '@material-ui/icons/AccountBalance'
 import IconSettings from '@material-ui/icons/Settings'
 import IconLogout from '@material-ui/icons/ExitToApp'
 
-const AppHeaderProfile = () => {
+const AppHeaderProfile: React.FC = () => {
   const classes = useStyles()
-  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>()
   const user = {
     firstName: 'Gevorg',
   }
@@ -29,12 +29,12 @@ const AppHeaderProfile = () => {
     return <div className={clsx('headerProfile', classes.headerProfile)} />
   }
 
-  function handleClick(event) {
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
     setAnchorEl(event.currentTarget)
   }
 
   function handleClose() {
-    setAnchorEl(null)
+    setAnchorEl(undefined)
   }
 
   return (

src/_common/AppHeader/AppHeaderNotifications.js renamed to src/_common/AppHeader/AppHeaderNotifications.tsx

@@ -11,7 +11,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import IconSearch from '@material-ui/icons/Search'
 import IconButton from '@material-ui/core/IconButton'
 
-const AppHeaderSearch = () => {
+const AppHeaderSearch: React.FC = () => {
   const classes = useStyles()
   const [open, setOpen] = React.useState(false)