pagination for forum

cuck
This commit is contained in:
xander 2022-03-14 12:38:00 -12:00
parent dcc90a5896
commit 73acb68801
6 changed files with 83 additions and 10 deletions

View File

@ -75,7 +75,7 @@ class Controller extends BaseController
if (!$category) {return Response()->json(false);}
$posts = $category->posts()->orderBy('pinned', 'desc')->orderBy('updated_at', 'desc')->paginate(20);
$posts = $category->posts()->orderBy('pinned', 'desc')->orderBy('updated_at', 'desc')->paginate(15);
foreach ($posts as &$post) {
$post['creator'] = User::where('id', $post['creator_id'])->first();

View File

@ -27,6 +27,8 @@ TestScript;
$test = new SoapService('http://192.168.0.3:64989');
$result = $test->OpenJob(SoapService::MakeJobJSON('test', 10, 0, 0, 'test render', $testScript));
return response($result);
return response(base64_decode($result->OpenJobExResult->LuaValue[0]->value))
->header('Content-Type', 'image/png');
}

View File

@ -39,7 +39,6 @@ export function LoginToAccount(form) {
var badInputs = [];
return new Promise(async (resolve, reject)=>{
await axios.post(`${protocol}apis.${url}/account/login`, body, {headers: {'X-CSRF-TOKEN': document.querySelector(`meta[name="csrf-token"]`).content, "X-Requested-With":"XMLHttpRequest"}}).then(data=>{
const res = data.data;
if (res.badInputs.length >= 1) {

View File

@ -41,6 +41,25 @@ export function checkCookie() {
}
}
export const paginate = async (decision, currentPage, meta) => {
if (decision && currentPage <= 1) return;
if (!decision && currentPage >= meta.last_page) return;
switch (decision) {
case true:
return new Promise(async (resolve, reject)=>{
resolve("decrease");
});
break;
case false:
return new Promise(async (resolve, reject)=>{
resolve("increase");
});
break;
default:
break;
}
}
export function useOnClickOutside(refs, handler) {
useEffect(
() => {

View File

@ -13,6 +13,7 @@ import Loader from '../Components/Loader.js';
import { GenericErrorModal } from './Errors.js';
import { Card, CardTitle } from '../Layouts/Card.js';
import { paginate } from '../helpers/utils.js';
var url = Config.BaseUrl.replace('http://', '');
var protocol = Config.Protocol;
@ -23,7 +24,7 @@ const Forum = (props) => {
const [state, setState] = useState({offline: false, loading: true});
const [categories, setCategoires] = useState([]);
const [category, setCategory] = useState([]);
const [posts, setPosts] = useState({posts: [], currentPage: 0, meta: []});
const [posts, setPosts] = useState({posts: [], currentPage: 1, meta: []});
const user = props.user;
if (!id) id = 1;
@ -35,19 +36,39 @@ const Forum = (props) => {
}
const fetchCategory = async () => {
await axios.get(`${protocol}apis.${url}/fetch/category/${id}`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
await axios.get(`${protocol}apis.${url}/fetch/category/${id}?page=${posts.currentPage}`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
if (!data.data) {window.location.href=`/forum`;return;}
setCategory(data.data.data);
setPosts({...posts, posts: data.data.posts.data, meta: data.data.posts});
}).catch(error=>{console.log(error);});
}
const paginatePosts = async (decision) => {
paginate(decision, posts.currentPage, posts.meta).then(res=>{
switch(res){
case "increase":
setPosts({...posts, currentPage: posts.currentPage+1});
break;
case "decrease":
setPosts({...posts, currentPage: posts.currentPage-1});
break;
default:
break;
}
}).catch(error=>console.log(error));
}
useEffect(async ()=>{
SetTitle(`Forum`);
await fetchCategories();
await fetchCategory();
setState({...state, loading: false});
}, []);
useEffect(async()=>{
setState({...state, loading: true});
await fetchCategory();
setState({...state, loading: false});
}, [posts.currentPage]);
return (
state.loading
@ -61,7 +82,7 @@ const Forum = (props) => {
<p>{category.description}</p>
{user?
<div className={`flex row justify-content-center`}>
{category.staffOnly == 1 && !user.power ? null : <Link className={`btn btn-success w-20`} to={`/forum/post`}>Create a post</Link>}
{category.staffOnly == 1 && !user.power ? null : <Link className={`btn btn-success w-fit-content`} to={`/forum/post`}>Create a post</Link>}
</div>
: null}
</div>
@ -94,6 +115,11 @@ const Forum = (props) => {
</Link>
</>
))}
{posts.posts.length >= 1?
<div className={`w-100 jcc alc row mt-15`}>
{posts.currentPage >= 2? <button className={`w-fit-content btn btn-primary mr-15`} onClick={(e)=>{paginatePosts(true);}}>Previous Page</button> : null}
{posts.currentPage < posts.meta.last_page? <button className={`w-fit-content btn btn-primary`} onClick={(e)=>{paginatePosts(false);}}>Next Page</button> : null}
</div> : null}
</div>
</div>
</div>

View File

@ -13,6 +13,7 @@ import Loader from '../Components/Loader.js';
import { GenericErrorModal } from './Errors.js';
import { Card, CardTitle } from '../Layouts/Card.js';
import { paginate } from '../helpers/utils.js';
var url = Config.BaseUrl.replace('http://', '');
var protocol = Config.Protocol;
@ -21,23 +22,43 @@ const Post = (props) => {
var id = useParams().id;
const [state, setState] = useState({offline: false, loading: true});
const [post, setPost] = useState({post: [], replies: {replies: [], meta: [], currentPage: 0}});
const [post, setPost] = useState({post: [], replies: {replies: [], meta: [], currentPage: 1}});
const user = props.user;
const history = useHistory();
const fetchPost = async () => {
await axios.get(`${protocol}apis.${url}/fetch/post/${id}`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
await axios.get(`${protocol}apis.${url}/fetch/post/${id}?page=${post.replies.currentPage}`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
if (!data.data) {history.push(`/forum`);}
const res = data.data;
setPost({post: res.post, replies: {replies: res.replies.data, meta: res.replies, currentPage: 0}});
setPost({post: res.post, replies: {...post.replies, replies: res.replies.data, meta: res.replies}});
}).catch(error=>{console.log(error);});
}
const paginateReplies = async (decision) => {
paginate(decision, post.replies.currentPage, post.replies.meta).then(res=>{
switch(res){
case "increase":
setPost({...post, replies: {...post.replies, currentPage: post.replies.currentPage+1}});
break;
case "decrease":
setPost({...post, replies: {...post.replies, currentPage: post.replies.currentPage-1}});
break;
default:
break;
}
}).catch(error=>console.log(error));
}
useEffect(async ()=>{
SetTitle(`Forum`);
await fetchPost();
setState({...state, loading: false});
}, []);
useEffect(async()=>{
setState({...state, loading: true});
await fetchPost();
setState({...state, loading: false});
}, [post.replies.currentPage]);
return (
state.loading
@ -74,6 +95,7 @@ const Post = (props) => {
<div className={`flex column jcc alc col-3`}>
<p className={`mb-10`}>[Avatar.]</p>
<Link to={`/user/${post.post.creator.id}`}>{post.post.creator.username}</Link>
</div>
<div className={`col text-left`}>
<p className={`m-0`}>{post.post.body}</p>
@ -108,6 +130,11 @@ const Post = (props) => {
</Card>
</div>
))}
{post.replies.replies.length >= 10?
<div className={`w-100 jcc alc row mt-15`}>
{post.replies.currentPage >= 2? <button className={`w-fit-content btn btn-primary mr-15`} onClick={(e)=>{paginateReplies(true);}}>Previous Page</button> : null}
{post.replies.currentPage < post.replies.meta.last_page? <button className={`w-fit-content btn btn-primary`} onClick={(e)=>{paginateReplies(false);}}>Next Page</button> : null}
</div> : null}
</div>
</div>
);