feat: Text Editor

fix: Switching and submitting does not clear the data in the editor

chore: Component Splitting

Author: Ray-D-Song

packages/client/src/App.tsx

@@ -1,5 +1,7 @@
 import { createTheme, CssBaseline, ThemeProvider } from '@mui/material'
 import Dashboard from './dashboard'
+import KeyContext from './ctx/key'
+import { useState } from 'react'
 
 const darkTheme = createTheme({
   palette: {
@@ -12,10 +14,15 @@ const darkTheme = createTheme({
 })
 
 function App() {
+  const [apiKey, setApiKey] = useState(
+    localStorage.getItem('mockServerKey') || '',
+  )
   return (
     <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Dashboard />
+      <KeyContext.Provider value={{ apiKey, setApiKey }}>
+        <CssBaseline />
+        <Dashboard />
+      </KeyContext.Provider>
     </ThemeProvider>
   )
 }

packages/client/src/components/ApiEditor.tsx renamed to packages/client/src/components/api-editor.tsx

@@ -11,7 +11,7 @@ import {
   InputLabel,
   SelectChangeEvent,
 } from '@mui/material'
-import JsonEditor, { JsonEditorRef, JsonNode } from './response/JsonEditor'
+import JsonEditor, { JsonEditorRef, JsonNode } from './response/json-editor'
 import { toast } from 'react-hot-toast'
 import i18n from '../utils/i18n'
 import { useTranslation } from 'react-i18next'
@@ -74,6 +74,7 @@ function ApiEditor({ type, apiId, onSave, apiKey }: ApiEditorProps) {
         resBody: [],
         resBodyText: '',
       })
+      resBodyRef.current?.clearData()
     }
   }, [type, apiId])
 
@@ -111,6 +112,18 @@ function ApiEditor({ type, apiId, onSave, apiKey }: ApiEditorProps) {
     event.preventDefault()
     apiData.resBody = resBodyRef.current?.getData() || []
     onSave(apiData).then(() => {
+      setApiData({
+        name: '',
+        path: '',
+        method: 'GET',
+        description: '',
+        reqParams: '',
+        reqHeaders: '',
+        resHeaders: '',
+        resResponseType: 'json',
+        resBody: [],
+        resBodyText: '',
+      })
       resBodyRef.current?.clearData()
     })
   }
@@ -185,37 +198,43 @@ function ApiEditor({ type, apiId, onSave, apiKey }: ApiEditorProps) {
         multiline
         rows={4}
       />
-      <Typography variant="h6" className='mb-1'>{t('api-editor.response-data')}</Typography>
-      <div className='flex items-center gap-2'>
-      <Select
-        size="small"
-        labelId="editor-type-label"
-        id="editor-type-select"
-        value={apiData.resResponseType}
-        label={t('api-editor.editor-type')}
-        onChange={e => setApiData({
-          ...apiData,
-          resResponseType: e.target.value
-        })}
-      >
+      <Typography variant="h6" className="mb-1">
+        {t('api-editor.response-data')}
+      </Typography>
+      <div className="flex items-center gap-2">
+        <Select
+          size="small"
+          labelId="editor-type-label"
+          id="editor-type-select"
+          value={apiData.resResponseType}
+          label={t('api-editor.editor-type')}
+          onChange={(e) =>
+            setApiData({
+              ...apiData,
+              resResponseType: e.target.value,
+            })
+          }
+        >
           <MenuItem value="json">{t('api-editor.structured-editor')}</MenuItem>
           <MenuItem value="json-text">{t('api-editor.text-editor')}</MenuItem>
         </Select>
-        <HelpButton helpKey='api-editor.help' />
+        <HelpButton helpKey="api-editor.help" />
       </div>
-      {
-        apiData.resResponseType === 'json'
-         ? <JsonEditor initData={apiData.resBody as JsonNode[]} ref={resBodyRef} />
-         : <ReactShikiEditor
-          language='json'
-          theme='dark'
+      {apiData.resResponseType === 'json' ? (
+        <JsonEditor initData={apiData.resBody as JsonNode[]} ref={resBodyRef} />
+      ) : (
+        <ReactShikiEditor
+          language="json"
+          theme="dark"
           value={apiData.resBodyText}
-          onChange={value => setApiData({
-            ...apiData,
-            resBodyText: value
-          })}
-         />
-      }
+          onChange={(value) =>
+            setApiData({
+              ...apiData,
+              resBodyText: value,
+            })
+          }
+        />
+      )}
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
         <Button variant="contained" type="submit">
           {t(`api-editor.${type === 'update' ? 'update' : 'create'}`)}

packages/client/src/components/FakerSelect.tsx renamed to packages/client/src/components/faker-select.tsx

@@ -0,0 +1,36 @@
+import { IconButton } from '@mui/material'
+import SettingsIcon from '@mui/icons-material/Settings'
+import TranslateIcon from '@mui/icons-material/Translate'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import i18n from '../utils/i18n'
+
+interface HeaderProps {
+  openKeyDialog: () => void
+}
+
+function Header({ openKeyDialog }: HeaderProps) {
+  const toggleLanguage = () => {
+    const newLang = i18n.language === 'en' ? 'zh' : 'en'
+    i18n.changeLanguage(newLang)
+  }
+  return (
+    <div className="w-full h-8 mb-4 z-10 flex items-center justify-end">
+      <IconButton color="inherit" onClick={openKeyDialog}>
+        <SettingsIcon />
+      </IconButton>
+      <IconButton onClick={toggleLanguage} color="inherit">
+        <TranslateIcon />
+      </IconButton>
+      <IconButton
+        href="https://github.com/ray-d-song/faker-server"
+        target="_blank"
+        rel="noopener noreferrer"
+        color="inherit"
+      >
+        <GitHubIcon />
+      </IconButton>
+    </div>
+  )
+}
+
+export default Header

packages/client/src/components/header.tsx

@@ -1,8 +1,8 @@
-import HelpIcon from '@mui/icons-material/Help';
-import { Dialog } from '@mui/material';
-import Button from '@mui/material/Button';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import HelpIcon from '@mui/icons-material/Help'
+import { Dialog } from '@mui/material'
+import Button from '@mui/material/Button'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface HelpButtonProps {
   // i18n key
@@ -15,18 +15,21 @@ function HelpButton({ helpKey }: HelpButtonProps) {
 
   return (
     <>
-      <Button size='small' variant='text' color='primary' onClick={() => {
-        setOpen(true)
-      }}>
+      <Button
+        size="small"
+        variant="text"
+        color="primary"
+        onClick={() => {
+          setOpen(true)
+        }}
+      >
         <HelpIcon />
       </Button>
       <Dialog open={open} onClose={() => setOpen(false)}>
-        <pre className='p-2'>
-          {t(helpKey)}
-        </pre>
+        <pre className="p-2">{t(helpKey)}</pre>
       </Dialog>
     </>
   )
 }
 
-export default HelpButton
+export default HelpButton

packages/client/src/components/help-button.tsx

@@ -1,4 +1,4 @@
-import CommonGrid from './CommonGrid'
+import CommonGrid from './common-grid'
 
 // 常见的 HTTP Headers
 const commonHeaders = [

packages/client/src/components/request/CommonGrid.tsx renamed to packages/client/src/components/request/common-grid.tsx

@@ -1,4 +1,4 @@
-import CommonGrid from './CommonGrid'
+import CommonGrid from './common-grid'
 
 const typeOptions = ['string', 'boolean', 'number', 'array']
 

packages/client/src/components/request/HeadersGrid.tsx renamed to packages/client/src/components/request/headers-grid.tsx

@@ -1,4 +1,4 @@
-import React, { useState, memo, useImperativeHandle, forwardRef } from 'react'
+import { useState, memo, useImperativeHandle, forwardRef } from 'react'
 import { SimpleTreeView, TreeItem } from '@mui/x-tree-view'
 import {
   TextField,
@@ -10,7 +10,7 @@ import {
 } from '@mui/material'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
-import FakerSelect from '../FakerSelect'
+import FakerSelect from '../faker-select'
 import { useTranslation } from 'react-i18next'
 
 export interface JsonNode {

packages/client/src/components/request/QueryGrid.tsx renamed to packages/client/src/components/request/query-grid.tsx

@@ -0,0 +1,49 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  Button,
+} from '@mui/material'
+import { t } from 'i18next'
+import { useContext } from 'react'
+import KeyContext from '../ctx/key'
+
+interface SetKeyDialogProps {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+  onSubmit: () => void
+}
+
+function SetKeyDialog({ visible, setVisible, onSubmit }: SetKeyDialogProps) {
+  const { apiKey, setApiKey } = useContext(KeyContext)
+  const handleKeySubmit = () => {
+    localStorage.setItem('mockServerKey', apiKey)
+    setVisible(false)
+    onSubmit()
+  }
+  return (
+    <Dialog open={visible} onClose={() => setVisible(false)}>
+      <DialogTitle>{t('dashboard.input-key')}</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label={t('dashboard.key')}
+          type="password"
+          fullWidth
+          variant="outlined"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => setVisible(false)}>{t('global.cancel')}</Button>
+        <Button onClick={handleKeySubmit}>{t('global.confirm')}</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default SetKeyDialog