Make AppSidebar a typescript component

modularcoder · modularcoder · commit cad785185e95 · 2021-04-30T04:11:35.000+04:00
diff --git a/REFERENCES.md b/REFERENCES.md
@@ -9,4 +9,11 @@ http://bit.ly/2E3uMER
 https://gumroad.com/l/UAxnr 
 
 
+### Materials
+
+https://www.carlrippon.com/react-forwardref-typescript/
+
+
+
+
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@rehooks/component-size": "^1.0.3",
     "@types/lodash": "^4.14.168",
+    "@types/react-router-dom": "^5.1.7",
     "@types/uuid": "^8.3.0",
     "axios": "^0.21.1",
     "axios-mock-adapter": "^1.19.0",
diff --git a/src-ts/_common/AppSidebar/AppSidebar.tsx b/src-ts/_common/AppSidebar/AppSidebar.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
 import { Link } from 'react-router-dom'
@@ -9,7 +8,11 @@ import Typography from '@material-ui/core/Typography'
 import Logo from '_common/BaseLogo/BaseLogo'
 import SidebarNav from './SidebarNav'
 
-const Sidebar = (props) => {
+export interface ISidebarProps {
+  isCollapsed?: boolean
+}
+
+const Sidebar: React.FC<ISidebarProps> = (props) => {
   const { isCollapsed } = props
 
   const classes = useStyles(props)
@@ -43,9 +46,9 @@ Sidebar.defaultProps = {
   isCollapsed: false,
 }
 
-Sidebar.propTypes = {
-  isCollapsed: PropTypes.bool,
-}
+// Sidebar.propTypes = {
+//   isCollapsed: PropTypes.bool,
+// }
 
 const useStyles = makeStyles((theme) => ({
   sidebar: {
@@ -95,7 +98,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.primary.main,
     zIndex: 10,
   },
-  title: (props) => ({
+  title: (props: ISidebarProps) => ({
     position: 'relative',
     overflow: 'visible',
     marginLeft: '5px',
diff --git a/src-ts/_common/AppSidebar/SidebarNav/NavItem.tsx b/src-ts/_common/AppSidebar/SidebarNav/NavItem.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react'
+import React, { useLayoutEffect, MouseEvent } from 'react'
 import clsx from 'clsx'
 
 import { makeStyles, createStyles } from '@material-ui/core/styles'
@@ -15,11 +15,30 @@ import IconExpandLess from '@material-ui/icons/ExpandLess'
 import IconExpandMore from '@material-ui/icons/ExpandMore'
 import IconSpacer from '@material-ui/icons/FiberManualRecord'
 
+import { ISidebarNavItem } from './SidebarNav'
+
 import NavItemComponent from './NavItemComponent'
 
 // ----------------------------------------------------------------------
 
-const NavItemCollapsed = (props) => {
+export interface INavItemCollapsedProps {
+  name: string
+  link?: string
+  Icon?: any
+  IconStyles?: object
+  IconClassName?: string
+  isCollapsed?: boolean
+  className?: string
+  nestingLevel?: number
+  nestingOffset?: number
+  isNested?: boolean
+  items?: ISidebarNavItem[]
+  isOpen?: boolean
+  style?: any
+  onClick?: () => void
+}
+
+const NavItemCollapsed: React.FC<INavItemCollapsedProps> = (props) => {
   const {
     name,
     link,
@@ -36,11 +55,12 @@ const NavItemCollapsed = (props) => {
   const itemsAll = getItemsAll(items)
   const hasChildrenAndIsActive =
     hasChildren &&
-    itemsAll.filter((item) => `#${item.link}` === window.location.hash).length > 0
+    itemsAll.filter((item: ISidebarNavItem) => `#${item.link}` === window.location.hash)
+      .length > 0
 
-  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [anchorEl, setAnchorEl] = React.useState<HTMLAnchorElement>()
 
-  const handlePopoverOpen = (event) => {
+  const handlePopoverOpen = (event: MouseEvent<HTMLAnchorElement>) => {
     if (!hasChildren) {
       return false
     }
@@ -49,7 +69,7 @@ const NavItemCollapsed = (props) => {
   }
 
   const handlePopoverClose = () => {
-    setAnchorEl(null)
+    setAnchorEl(undefined)
   }
 
   const open = Boolean(anchorEl)
@@ -152,7 +172,23 @@ const NavItemCollapsed = (props) => {
   )
 }
 
-const NavItemDefault = (props) => {
+export interface INavItemDefaultProps {
+  name: string
+  link?: string
+  Icon?: any
+  IconStyles?: object
+  IconClassName?: string
+  isCollapsed?: boolean
+  className?: string
+  nestingLevel?: number
+  nestingOffset?: number
+  style?: any
+  items?: ISidebarNavItem[]
+  isOpen?: boolean
+  onClick?: () => void
+}
+
+const NavItemDefault: React.FC<INavItemDefaultProps> = (props) => {
   const {
     name,
     link,
@@ -257,7 +293,7 @@ const NavItemDefault = (props) => {
   )
 }
 
-const NavItem = (props) => {
+const NavItem: React.FC<INavItemCollapsedProps | INavItemDefaultProps> = (props) => {
   if (props.isCollapsed) {
     return <NavItemCollapsed {...props} />
   } else {
@@ -344,8 +380,8 @@ const useStyles = makeStyles((theme) =>
 // ----------------------
 
 // Flattened array of all children
-function getItemsAll(items) {
-  return items.reduce((allItems, item) => {
+function getItemsAll(items: ISidebarNavItem[]): ISidebarNavItem[] {
+  return items.reduce((allItems: ISidebarNavItem[], item: ISidebarNavItem) => {
     // let res = allItems.concat([item])
 
     if (item.items && item.items.length) {
diff --git a/src-ts/_common/AppSidebar/SidebarNav/NavItemComponent.tsx b/src-ts/_common/AppSidebar/SidebarNav/NavItemComponent.tsx
@@ -1,23 +1,34 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, MouseEvent } from 'react'
 import clsx from 'clsx'
 
 import ListItem from '@material-ui/core/ListItem'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
-import { NavLink } from 'react-router-dom'
+import { NavLink, NavLinkProps } from 'react-router-dom'
 
-export const NavItemLink = forwardRef((props, ref) => (
+export const NavItemLink = forwardRef<HTMLAnchorElement, NavLinkProps>((props, ref) => (
   <NavLink exact {...props} innerRef={ref} />
 ))
 
+export interface INavItemComponent {
+  link?: string
+  className?: string
+  isCollapsed?: boolean
+  style?: any
+  onClick(e: MouseEvent): void
+}
+
 // Can be a link, or button
-export const NavItemComponent = forwardRef((props, ref) => {
+export const NavItemComponent = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<INavItemComponent>
+>((props, ref) => {
   const { isCollapsed, ...newProps } = props
   const classes = useStyles()
 
   const component =
     typeof props.link === 'string' ? (
-      <ListItem {...newProps} button component={NavItemLink} to={props.link} />
+      <ListItem {...newProps} component={NavItemLink} to={props.link} />
     ) : (
       <ListItem {...newProps} button />
     )
diff --git a/src-ts/_common/AppSidebar/SidebarNav/NavList.tsx b/src-ts/_common/AppSidebar/SidebarNav/NavList.tsx
@@ -2,7 +2,15 @@ import React from 'react'
 
 import NavItem from './NavItem'
 
-const AppSidebarNavList = (props) => {
+import { ISidebarNavItem } from './SidebarNav'
+
+export interface IAppSidebarNavList {
+  isNested?: boolean
+  isCollapsed?: boolean
+  items: ISidebarNavItem[]
+}
+
+const AppSidebarNavList: React.FC<IAppSidebarNavList> = (props) => {
   const { items = [], isCollapsed = false, isNested = false } = props
   // const classes = useStyles()
 
diff --git a/src-ts/_common/AppSidebar/SidebarNav/SidebarNav.tsx b/src-ts/_common/AppSidebar/SidebarNav/SidebarNav.tsx
@@ -15,7 +15,19 @@ import IconPreson from '@material-ui/icons/Person' //
 
 import NavList from './NavList'
 
-const SidebarNav = (props) => {
+export interface ISidebarNavItem {
+  name: string
+  link?: string
+  Icon?: any
+  IconClassName?: string
+  items?: ISidebarNavItem[]
+}
+
+export interface ISidebarNavProps {
+  isCollapsed?: boolean
+}
+
+const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
   const { isCollapsed } = props
   const classes = useStyles()
 
diff --git a/src-ts/_common/AppSidebar/SidebarNav/index.ts b/src-ts/_common/AppSidebar/SidebarNav/index.ts
diff --git a/src-ts/_common/AppSidebar/index.ts b/src-ts/_common/AppSidebar/index.ts
diff --git a/src-ts/_theme/index.ts b/src-ts/_theme/index.ts
@@ -1,8 +1,20 @@
+import { Theme } from '@material-ui/core/styles/createMuiTheme'
 import { createMuiTheme } from '@material-ui/core/styles'
 
 // Allow configuration using `createMuiTheme`
 // ref: https://material-ui.com/guides/typescript/
 declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    header: {
+      background: string
+    }
+    sidebar: {
+      width: number
+      widthCollapsed: number
+      background: string
+      color: string
+    }
+  }
   interface ThemeOptions {}
 }
 
