Created
April 11, 2024 00:50
-
-
Save rezafikkri/90da73a1da62e641cdc6e26fa82c2ad4 to your computer and use it in GitHub Desktop.
Thread input component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use client'; | |
| import { useRouter } from 'next/navigation'; | |
| import { useState } from 'react'; | |
| import Link from 'next/link'; | |
| import { useAppDispatch } from '@/hooks/redux-hooks'; | |
| import { asyncCreateThread } from '@/lib/threads/action'; | |
| import Alert from '@/components/alert'; | |
| import useInput from '@/hooks/use-input'; | |
| import Editor from './editor'; | |
| export default function ThreadInput() { | |
| const [title, handleTitleChange] = useInput(''); | |
| const [category, handleCategoryChange] = useInput(''); | |
| const [body, setBody] = useState(''); | |
| const router = useRouter(); | |
| const dispatch = useAppDispatch(); | |
| const [createThreadError, setCreateThreadError] = useState(null); | |
| function handleCreateThread(e) { | |
| e.preventDefault(); | |
| dispatch(asyncCreateThread({ title, category, body })) | |
| .then(() => { | |
| router.push('/'); | |
| }) | |
| .catch((error) => { | |
| setCreateThreadError(error.message); | |
| }); | |
| } | |
| function resetCreateThreadErrorState() { | |
| setCreateThreadError(null); | |
| } | |
| return ( | |
| <> | |
| {createThreadError | |
| && <Alert message={createThreadError} onClose={resetCreateThreadErrorState} />} | |
| <form onSubmit={handleCreateThread}> | |
| <label className="form-control w-full"> | |
| <div className="label"> | |
| <span className="label-text">Title</span> | |
| </div> | |
| <input | |
| type="text" | |
| placeholder="Enter thread title" | |
| className="input input-bordered w-full" | |
| value={title} | |
| onChange={handleTitleChange} | |
| /> | |
| </label> | |
| <label className="form-control w-full"> | |
| <div className="label"> | |
| <span className="label-text">Category</span> | |
| </div> | |
| <input | |
| type="text" | |
| placeholder="Enter thread category" | |
| className="input input-bordered w-full" | |
| value={category} | |
| onChange={handleCategoryChange} | |
| /> | |
| <div className="label"> | |
| <span className="label-text-alt"> | |
| Category is optional, if left blank, then the default value of category is | |
| <b> general</b> | |
| </span> | |
| </div> | |
| </label> | |
| <label className="form-control w-full" data-color-mode="light"> | |
| <div className="label"> | |
| <span className="label-text">Body</span> | |
| </div> | |
| </label> | |
| <Editor value={body} onValueChange={setBody} placeholder="Enter thread body" /> | |
| <div className="label"> | |
| <span className="label-text-alt"> | |
| The body thread uses | |
| <b> markdown language</b> | |
| <span>, if you don't understand, please read the </span> | |
| <Link | |
| href="https://www.markdownguide.org/basic-syntax" | |
| target="_blank" | |
| className="link link-neutral" | |
| > | |
| <span>markdown guide </span> | |
| <i className="bi bi-arrow-up-right" /> | |
| </Link> | |
| . | |
| </span> | |
| </div> | |
| <div className="flex justify-end mt-4"> | |
| <Link href="/" className="btn btn-outline me-3">Cancel</Link> | |
| <button type="submit" className="btn btn-primary">Save</button> | |
| </div> | |
| </form> | |
| </> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment