132 lines
5.5 KiB
JavaScript
132 lines
5.5 KiB
JavaScript
// © XlXi 2021
|
|
// Graphictoria 5
|
|
|
|
import axios from 'axios';
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link, useHistory, useParams } from "react-router-dom";
|
|
|
|
import Config from '../config.js';
|
|
|
|
import SetTitle from "../Helpers/Title.js";
|
|
|
|
import Loader from '../Components/Loader.js';
|
|
|
|
import { GenericErrorModal } from './Errors.js';
|
|
import { Card, CardTitle } from '../Components/Card.js';
|
|
import { paginate } from '../helpers/utils.js';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
|
var url = Config.BaseUrl.replace('http://', '');
|
|
var protocol = Config.Protocol;
|
|
|
|
const Catalog = (props) => {
|
|
|
|
var id = useParams().id;
|
|
const [state, setState] = useState({loading: true});
|
|
const [categories, setCategoires] = useState([]);
|
|
const [category, setCategory] = useState([]);
|
|
const [items, setItems] = useState({items: [], currentPage: 1, meta: []});
|
|
const user = props.user;
|
|
|
|
if (!id) id = 1;
|
|
|
|
const fetchCategories = async () => {
|
|
await axios.get(`${protocol}apis.${url}/fetch/categories/catalog`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
|
|
setCategoires(data.data.categories);
|
|
}).catch(error=>{console.log(error);});
|
|
}
|
|
|
|
const fetchCategory = async () => {
|
|
await axios.get(`${protocol}apis.${url}/fetch/category/catalog/${id}?page=${items.currentPage}`, {headers: {"X-Requested-With":"XMLHttpRequest"}}).then(data=>{
|
|
if (!data.data) {window.location.href=`/forum`;return;}
|
|
setCategory(data.data.data);
|
|
setItems({...items, items: data.data.items.data, meta: data.data.items});
|
|
}).catch(error=>{console.log(error);});
|
|
}
|
|
|
|
const paginateitems = async (decision) => {
|
|
paginate(decision, items.currentPage, items.meta).then(res=>{
|
|
switch(res){
|
|
case "increase":
|
|
setItems({...items, currentPage: items.currentPage+1});
|
|
break;
|
|
case "decrease":
|
|
setItems({...items, currentPage: items.currentPage-1});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}).catch(error=>console.log(error));
|
|
}
|
|
|
|
useEffect(async ()=>{
|
|
SetTitle(`Catalog`);
|
|
await fetchCategory();
|
|
await fetchCategories();
|
|
setState({...state, loading: false});
|
|
}, []);
|
|
|
|
useEffect(async()=>{
|
|
setState({...state, loading: true});
|
|
await fetchCategory();
|
|
setState({...state, loading: false});
|
|
}, [items.currentPage]);
|
|
|
|
return (
|
|
state.loading || categories.length <= 0
|
|
?
|
|
<Loader />
|
|
:
|
|
<div className={`flex jcc alc w-100 column`}>
|
|
<div className="graphictoria-nav-splitter"></div>
|
|
<div className={`row w-60`}>
|
|
<div className={`col-3 justify-content-center flex-column`}>
|
|
<div>
|
|
<h4>Categories:</h4>
|
|
{categories.map(category=>(
|
|
<>
|
|
<Link to={`/catalog/category/${category.id}`}>{category.title}</Link><br/>
|
|
</>
|
|
))}
|
|
</div>
|
|
<div className="graphictoria-nav-splitter"></div>
|
|
<div>
|
|
<h4>Options:</h4>
|
|
<div className={`flex flex-column`}>
|
|
<h6>Search for an item:</h6>
|
|
<input placeholder={`temp`}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`col justify-content-center`}>
|
|
{items.items.length <= 0 ? <p>There are currently no items!</p> : null}
|
|
<div className={`flex flex-row flex-wrap`}>
|
|
{items.items.map(item=>(
|
|
<>
|
|
<Link to={`/item/${item.id}`} className={`flex graphic-post-column col-3`}>
|
|
<div className={`flex column mb-10 alc`}>
|
|
<img src='/images/testing/hat.png' className='img-fluid graphic-thumb' />
|
|
</div>
|
|
<div className={`flex flex-column m-0 jcc alc`}>
|
|
<div className={`flex row w-fit-content`}><h6 className={`m-0 mr-15 fs13`}>{item.title}</h6></div>
|
|
<div className={`row fs15 w-fit-content`}>
|
|
<p className={`w-fit-content`}>{item.current_price? `$${item.current_price}` : `N/A`}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</>
|
|
))}
|
|
</div>
|
|
{items.items.length >= 1?
|
|
<div className={`w-100 jcc alc row mt-15`}>
|
|
{items.currentPage >= 2? <button className={`w-fit-content btn btn-primary mr-15`} onClick={(e)=>{paginateitems(true);}}>Previous Page</button> : null}
|
|
{items.currentPage < items.meta.last_page? <button className={`w-fit-content btn btn-primary`} onClick={(e)=>{paginateitems(false);}}>Next Page</button> : null}
|
|
</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Catalog;
|