58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { isNil, set } from 'lodash-es';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { EditableDescription } from '../components/EditableDescription';
|
|
import { EditableTitle } from '../components/EditableTitle';
|
|
import { Tab } from '../components/Tab';
|
|
import { SchemeView } from '../page-components/scheme/SchemeView';
|
|
import { useScheme, useUpdateScheme } from '../stores/schemes';
|
|
import styles from './SchemeDetail.module.css';
|
|
|
|
export function SchemeDetail() {
|
|
const { id } = useParams();
|
|
const scheme = useScheme(id);
|
|
const navigate = useNavigate();
|
|
const updateScheme = useUpdateScheme(id);
|
|
const [showScheme, setShowScheme] = useState<'light' | 'dark'>('light');
|
|
|
|
const updateTitle = useCallback(
|
|
(newTitle: string) => {
|
|
updateScheme((prev) => {
|
|
set(prev, 'name', newTitle);
|
|
return prev;
|
|
});
|
|
},
|
|
[id],
|
|
);
|
|
const updateDescription = useCallback(
|
|
(newDescription: string | null) => {
|
|
updateScheme((prev) => {
|
|
set(prev, 'description', newDescription);
|
|
return prev;
|
|
});
|
|
},
|
|
[id],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (isNil(scheme)) {
|
|
navigate('../not-found');
|
|
}
|
|
}, [scheme, navigate]);
|
|
|
|
return (
|
|
<div className={styles.scheme_detail_layout}>
|
|
<EditableTitle title={scheme?.name} onChange={updateTitle} />
|
|
<EditableDescription content={scheme?.description} onChange={updateDescription} />
|
|
<Tab
|
|
tabs={[
|
|
{ title: 'Light Scheme', id: 'light' },
|
|
{ title: 'Dark Scheme', id: 'dark' },
|
|
]}
|
|
onActive={(tabId) => setShowScheme(tabId as 'light' | 'dark')}
|
|
/>
|
|
<SchemeView scheme={scheme?.[`${showScheme}Scheme`]} />
|
|
</div>
|
|
);
|
|
}
|