How to create an approval post in Reactjs? - reactjs

Question

I need to approve "posts" before going online,
the first question is do I need to code on the backend, or I can do it only in the front-end in order to add the functionality?
so I have some code that creates a post, and I need to send data to the confirmation page before going to the main page.
here is the code for post creation:
const onSubmit = (data) => {
if (data.postText) {
const formData = postToFormData(data, file, createTags);
axios
.post(`/posts`, formData, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
})
.then((res) => {
setTimeout(() => {
history.push("/approving");
}, 2000);
});
setMessage("posct created successfully!");
}
};
so as you see in the code above, we have a post method to post the data, and I need to send the data to the approving page where I need to see all the data and press "approve" or "reject"
i have 3 states in the main page to display the data:
#{value.fullName}
{value.postTitle}
{value.postText}
I would appreciate your help.

Answer 1

I think that you don't need to modify the backend. Only send a PUT request to update the post (if the backend accept this).
Regarding the other question, you don't need to redirect to another url to show new content in react. You can show different content depending in the state.
const Form = ({submitting, handleSubmit, formData, setFormData}) => {
return <form onSubmit={handleSubmit}>
<input
type="text"
required
value={formData.text}
onChange={(e) => setFormData({text: e.target.value})}
/>
<br />
<button type="submit">{submitting ? 'Sending...' : 'Save'}</button>
</form>
}
const Revision = ({formData}) => {
return <div>
<p>Your sucess message...</p>
<p>{formData.text }</p>
<button>Approve</button>
<button>Reject</button>
</div>
}
const App = () => {
const [submitting, setSubmitting] = React.useState(false)
const [submitted, setSubmitted] = React.useState(false)
const [formData, setFormData] = React.useState({text: ''})
const handleSubmit = (e) => {
e.preventDefault()
setSubmitting(true)
// Fake send post data
setTimeout(() => {
setSubmitted(true)
}, 1000)
}
const handleApprove = () => {
// Send PUT request to update your post.
}
const handleReject = () => {
// Send PUT request to update your post.
}
if (submitted) {
return <Revision
formData={formData}
handleApprove={handleApprove}
handleReject={handleReject}
/>
} else {
return <Form
submitting={submitting}
handleSubmit={handleSubmit}
formData={formData}
setFormData={setFormData}
/>
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Answer 2

I don't quite understand what you means by "approve post before going online". But here the scenarios which I think I understood:-
a) CONFIRMATION FEATURE before submitting new post to backend (basically create a new set of data in the database) javascript
b) APPROVE or REJECT FEATURES after new post successfully submitted & created in the database
For SCENARIO A:-
you may create a component (like a popup or something) that shows user to choose whether they want to Confirm or Cancel creation of new post data.
Confirm - will triggered the onSubmit function and send the data to the backend to create a new post
Cancel - will reset every states to it's default value/state (basically emptying out every input placeholders)
For SCENARIO B:-
you must have some kind of variables in the database that can distinguish which post is approved & which is not. (like status or publish_status - can be set to either Yes or No or 1 or 0)
create a new function to handle just changing/update of status/publish_status var/value in the database of said/selected post. This can be done right after creation of new post (like what you want) or just at anytime you want (basically you have a working UI that handles a list of posts with just the id, title, status/publish_status & action buttons like edit, delete and/or publish, typically we display this in table - so if you hit action button publish, then it will triggered the update/put req to change/update the status/publish_status in the database. Just make sure to change your publish action button text to unpublish if the put req successful)