Format code

src/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Suspense, lazy, useState } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -12,8 +12,8 @@ import SettingsProvider from './context/SettingsProvider'
 
 import Wrapper from './Wrapper'
 
-const Weather = React.lazy(() => import('./components/Weather'))
-const Preferences = React.lazy(() => import('./components/Preferences'))
+const Weather = lazy(() => import('./components/Weather'))
+const Preferences = lazy(() => import('./components/Preferences'))
 
 const Layout = styled.div`
   position: relative;
@@ -26,8 +26,8 @@ const Main = styled.div<{ menuOpen: boolean }>`
   display: ${props => (props.menuOpen ? 'none' : 'block')};
 `
 
-const App = (): JSX.Element => {
-  const [menuOpen, setMenuOpen] = React.useState(false)
+const App = () => {
+  const [menuOpen, setMenuOpen] = useState(false)
 
   return (
     <SettingsProvider>
@@ -36,16 +36,16 @@ const App = (): JSX.Element => {
         <Layout>
           <DateTime />
           <Main menuOpen={menuOpen}>
-            <React.Suspense fallback={<Loading />}>
+            <Suspense fallback={<Loading />}>
               <Weather />
-            </React.Suspense>
+            </Suspense>
             <Greeting />
             <Search />
             <Bookmarks />
           </Main>
-          <React.Suspense fallback={<Loading />}>
+          <Suspense fallback={<Loading />}>
             <Preferences menuOpen={menuOpen} />
-          </React.Suspense>
+          </Suspense>
         </Layout>
       </Wrapper>
     </SettingsProvider>

src/Wrapper.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { ReactNode } from 'react'
+import { useContext } from 'react'
 
 import { Global, ThemeProvider } from '@emotion/react'
 
@@ -11,11 +12,11 @@ import { globalStyles } from './theme'
 const matchMediaFallback = (): boolean =>
   window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 
-const Wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
+const Wrapper = ({ children }: { children: ReactNode }) => {
   const {
     settings: { prefersDarkMode = matchMediaFallback() },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   const theme = useTheme()
 

src/components/Bookmark.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext, useState } from 'react'
 
 import styled from '@emotion/styled'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
@@ -45,11 +45,11 @@ type Props = {
   bookmark: BookmarkLink
 }
 
-const Bookmark = ({ bookmark }: Props): JSX.Element => {
-  const [error, setError] = React.useState(false)
+const Bookmark = ({ bookmark }: Props) => {
+  const [error, setError] = useState(false)
   const {
     settings: { showFavicons = true },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style href={bookmark.url} key={bookmark.id}>

src/components/Bookmarks.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink, BookmarkLinks } from '../types'
+import type { BookmarkLink } from '../types'
 
 import { SettingsContext } from '../context/SettingsProvider'
 
@@ -36,7 +36,7 @@ const Links = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 `
 
-const getUniqueCategories = (bookmarks: BookmarkLinks) => [
+const getUniqueCategories = (bookmarks: BookmarkLink[]) => [
   ...new Set(
     bookmarks
       ?.map(bookmark => bookmark.category)
@@ -45,17 +45,17 @@ const getUniqueCategories = (bookmarks: BookmarkLinks) => [
   ),
 ]
 
-const mapItems = (bookmarks: BookmarkLinks) =>
+const mapItems = (bookmarks: BookmarkLink[]) =>
   bookmarks
     ?.sort((a: BookmarkLink, b: BookmarkLink) => a.label.localeCompare(b.label))
     .map((bookmark: BookmarkLink) => (
       <Bookmark key={bookmark.url} bookmark={bookmark} />
     ))
 
-const Bookmarks = (): JSX.Element | null => {
+const Bookmarks = () => {
   const {
     settings: { bookmarks },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   if (!bookmarks) {
     return null

src/components/DarkModeToggle.tsx

@@ -35,7 +35,7 @@ type Props = {
   toggleDarkMode: () => void
 }
 
-const DarkModeToggle = ({ isDarkMode, toggleDarkMode }: Props): JSX.Element => (
+const DarkModeToggle = ({ isDarkMode, toggleDarkMode }: Props) => (
   <Style>
     <ToggleArea checked={!!isDarkMode} onChange={toggleDarkMode}>
       <FontAwesomeIcon className="dark" icon={faMoon} fixedWidth />

src/components/DateTime.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import { format } from 'date-fns'
 
@@ -16,10 +16,10 @@ const Style = styled.div`
   font-weight: 600;
 `
 
-const DateTime = (): JSX.Element => {
-  const [time, setTime] = React.useState(new Date())
+const DateTime = () => {
+  const [time, setTime] = useState(new Date())
 
-  React.useEffect(() => {
+  useEffect(() => {
     const timer = setTimeout(() => {
       setTime(new Date())
     }, 1000)

src/components/Greeting.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -10,10 +10,10 @@ const Style = styled.h1`
   line-height: 1em;
 `
 
-const Greeting = (): JSX.Element => {
+const Greeting = () => {
   const {
     settings: { name },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style>

src/components/Loading.tsx

@@ -13,7 +13,7 @@ const Style = styled.h1`
   }
 `
 
-const Loading = (): JSX.Element => (
+const Loading = () => (
   <Style>
     <FontAwesomeIcon icon={faSpinner} spin fixedWidth />
   </Style>

src/components/Menu.tsx

@@ -25,7 +25,7 @@ const Menu = ({
 }: {
   menuOpen: boolean
   onClick: () => void
-}): JSX.Element => (
+}) => (
   <Style menuOpen={menuOpen} onClick={onClick}>
     <FontAwesomeIcon icon={faBars} size="2x" />
   </Style>

src/components/Preferences/BackupRestore.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { ChangeEvent } from 'react'
+import { useContext } from 'react'
 
 import { setMany, clear } from 'idb-keyval'
 
@@ -27,10 +28,10 @@ const Style = styled.div`
   }
 `
 
-const BackupRestore = (): JSX.Element => {
-  const { settings, setSettings, store } = React.useContext(SettingsContext)
+const BackupRestore = () => {
+  const { settings, setSettings, store } = useContext(SettingsContext)
 
-  const onChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = async (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       const newSettings = (await readJsonFile(
         event.target.files[0]

src/components/Preferences/BookmarkRow.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { useEffect, type KeyboardEvent, useState, useContext } from 'react'
 
 import axios from 'axios'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink, BookmarkLinks } from '../../types'
+import type { BookmarkLink } from '../../types'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
@@ -38,16 +38,16 @@ type Props = {
   bookmark?: BookmarkLink
 }
 
-const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
-  const [label, setLabel] = React.useState(bookmark?.label ?? '')
-  const [url, setUrl] = React.useState(bookmark?.url ?? '')
-  const [category, setCategory] = React.useState(bookmark?.category ?? '')
-  const [mode, setMode] = React.useState('remove')
+const BookmarkRow = ({ bookmark }: Props) => {
+  const [label, setLabel] = useState(bookmark?.label ?? '')
+  const [url, setUrl] = useState(bookmark?.url ?? '')
+  const [category, setCategory] = useState(bookmark?.category ?? '')
+  const [mode, setMode] = useState('remove')
 
   const {
     settings: { bookmarks },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   const isExists = () => !!bookmarks?.find((f: BookmarkLink) => f.url === url)
 
@@ -79,7 +79,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
       const newBookmark = { id: Date.now(), label, url, icon, category }
 
       if (bookmarks !== undefined) {
-        setSetting<BookmarkLinks>('bookmarks', [...bookmarks, newBookmark])
+        setSetting<BookmarkLink[]>('bookmarks', [...bookmarks, newBookmark])
       } else {
         setSetting('bookmarks', [newBookmark])
       }
@@ -113,7 +113,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
     setMode('remove')
   }
 
-  const onEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const onEnter = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       switch (mode) {
         case 'update':
@@ -129,7 +129,7 @@ const BookmarkRow = ({ bookmark }: Props): JSX.Element => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     const determineMode = () => {
       if (!bookmark) {
         setMode('add')

src/components/Preferences/Bookmarks.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import type { BookmarkLink } from '../../types'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
 import BookmarkRow from './BookmarkRow'
 
-const Bookmarks = (): JSX.Element => {
+const Bookmarks = () => {
   const {
     settings: { bookmarks },
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <>

src/components/Preferences/Button.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+import type { MouseEvent } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import styled from '@emotion/styled'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
@@ -47,7 +48,7 @@ const Style = styled.button<{ isDisabled?: boolean }>`
 `
 
 type Props = {
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
   disabled?: boolean
   className?: 'warning' | 'danger' | 'success'
   children: string
@@ -60,11 +61,11 @@ const Button = ({
   className,
   children,
   setClick = true,
-}: Props): JSX.Element => {
-  const [clicked, setClicked] = React.useState(false)
-  const { settings } = React.useContext(SettingsContext)
+}: Props) => {
+  const [clicked, setClicked] = useState(false)
+  const { settings } = useContext(SettingsContext)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setClicked(false)
   }, [settings])
 

src/components/Preferences/Name.tsx

@@ -1,20 +1,20 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
 import TextInput from './TextInput'
 
-const Name = (): JSX.Element => {
+const Name = () => {
   const {
     settings: { name },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <>
       <label>Name</label>
       <TextInput
-        value={name !== undefined ? name : ''}
+        value={name ?? ''}
         placeholder="Enter your name"
         onChange={e => setSetting('name', e.target.value)}
       />

src/components/Preferences/QuickSettings.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
@@ -10,11 +10,11 @@ const Style = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 `
 
-const QuickSettings = (): JSX.Element => {
+const QuickSettings = () => {
   const {
     settings: { weather = false, showFavicons = true },
     setSetting,
-  } = React.useContext(SettingsContext)
+  } = useContext(SettingsContext)
 
   return (
     <Style>