95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
// © XlXi 2021
|
|
// Graphictoria 5
|
|
|
|
import axios from 'axios';
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link, useHistory } 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 { MiniCard, MiniCardTitle } from '../Components/Card.js';
|
|
|
|
var url = Config.BaseUrl.replace('http://', '');
|
|
var protocol = Config.Protocol;
|
|
|
|
const Dashboard = (props) => {
|
|
|
|
const [state, setState] = useState({loading: true});
|
|
const [feedState, setFeedState] = useState({loading: true});
|
|
const user = props.user;
|
|
|
|
useEffect(()=>{
|
|
SetTitle(`Dashboard`);
|
|
setState({loading: false});
|
|
}, []);
|
|
|
|
return (
|
|
state.loading
|
|
?
|
|
<Loader />
|
|
:
|
|
<div className='container-lg'>
|
|
<div className='row'>
|
|
{/* User image, blog, friends */}
|
|
<div className='col-md-3'>
|
|
<h4>Hello, {user.username}!</h4>
|
|
<div className='card text-center'>
|
|
<p className='pt-3 px-3'>"{ user.about }"</p>
|
|
<img src='/images/testing/avatar.png' className='img-fluid gt-charimg' />
|
|
</div>
|
|
<MiniCard className='mt-3'>
|
|
<MiniCardTitle>Blog</MiniCardTitle>
|
|
|
|
<ul className="text-center list-unstyled mb-1">
|
|
<li className="pb-2"><a href="#" className="text-decoration-none fw-normal"><i className="fa-solid fa-circle-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
|
|
<li className="pb-2"><a href="#" className="text-decoration-none fw-normal"><i className="fa-solid fa-circle-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
|
|
<li className="pb-2"><a href="#" className="text-decoration-none fw-normal"><i className="fa-solid fa-circle-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
|
|
</ul>
|
|
<div className="text-left px-2">
|
|
<a href="#" className="text-decoration-none fw-normal">More <i className="fa-solid fa-caret-right"></i></a>
|
|
</div>
|
|
</MiniCard>
|
|
|
|
<MiniCard className='mt-3 d-none d-md-flex'>
|
|
<MiniCardTitle>Friends</MiniCardTitle>
|
|
</MiniCard>
|
|
</div>
|
|
|
|
{/* Feed */}
|
|
<div className='col-md-7 mt-3 mt-md-0'>
|
|
<h4>My Feed</h4>
|
|
<div className='card mb-2'>
|
|
<div className='input-group p-2'>
|
|
<input type='text' className='form-control' placeholder='What are you up to?' area-label='What are you up to?' />
|
|
<button className='btn btn-secondary' type='button'>Share</button>
|
|
</div>
|
|
</div>
|
|
{
|
|
feedState.loading
|
|
?
|
|
<div className='text-center'>
|
|
<Loader />
|
|
</div>
|
|
:
|
|
<div className='card'>
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
{/* Recently Played */}
|
|
<div className='col-md-2 d-none d-md-block'>
|
|
<h6>recently played</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|