rich text editor as option in form
This commit is contained in:
Mikayla Dobson
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>RECIPIN | Personal Recipe Manager</title>
|
||||
</head>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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<IRecipe>({ name: '', preptime: '', description: '', authoruserid: user?.id || '', ingredients: [] })
|
||||
const authContext = useAuthContext();
|
||||
const [input, setInput] = useState<IRecipe>({ name: '', preptime: '', description: '', authoruserid: '', ingredients: [] })
|
||||
const [form, setForm] = useState<JSX.Element[]>();
|
||||
|
||||
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<IRecipe>({
|
||||
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 (
|
||||
<Page>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ChangeEvent, ChangeEventHandler } from "react";
|
||||
import { Quill } from '.'
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
/**
|
||||
@@ -37,8 +38,11 @@ export default class Form<T>{
|
||||
update(e: ChangeEvent<HTMLElement>, 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<T>{
|
||||
let output = new Array<JSX.Element>();
|
||||
|
||||
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(
|
||||
<div id={`${this.parent}-row-${i}`} key={v4()}>
|
||||
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label>
|
||||
<input
|
||||
type={this.dataTypes[i]}
|
||||
id={`${this.parent}-${this.keys[i]}`}
|
||||
onChange={(e) => this.update(e, i)}
|
||||
value={this.state[i as keyof T] as string}>
|
||||
</input>
|
||||
</div>
|
||||
)
|
||||
if (this.dataTypes[i] == 'QUILL') {
|
||||
input = (
|
||||
<div id={`${this.parent}-row-${i}`} key={v4()}>
|
||||
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label>
|
||||
<Quill id={`${this.parent}-${this.keys[i]}`} onChange={(e) => this.update(e, i)} />
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
input = (
|
||||
<div id={`${this.parent}-row-${i}`} key={v4()}>
|
||||
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label>
|
||||
<input
|
||||
type={this.dataTypes[i]}
|
||||
id={`${this.parent}-${this.keys[i]}`}
|
||||
onChange={(e) => this.update(e, i)}
|
||||
value={this.state[i as keyof T] as string}>
|
||||
</input>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
output.push(input);
|
||||
}
|
||||
|
||||
return output;
|
||||
|
||||
22
client/src/components/ui/Quill.tsx
Normal file
22
client/src/components/ui/Quill.tsx
Normal file
@@ -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<QuillParams> = ({ id, onChange, theme = 'snow' }) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
onChange(value);
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<ReactQuill id={id} theme={theme} value={value} onChange={setValue} />
|
||||
)
|
||||
}
|
||||
|
||||
export default Quill;
|
||||
@@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user