diff --git a/client/index.html b/client/index.html index 0b3d01c..542a362 100644 --- a/client/index.html +++ b/client/index.html @@ -3,6 +3,7 @@ + RECIPIN | Personal Recipe Manager diff --git a/client/package.json b/client/package.json index 14e711e..8394d82 100644 --- a/client/package.json +++ b/client/package.json @@ -10,9 +10,9 @@ }, "dependencies": { "axios": "^1.2.0", - "draft-js": "^0.11.7", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-quill": "^2.0.0", "react-router-dom": "^6.4.3", "sass": "^1.56.1", "uuid": "^9.0.0" diff --git a/client/src/components/pages/AddRecipe.tsx b/client/src/components/pages/AddRecipe.tsx index 6e4af01..b2041c4 100644 --- a/client/src/components/pages/AddRecipe.tsx +++ b/client/src/components/pages/AddRecipe.tsx @@ -1,11 +1,11 @@ import { useCallback, useEffect, useState } from "react"; import { useAuthContext } from "../../context/AuthContext"; import { IRecipe } from "../../schemas"; -import { Button, Divider, Form, Page, Panel } from "../ui" +import { Button, Divider, Form, Quill, Page, Panel } from "../ui" const AddRecipe = () => { - const { user } = useAuthContext(); - const [input, setInput] = useState({ name: '', preptime: '', description: '', authoruserid: user?.id || '', ingredients: [] }) + const authContext = useAuthContext(); + const [input, setInput] = useState({ name: '', preptime: '', description: '', authoruserid: '', ingredients: [] }) const [form, setForm] = useState(); const getFormState = useCallback((data: IRecipe) => { @@ -19,31 +19,32 @@ const AddRecipe = () => { console.log('good to go!') } - - useEffect(() => { - if (user) { - setInput((prev: IRecipe) => { - return { - ...prev, - authoruserid: user.id! - } - }) - } - }, [user]) useEffect(() => { - setForm( + authContext.user && setInput((prev: IRecipe) => { + return { + ...prev, + authoruserid: authContext.user!.id! + } + }) + }, [authContext]) + + useEffect(() => { + input.authoruserid && setForm( new Form({ parent: "AddRecipe", keys: ["name", "preptime", "ingredients", "description"], labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"], - dataTypes: ['text', 'text', 'custom picker', 'text'], + dataTypes: ['text', 'text', 'custom picker', 'QUILL'], initialState: input, getState: getFormState }).mount() ) - }, []) + }, [input.authoruserid]) + useEffect(() => { + console.log(input); + }, [input]) return ( diff --git a/client/src/components/ui/Form.tsx b/client/src/components/ui/Form.tsx index 75b8e29..17db3d8 100644 --- a/client/src/components/ui/Form.tsx +++ b/client/src/components/ui/Form.tsx @@ -1,4 +1,5 @@ import { ChangeEvent, ChangeEventHandler } from "react"; +import { Quill } from '.' import { v4 } from 'uuid'; /** @@ -37,8 +38,11 @@ export default class Form{ update(e: ChangeEvent, idx: number) { let newState; - if (this.dataTypes[idx] == 'checkbox') { - newState = { ...this.state } + if (this.dataTypes[idx] == 'QUILL') { + newState = { + ...this.state, + [this.keys[idx]]: e + } } else { newState = { ...this.state, @@ -54,22 +58,35 @@ export default class Form{ let output = new Array(); for (let i = 0; i < this.keys.length; i++) { + let input: JSX.Element | null; + if (this.dataTypes[i] == 'custom picker') { console.log('noted!'); this.dataTypes[i] = 'text'; } - output.push( -
- - this.update(e, i)} - value={this.state[i as keyof T] as string}> - -
- ) + if (this.dataTypes[i] == 'QUILL') { + input = ( +
+ + this.update(e, i)} /> +
+ ) + } else { + input = ( +
+ + this.update(e, i)} + value={this.state[i as keyof T] as string}> + +
+ ) + } + + output.push(input); } return output; diff --git a/client/src/components/ui/Quill.tsx b/client/src/components/ui/Quill.tsx new file mode 100644 index 0000000..ddba2d0 --- /dev/null +++ b/client/src/components/ui/Quill.tsx @@ -0,0 +1,22 @@ +import { ChangeEvent, FC, useEffect, useState } from "react" +import ReactQuill from "react-quill" + +interface QuillParams { + id: string + onChange: (params?: any) => any + theme?: string +} + +const Quill: FC = ({ id, onChange, theme = 'snow' }) => { + const [value, setValue] = useState(''); + + useEffect(() => { + onChange(value); + }, [value]) + + return ( + + ) +} + +export default Quill; \ No newline at end of file diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts index a456fd8..2fc977c 100644 --- a/client/src/components/ui/index.ts +++ b/client/src/components/ui/index.ts @@ -6,10 +6,11 @@ import Form from "./Form"; import Navbar from "./Navbar"; import Page from "./Page"; import Panel from "./Panel"; +import Quill from "./Quill"; import TextField from "./TextField"; import Tooltip from "./Tooltip"; import UserCard from "./UserCard"; export { - Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, TextField, Tooltip, UserCard + Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, Quill, TextField, Tooltip, UserCard } \ No newline at end of file