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

frontend/src/components/Fields/search.jsx

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

frontend/src/components/Title/title.jsx

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

frontend/src/pages/dashboard.jsx

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

frontend/src/pages/mod_page.jsx

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

frontend/src/pages/mods.jsx

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

frontend/src/services/mods.js

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