Migrate BasePageToolbar to TypeScript

modularcoder · modularcoder · commit 7af7295bbdd5 · 2021-05-01T03:20:56.000+04:00
Migrate BaseLogo to TypeScript
Migrate AppHeader to Typescript
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/Dashboard/Dashboard.tsx b/src/Dashboard/Dashboard.tsx
@@ -16,7 +16,7 @@ const Dashboard = () => {
     <BasePageContainer>
       <BasePageToolbar
         title={'Dashboard'}
-        actionsComponent={DashboardActions}
+        actions={<DashboardActions />}
       ></BasePageToolbar>
       <Grid container spacing={3}>
         <KeyMetrics />
diff --git a/src/_common/AppFooter/AppFooter.tsx b/src/_common/AppFooter/AppFooter.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
diff --git a/src/_common/AppFooter/index.ts b/src/_common/AppFooter/index.ts
diff --git a/src/_common/AppHeader/AppHeader.tsx b/src/_common/AppHeader/AppHeader.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',
diff --git a/src/_common/AppHeader/AppHeaderDemoButtons.tsx b/src/_common/AppHeader/AppHeaderDemoButtons.tsx
@@ -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 (
diff --git a/src/_common/AppHeader/AppHeaderNotifications.tsx b/src/_common/AppHeader/AppHeaderNotifications.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',
diff --git a/src/_common/AppHeader/AppHeaderProfile.tsx b/src/_common/AppHeader/AppHeaderProfile.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 (
diff --git a/src/_common/AppHeader/AppHeaderSearch.tsx b/src/_common/AppHeader/AppHeaderSearch.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)
 
diff --git a/src/_common/AppHeader/index.ts b/src/_common/AppHeader/index.ts
diff --git a/src/_common/AppSidebar/AppSidebar.tsx b/src/_common/AppSidebar/AppSidebar.tsx
@@ -29,7 +29,7 @@ const Sidebar: React.FC<ISidebarProps> = (props) => {
             role="link"
             aria-label="Modular Admin link"
           >
-            <BaseLogo size={30} isInversed={true} className={classes.logo} role="img" />
+            <BaseLogo size={30} isInversed={true} className={classes.logo} />
             <Typography
               component="h2"
               variant="h5"
diff --git a/src/_common/BaseLogo/BaseLogo.tsx b/src/_common/BaseLogo/BaseLogo.tsx
@@ -2,13 +2,14 @@ import React from 'react'
 import clsx from 'clsx'
 import { makeStyles } from '@material-ui/core/styles'
 
-/*
-interface LogoProps {
+export interface IBaseLogoProps {
   className?: string
   size?: number
+  isInversedOutline?: boolean
+  isInversed?: boolean
 }
- */
-const Logo = (props) => {
+
+const BaseLogo: React.FC<IBaseLogoProps> = (props) => {
   const classes = useStyles(props)
 
   return (
@@ -17,6 +18,7 @@ const Logo = (props) => {
       data-name="Layer 1"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 563.82 637.44"
+      role="img"
     >
       <title>Modular Admin React</title>
       <g>
@@ -36,7 +38,7 @@ const Logo = (props) => {
 }
 
 const useStyles = makeStyles((theme) => ({
-  Logo: (props) => ({
+  Logo: (props: IBaseLogoProps) => ({
     display: 'inline-block',
     verticalAlign: 'text-bottom',
     width: props.size,
@@ -45,12 +47,12 @@ const useStyles = makeStyles((theme) => ({
   path: {
     transition: 'all .3s ease',
   },
-  outline: (props) => ({
+  outline: (props: IBaseLogoProps) => ({
     fill: props.isInversedOutline ? '#fff' : 'currentColor',
   }),
-  letter: (props) => ({
+  letter: (props: IBaseLogoProps) => ({
     fill: props.isInversed ? '#fff' : 'currentColor',
   }),
 }))
 
-export default Logo
+export default BaseLogo
diff --git a/src/_common/BaseLogo/index.ts b/src/_common/BaseLogo/index.ts
diff --git a/src/_common/BasePageToolbar/BasePageToolbar.tsx b/src/_common/BasePageToolbar/BasePageToolbar.tsx
@@ -1,24 +1,36 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import clsx from 'clsx'
 
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
 
-const BasePageToolbar = (props) => {
+export interface IBasePageToolbarProps {
+  classes?: {
+    container?: string
+    titleContainer?: string
+    actionsContainer?: string
+  }
+  title: React.ReactNode
+  actions: React.ReactNode
+}
+
+const BasePageToolbar: React.FC<IBasePageToolbarProps> = (props) => {
   const classes = useStyles()
   const externalClasses = props.classes || {}
 
-  const Title = props.title ? (
-    <Typography variant="h4" component="h1">
-      {props.title}
-    </Typography>
-  ) : null
-  const TitleComponent = props.titleComponent
+  const Title =
+    typeof props.title === 'string' ? (
+      <Typography variant="h4" component="h1">
+        {props.title}
+      </Typography>
+    ) : (
+      props.title
+    )
+  // const TitleComponent = props.titleComponent
 
   const Actions = props.actions
-  const ActionsComponent = props.actionsComponent
+  // const ActionsComponent = props.actionsComponent
 
   return (
     <Grid
@@ -35,7 +47,6 @@ const BasePageToolbar = (props) => {
         className={clsx(classes.titleContainer, externalClasses.titleContainer)}
       >
         {Title && Title}
-        {TitleComponent && <TitleComponent />}
       </Grid>
       <Grid
         item
@@ -46,7 +57,6 @@ const BasePageToolbar = (props) => {
         className={clsx(classes.actionsContainer, externalClasses.titleContainer)}
       >
         {Actions && Actions}
-        {ActionsComponent && <ActionsComponent />}
       </Grid>
     </Grid>
   )
@@ -66,12 +76,4 @@ const useStyles = makeStyles((theme) =>
   }),
 )
 
-BasePageToolbar.propTypes = {
-  classes: PropTypes.object,
-  title: PropTypes.elementType,
-  titleComponent: PropTypes.elementType,
-  actions: PropTypes.element,
-  actionsComponent: PropTypes.elementType,
-}
-
 export default BasePageToolbar
diff --git a/src/_common/BasePageToolbar/index.ts b/src/_common/BasePageToolbar/index.ts
