🚨(demo) fix demo lint
Due to previous changes, let's fix the lint for this app.
This commit is contained in:
@@ -45,11 +45,12 @@ const preferredScheme = window.matchMedia("(prefers-color-scheme: dark)")
|
|||||||
export const App = () => {
|
export const App = () => {
|
||||||
const [locale] = useState("en-US");
|
const [locale] = useState("en-US");
|
||||||
const [theme, setTheme] = useState<Theme>(
|
const [theme, setTheme] = useState<Theme>(
|
||||||
(sessionStorage.getItem("c-theme") as Theme | null) ?? preferredScheme.theme
|
(sessionStorage.getItem("c-theme") as Theme | null) ??
|
||||||
|
preferredScheme.theme,
|
||||||
);
|
);
|
||||||
const [variant, setVariant] = useState<Variant>(
|
const [variant, setVariant] = useState<Variant>(
|
||||||
(sessionStorage.getItem("c-variant") as Variant | null) ??
|
(sessionStorage.getItem("c-variant") as Variant | null) ??
|
||||||
preferredScheme.variant
|
preferredScheme.variant,
|
||||||
);
|
);
|
||||||
const activeTheme = useMemo(() => THEMES[theme][variant], [theme, variant]);
|
const activeTheme = useMemo(() => THEMES[theme][variant], [theme, variant]);
|
||||||
const modal = useModal();
|
const modal = useModal();
|
||||||
@@ -97,7 +98,7 @@ export const App = () => {
|
|||||||
setTheme(e.target.value as Theme);
|
setTheme(e.target.value as Theme);
|
||||||
if (THEMES[e.target.value as Theme][variant] === undefined) {
|
if (THEMES[e.target.value as Theme][variant] === undefined) {
|
||||||
setVariant(
|
setVariant(
|
||||||
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT
|
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -112,7 +113,7 @@ export const App = () => {
|
|||||||
}
|
}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setVariant(
|
setVariant(
|
||||||
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT
|
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
disabled={
|
disabled={
|
||||||
|
|||||||
@@ -55,7 +55,9 @@ export const Create = (props: PageProps) => {
|
|||||||
>
|
>
|
||||||
<form className="page__create clr-gray-900" onSubmit={submit}>
|
<form className="page__create clr-gray-900" onSubmit={submit}>
|
||||||
<div className="page__create__group">
|
<div className="page__create__group">
|
||||||
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">General Information</h3>
|
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">
|
||||||
|
General Information
|
||||||
|
</h3>
|
||||||
<Alert type={VariantType.INFO}>
|
<Alert type={VariantType.INFO}>
|
||||||
You are about to add a new character to the collection
|
You are about to add a new character to the collection
|
||||||
</Alert>
|
</Alert>
|
||||||
@@ -91,7 +93,9 @@ export const Create = (props: PageProps) => {
|
|||||||
<Checkbox name="is_guest" label="This character is a guest" />
|
<Checkbox name="is_guest" label="This character is a guest" />
|
||||||
</div>
|
</div>
|
||||||
<div className="page__create__group mt-l">
|
<div className="page__create__group mt-l">
|
||||||
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">Bio</h3>
|
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">
|
||||||
|
Bio
|
||||||
|
</h3>
|
||||||
<Alert type={VariantType.WARNING}>
|
<Alert type={VariantType.WARNING}>
|
||||||
Please be exhaustive, every detail counts!
|
Please be exhaustive, every detail counts!
|
||||||
</Alert>
|
</Alert>
|
||||||
@@ -127,7 +131,9 @@ export const Create = (props: PageProps) => {
|
|||||||
<Switch name="is_public" label="Make this character public" />
|
<Switch name="is_public" label="Make this character public" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h4 className="clr-content-semantic-neutral-primary">Add pictures</h4>
|
<h4 className="clr-content-semantic-neutral-primary">
|
||||||
|
Add pictures
|
||||||
|
</h4>
|
||||||
|
|
||||||
<div className="mt-s">
|
<div className="mt-s">
|
||||||
<FileUploader
|
<FileUploader
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
useToastProvider,
|
useToastProvider,
|
||||||
VariantType,
|
VariantType,
|
||||||
useModals,
|
useModals,
|
||||||
defaultTokens,
|
|
||||||
} from "@openfun/cunningham-react";
|
} from "@openfun/cunningham-react";
|
||||||
import { PageProps } from "./App";
|
import { PageProps } from "./App";
|
||||||
import { database } from "./Character";
|
import { database } from "./Character";
|
||||||
@@ -43,14 +42,14 @@ export const Home = ({ modal }: { modal: PageProps }) => {
|
|||||||
|
|
||||||
// Set the pagination length.
|
// Set the pagination length.
|
||||||
pagination.setPagesCount(
|
pagination.setPagesCount(
|
||||||
Math.ceil(sortedDatabase.length / pagination.pageSize)
|
Math.ceil(sortedDatabase.length / pagination.pageSize),
|
||||||
);
|
);
|
||||||
// Select the rows to display on the current page.
|
// Select the rows to display on the current page.
|
||||||
setRows(
|
setRows(
|
||||||
sortedDatabase.slice(
|
sortedDatabase.slice(
|
||||||
(pagination.page - 1) * pagination.pageSize,
|
(pagination.page - 1) * pagination.pageSize,
|
||||||
pagination.page * pagination.pageSize
|
pagination.page * pagination.pageSize,
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}, [pagination.page, sortModel, modal.isOpen, refresh]);
|
}, [pagination.page, sortModel, modal.isOpen, refresh]);
|
||||||
@@ -138,13 +137,13 @@ export const Home = ({ modal }: { modal: PageProps }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const index = database.findIndex(
|
const index = database.findIndex(
|
||||||
(character) => character.id === params.row.id
|
(character) => character.id === params.row.id,
|
||||||
);
|
);
|
||||||
database.splice(index, 1);
|
database.splice(index, 1);
|
||||||
setRefresh(refresh + 1);
|
setRefresh(refresh + 1);
|
||||||
toast(
|
toast(
|
||||||
"Character deleted successfully",
|
"Character deleted successfully",
|
||||||
VariantType.WARNING
|
VariantType.WARNING,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
icon={<span className="material-icons">delete</span>}
|
icon={<span className="material-icons">delete</span>}
|
||||||
|
|||||||
Reference in New Issue
Block a user