guillm/wf-radio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Backend and frontend filtering (search and author), dashboard now displays creations

Browse source
This commit is contained in:
Gu://em_ 2025-05-17 16:33:49 +02:00
parent 58268a94a9
commit 683f8784a7
11 changed files with 189 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backend/src/controllers/mods.js
View file

@ -5,7 +5,8 @@ const { authorizeModModification, authenticateToken } = require("../middleware/a
async function listMods(req, res) {
try {
// Query
const query_result = await mod_service.getAllMods();
const filters = req.query;
const query_result = await mod_service.listMods(filters);
res.json(query_result);
} catch (error) {
handleError(error, res);

2
backend/src/database/sqlite.js
View file

@ -28,7 +28,7 @@ class SQLiteDatabase {
// Runs with a result (ex: SELECT)
async query(sql, params = []) {
try {
if (params.length > 0) {
if ( params != []) {
return this.db.prepare(sql).all(params);
} else {
return this.db.prepare(sql).all();

17
backend/src/models/mod.js
View file

@ -5,12 +5,21 @@ const db = getDatabase();
// --- Get ---
async function getAllMods() {
return await db.query("SELECT name, display_name, author, description FROM Mods");
async function listMods(filters) {
console.debug(filters);
return await db.query(`SELECT name, display_name, author, description FROM Mods
WHERE
(CASE WHEN @search IS NOT NULL THEN
name LIKE '%' || @search || '%' OR
display_name LIKE '%' || @search || '%' OR
description LIKE '%' || @search || '%'
ELSE TRUE END) AND
(CASE WHEN @author IS NOT NULL THEN author = @author ELSE TRUE END);
`, filters);
}
async function getModByName(name) {
return await db.query("SELECT name, display_name, author FROM Mods WHERE name = ?;", [name]);
return await db.query("SELECT name, display_name, author FROM Mods WHERE name = @name;", {name: name});
}
@ -185,7 +194,7 @@ async function containsTag(name, tag) {
// --- Exports ---
module.exports = { getAllMods, getModByName, getFullModInfos,
module.exports = { listMods, getModByName, getFullModInfos,
listVersions, listTags, getVersionByNumber, getVersion,
createMod, addVersion, addTags,
updateMod,

12
backend/src/services/modService.js
View file

@ -7,8 +7,14 @@ const { sanitizeModData } = require("../utils/sanitize");
// --- Get ---
async function getAllMods() {
return model.getAllMods();
async function listMods(filters) {
//TODO Validate filters
console.warn("Skipping full filters validation: Not implemented");
filters.author = filters.author || null;
filters.search = filters.search || null;
return await model.listMods({...filters});
}
async function getModByName(name) {
@ -162,7 +168,7 @@ async function deleteTags(mod, tags) {
return { "mod": mod, "tags": res};
}
module.exports = { getAllMods, getModByName, getFullModInfos,
module.exports = { listMods, getModByName, getFullModInfos,
createMod, addTags, addVersion,
updateMod,
deleteMod, deleteTags, deleteVersion };

6
frontend/src/components/Fields/search.jsx
View file

@ -17,14 +17,14 @@ function SearchBar({ onSearch }) {
const handleInputChange = (event) => {
const new_search_input = event.target.value;
setSearchTerm(new_search_input);
setSearchInput(new_search_input);
if (timeout_id.current) {
clearTimeout(timeout_id.current);
}
timeout_id.current = setTimeout(() => {
onSearch(newSearchTerm);
onSearch(new_search_input);
}, 500);
};
@ -43,7 +43,7 @@ function SearchBar({ onSearch }) {
type="text"
placeholder="Search"
value={search_input}
onChange={handleInputChange}
onInput={handleInputChange}
className={styles.searchBarInput}
/>
</div>

1
frontend/src/components/Title/title.jsx Normal file
View file

@ -0,0 +1 @@
//TODO

0
frontend/src/components/Title/title.module.css Normal file
View file

110
frontend/src/pages/dashboard.jsx
View file

@ -1,5 +1,11 @@
// Preact
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { useState, useEffect } from 'preact/hooks';
import Cookies from 'js-cookie'
import { jwtDecode } from 'jwt-decode';
// Functions
import { listMods } from '../services/mods';
// Components
import Button from '../components/Buttons/button'
@ -13,17 +19,98 @@ import styles from '../styles/dashboard.module.css'
function DashboardPage() {
// useStates
const [creations, setCreations] = useState([]);
const [loading_creations, setLoadingCreations] = useState(true)
const [creations_error, setCreationsError] = useState(null)
// Functions
let user;
async function loadUserInformations() {
//TODO use a service
const token = Cookies.get('authToken');
if (token) {
const decoded_token = jwtDecode(token);
if (decoded_token) {
user = decoded_token.username
}
}
if (!user) {
console.error("Cannot retrieve user from token");
location.replace('/login')
}
}
async function loadCreations() {
setLoadingCreations(true);
setCreationsError(false);
try {
const fetched_items = await listMods({author: user});
setCreations(fetched_items);
} catch (err) {
setCreationsError(err.message);
} finally {
setLoadingCreations(false);
}
}
// useEffects
useEffect(async ()=> {
await loadUserInformations();
await loadCreations();
}, []);
// Handles
const handleCreate = () => {
window.location.href('/create/mod');
}
// Page
// Base page
const base_page = (
<a href='/' target="_blank">
<img src={Logo} class="logoSmall img" alt="WF" />
<p class="logoSmall text"> dashboard </p>
</a>
);
if (loading_creations) {
// TODO replace by icons
return (
<>
{base_page}
<div class='container'>
<p>Loading</p>
</div>
</>
);
}
if (creations_error) {
// TODO replace by popup
return (
<>
{base_page}
<div class='container'>
<p>Error: {creations_error}</p>
</div>
</>
);
}
return (
<>
<a href='/' target="_blank">
<img src={Logo} class="logoSmall img" alt="WF" />
<p class="logoSmall text"> dashboard </p>
</a>
{base_page}
<div class='container'>
<div className={styles.category}>
<p className={styles.title}>
@ -42,6 +129,17 @@ function DashboardPage() {
Your creations
</p>
<div className={styles.tiles}>
{/* Temporary, missing card component */}
{creations.map( (item) => {
console.debug(item.name);
return (<div className={styles.emptyTile}>
<div className={styles.emptyTileText}>
{item.display_name}
</div>
</div>);
})}
<a className={styles.emptyTile} href='/create/mod'>
<p className={styles.emptyTileText}>
<img src={Add} ></img>

1
frontend/src/pages/mod_page.jsx
View file

@ -60,7 +60,6 @@ function ModPage({name}) {
if (token) {
const decoded_token = jwtDecode(token);
if (decoded_token) {
console.debug('Here');
if (decoded_token.username === mod.author) {
setOwner(true);
}

42
frontend/src/pages/mods.jsx
View file

@ -31,30 +31,32 @@ function ModsPage() {
setSearchInput(new_search_input);
};
// UseEffect
useEffect(() => {
async function loadItems() {
setLoading(true);
setError(false);
try {
const filters = {
search: search_input,
categories: selected_categories
};
const fetched_mods = await listMods(filters);
setMods(fetched_mods);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
async function loadItems() {
setLoading(true);
setError(false);
try {
const filters = {
search: search_input,
};
console.debug("Searching", search_input);
const fetched_mods = await listMods(filters);
setMods(fetched_mods);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
// useEffect
useEffect(() => {
loadItems();
}, []); // <-- Tells useEffect to run once after render
}, [search_input]);
// Base page
const base_page = (

51
frontend/src/services/mods.js
View file

@ -32,31 +32,48 @@ export async function createMod(mod_data) {
export async function listMods(filters) {
try {
const response = await fetch(`${API_BASE_URL}/list/mods`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
try {
let url_parameters = "";
// Parse filters
for (const [key, value] of Object.entries(filters)) {
if (url_parameters === "") {
url_parameters += "?"
} else {
url_parameters += "&"
}
url_parameters += `${key}=${value}`;
}
// Query
const response = await fetch(`${API_BASE_URL}/list/mods/${url_parameters}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// Return
const data = await response.json();
return data;
} catch (error) {
console.error('Failed to fetch mods:', error);
throw error;
console.error('Failed to fetch mods:', error);
throw error;
}
}
export async function getMod(mod_name) {
try {
const response = await fetch(`${API_BASE_URL}/mods/${mod_name}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
const response = await fetch(`${API_BASE_URL}/mods/${mod_name}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Failed to fetch mod:', error);
throw error;
console.error('Failed to fetch mod:', error);
throw error;
}
}