Вынес токены в компонент

components/elements/tokens/index.tsx

@@ -0,0 +1,115 @@
+import styles from './styles.module.css'
+import {Autocomplete, IconButton, TextareaAutosize, TextField} from "@mui/material";
+import {useContext, useEffect, useState} from "react";
+import Context from "../../../context/token";
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import DeleteForeverOutlined from '@mui/icons-material/DeleteForeverOutlined';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Backdrop from '@mui/material/Backdrop';
+import Box from '@mui/material/Box';
+import Grid from "@mui/material/Grid";
+import ConfirmDialog from "../confirm-dialog";
+
+const style = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '100%',
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+export default function Tokens() {
+    const {token, tokens, addToken, deleteToken} = useContext(Context)
+    const [value, setValue] = useState('')
+    const [showAddForm, setShowAddForm] = useState(false)
+    const [showConfirm, setShowConfirm] = useState(false)
+
+    let variants = tokens.map((token, index) => ({
+        ...token,
+        label: token.host
+    }));
+
+    useEffect(() => {
+        setShowAddForm(!token)
+    }, [token])
+
+    console.log('token34344', token);
+    return (
+        <>
+            <Grid container>
+                <Grid item xs={2}>
+                    <Autocomplete
+                        value={{
+                            ...token,
+                            label: token?.host ?? ''
+                        }}
+                        onChange={(event: any, newValue: string | null) => {
+                            console.log('newValue', newValue);
+                            setValue(newValue || '');
+                        }}
+                        disablePortal
+                        options={variants}
+                        renderInput={(params) => <TextField {...params} label="Tokens"/>}
+                    />
+                </Grid>
+                <Grid item xs={1}>
+                    <IconButton onClick={() => setShowAddForm(true)} title={`Add new token`}
+                                aria-label="Add new token">
+                        <AddCircleOutlineOutlinedIcon/>
+                    </IconButton>
+                    <IconButton onClick={() => setShowConfirm(true)} title={`Delete current token`}
+                                aria-label="Add new token">
+                        <DeleteForeverOutlined/>
+                    </IconButton>
+                </Grid>
+            </Grid>
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                open={showAddForm}
+                onClose={() => setShowAddForm(false)}
+                closeAfterTransition
+                slots={{backdrop: Backdrop}}
+                slotProps={{
+                    backdrop: {
+                        timeout: 500,
+                    },
+                }}
+            >
+                <Fade in={showAddForm}>
+                    <Box sx={style}>
+                        <TextareaAutosize
+                            placeholder={`Pass JWT token`}
+                            minRows={25}
+                            style={{width: '100%'}}
+                            onInput={(event: any) => {
+                                if (addToken(event.target.value)) {
+                                    setShowAddForm(false)
+                                }
+                            }}
+                        />
+                    </Box>
+                </Fade>
+            </Modal>
+            <ConfirmDialog
+                title={`Delete curent token`}
+                open={showConfirm}
+                agreeCallback={async () => {
+                    let tokenId = token?.id || null
+                    if (tokenId) {
+                        deleteToken(tokenId)
+                    }
+                    setShowConfirm(false)
+                }}
+
+                closeCallback={() => {setShowConfirm(false)}}>
+                Confirm?
+            </ConfirmDialog>
+        </>
+    )
+}

pages/index.tsx

@@ -1,11 +1,12 @@
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
 import Processes from "../components/elements/processes";
-import {Tabs, Tab, MenuItem, Select, InputLabel, TextareaAutosize, Button} from '@mui/material';
-import {useContext, useEffect, useState} from "react";
+import {Tabs, Tab} from '@mui/material';
+import {useContext, useState} from "react";
 import Commands from "../components/elements/commands";
 import {Provider as TabProvider} from '../context/tab'
 import Context from "../context/token";
+import Tokens from "../components/elements/tokens";
 
 
 export enum TabEnum {
@@ -14,22 +15,10 @@ export enum TabEnum {
 }
 
 export default function Home() {
-    let {token, tokens, addToken} = useContext(Context)
+    let {token} = useContext(Context)
     const [tab, setTab] = useState<TabEnum>(TabEnum.Processes);
     const handleChange = (event: any, tab: number) => setTab(tab)
 
-    // useEffect(() => {
-    //     const storedToken = grabToken()
-    //     setToken(storedToken)
-    //     const storedTokens = grabTokens()
-    //     setTokens(storedTokens)
-    // }, [])
-
-    let onTokenInput = (event: any) => {
-
-    }
-
-    if (!token) {
     return (
         <>
             <Head>
@@ -39,48 +28,7 @@ export default function Home() {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <main className={styles.main}>
-                    <h2>Для дальнейшей работы добавьте JWT токен</h2>
-                    <TextareaAutosize
-                        minRows={20}
-                        style={{ width: '100%' }}
-                        onInput={(event: any) => addToken(event.target.value)}
-                    />
-                </main>
-            </>
-        )
-    }
-
-    return (
-        <>
-            <Head>
-                <title>System monitoring</title>
-                <meta name="description" content="System monitoring service"/>
-                <meta name="viewport" content="width=device-width, initial-scale=1"/>
-                <link rel="icon" href="/favicon.ico"/>
-            </Head>
-            <main className={styles.main}>
-                {tokens.length > 0 && <>
-                    <InputLabel id="tokens">Tokens</InputLabel>
-                    <Select
-                        value={token}
-                        labelId="tokens"
-                        id="demo-simple-select-autowidth"
-                        label="Tokens"
-                        onChange={(event: any) => {
-                            // selectToken(event.target.value)
-                            // const storedToken = grabToken()
-                            // setToken(storedToken)
-                            // if (storedToken) {
-                            //     smClient.baseUrl = storedToken.payload.host
-                            // }
-                        }}
-                    >
-                        {tokens.map((token, index) => (
-                            <MenuItem key={index} value={index}>{token.host}</MenuItem>
-                        ))}
-                    </Select>
-                </>}
-
+                <Tokens />
                 {token && <>
                     <Tabs
                         value={tab}