Merge pull request #621 from systemli/Extract-Fields-from-TickerForm

♻️ Extract Fields from TickerForm

src/components/ticker/TickerModalForm.tsx

@@ -2,7 +2,7 @@ import { Tab, Tabs } from '@mui/material'
 import React, { FC, useState } from 'react'
 import { Ticker } from '../../api/Ticker'
 import TabPanel from '../common/TabPanel'
-import TickerForm from './TickerForm'
+import TickerForm from './form/TickerForm'
 import TickerSocialConnections from './TickerSocialConnections'
 import Modal from '../common/Modal'
 

src/components/ticker/form/Active.tsx

@@ -0,0 +1,21 @@
+import { Checkbox, FormControlLabel } from '@mui/material'
+import { FC } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+interface Props {
+  defaultChecked?: boolean
+}
+
+const Active: FC<Props> = ({ defaultChecked }) => {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      name="active"
+      control={control}
+      render={({ field }) => <FormControlLabel control={<Checkbox {...field} defaultChecked={defaultChecked} />} label="Active" />}
+    />
+  )
+}
+
+export default Active

src/components/ticker/form/Author.tsx

@@ -0,0 +1,32 @@
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { InputAdornment, TextField } from '@mui/material'
+import { FC } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+const Author: FC = () => {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      name="information.author"
+      control={control}
+      render={({ field }) => (
+        <TextField
+          {...field}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FontAwesomeIcon icon={faUser} />
+              </InputAdornment>
+            ),
+          }}
+          label="Author"
+          margin="dense"
+        />
+      )}
+    />
+  )
+}
+
+export default Author

src/components/ticker/form/Bluesky.tsx

@@ -0,0 +1,32 @@
+import { faBluesky } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { InputAdornment, TextField } from '@mui/material'
+import { FC } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+const Bluesky: FC = () => {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      name="information.bluesky"
+      control={control}
+      render={({ field }) => (
+        <TextField
+          {...field}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FontAwesomeIcon icon={faBluesky} />
+              </InputAdornment>
+            ),
+          }}
+          label="Bluesky"
+          margin="dense"
+        />
+      )}
+    />
+  )
+}
+
+export default Bluesky