Modern react (#132)

* UI, utils

* remaining files

* removing unused import

* lint

Eplant/UI/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useId, useState } from 'react'
 
 import { KeyboardArrowDown } from '@mui/icons-material'
 import {
@@ -54,17 +54,17 @@ const StyledMenu = styled((props: MenuProps) => (
 export default function Dropdown({
   options,
   ...buttonProps
-}: { options: React.ReactNode[] } & ButtonProps) {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+}: { options: ReactNode[] } & ButtonProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget)
   }
   const handleClose = () => {
     setAnchorEl(null)
   }
-  const buttonId = React.useId()
-  const menuId = React.useId()
+  const buttonId = useId()
+  const menuId = useId()
 
   return (
     <div>

Eplant/UI/GeneticElementComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useRef, useState } from 'react'
+import { MouseEvent, useEffect, useId, useRef, useState } from 'react'
 
 import GeneticElement from '@eplant/GeneticElement'
 import { DragIndicator } from '@mui/icons-material'
@@ -265,7 +265,7 @@ export default function GeneticElementComponent({
     </Paper>
   )
 
-  function openMenu(e: React.MouseEvent<HTMLElement>) {
+  function openMenu(e: MouseEvent<HTMLElement>) {
     setMenuEl(e.currentTarget)
     setMenuOpen(true)
   }

Eplant/UI/Layout/ViewContainer/LoadingPage.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react'
+import { SVGProps } from 'react'
 
 import GeneticElement from '@eplant/GeneticElement'
 import { View } from '@eplant/View'

Eplant/UI/Layout/ViewContainer/ViewOptions.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useTransition } from 'react'
 
 import GeneticElement from '@eplant/GeneticElement'
 import Dropdown from '@eplant/UI/Dropdown'
@@ -18,7 +18,7 @@ export default function ViewOptions<T, S, A>({
   state?: S
   dispatch: ViewDispatch<A>
 }) {
-  const [transitioning, startTransition] = React.useTransition()
+  const [transitioning, startTransition] = useTransition()
   if (!view.actions) return <></>
   return (
     <>

Eplant/UI/Layout/ViewContainer/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 
 import { useConfig } from '@eplant/config'
 import GeneticElement from '@eplant/GeneticElement'
@@ -48,15 +48,15 @@ export function ViewContainer<T, S, A>({
 } & BoxProps) {
   const { activeData, error, loading, loadingAmount, dispatch, state } =
     useViewData(view, gene)
-  const idLabel = React.useId()
-  const selectId = React.useId()
+  const idLabel = useId()
+  const selectId = useId()
   const [printing, setPrinting] = usePrinting()
 
-  const [viewingCitations, setViewingCitations] = React.useState(false)
+  const [viewingCitations, setViewingCitations] = useState(false)
 
   const { userViews, views, genericViews } = useConfig()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (printing) {
       setTimeout(() => {
         window.print()
@@ -65,7 +65,7 @@ export function ViewContainer<T, S, A>({
     }
   }, [printing])
 
-  const topBar = React.useMemo(
+  const topBar = useMemo(
     () => (
       <AppBar
         variant='elevation'

Eplant/UI/Layout/ViewNotSupported.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { SVGProps } from 'react'
 
 import GeneticElement from '@eplant/GeneticElement'

Eplant/UI/LeftNav/Collections.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef, useState } from 'react'
+import { MouseEvent, useEffect, useId, useRef, useState } from 'react'
 
 import {
   DndContext,
@@ -317,7 +317,7 @@ export function Collection({
     </Stack>
   )
 
-  function openMenu(e: React.MouseEvent<HTMLElement>) {
+  function openMenu(e: MouseEvent<HTMLElement>) {
     setMenuEl(e.currentTarget)
     setMenuOpen(true)
   }

Eplant/UI/LeftNav/GeneSearch/SearchBar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { debounce } from 'lodash'
 
 import AddIcon from '@mui/icons-material/Add'
@@ -27,11 +27,11 @@ export default function SearchBar(props: {
   sx?: SxProps<Theme>
   inputProps?: TextFieldProps
 }) {
-  const [value, setValue] = React.useState<string[]>([])
-  const [inputValue, setInputValue] = React.useState<string>('')
-  const [options, setOptions] = React.useState<string[]>([])
-  const [focused, setFocused] = React.useState<boolean>(false)
-  const updateOptions = React.useRef<(text: string) => void>()
+  const [value, setValue] = useState<string[]>([])
+  const [inputValue, setInputValue] = useState<string>('')
+  const [options, setOptions] = useState<string[]>([])
+  const [focused, setFocused] = useState<boolean>(false)
+  const updateOptions = useRef<(text: string) => void>()
 
   function handleChange(input: string[]) {
     if (input.length > 0) {
@@ -42,15 +42,15 @@ export default function SearchBar(props: {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateOptions.current = debounce(async (newValue) => {
       const newoptions = await props.complete?.(newValue)
       setOptions(newoptions?.length ? newoptions : [])
     }, 100)
   }, [props.complete])
-  const id = React.useId()
+  const id = useId()
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateOptions.current?.(inputValue)
   }, [inputValue])
 

Eplant/UI/LeftNav/GeneSearch/index.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import GeneticElement, { Species } from '@eplant/GeneticElement'
 import { useSpecies } from '@eplant/state'
-import { Button, MenuItem, styled, TextField } from '@mui/material'
+import { Button, styled } from '@mui/material'
 import Stack from '@mui/material/Stack'
 
 import SearchBar from './SearchBar'
@@ -26,16 +26,17 @@ export function SearchGroup({
 }: {
   addGeneticElements: (gene: GeneticElement[]) => void
 }) {
-  const [species, setSpecies] = React.useState<Species>()
-  const [speciesList, setSpeciesList] = useSpecies()
-  const [searchingByExpression, setSearchingByExpression] =
-    React.useState<boolean>(false)
-  const [searchingByPhenotype, setSearchingByPhenotype] =
-    React.useState<boolean>(false)
+  const [species, setSpecies] = useState<Species>()
+
+  // Commedned out until we get multi-species support
+  // const [searchingByExpression, setSearchingByExpression] = useState<boolean>(false)
+  // const [searchingByPhenotype, setSearchingByPhenotype] = useState<boolean>(false)
+  // const [speciesList, setSpeciesList] = useSpecies()
+
+  // useEffect(() => {
+  //   if (!species && speciesList.length) setSpecies(speciesList[0])
+  // }, [species])
 
-  React.useEffect(() => {
-    if (!species && speciesList.length) setSpecies(speciesList[0])
-  }, [species])
   return (
     <Stack direction='column' spacing={2}>
       {/* Species selector */}

Eplant/UI/LeftNav/index.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import _ from 'lodash'
 
 import GeneticElement from '@eplant/GeneticElement'
@@ -13,13 +12,7 @@ import ArrowLeft from '@mui/icons-material/ArrowLeft'
 import ArrowRight from '@mui/icons-material/ArrowRight'
 import DarkModeIcon from '@mui/icons-material/DarkMode'
 import SearchIcon from '@mui/icons-material/Search'
-import {
-  Box,
-  FormControlLabel,
-  FormGroup,
-  Switch,
-  useTheme,
-} from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import Stack from '@mui/material/Stack'
 
 import { LogoWithText } from '../Logo'
@@ -47,7 +40,7 @@ export function LeftNav(props: {
 
   const setActiveGeneId = useSetActiveGeneId()
 
-  React.useEffect(() => {
+  useEffect(() => {
     const uniq = _.uniqBy(geneticElements, (g) => g.id)
     if (uniq.length != geneticElements.length) setGeneticElements(uniq)
   }, [geneticElements])

Eplant/UI/Modal.tsx

@@ -1,19 +1,19 @@
-import React from 'react'
+import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react'
 
 import { Dialog, Slide } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 
-const Transition = React.forwardRef(function Transition(
+const Transition = forwardRef(function Transition(
   props: TransitionProps & {
-    children: React.ReactElement<any, any>
+    children: ReactElement<any, any>
   },
-  ref: React.Ref<unknown>
+  ref: Ref<unknown>
 ) {
   return <Slide direction='up' ref={ref} {...props} />
 })
 
 export default function Modal(
-  props: React.PropsWithChildren<{
+  props: PropsWithChildren<{
     open: boolean
     onClose: () => void
   }>

Eplant/UI/OptionsButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { MouseEvent } from 'react'
 
 import { MoreVert } from '@mui/icons-material'
 import { IconButton, IconButtonProps } from '@mui/material'
@@ -7,7 +7,7 @@ export default function OptionsButton({
   onClick,
   ...props
 }: {
-  onClick: (e: React.MouseEvent<HTMLElement>) => void
+  onClick: (e: MouseEvent<HTMLElement>) => void
 } & IconButtonProps) {
   return (
     <IconButton onClick={onClick} {...props}>

Eplant/UI/Sidebar.tsx

@@ -1,9 +1,4 @@
-import { useState } from 'react'
-
-import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft'
-import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight'
 import { Container } from '@mui/material'
-import { Box } from '@mui/material'
 
 import SerializedGeneticElement from '../GeneticElement'
 import { useSidebarState } from '../state'
@@ -18,7 +13,7 @@ export const collapsedSidebarWidth = 100
 
 export default function Sidebar() {
   const [activeGeneId, setActiveGeneId] = useActiveGeneId()
-  const [isCollapse, setIsCollapse] = useSidebarState()
+  const [isCollapse] = useSidebarState()
   return (
     <div>
       <ResponsiveDrawer

Eplant/config.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import { createContext, useContext } from 'react'
 
 import CellEFP from './views/CellEFP'
 import DebugView from './views/DebugView'
@@ -45,6 +45,6 @@ export const defaultConfig = {
   defaultSpecies: '',
 }
 
-export const Config = React.createContext<EplantConfig>(defaultConfig)
+export const Config = createContext<EplantConfig>(defaultConfig)
 
-export const useConfig = () => React.useContext(Config)
+export const useConfig = () => useContext(Config)

Eplant/util/ErrorBoundary/index.tsx

@@ -1,9 +1,9 @@
-import React, { ErrorInfo } from 'react'
-export default class ErrorBoundary extends React.Component<
-  React.PropsWithChildren,
+import { Component, ErrorInfo, PropsWithChildren } from 'react'
+export default class ErrorBoundary extends Component<
+  PropsWithChildren,
   { hasError: boolean }
 > {
-  constructor(props: React.PropsWithChildren) {
+  constructor(props: PropsWithChildren) {
     super(props)
     this.state = { hasError: false }
   }

Eplant/util/PanZoom/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { Box, BoxProps } from '@mui/material'
 
@@ -17,15 +17,15 @@ export default function PanZoom({
   transform: Transform
   onTransformChange: (transform: Transform) => void
 }) {
-  const [dragStart, setDragStart] = React.useState<{
+  const [dragStart, setDragStart] = useState<{
     click: Point
     offset: Point
   } | null>(null)
 
   const { offset, zoom } = transform
-  const containerRef = React.useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const listener = (e: WheelEvent) => {
       e.stopPropagation()
       e.preventDefault()