Here are the Steps –
1 – Add a property in the user model –
isAdmin:{
type:Boolean,
default:false
},
2. In mongoDb atlas, set isAdmin:true
3. Add isAdmin in SignIn, Google SignIn menthod –
const token=jwt.sign({id:validUser._id, isAdmin:validUser.isAdmin}, process.env.JWT_SECRET_KEY);
const token=jwt.sign({id:user._id, isAdmin:user.isAdmin}, process.env.JWT_SECRET_KEY);
const token=jwt.sign({id:newUser._id, isAdmin:newUser.isAdmin}, process.env.JWT_SECRET_KEY);
4. Create a button “Create a Post” –
{
currentUser.isAdmin && (
<Link to={‘/create-a-post’}>
<Button type=‘button’ gradientDuoTone=‘purpleToPink’ className=‘w-full’>
Create a Post
</Button>
</Link>
)
}
5. Add Loading –
const {currentUser, error, loading}=useSelector(state=>state.user)
6. Add a condition in update button –
<Button type=‘submit’ gradientDuoTone=‘purpleToBlue’ outline disabled={loading || imageFileUploading}>
{
loading ? ‘Loading…’:‘Update’
}
</Button>
7. Create a Post Page –
import { Button, FileInput, Select, TextInput } from ‘flowbite-react’
import ReactQuill from ‘react-quill’;
import ‘react-quill/dist/quill.snow.css’;
const CreatePost = () => {
return (
<div className=‘p-3 max-w-3xl mx-auto min-h-screen’>
<h1 className=‘ text-center text-3xl my-7 font-semibold’>Create a Post</h1>
<form className=‘flex flex-col gap-4’>
<div className=‘flex flex-col gap-4 sm:flex-row justify-between’>
<TextInput type=‘text’ placeholder=‘Title’ required id=‘title’ className=‘flex-1’/>
<Select>
<option value=‘uncategorized’>Select a Category</option>
<option value=‘javascript’>Java Script</option>
<option value=‘reactjs’>React JS</option>
<option value=‘nextjs’>Next JS</option>
</Select>
</div>
<div className=‘flex gap-4 items-center justify-between border-4 border-teal-500 border-dotted p-3’>
<FileInput type=‘file’ accept=‘image/*’/>
<Button type=‘button’ gradientDuoTone=‘purpleToBlue’ size=‘sm’ outline>Upload Image</Button>
</div>
<ReactQuill theme=‘snow’ placeholder=‘Write Something…’ className=‘h-72 mb-12’ required/>
<Button type=‘submit’ gradientDuoTone=‘purpleToPink’>Publish</Button>
</form>
</div>
)
}
export default CreatePost
8. Create a Component –
import {useSelector} from ‘react-redux’
import { Navigate, Outlet } from ‘react-router-dom’
const OnlyAdminPrivateRoute = () => {
const {currentUser}=useSelector((state)=>state.user)
return currentUser && currentUser.isAdmin?<Outlet/>:<Navigate to=‘/sign-in’/>
}
export default OnlyAdminPrivateRoute
9. Add a route in App.jsx –
<Route element={<OnlyAdminPrivateRoute/>}>
<Route path=‘/create-a-post’ element={<CreatePost/>}/>
</Route>
10. Install a package –
npm install react-quill –save
11. Add CSS –
import ReactQuill from ‘react-quill’;
import ‘react-quill/dist/quill.snow.css’;
12. Add a CSS in index.css –
body{
height: 100vh;
}
Video Tutorial: –
