💄 Use MUI for Social Connections

src/components/common/TabPanel.tsx

@@ -0,0 +1,23 @@
+import { Box } from '@mui/material'
+import React, { FC } from 'react'
+
+interface Props {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+const TabPanel: FC<Props> = ({ children, index, value }) => {
+  return (
+    <div
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+    >
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  )
+}
+
+export default TabPanel

src/components/ticker/MastodonCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import React, { FC, useCallback, useState } from 'react'
 import { faMastodon } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useQueryClient } from '@tanstack/react-query'
@@ -14,6 +14,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material'
+import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
@@ -22,6 +23,8 @@ interface Props {
 const MastodonCard: FC<Props> = ({ ticker }) => {
   const { token } = useAuth()
   const { deleteTickerMastodon, putTickerMastodon } = useTickerApi(token)
+  const [open, setOpen] = useState<boolean>(false)
+
   const queryClient = useQueryClient()
 
   const mastodon = ticker.mastodon
@@ -48,22 +51,7 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
     </a>
   )
 
-  return mastodon.connected ? (
-    <Box>
-      <Stack>
-        <Typography component="h5" variant="h5">
-          Mastodon
-        </Typography>
-        <Button
-          size="small"
-          startIcon={<FontAwesomeIcon icon={faMastodon} />}
-          variant="outlined"
-        >
-          Configure
-        </Button>
-      </Stack>
-    </Box>
-  ) : (
+  return (
     <Card>
       <CardContent>
         <Stack
@@ -72,22 +60,57 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
           justifyContent="space-between"
         >
           <Typography component="h5" variant="h5">
-            Mastodon
+            <FontAwesomeIcon icon={faMastodon} /> Mastodon
           </Typography>
-          <Button
-            size="small"
-            startIcon={<FontAwesomeIcon icon={faMastodon} />}
-            variant="outlined"
-          >
+          <Button onClick={() => setOpen(true)} size="small" variant="outlined">
             Configure
           </Button>
         </Stack>
-        <Typography component="p" variant="body2">
-          You are currently not connected to Mastodon. New messages will not be
-          published to your account and old messages can not be deleted anymore.
-        </Typography>
+        {mastodon.connected ? (
+          <Box>
+            <Typography variant="body2">
+              You are connected to Mastodon.
+            </Typography>
+            <Typography variant="body2">Profile: {profileLink}</Typography>
+          </Box>
+        ) : (
+          <Typography component="p" variant="body2">
+            You are currently not connected to Mastodon. New messages will not
+            be published to your account and old messages can not be deleted
+            anymore.
+          </Typography>
+        )}
       </CardContent>
-      <CardActions></CardActions>
+      {mastodon.connected ? (
+        <CardActions>
+          {mastodon.active ? (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPause} />}
+            >
+              Disable
+            </Button>
+          ) : (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPlay} />}
+            >
+              Enable
+            </Button>
+          )}
+          <Button
+            onClick={handleDisconnect}
+            startIcon={<FontAwesomeIcon icon={faBan} />}
+          >
+            Disconnect
+          </Button>
+        </CardActions>
+      ) : null}
+      <MastodonModalForm
+        onClose={() => setOpen(false)}
+        open={open}
+        ticker={ticker}
+      />
     </Card>
   )
 }

src/components/ticker/MastodonForm.tsx

@@ -1,12 +1,14 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import React, { ChangeEvent, FC, FormEvent, useCallback } from 'react'
+import React, { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import {
-  CheckboxProps,
-  Form,
-  InputOnChangeData,
-  Message,
-} from 'semantic-ui-react'
 import { Ticker, TickerMastodonFormData, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 
@@ -19,28 +21,14 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   const mastodon = ticker.mastodon
   const { token } = useAuth()
   const { putTickerMastodon } = useTickerApi(token)
-  const { handleSubmit, setValue } = useForm<TickerMastodonFormData>({
+  const { handleSubmit, register } = useForm<TickerMastodonFormData>({
     defaultValues: {
       active: mastodon.active,
       server: mastodon.server,
     },
   })
   const queryClient = useQueryClient()
 
-  const onChange = useCallback(
-    (
-      e: ChangeEvent | FormEvent,
-      { name, value, checked }: InputOnChangeData | CheckboxProps
-    ) => {
-      if (checked !== undefined) {
-        setValue(name, checked)
-      } else {
-        setValue(name, value)
-      }
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<TickerMastodonFormData> = data => {
     putTickerMastodon(data, ticker).finally(() => {
       queryClient.invalidateQueries(['ticker', ticker.id])
@@ -49,56 +37,73 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   }
 
   return (
-    <Form id="configureMastodon" onSubmit={handleSubmit(onSubmit)}>
-      <Message info>
-        <Message.Header>Information</Message.Header>
-        <Message.Content>
-          You need to create a Application for Ticker in Mastodon. Go to your
-          profile settings in Mastodon. You find a menu point {`"`}Developer
-          {`"`} where you need to create an Application. After saving you see
-          the required secrets and tokens.
-        </Message.Content>
-        <Message.Content>
-          Required Scopes: <code>read write write:media write:statuses</code>
-        </Message.Content>
-      </Message>
-      <Form.Checkbox
-        defaultChecked={mastodon.active}
-        label="Active"
-        name="active"
-        onChange={onChange}
-        toggle
-      />
-      <Form.Input
-        defaultValue={mastodon.server}
-        label="Server"
-        name="server"
-        onChange={onChange}
-        placeholder="https://mastodon.social"
-        required
-      />
-      <Form.Input
-        label="Token"
-        name="token"
-        onChange={onChange}
-        required
-        type="password"
-      />
-      <Form.Input
-        label="Secret"
-        name="secret"
-        onChange={onChange}
-        required
-        type="password"
-      />
-      <Form.Input
-        label="Access Token"
-        name="access_token"
-        onChange={onChange}
-        required
-        type="password"
-      />
-    </Form>
+    <form id="configureMastodon" onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item xs={12}>
+          <Typography>
+            You need to create a Application for Ticker in Mastodon. Go to your
+            profile settings in Mastodon. You find a menu point {`"`}Developer
+            {`"`} where you need to create an Application. After saving you see
+            the required secrets and tokens. Required Scopes:{' '}
+            <code>read write write:media write:statuses</code>
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...register('active')}
+                  defaultChecked={ticker.mastodon.active}
+                />
+              }
+              label="Active"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('server')}
+              defaultValue={ticker.mastodon.server}
+              label="Server"
+              placeholder="https://mastodon.social"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('token')}
+              label="Token"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('secret')}
+              label="Secret"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('access_token')}
+              label="Access Token"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+      </Grid>
+    </form>
   )
 }