language select working

This commit is contained in:
lingdocs 2022-02-10 11:34:15 +04:00
parent e7701f4b7d
commit 243c1a8c58
3 changed files with 13 additions and 7 deletions

View File

@ -58,9 +58,8 @@ function BookInfoInput({ handleSubmit }: { handleSubmit: (info: { frontmatter: F
function handleLanguageChange(lang: string | null) { function handleLanguageChange(lang: string | null) {
setState(s => { setState(s => {
if (!lang) { if (!lang) {
delete s.lang; const { lang, language, ...rest } = s;
delete s.language; return rest;
return s
} }
return { return {
...s, ...s,
@ -80,8 +79,6 @@ function BookInfoInput({ handleSubmit }: { handleSubmit: (info: { frontmatter: F
cover, cover,
}); });
} }
console.log(state);
console.log("will render");
return <div style={{ maxWidth: "500px" }}> return <div style={{ maxWidth: "500px" }}>
<div className="my-3"> <div className="my-3">
<label htmlFor="cover-file" className="form-label">cover image <span className="text-muted">(.jpg or .png less than 5mb)</span></label> <label htmlFor="cover-file" className="form-label">cover image <span className="text-muted">(.jpg or .png less than 5mb)</span></label>

View File

@ -13,13 +13,14 @@ const languageOptions = [
]; ];
function LanguageSelect({ value, onChange }: { function LanguageSelect({ value, onChange }: {
value: string | null, value: string | undefined,
onChange: (language: string | null) => void, onChange: (language: string | null) => void,
}) { }) {
const [showingOther, setShowingOther] = useState<boolean>(false); const [showingOther, setShowingOther] = useState<boolean>(false);
function handleChange(o: { value: string, label: string }) { function handleChange(o: { value: string, label: string }) {
if (!o) { if (!o) {
onChange(null); onChange(null);
if (showingOther) setShowingOther(false);
} else if (o.value === "other") { } else if (o.value === "other") {
setShowingOther(true); setShowingOther(true);
onChange(null); onChange(null);
@ -34,7 +35,7 @@ function LanguageSelect({ value, onChange }: {
className="basic-single" className="basic-single"
classNamePrefix="select" classNamePrefix="select"
isClearable={true} isClearable={true}
value={typeof value === "number" ? null : languageOptions.find(o => value === o.value)} value={languageOptions.find(o => value === o.value)}
isSearchable isSearchable
// @ts-ignore // @ts-ignore
onChange={handleChange} onChange={handleChange}

View File

@ -20,6 +20,14 @@ const Home: NextPage = () => {
} }
function handleSubmit(info: { frontmatter: Frontmatter, cover: File | undefined }) { function handleSubmit(info: { frontmatter: Frontmatter, cover: File | undefined }) {
const content = mdRef.current.value as string; const content = mdRef.current.value as string;
if (!content) {
alert("Please enter some content for the book");
return;
}
if (!info.frontmatter.title) {
alert("Please enter a title for the book");
return;
}
bookRequest({ bookRequest({
...info, ...info,
content, content,