99 lines
4.4 KiB
JavaScript
99 lines
4.4 KiB
JavaScript
// © XlXi 2021
|
|
// Graphictoria 5
|
|
|
|
import React, {useEffect, useState} from 'react';
|
|
import { Link, useHistory } from 'react-router-dom';
|
|
|
|
import ReCAPTCHA from 'react-google-recaptcha';
|
|
import { CreateAccount, LoginToAccount, CreateForum } from '../Helpers/Auth';
|
|
import Loader from '../Components/Loader';
|
|
import { getCookie } from '../helpers/utils';
|
|
|
|
import axios from "axios";
|
|
import Config from '../config.js';
|
|
import { Card, CardTitle } from '../Components/Card';
|
|
|
|
axios.defaults.withCredentials = true
|
|
|
|
var url = Config.BaseUrl.replace('http://', '');
|
|
var protocol = Config.Protocol;
|
|
|
|
const CreatePost = (props) => {
|
|
|
|
const [waitingForSubmission, setWaitingForSubmission] = useState(false);
|
|
const [validity, setValidity] = useState({error: false, message: ``, inputs: []});
|
|
const [categories, setCategories] = useState({categories: []});
|
|
const user = props.user;
|
|
const history = useHistory();
|
|
|
|
const fetchCategories = async () => {
|
|
const body = new FormData();
|
|
body.append('token', encodeURIComponent(getCookie(`gtok`)));
|
|
axios.post(`${protocol}apis.${url}/fetch/categories/post`, body, {headers: {'X-CSRF-TOKEN': document.querySelector(`meta[name="csrf-token"]`).content, "X-Requested-With":"XMLHttpRequest"}}).then(async data=>{
|
|
const res = data.data;
|
|
setCategories({categories: res.categories});
|
|
}).catch(error=>{console.log(error);});
|
|
}
|
|
|
|
useEffect(async()=>{
|
|
await fetchCategories();
|
|
}, []);
|
|
|
|
async function SubmitForm(form)
|
|
{
|
|
form.append('creator_id', user.id);
|
|
form.append('token', encodeURIComponent(getCookie(`gtok`)));
|
|
setWaitingForSubmission(true);
|
|
await axios.post(`${protocol}apis.${url}/api/create/forum`, form, {headers: {'X-CSRF-TOKEN': document.querySelector(`meta[name="csrf-token"]`).content, "X-Requested-With":"XMLHttpRequest"}}).then(data=>{
|
|
const res = data.data;
|
|
console.log(res);
|
|
if (res.badInputs.length >= 1) {
|
|
setValidity({error: true, message:res.message, inputs: res.badInputs});
|
|
setTimeout(()=>{setValidity({...validity, error: false, inputs: res.badInputs});}, 4000);
|
|
}else{
|
|
history.push(`/forum/post/${res.post_id}`);
|
|
}
|
|
}).catch(error=>{console.log(error);});
|
|
setWaitingForSubmission(false);
|
|
}
|
|
|
|
return (
|
|
waitingForSubmission || categories.categories.length <= 0 ? <Loader/> :
|
|
<Card>
|
|
<CardTitle>Create a new Post</CardTitle>
|
|
<div className="p-2 row">
|
|
<div className="col-md-8 mb-2">
|
|
{validity.error?
|
|
<div className={`px-5 mb-10`}>
|
|
<div className={`error-dialog`}>
|
|
<p className={`mb-0`}>{validity.message}</p>
|
|
</div>
|
|
</div>
|
|
: null}
|
|
<form onSubmit={(e)=>{e.preventDefault();SubmitForm(new FormData(e.target));}} class="fs">
|
|
<input type="username" className={`form-control mb-4 ${(validity.inputs.find(input=>input == `title`)? `is-invalid` : ``)}`} placeholder="Title" name="title"/>
|
|
<textarea type="username" className={`form-control mb-4 ${(validity.inputs.find(input=>input == `body`)? `is-invalid` : ``)}`} placeholder="Body" name="body"></textarea>
|
|
<select class="form-select" name={`category`}>
|
|
{categories.categories.map(category=>(
|
|
<option value={category.id}>{category.title}</option>
|
|
))}
|
|
</select>
|
|
<div className="d-flex mb-3">
|
|
<ReCAPTCHA
|
|
sitekey="6LeyHsUbAAAAAJ9smf-als-hXqrg7a-lHZ950-fL"
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<button className="btn btn-primary px-5" type={`submit`}>POST!</button><br/>
|
|
</form>
|
|
</div>
|
|
<div className="col">
|
|
<h5><bold>Read the rules before posting!</bold></h5>
|
|
<p>Before you make a post, be sure to read the <Link to={`/forum/rules`}>rules</Link>.</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CreatePost; |