diff --git a/client/src/components/buttons/Button.tsx b/client/src/components/buttons/Button.tsx index ac5792a6c..563617211 100644 --- a/client/src/components/buttons/Button.tsx +++ b/client/src/components/buttons/Button.tsx @@ -26,7 +26,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core"; import { faSyncAlt } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; -import { Fragment, ReactNode, useEffect, useRef, useState } from "react"; +import { Fragment, ReactNode, useRef, useState } from "react"; import { ArrowRight, ChevronDown, @@ -42,7 +42,6 @@ import { Col, DropdownMenu, DropdownToggle, - Tooltip, UncontrolledDropdown, UncontrolledTooltip, } from "reactstrap"; @@ -449,29 +448,16 @@ interface EditSaveButtonProps { "data-cy"?: string; disabled?: boolean; toggle: () => void; - tooltipMessage?: string | null; - checksBeforeSave?: () => boolean; - checksBeforeSaveTooltipMessage?: () => string | null; } function EditSaveButton({ "data-cy": dataCy, disabled, toggle, - tooltipMessage = null, - checksBeforeSave = () => false, - checksBeforeSaveTooltipMessage = () => null, }: EditSaveButtonProps) { - const [localDisabled, setLocalDisabled] = useState(disabled); const ref = useRef(null); - const saveButtonRef = useRef(null); const [editMode, setEditMode] = useState(false); - const [checksBeforeSaveTooltip, setChecksBeforeSaveTooltip] = useState(false); - useEffect(() => { - setLocalDisabled(disabled); - }, [disabled]); - - if (!editMode && localDisabled) + if (disabled) return ( - {checksBeforeSaveTooltip && localDisabled ? ( - - {checksBeforeSaveTooltipMessage()} - - ) : tooltipMessage ? ( - - {tooltipMessage} - - ) : null} ); diff --git a/client/src/components/form-field/TextAreaInput.tsx b/client/src/components/form-field/TextAreaInput.tsx index b997581bc..c3dd95fce 100644 --- a/client/src/components/form-field/TextAreaInput.tsx +++ b/client/src/components/form-field/TextAreaInput.tsx @@ -111,11 +111,6 @@ interface TextAreaInputProps { name: string; register: UseFormRegisterReturn; required?: boolean; - wordCount?: (stats: { - exact: boolean; - characters: number; - words: number; - }) => void; } function TextAreaInput(props: TextAreaInputProps) { diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx index 2fc6e6780..d3595f6c8 100644 --- a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx +++ b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx @@ -21,21 +21,23 @@ import { useCallback, useState } from "react"; import { FileEarmarkText } from "react-bootstrap-icons"; import { Card, CardBody, CardHeader, ListGroup } from "reactstrap"; +import { useForm } from "react-hook-form"; import { EditSaveButton } from "../../../../components/buttons/Button"; +import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert"; +import TextAreaInput from "../../../../components/form-field/TextAreaInput.tsx"; +import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown"; import { Project } from "../../../projectsV2/api/projectV2.api"; import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api"; -import TextAreaInput from "../../../../components/form-field/TextAreaInput.tsx"; -import { useForm } from "react-hook-form"; -import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown"; interface DocumentationForm { description: string; } export default function Documentation({ project }: { project: Project }) { - const [updateProject] = usePatchProjectsByProjectIdMutation(); + const [updateProject, updateProjectResult] = + usePatchProjectsByProjectIdMutation(); const [description, setDescription] = useState(project.documentation || ""); const { control, handleSubmit, setValue, getValues, register } = @@ -59,15 +61,8 @@ export default function Documentation({ project }: { project: Project }) { setValue("description", description); }; - const markdownByteLimit = 20; - const charactersLimit = Math.floor(((2 / 3) * markdownByteLimit) / 10) * 10; - const [characters, setCharacters] = useState(0); const [disabledSaveButton, setDisabledSaveButton] = useState(false); - const wordCount = (stats: { characters: number; words: number }) => { - setCharacters(stats.characters); - }; - const descriptionField = register("description"); { const descriptionFieldTmp = descriptionField.onChange; @@ -92,32 +87,15 @@ export default function Documentation({ project }: { project: Project }) { Documentation - - {showEditor ? ( - - {characters} of about {charactersLimit} characters   - - ) : ( - <> - )} - { - if (getValues("description").length <= markdownByteLimit) { - return true; - } - setDisabledSaveButton(true); - return false; - }} - checksBeforeSaveTooltipMessage={() => - `Documentation is too long.\n The document can not be longer\nthan ${markdownByteLimit} bytes.` - } - /> - + + {updateProjectResult.error && ( + + )} {showEditor ? ( @@ -127,7 +105,6 @@ export default function Documentation({ project }: { project: Project }) { getValue={() => getValues("description")} name="description" register={descriptionField} - wordCount={wordCount} /> ) : (