Use types instead of interfaces

modularcoder · modularcoder · commit 1cf073a47688 · 2021-05-01T05:00:44.000+04:00
diff --git a/src/Dashboard/Dashboard.tsx b/src/Dashboard/Dashboard.tsx
@@ -11,7 +11,9 @@ import KeyMetrics from './KeyMetrics/'
 import SubscriptionsRecent from './SubscriptionsRecent/'
 import SubscriptionsBreakdown from './SubscriptionsBreakdown/'
 
-const Dashboard: React.FC = () => {
+export type DashboardProps = {}
+
+const Dashboard: React.FC<DashboardProps> = () => {
   return (
     <BasePageContainer>
       <BasePageToolbar title={'Dashboard'} ActionsComponent={DashboardActions} />
diff --git a/src/Dashboard/KeyMetrics/KeyMetrics.tsx b/src/Dashboard/KeyMetrics/KeyMetrics.tsx
@@ -56,7 +56,9 @@ const keyMetrics = [
   },
 ]
 
-const KeyMetrics: React.FC = () => {
+export type KeyMetricsProps = {}
+
+const KeyMetrics: React.FC<KeyMetricsProps> = () => {
   const classes = useStyles()
 
   return (
@@ -104,8 +106,6 @@ const KeyMetrics: React.FC = () => {
   )
 }
 
-KeyMetrics.propTypes = {}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
diff --git a/src/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.tsx b/src/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.tsx
@@ -12,7 +12,9 @@ import { Bar } from 'react-chartjs-2'
 
 import { chart } from './data'
 
-const SubscriptionsBreakdown = () => {
+export type SubscriptionsBreakdownProps = {}
+
+const SubscriptionsBreakdown: React.FC<SubscriptionsBreakdownProps> = () => {
   const classes = useStyles()
 
   return (
@@ -40,8 +42,6 @@ const SubscriptionsBreakdown = () => {
   )
 }
 
-SubscriptionsBreakdown.propTypes = {}
-
 const useStyles = makeStyles((theme) => ({
   card: {
     height: '100%',
diff --git a/src/Dashboard/SubscriptionsHistory/SubscriptionsHistory.tsx b/src/Dashboard/SubscriptionsHistory/SubscriptionsHistory.tsx
@@ -14,7 +14,9 @@ import { Line } from 'react-chartjs-2'
 
 import { subscriptionsItems, subscriptionsHistoryChart } from './data'
 
-const Subscriptions: React.FC = () => {
+export type SubscriptionsProps = {}
+
+const Subscriptions: React.FC<SubscriptionsProps> = () => {
   const classes = useStyles()
 
   return (
diff --git a/src/Dashboard/SubscriptionsRecent/SubscriptionsRecent.tsx b/src/Dashboard/SubscriptionsRecent/SubscriptionsRecent.tsx
@@ -20,7 +20,9 @@ import { FormattedDate } from 'react-intl'
 
 import { recentSubscriptions } from './data'
 
-const Subscriptions = () => {
+export type SubscriptionsRecentProps = {}
+
+const SubscriptionsRecent: React.FC<SubscriptionsRecentProps> = () => {
   const classes = useStyles()
 
   return (
@@ -78,8 +80,6 @@ const Subscriptions = () => {
   )
 }
 
-Subscriptions.propTypes = {}
-
 const useStyles = makeStyles((theme) => ({
   card: {
     height: '100%',
@@ -102,4 +102,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export default Subscriptions
+export default SubscriptionsRecent
diff --git a/src/_common/AppFooter/AppFooter.tsx b/src/_common/AppFooter/AppFooter.tsx
@@ -4,7 +4,9 @@ import Link from '@material-ui/core/Link'
 import { makeStyles } from '@material-ui/core/styles'
 import pkg from '../../../package.json'
 
-const Footer: React.FC = () => {
+type AppFooterProps = {}
+
+const AppFooter: React.FC<AppFooterProps> = () => {
   const classes = useStyles()
 
   return (
@@ -57,4 +59,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export default Footer
+export default AppFooter
diff --git a/src/_common/AppHeader/AppHeader.tsx b/src/_common/AppHeader/AppHeader.tsx
@@ -7,18 +7,16 @@ import Toolbar from '@material-ui/core/Toolbar'
 import IconButton from '@material-ui/core/IconButton'
 import IconMenu from '@material-ui/icons/Menu'
 
-import { ITheme } from '_theme/'
-
 import HeaderDemo from './AppHeaderDemoButtons'
 import HeaderProfile from './AppHeaderProfile'
 // import HeaderSearch from './AppHeaderSearch'
 // import HeaderNotifications from './AppHeaderNotifications'
 
-export interface IAppHeader {
+export type AppHeaderProps = {
   onToggleClick(): void
 }
 
-const AppHeader: React.FC<IAppHeader> = ({ onToggleClick }) => {
+const AppHeader: React.FC<AppHeaderProps> = ({ onToggleClick }) => {
   const classes = useStyles()
 
   return (
@@ -42,7 +40,7 @@ const AppHeader: React.FC<IAppHeader> = ({ onToggleClick }) => {
   )
 }
 
-const useStyles = makeStyles<ITheme>((theme) => ({
+const useStyles = makeStyles((theme) => ({
   header: {
     background: '#fff',
     color: '#7b7b7b',
diff --git a/src/_common/AppHeader/AppHeaderNotifications.tsx b/src/_common/AppHeader/AppHeaderNotifications.tsx
@@ -12,7 +12,7 @@ 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/'
+import { Theme } from '_theme/'
 
 const notifications = [
   {
@@ -41,7 +41,9 @@ const notifications = [
   },
 ]
 
-const AppHeaderNotifications: React.FC = () => {
+export type AppHeaderNotificationsProps = {}
+
+const AppHeaderNotifications: React.FC<AppHeaderNotificationsProps> = () => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>()
 
@@ -122,7 +124,7 @@ const AppHeaderNotifications: React.FC = () => {
 //   return <List className={classes.notifications}></List>
 // }
 
-const useStyles = makeStyles<ITheme>((theme) => ({
+const useStyles = makeStyles((theme) => ({
   headerNotifications: {
     marginRight: 23,
     // position: 'relative',
diff --git a/src/_common/AppSidebar/AppSidebar.tsx b/src/_common/AppSidebar/AppSidebar.tsx
@@ -4,16 +4,14 @@ import { makeStyles } from '@material-ui/core/styles'
 import { Link } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
 
-// import AppSidebarBg from './AppSidebarBg.jpg'
-import { ITheme } from '_theme/'
 import BaseLogo from '_common/BaseLogo'
 import SidebarNav from './SidebarNav'
 
-export interface ISidebarProps {
+export type AppSidebarProps = {
   isCollapsed?: boolean
 }
 
-const Sidebar: React.FC<ISidebarProps> = (props) => {
+const Sidebar: React.FC<AppSidebarProps> = (props) => {
   // const { isCollapsed } = props
 
   const classes = useStyles(props)
@@ -56,7 +54,7 @@ Sidebar.defaultProps = {
 //   isCollapsed: PropTypes.bool,
 // }
 
-const useStyles = makeStyles<ITheme>((theme) => ({
+const useStyles = makeStyles((theme) => ({
   sidebar: {
     position: 'absolute',
     top: 0,
@@ -104,7 +102,7 @@ const useStyles = makeStyles<ITheme>((theme) => ({
     color: theme.palette.primary.main,
     zIndex: 10,
   },
-  title: (props: ISidebarProps) => ({
+  title: (props: AppSidebarProps) => ({
     position: 'relative',
     overflow: 'visible',
     marginLeft: '5px',
diff --git a/src/_common/AppSidebar/SidebarNav/SidebarNav.tsx b/src/_common/AppSidebar/SidebarNav/SidebarNav.tsx
@@ -3,15 +3,14 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
 import List from '@material-ui/core/List'
 import ListSubheader from '@material-ui/core/ListSubheader'
 
-import { ITheme } from '_theme'
 import { itemsCore /*, itemsTheme */ } from './SidebarNavService'
-import SidebarNavListItem, { ISidebarNavListItem } from './SidebarNavListItem'
+import SidebarNavListItem, { SidebarNavListItemProps } from './SidebarNavListItem'
 
-export interface ISidebarNavProps {
+export type SidebarNavProps = {
   // isCollapsed?: boolean
 }
 
-const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
+const SidebarNav: React.FC<SidebarNavProps> = (props) => {
   // const { isCollapsed } = props
   const classes = useStyles()
 
@@ -23,7 +22,7 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
         </ListSubheader>
       </List>
 
-      {itemsCore.map((item: ISidebarNavListItem) => {
+      {itemsCore.map((item: SidebarNavListItemProps) => {
         return <SidebarNavListItem {...item} key={item.name} />
       })}
 
@@ -36,7 +35,7 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
   )
 }
 
-const useStyles = makeStyles<ITheme>((theme) =>
+const useStyles = makeStyles((theme) =>
   createStyles({
     navList: {
       width: theme.sidebar.width,
diff --git a/src/_common/AppSidebar/SidebarNav/SidebarNavListItem.tsx b/src/_common/AppSidebar/SidebarNav/SidebarNavListItem.tsx
@@ -6,17 +6,15 @@ import Collapse from '@material-ui/core/Collapse'
 
 // import { makeStyles, createStyles } from '@material-ui/core/styles'
 
-export interface ISidebarNavListItem {
+export type SidebarNavListItemProps = {
   name: string
   link?: string
   Icon?: any
   IconClassName?: string
-  items?: ISidebarNavListItem[]
+  items?: SidebarNavListItemProps[]
 }
 
-export interface ISidebarNavListItemProps extends ISidebarNavListItem {}
-
-const SidebarNavListItem: React.FC<ISidebarNavListItemProps> = (props) => {
+const SidebarNavListItem: React.FC<SidebarNavListItemProps> = (props) => {
   const { name, items = [] } = props
 
   const [open, setOpen] = React.useState(false)
@@ -36,7 +34,7 @@ const SidebarNavListItem: React.FC<ISidebarNavListItemProps> = (props) => {
       {items.length > 0 && (
         <Collapse in={open} timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
-            {items.map((item: ISidebarNavListItem) => (
+            {items.map((item: SidebarNavListItemProps) => (
               <SidebarNavListItem {...item} key={item.name || item.link} />
             ))}
           </List>
diff --git a/src/_common/BaseLogo/BaseLogo.tsx b/src/_common/BaseLogo/BaseLogo.tsx
@@ -2,14 +2,14 @@ import React from 'react'
 import clsx from 'clsx'
 import { makeStyles } from '@material-ui/core/styles'
 
-export interface IBaseLogoProps {
+export type BaseLogoProps = {
   className?: string
   size?: number
   isInversedOutline?: boolean
   isInversed?: boolean
 }
 
-const BaseLogo: React.FC<IBaseLogoProps> = (props) => {
+const BaseLogo: React.FC<BaseLogoProps> = (props) => {
   const classes = useStyles(props)
 
   return (
@@ -38,7 +38,7 @@ const BaseLogo: React.FC<IBaseLogoProps> = (props) => {
 }
 
 const useStyles = makeStyles((theme) => ({
-  Logo: (props: IBaseLogoProps) => ({
+  Logo: (props: BaseLogoProps) => ({
     display: 'inline-block',
     verticalAlign: 'text-bottom',
     width: props.size,
@@ -47,10 +47,10 @@ const useStyles = makeStyles((theme) => ({
   path: {
     transition: 'all .3s ease',
   },
-  outline: (props: IBaseLogoProps) => ({
+  outline: (props: BaseLogoProps) => ({
     fill: props.isInversedOutline ? '#fff' : 'currentColor',
   }),
-  letter: (props: IBaseLogoProps) => ({
+  letter: (props: BaseLogoProps) => ({
     fill: props.isInversed ? '#fff' : 'currentColor',
   }),
 }))
diff --git a/src/_common/BasePageContainer/BasePageContainer.tsx b/src/_common/BasePageContainer/BasePageContainer.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
-
 import { makeStyles } from '@material-ui/core/styles'
 
-const BasePageContainer: React.FC = ({ children }) => {
+export type BasePageContainerProps = {}
+
+const BasePageContainer: React.FC<BasePageContainerProps> = ({ children }) => {
   const classes = useStyles()
 
   return (
diff --git a/src/_common/BasePageToolbar/BasePageToolbar.tsx b/src/_common/BasePageToolbar/BasePageToolbar.tsx
@@ -5,7 +5,7 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
 
-export interface IBasePageToolbarProps {
+export type BasePageToolbarProps = {
   classes?: {
     container?: string
     titleContainer?: string
@@ -16,7 +16,7 @@ export interface IBasePageToolbarProps {
   ActionsComponent?: React.ComponentType
 }
 
-const BasePageToolbar: React.FC<IBasePageToolbarProps> = (props) => {
+const BasePageToolbar: React.FC<BasePageToolbarProps> = (props) => {
   const classes = useStyles()
   const externalClasses = props.classes || {}
   const ActionsComponent = props.ActionsComponent || null
diff --git a/src/_common/BaseTable/BaseTablePagination.tsx b/src/_common/BaseTable/BaseTablePagination.tsx
@@ -10,15 +10,6 @@ import {
   LastPage as LastPageIcon,
 } from '@material-ui/icons/'
 
-import { ITheme } from '_theme/'
-
-export interface IBaseTablePaginationActionsProps {
-  count: number
-  page: number
-  rowsPerPage: number
-  onChangePage: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
-}
-
 const BaseTablePaginationActions: React.FC<TablePaginationActionsProps> = (props) => {
   const classes = useStyles()
   const theme = useTheme()
@@ -74,9 +65,9 @@ const BaseTablePaginationActions: React.FC<TablePaginationActionsProps> = (props
   )
 }
 
-export type IBaseTablePaginationProps = TablePaginationProps
+export type BaseTablePaginationProps = TablePaginationProps
 
-const BaseTablePagination: React.FC<IBaseTablePaginationProps> = (props) => {
+const BaseTablePagination: React.FC<BaseTablePaginationProps> = (props) => {
   const { count, page, rowsPerPage, onChangePage, onChangeRowsPerPage = () => {} } = props
 
   return (
@@ -97,7 +88,7 @@ const BaseTablePagination: React.FC<IBaseTablePaginationProps> = (props) => {
   )
 }
 
-const useStyles = makeStyles<ITheme>((theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     flexShrink: 0,
     marginLeft: theme.spacing(2.5),
diff --git a/src/_common/BaseTitle/BaseTitle.tsx b/src/_common/BaseTitle/BaseTitle.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 
-const BaseTitle: React.FC = () => {
+export type BaseTitleProps = {}
+
+const BaseTitle: React.FC<BaseTitleProps> = () => {
   return <div></div>
 }
 
diff --git a/src/_theme/index.ts b/src/_theme/index.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@material-ui/core/styles/createMuiTheme'
+import { Theme as MuiTheme } from '@material-ui/core/styles/createMuiTheme'
 import { createMuiTheme } from '@material-ui/core/styles'
 
 // Allow configuration using `createMuiTheme`
@@ -18,7 +18,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
   interface ThemeOptions {}
 }
 
-export interface ITheme extends Theme {}
+export interface Theme extends MuiTheme {}
 
 const baseTheme = createMuiTheme({
   props: {

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,9 @@ const keyMetrics = [`
`56`	`56`	`},`
`57`	`57`	`]`
`58`	`58`
`59`		`-const KeyMetrics: React.FC = () => {`
	`59`	`+export type KeyMetricsProps = {}`
	`60`	`+`
	`61`	`+const KeyMetrics: React.FC<KeyMetricsProps> = () => {`
`60`	`62`	`const classes = useStyles()`
`61`	`63`
`62`	`64`	`return (`
`@@ -104,8 +106,6 @@ const KeyMetrics: React.FC = () => {`
`104`	`106`	`)`
`105`	`107`	`}`
`106`	`108`
`107`		`-KeyMetrics.propTypes = {}`
`108`		`-`
`109`	`109`	`const useStyles = makeStyles((theme) => ({`
`110`	`110`	`root: {`
`111`	`111`	`flexGrow: 1,`