garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

move RichCodeEditor to its own component

Browse Source
This commit is contained in:
Athou
2023-06-22 18:39:29 +02:00
parent 90e3044249
commit c1520652f2
2 changed files with 106 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
commafeed-client/src/components/RichCodeEditor.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { useMantineTheme } from "@mantine/core"
import { Editor } from "@monaco-editor/react"
interface RichCodeEditorProps {
height: number | string
language: "css" | "javascript"
value: string
onChange: (value: string | undefined) => void
}
function RichCodeEditor(props: RichCodeEditorProps) {
const theme = useMantineTheme()
const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
return (
<Editor
height={props.height}
defaultLanguage={props.language}
theme={editorTheme}
options={{ minimap: { enabled: false } }}
value={props.value}
onChange={props.onChange}
/>
)
}
export default RichCodeEditor

173
commafeed-client/src/components/settings/CustomCodeSettings.tsx
View File

@@ -1,94 +1,79 @@
import { Trans } from "@lingui/macro"
import { Box, Button, Group, Input, Stack, useMantineTheme } from "@mantine/core"
import { useForm } from "@mantine/form"
import { Editor } from "@monaco-editor/react"
import { client, errorToStrings } from "app/client"
import { redirectToSelectedSource } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { Alert } from "components/Alert"
import { useEffect } from "react"
import { useAsyncCallback } from "react-async-hook"
import { TbDeviceFloppy } from "react-icons/tb"
interface FormData {
customCss: string
customJs: string
}
export function CustomCodeSettings() {
const settings = useAppSelector(state => state.user.settings)
const theme = useMantineTheme()
const dispatch = useAppDispatch()
const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
const form = useForm<FormData>()
const { setValues } = form
const saveCustomCode = useAsyncCallback(
async (d: FormData) => {
if (!settings) return
await client.user.saveSettings({
...settings,
customCss: d.customCss,
customJs: d.customJs,
})
},
{
onSuccess: () => {
window.location.reload()
},
}
)
useEffect(() => {
if (!settings) return
setValues({
customCss: settings.customCss,
customJs: settings.customJs,
})
}, [setValues, settings])
return (
<>
{saveCustomCode.error && (
<Box mb="md">
<Alert messages={errorToStrings(saveCustomCode.error)} />
</Box>
)}
<form onSubmit={form.onSubmit(saveCustomCode.execute)}>
<Stack>
<Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
<Editor
height="30vh"
defaultLanguage="css"
theme={editorTheme}
options={{ minimap: { enabled: false } }}
{...form.getInputProps("customCss")}
/>
</Input.Wrapper>
<Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
<Editor
height="30vh"
defaultLanguage="javascript"
theme={editorTheme}
options={{ minimap: { enabled: false } }}
{...form.getInputProps("customJs")}
/>
</Input.Wrapper>
<Group>
<Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
<Trans>Save</Trans>
</Button>
</Group>
</Stack>
</form>
</>
)
}
import { Trans } from "@lingui/macro"
import { Box, Button, Group, Input, Stack } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
import { redirectToSelectedSource } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
import { Alert } from "components/Alert"
import RichCodeEditor from "components/RichCodeEditor"
import { useEffect } from "react"
import { useAsyncCallback } from "react-async-hook"
import { TbDeviceFloppy } from "react-icons/tb"
interface FormData {
customCss: string
customJs: string
}
export function CustomCodeSettings() {
const settings = useAppSelector(state => state.user.settings)
const dispatch = useAppDispatch()
const form = useForm<FormData>()
const { setValues } = form
const saveCustomCode = useAsyncCallback(
async (d: FormData) => {
if (!settings) return
await client.user.saveSettings({
...settings,
customCss: d.customCss,
customJs: d.customJs,
})
},
{
onSuccess: () => {
window.location.reload()
},
}
)
useEffect(() => {
if (!settings) return
setValues({
customCss: settings.customCss,
customJs: settings.customJs,
})
}, [setValues, settings])
return (
<>
{saveCustomCode.error && (
<Box mb="md">
<Alert messages={errorToStrings(saveCustomCode.error)} />
</Box>
)}
<form onSubmit={form.onSubmit(saveCustomCode.execute)}>
<Stack>
<Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
<RichCodeEditor height="30vh" language="css" {...form.getInputProps("customCss")} />
</Input.Wrapper>
<Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
<RichCodeEditor height="30vh" language="javascript" {...form.getInputProps("customJs")} />
</Input.Wrapper>
<Group>
<Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
<Trans>Save</Trans>
</Button>
</Group>
</Stack>
</form>
</>
)
}