innocuous-symmetry/recipe-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rich text editor as option in form

Browse Source
This commit is contained in:
Mikayla Dobson
2022-12-07 17:30:10 -06:00
parent b2d60f1b0a
commit 2e47b6d385
6 changed files with 74 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RECIPIN | Personal Recipe Manager</title> <title>RECIPIN | Personal Recipe Manager</title>
</head> </head>

2
client/package.json
View File

@@ -10,9 +10,9 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.2.0", "axios": "^1.2.0",
"draft-js": "^0.11.7",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-quill": "^2.0.0",
"react-router-dom": "^6.4.3", "react-router-dom": "^6.4.3",
"sass": "^1.56.1", "sass": "^1.56.1",
"uuid": "^9.0.0" "uuid": "^9.0.0"

35
client/src/components/pages/AddRecipe.tsx
View File

@@ -1,11 +1,11 @@
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useAuthContext } from "../../context/AuthContext"; import { useAuthContext } from "../../context/AuthContext";
import { IRecipe } from "../../schemas"; import { IRecipe } from "../../schemas";
import { Button, Divider, Form, Page, Panel } from "../ui" import { Button, Divider, Form, Quill, Page, Panel } from "../ui"
const AddRecipe = () => { const AddRecipe = () => {
const { user } = useAuthContext(); const authContext = useAuthContext();
const [input, setInput] = useState<IRecipe>({ name: '', preptime: '', description: '', authoruserid: user?.id || '', ingredients: [] }) const [input, setInput] = useState<IRecipe>({ name: '', preptime: '', description: '', authoruserid: '', ingredients: [] })
const [form, setForm] = useState<JSX.Element[]>(); const [form, setForm] = useState<JSX.Element[]>();
const getFormState = useCallback((data: IRecipe) => { const getFormState = useCallback((data: IRecipe) => {
@@ -19,31 +19,32 @@ const AddRecipe = () => {
console.log('good to go!') console.log('good to go!')
} }
useEffect(() => {
if (user) {
setInput((prev: IRecipe) => {
return {
...prev,
authoruserid: user.id!
}
})
}
}, [user])
useEffect(() => { useEffect(() => {
setForm( authContext.user && setInput((prev: IRecipe) => {
return {
...prev,
authoruserid: authContext.user!.id!
}
})
}, [authContext])
useEffect(() => {
input.authoruserid && setForm(
new Form<IRecipe>({ new Form<IRecipe>({
parent: "AddRecipe", parent: "AddRecipe",
keys: ["name", "preptime", "ingredients", "description"], keys: ["name", "preptime", "ingredients", "description"],
labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"], labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"],
dataTypes: ['text', 'text', 'custom picker', 'text'], dataTypes: ['text', 'text', 'custom picker', 'QUILL'],
initialState: input, initialState: input,
getState: getFormState getState: getFormState
}).mount() }).mount()
) )
}, []) }, [input.authoruserid])
useEffect(() => {
console.log(input);
}, [input])
return ( return (
<Page> <Page>

43
client/src/components/ui/Form.tsx
View File

@@ -1,4 +1,5 @@
import { ChangeEvent, ChangeEventHandler } from "react"; import { ChangeEvent, ChangeEventHandler } from "react";
import { Quill } from '.'
import { v4 } from 'uuid'; import { v4 } from 'uuid';
/** /**
@@ -37,8 +38,11 @@ export default class Form<T>{
update(e: ChangeEvent<HTMLElement>, idx: number) { update(e: ChangeEvent<HTMLElement>, idx: number) {
let newState; let newState;
if (this.dataTypes[idx] == 'checkbox') { if (this.dataTypes[idx] == 'QUILL') {
newState = { ...this.state } newState = {
...this.state,
[this.keys[idx]]: e
}
} else { } else {
newState = { newState = {
...this.state, ...this.state,
@@ -54,22 +58,35 @@ export default class Form<T>{
let output = new Array<JSX.Element>(); let output = new Array<JSX.Element>();
for (let i = 0; i < this.keys.length; i++) { for (let i = 0; i < this.keys.length; i++) {
let input: JSX.Element | null;
if (this.dataTypes[i] == 'custom picker') { if (this.dataTypes[i] == 'custom picker') {
console.log('noted!'); console.log('noted!');
this.dataTypes[i] = 'text'; this.dataTypes[i] = 'text';
} }
output.push( if (this.dataTypes[i] == 'QUILL') {
<div id={`${this.parent}-row-${i}`} key={v4()}> input = (
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label> <div id={`${this.parent}-row-${i}`} key={v4()}>
<input <label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label>
type={this.dataTypes[i]} <Quill id={`${this.parent}-${this.keys[i]}`} onChange={(e) => this.update(e, i)} />
id={`${this.parent}-${this.keys[i]}`} </div>
onChange={(e) => this.update(e, i)} )
value={this.state[i as keyof T] as string}> } else {
</input> input = (
</div> <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; return output;

22
client/src/components/ui/Quill.tsx Normal file
View 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;

3
client/src/components/ui/index.ts
View File

@@ -6,10 +6,11 @@ import Form from "./Form";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import Page from "./Page"; import Page from "./Page";
import Panel from "./Panel"; import Panel from "./Panel";
import Quill from "./Quill";
import TextField from "./TextField"; import TextField from "./TextField";
import Tooltip from "./Tooltip"; import Tooltip from "./Tooltip";
import UserCard from "./UserCard"; import UserCard from "./UserCard";
export { export {
Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, TextField, Tooltip, UserCard Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, Quill, TextField, Tooltip, UserCard
} }