A Walkthrough of our previous Challenge so that we’re all on the same page.
Our final AddNote component:
import { useRef, useState, useEffect } from "react";
import { Add, Title, TitleInput, BodyInput, Form, Button } from "./styles";
import { Formik, FormikHelpers } from "formik";
import { useSpring } from "react-spring";
interface IProps {
openAddNote: boolean;
setOpenAddNote: React.Dispatch>;
folder: string;
setNoteIsAdded: React.Dispatch>
}
const AddNote: React.FC = ({ openAddNote, setOpenAddNote, folder, setNoteIsAdded }) => {
const newNoteRef = useRef(null);
const [noteHeight, setNoteHeight] = useState(50);
// useEffect to set height
useEffect(() => {
setNoteHeight(
newNoteRef.current
? openAddNote
? newNoteRef.current.scrollHeight
: 40
: 40
);
}, [openAddNote]);
// Types
interface FormValues {
title: string;
body: string;
}
// Submit
const handleSubmit = (
values: FormValues,
{ setSubmitting, resetForm }: FormikHelpers
) => {
setTimeout(() => {
setSubmitting(false);
const currentFolder = localStorage.getItem(folder);
const notes = currentFolder ? JSON.parse(currentFolder) : [];
const newNoteAdded = [values.title, values.body];
notes.push(newNoteAdded);
const updatedNotes = JSON.stringify(notes);
localStorage.setItem(folder, updatedNotes);
handleToggle();
setNoteIsAdded(true)
resetForm();
}, 400);
};
// Animation props
const addNoteProps = useSpring({
maxHeight: noteHeight,
config: openAddNote
? { duration: 300, tension: 10, friction: 10 }
: { duration: 400, tension: 10, friction: 10 },
});
// Toggle
const handleToggle = () => {
setOpenAddNote(!openAddNote);
};
return (
<>
+ Add note
{openAddNote && (
{
const errors: Partial = {};
if (!values.title) {
errors.title = "Title is required";
}
return errors;
}}
onSubmit={handleSubmit}
>
{({ values, handleChange, handleSubmit }) => (
)}
)}
);
};
export default AddNote;
