refactor(user): refactor user page

- convert jsx files to tsx files
- change from higher order conenct to redux hooks
- assign types to function component, style and methods
- replace proptypes with typescript

src/client/app/components/AppMargins/index.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles(() =>
 
 type AppMarginsProps = {
   className?: string
-  children: React.ReactElement
+  children: React.ReactNode
 }
 
 export const ApplyAppMargins = ({ className, children }: AppMarginsProps) => {

src/client/user/components/AnnouncementModal/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-
 import {
   Button,
   Dialog,
@@ -16,6 +15,10 @@ import useFullScreenDialog from '../../helpers/fullScreenDialog'
 import CloseIcon from '../../../app/components/widgets/CloseIcon'
 import { GAEvent } from '../../../app/util/ga'
 
+type StyleProps = {
+  isFullScreenDialog: boolean
+}
+
 const useStyles = makeStyles((theme) =>
   createStyles({
     closeButton: {
@@ -68,19 +71,14 @@ const useStyles = makeStyles((theme) =>
       textAlign: 'center',
     },
     closeIconButton: {
-      fill: (props) =>
-        // @ts-ignore
+      fill: (props: StyleProps) =>
         props.isFullScreenDialog ? '#BBBBBB' : theme.palette.primary.dark,
-      // @ts-ignore
-      height: (props) => (props.isFullScreenDialog ? 44 : 30.8),
-      // @ts-ignore
-      width: (props) => (props.isFullScreenDialog ? 44 : 30.8),
+      height: (props: StyleProps) => (props.isFullScreenDialog ? 44 : 30.8),
+      width: (props: StyleProps) => (props.isFullScreenDialog ? 44 : 30.8),
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(2),
-      // @ts-ignore
-      marginLeft: (props) => (props.isFullScreenDialog ? 0 : theme.spacing(2)),
-      // @ts-ignore
-      marginRight: (props) => (props.isFullScreenDialog ? 0 : theme.spacing(2)),
+      marginLeft: (props: StyleProps) => (props.isFullScreenDialog ? 0 : theme.spacing(2)),
+      marginRight: (props: StyleProps) => (props.isFullScreenDialog ? 0 : theme.spacing(2)),
     },
     headerWrapper: {
       background: '#f9f9f9',
@@ -114,7 +112,7 @@ const useStyles = makeStyles((theme) =>
   }),
 )
 
-export default function AnnouncementModal() {
+const AnnouncementModal = () => {
   const dispatch = useDispatch()
   const isFullScreenDialog = useFullScreenDialog()
   const classes = useStyles({ isFullScreenDialog })
@@ -239,3 +237,5 @@ export default function AnnouncementModal() {
     </Dialog>
   )
 }
+
+export default AnnouncementModal

src/client/user/components/CreateUrlModal/CreateLinkForm.jsx → src/client/user/components/CreateUrlModal/CreateLinkForm.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import React, { useEffect, useState, FunctionComponent } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import i18next from 'i18next'
 import {
   Button,
@@ -12,7 +11,6 @@ import {
   TextField,
   Typography,
 } from '@material-ui/core'
-
 import useCreateLinkFormStyles from './styles/createLinkForm'
 import {
   isValidLongUrl,
@@ -28,57 +26,34 @@ import { CollapsibleMessageType } from '../../../app/components/CollapsibleMessa
 import FileInputField from '../../widgets/FileInputField'
 import userActions from '../../actions'
 import { GAEvent } from '../../../app/util/ga'
+import { GoGovReduxState } from '../../../app/reducers/types'
+import FormStartAdorment, { TEXT_FIELD_HEIGHT } from './FormStartAdorment'
 
-// Height of the text field in the create link dialog.
-const TEXT_FIELD_HEIGHT = 44
-
-const FormStartAdorment = ({ children }) => {
-  const classes = useCreateLinkFormStyles({
-    textFieldHeight: TEXT_FIELD_HEIGHT,
-  })
-  return (
-    <InputAdornment className={classes.startAdorment} position="start">
-      <Typography className={classes.startAdormentText} color="textSecondary">
-        {children}
-      </Typography>
-    </InputAdornment>
-  )
+type CreateLinkFormProps = {
+  onSubmitLink: () => {},
+  onSubmitFile: (file: File | null) => {},
 }
 
-const mapStateToProps = (state) => ({
-  shortUrl: state.user.shortUrl,
-  longUrl: state.user.longUrl,
-  isUploading: state.user.isUploading,
-  createShortLinkError: state.user.createShortLinkError,
-  uploadFileError: state.user.uploadFileError,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  setShortUrl: (shortUrl) => dispatch(userActions.setShortUrl(shortUrl)),
-  setLongUrl: (longUrl) => dispatch(userActions.setLongUrl(longUrl)),
-  setRandomShortUrl: () => dispatch(userActions.setRandomShortUrl()),
-  setUploadFileError: (error) =>
-    dispatch(userActions.setUploadFileError(error)),
-  setCreateShortLinkError: (error) =>
-    dispatch(userActions.setCreateShortLinkError(error)),
-})
-
-function CreateLinkForm({
+const CreateLinkForm: FunctionComponent<CreateLinkFormProps> = ({
   onSubmitLink,
-  shortUrl,
-  setShortUrl,
-  longUrl,
-  setLongUrl,
-  setRandomShortUrl,
-  isUploading,
   onSubmitFile,
-  uploadFileError,
-  setUploadFileError,
-  createShortLinkError,
-  setCreateShortLinkError,
-}) {
+}) => {
+  const shortUrl = useSelector((state: GoGovReduxState) => state.user.shortUrl)
+  const longUrl = useSelector((state: GoGovReduxState) => state.user.longUrl)
+  const isUploading = useSelector((state: GoGovReduxState) => state.user.isUploading)
+  const createShortLinkError = useSelector((state: GoGovReduxState) => state.user.createShortLinkError)
+  const uploadFileError = useSelector((state: GoGovReduxState) => state.user.uploadFileError)
+
+  const dispatch = useDispatch()
+  const setShortUrl = (shortUrl: string) => dispatch(userActions.setShortUrl(shortUrl))
+  const setLongUrl = (longUrl: string) => dispatch(userActions.setLongUrl(longUrl))
+  const setRandomShortUrl = () => dispatch(userActions.setRandomShortUrl())
+  const setUploadFileError = (error: string | null) => dispatch(userActions.setUploadFileError(error))
+  const setCreateShortLinkError = (error: string | null) => dispatch(userActions.setCreateShortLinkError(error))
+
   const [isFile, setIsFile] = useState(false)
-  const [file, setFile] = useState(null)
+  const [file, setFile] = useState<File|null>(null)
+
   const classes = useCreateLinkFormStyles({
     textFieldHeight: TEXT_FIELD_HEIGHT,
     isFile,
@@ -314,19 +289,4 @@ function CreateLinkForm({
   )
 }
 
-CreateLinkForm.propTypes = {
-  onSubmitLink: PropTypes.func.isRequired,
-  onSubmitFile: PropTypes.func.isRequired,
-  shortUrl: PropTypes.string.isRequired,
-  setShortUrl: PropTypes.func.isRequired,
-  longUrl: PropTypes.string.isRequired,
-  setLongUrl: PropTypes.func.isRequired,
-  setRandomShortUrl: PropTypes.func.isRequired,
-  isUploading: PropTypes.bool.isRequired,
-  uploadFileError: PropTypes.string,
-  setUploadFileError: PropTypes.func.isRequired,
-  createShortLinkError: PropTypes.string,
-  setCreateShortLinkError: PropTypes.func.isRequired,
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CreateLinkForm)
+export default CreateLinkForm

src/client/user/components/CreateUrlModal/FormStartAdorment.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react'
+import useCreateLinkFormStyles from './styles/createLinkForm'
+import {
+  InputAdornment,
+  Typography,
+} from '@material-ui/core'
+
+// Height of the text field in the create link dialog.
+export const TEXT_FIELD_HEIGHT = 44
+
+const FormStartAdorment: FunctionComponent = ({ children }) => {
+  const classes = useCreateLinkFormStyles({
+    textFieldHeight: TEXT_FIELD_HEIGHT,
+  })
+  return (
+    <InputAdornment className={classes.startAdorment} position="start">
+      <Typography className={classes.startAdormentText} color="textSecondary">
+        {children}
+      </Typography>
+    </InputAdornment>
+  )
+}
+
+export default FormStartAdorment

src/client/user/components/CreateUrlModal/ModalMargins.jsx → src/client/user/components/CreateUrlModal/ModalMargins.tsx

@@ -1,25 +1,33 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FunctionComponent } from 'react'
 import { createStyles, makeStyles } from '@material-ui/core'
-
 import { ApplyAppMargins } from '../../../app/components/AppMargins'
 import useFullScreenDialog from '../../helpers/fullScreenDialog'
 
+type StyleProps = {
+  applyLeftMargin?: boolean,
+  applyRightMargin?: boolean,
+}
+
 const useStyles = makeStyles((theme) =>
   createStyles({
     modalMargins: {
-      marginLeft: (props) => (props.applyLeftMargin ? theme.spacing(6.25) : 0),
-      marginRight: (props) =>
+      marginLeft: (props: StyleProps) => (props.applyLeftMargin ? theme.spacing(6.25) : 0),
+      marginRight: (props: StyleProps) =>
         props.applyRightMargin ? theme.spacing(6.25) : 0,
     },
   }),
 )
 
-export default function ModalMargins({
-  children,
+type ModalMarginsProps = {
+  applyLeftMargin?: boolean,
+  applyRightMargin?: boolean
+}
+
+const ModalMargins: FunctionComponent<ModalMarginsProps> = ({
   applyLeftMargin,
   applyRightMargin,
-}) {
+  children,
+}) => {
   const classes = useStyles({ applyLeftMargin, applyRightMargin })
   const isFullScreenDialog = useFullScreenDialog()
 
@@ -30,13 +38,9 @@ export default function ModalMargins({
   return <div className={classes.modalMargins}>{children}</div>
 }
 
-ModalMargins.propTypes = {
-  children: PropTypes.node.isRequired,
-  applyLeftMargin: PropTypes.bool,
-  applyRightMargin: PropTypes.bool,
-}
-
 ModalMargins.defaultProps = {
   applyLeftMargin: true,
   applyRightMargin: true,
 }
+
+export default ModalMargins

src/client/user/components/CreateUrlModal/index.jsx → src/client/user/components/CreateUrlModal/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { History } from 'history'
 import { useHistory } from 'react-router-dom'
 import {
   Dialog,
@@ -10,13 +10,17 @@ import {
   makeStyles,
 } from '@material-ui/core'
 import CloseIcon from '../../../app/components/widgets/CloseIcon'
-
 import CreateLinkForm from './CreateLinkForm'
 import useFullScreenDialog from '../../helpers/fullScreenDialog'
 import ModalMargins from './ModalMargins'
 import userActions from '../../actions'
 import AddDescriptionForm from './AddDescriptionForm'
 import { GAEvent, GAPageView } from '../../../app/util/ga'
+import { GoGovReduxState } from '../../../app/reducers/types'
+
+type StyleProps = {
+  isFullScreenDialog: boolean,
+}
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -31,7 +35,7 @@ const useStyles = makeStyles((theme) =>
       marginBottom: theme.spacing(2),
     },
     closeIconButton: {
-      fill: (props) =>
+      fill: (props: StyleProps) =>
         props.isFullScreenDialog ? '#BBBBBB' : theme.palette.primary.dark,
       height: (props) => (props.isFullScreenDialog ? 44 : 30.8),
       width: (props) => (props.isFullScreenDialog ? 44 : 30.8),
@@ -51,26 +55,18 @@ const useStyles = makeStyles((theme) =>
   }),
 )
 
-const mapStateToProps = (state) => ({
-  createUrlModal: state.user.createUrlModal,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  closeCreateUrlModal: () => dispatch(userActions.closeCreateUrlModal()),
-  onCreateUrl: (history) => dispatch(userActions.createUrlOrRedirect(history)),
-  onUploadFile: (file) => dispatch(userActions.uploadFile(file)),
-})
+const CreateUrlModal = () => {
+  const createUrlModal = useSelector((state: GoGovReduxState) => state.user.createUrlModal)
+  const dispatch = useDispatch()
+  const closeCreateUrlModal = () => dispatch(userActions.closeCreateUrlModal())
+  const onCreateUrl = (history: History) => dispatch(userActions.createUrlOrRedirect(history))
+  const onUploadFile = (file: File) => dispatch(userActions.uploadFile(file))
 
-const CreateUrlModal = ({
-  createUrlModal,
-  closeCreateUrlModal,
-  onCreateUrl,
-  onUploadFile,
-}) => {
   const isFullScreenDialog = useFullScreenDialog()
   const classes = useStyles({ isFullScreenDialog })
   const [step, setStep] = useState(0)
-  const incrementDecorator = (func) => async (...args) => {
+
+  const incrementDecorator = (func: any) => async (...args: any[]) => {
     const proceed = await func(...args)
     if (proceed) {
       if (args.length) {
@@ -83,9 +79,10 @@ const CreateUrlModal = ({
       closeCreateUrlModal()
     }
   }
+
   const history = useHistory()
   const onSubmitLink = incrementDecorator(() => onCreateUrl(history))
-  const onSubmitFile = incrementDecorator(onUploadFile)
+  const onSubmitFile = incrementDecorator(onUploadFile) // test this
 
   // Reset step when modal closes and reopens
   useEffect(() => {
@@ -146,11 +143,4 @@ const CreateUrlModal = ({
   )
 }
 
-CreateUrlModal.propTypes = {
-  onCreateUrl: PropTypes.func.isRequired,
-  onUploadFile: PropTypes.func.isRequired,
-  createUrlModal: PropTypes.bool.isRequired,
-  closeCreateUrlModal: PropTypes.func.isRequired,
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CreateUrlModal)
+export default CreateUrlModal

src/client/user/components/CreateUrlModal/styles/createLinkForm.ts

@@ -2,9 +2,9 @@ import { createStyles, makeStyles } from '@material-ui/core'
 
 type LinkFormStyles = {
   textFieldHeight: number
-  isFile: boolean
-  uploadFileError: string | null
-  createShortLinkError: string | null
+  isFile?: boolean
+  uploadFileError?: string | null
+  createShortLinkError?: string | null
 }
 
 const useCreateLinkFormStyles = makeStyles((theme) =>

src/client/user/components/EmptyState/isFiltered.ts

@@ -1,7 +1,10 @@
 import { useSelector } from 'react-redux'
+import { GoGovReduxState } from '../../../app/reducers/types'
 
 export default function useIsFiltered() {
-  const tableConfig = useSelector((state: any) => state.user.tableConfig)
+  const tableConfig = useSelector(
+    (state: GoGovReduxState) => state.user.tableConfig,
+  )
   const { searchText } = tableConfig
   const filtered = Object.values(tableConfig.filter).some((value) => !!value)
   return !!searchText || filtered