pagination for forum

cuck

web/app/Http/Controllers/Controller.php

@@ -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();

web/app/Http/Controllers/GridTest.php

@@ -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');
 	}

web/resources/js/helpers/Auth.js

@@ -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) {

web/resources/js/helpers/utils.js

@@ -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(
 		() => {

web/resources/js/pages/Forum.js

@@ -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,20 +36,40 @@ 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>

web/resources/js/pages/Post.js

@@ -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,24 +22,44 @@ 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>
 		);