146 lines
5.2 KiB
JavaScript
146 lines
5.2 KiB
JavaScript
// Preact
|
|
import { h } from 'preact';
|
|
import { useState, useEffect } from 'preact/hooks';
|
|
|
|
// Functions
|
|
import { getMod } from '../services/mods';
|
|
|
|
// Components
|
|
|
|
// Images
|
|
import logo from '../assets/logo.png'
|
|
import profile from '../assets/profile.svg'
|
|
import download_icon from '../assets/download_alt.svg'
|
|
import favorite_icon from '../assets/favorite.svg'
|
|
|
|
// Styles
|
|
import styles from '../styles/content_page.module.css'
|
|
|
|
function ModPage({name}) {
|
|
|
|
// UseState
|
|
const [mod, setMod] = useState({})
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
// UseEffect
|
|
useEffect(() => {
|
|
async function loadItems() {
|
|
setLoading(true);
|
|
setError(false);
|
|
try {
|
|
const fetched_mod = await getMod(name);
|
|
setMod(fetched_mod);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
loadItems();
|
|
}, []); // <-- Tells useEffect to run once after render
|
|
|
|
const base_page = (
|
|
<>
|
|
<a href="/">
|
|
<img src={logo} class="logo img" alt="WF" />
|
|
<p class="logo text"> mods </p>
|
|
</a>
|
|
</>
|
|
);
|
|
|
|
if (loading) {
|
|
// TODO replace by loading screen
|
|
return (
|
|
<>
|
|
{base_page}
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>
|
|
<p className={styles.title}>Loading...</p>
|
|
</div>
|
|
<div className={styles.infosPanel}> </div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
if (error) {
|
|
// TODO replace by popup
|
|
return (
|
|
<>
|
|
{base_page}
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>
|
|
<p className={styles.title}>Couldn't load this mod</p>
|
|
<p className={styles.fullDescription}>{error}</p>
|
|
</div>
|
|
<div className={styles.infosPanel}> </div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{base_page}
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>
|
|
<div className={styles.backgroundImage}></div>
|
|
<p className={styles.title}>{mod.display_name || mod.name }</p>
|
|
<p className={styles.fullDescription}>{mod.mod_infos.full_description || "No description"}</p>
|
|
</div>
|
|
|
|
|
|
<div className={styles.infosPanel}>
|
|
|
|
<a href={"/users/" + mod.author}>
|
|
<img src={profile} className={styles.profilePicture}></img>
|
|
<p className={styles.author}>{mod.author}</p>
|
|
</a>
|
|
|
|
<div className={styles.countsContainer}>
|
|
<div className={styles.count}>
|
|
<img src={download_icon} className={styles.countIcon}></img>
|
|
{mod.mod_infos.downloads_count || 0}
|
|
</div>
|
|
<div className={styles.count}>
|
|
<img src={favorite_icon} className={styles.countIcon}></img>
|
|
{mod.mod_infos.favorites_count || 0}
|
|
</div>
|
|
</div>
|
|
|
|
<p className={styles.panelTitle}>Versions</p>
|
|
<div className={styles.timeline}>
|
|
<a href={"/notfound"}>
|
|
<svg className={styles.versionDot}>
|
|
<circle cx="11" cy="11" r="10" stroke="#3a3a3a" stroke-width="1" fill="#1a1a1a" />
|
|
</svg>
|
|
<div className={styles.version}>
|
|
v3.0 (latest)
|
|
</div>
|
|
</a>
|
|
<a href={"/notfound"}>
|
|
<svg className={styles.versionDot}>
|
|
<circle cx="11" cy="11" r="10" stroke="#3a3a3a" stroke-width="1" fill="#1a1a1a" />
|
|
</svg>
|
|
<div className={styles.version}>
|
|
v2.0
|
|
</div>
|
|
</a>
|
|
|
|
<a href={"/notfound"}>
|
|
<svg className={styles.versionDot}>
|
|
<circle cx="11" cy="11" r="10" stroke="#3a3a3a" stroke-width="1" fill="#1a1a1a" />
|
|
</svg>
|
|
<div className={styles.version}>
|
|
v1.0
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</>)
|
|
}
|
|
|
|
export default ModPage |