fetch stories list from libraryes ok

story-player-web/app-context.js

@@ -0,0 +1,47 @@
+import { createContext } from "preact";
+import { useState } from 'preact/hooks';
+import { html } from 'htm/preact';
+
+const AppContext = createContext();
+
+const AppProvider = ({ children }) => {
+    const [state, setState] = useState({
+        stories: [
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+            { uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
+
+        ]
+    });
+
+    const setStories = (stories) => {
+        setState(prevState => ({
+            ...prevState,
+            stories: [...stories ],
+        }));
+    };
+
+    // // Fonction pour changer les paramètres
+    // const updateSettings = (newSettings) => {
+    //     setState(prevState => ({
+    //         ...prevState,
+    //         settings: { ...prevState.settings, ...newSettings },
+    //     }));
+    // };
+
+    return html`
+        <${AppContext.Provider} value=${{ state, setStories }}>
+            ${children}
+        </${AppContext.Provider}>
+    `;
+};
+
+export { AppProvider, AppContext };

story-player-web/app.js

@@ -1,46 +1,46 @@
+// Preact
+import { useContext, useEffect } from 'preact/hooks';
+import { render } from 'preact';
+import { html } from 'htm/preact';
+
+// Classes
 import apiClient  from './classes/api-client.js'
 import eventBus from './classes/event-bus.js';
 import storage from './classes/storage.js';
 
-
+// Components
-import { render } from 'preact';
-import { createContext } from "preact";
-import { html } from 'htm/preact';
 import TopMenu  from './components/TopMenu.js'
 import ParametersDialog from './components/ParametersDialog.js';
 import StoryPlayer from './components/StoryPlayer.js';
 import StoriesList from './components/StoriesList.js';
 
-export const AppContext = createContext("appContext");
+// Project
+import { AppProvider, AppContext } from './app-context.js';
 
 export function App() {
-
+   // const { setStories } = useContext(AppContext);
-    const DefaultContext = {
-        stories: []
-    };
 
     this.params = storage.getItem('server') || {
         serverUrl: '127.0.0.1',
         serverPort: 8081, 
     };
 
-    storage.setItem('server', this.params);
+    // The useEffect hook with an empty dependency array simulates the componentDidMount lifecycle method. 
-    
+    // It runs the provided function after the component is first rendered. 
-    // try to connect to the server
+    // This is a good place to perform data fetching or initial setup.
-    apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`);
+    useEffect(() => {
-    apiClient.get('/library/list')
+        console.log("App ready");
-    .then(data => {
+        return () => {
-        console.log('Server is up and running', data);
+            console.log("App unmount");
-        eventBus.publish('server-state-changed', {connected: true});
+        }
-    })
+    }, []);
-    .catch(error => {
-        console.log('Server is down');
-        eventBus.publish('server-state-changed', {connected: false});
-    });
 
 
+    storage.setItem('server', this.params);
+    apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`);
+
     return html`
-    <AppContext.Provider value="${DefaultContext}">
+    <${AppProvider}>
         <${TopMenu} />
         <${ParametersDialog} />
 
@@ -48,7 +48,7 @@ export function App() {
             <${StoryPlayer} />
             <${StoriesList} />
         </div>
-    </AppContext.Provider>
+    </${AppProvider}>
     `;
 }
 

story-player-web/components/StoriesList.js

@@ -1,22 +1,60 @@
 import { html } from 'htm/preact';
+
+// Classes
 import eventBus from '../classes/event-bus.js';
-import { useState } from 'preact/hooks';
+import apiClient from '../classes/api-client.js';
+
+import { AppContext } from '../app-context.js';
+import { useContext, useEffect } from 'preact/hooks'
 
 
 function StoriesList() {
 
+    const { state, setStories } = useContext(AppContext);
+
+
+    useEffect(() => {
+        console.log("Fetch stories");
+        getStories();
+
+        return () => {
+            console.log("Component will unmount");
+        }
+    }, []);
+
+
+    function getStories() {
+
+        // try to connect to the server
+        
+        apiClient.get('/library/list')
+        .then(data => {
+            console.log('Server is up and running', data);
+            eventBus.publish('server-state-changed', {connected: true});
+            setStories(data);
+        })
+        .catch(error => {
+            console.log('Api error: '  + error);
+            eventBus.publish('server-state-changed', {connected: false});
+        });
+    }
+
+    function handleClickOnStory() {
+        console.log("Clicked")
+    }
+
     return html`
         <style>
         .card-container {
             max-height: 80vh;
             overflow-y: auto;
-            padding: 20px;
+            padding: 4px;
+            width: 400px;
         }
 
         .card {
             display: flex;
             align-items: center;
-
         }
 
         .card-content {
@@ -33,6 +71,12 @@ function StoriesList() {
         .card-description {
             font-size: 0.9em;
             margin: 0;
+
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 220px;
+
         }
 
         .card-image {
@@ -42,16 +86,18 @@ function StoriesList() {
             border-radius: 10px;
         }
         </style>
-        <div>
+        <div style="max-height: 400px; overflow-y: auto; border: 1px solid #ccc; ">
-            <div class="card-container">
+            ${state.stories.map(story => html`
-                <div class="block card">
+                <div class="card-container" onClick="${handleClickOnStory}">
-                    <div class="card-content">
+                    <div class="block card">
-                        <h2 class="card-title">Titre de la Carte 1</h2>
+                        <div class="card-content">
-                        <p class="card-description">Description de la carte 1. Voici une brève description pour cette carte.</p>
+                            <h2 class="card-title">${story.title}</h2>
+                            <p class="card-description">${story.description}</p>
+                        </div>
+                        <img src="https://placehold.co/100x75" alt="Image de la carte 1" class="card-image" />
                     </div>
-                    <img src="https://placehold.co/100x75" alt="Image de la carte 1" class="card-image" />
                 </div>
-            </div>
+            `)}
         </div>
 
     `;

story-player-web/index.html

@@ -33,6 +33,18 @@
             margin: 0;
             padding: 0;
             line-height: 1.6;
+            --block-accent-color: #3a5ec5;
+
+            /* --block-text-color: #f8f8f8;
+            --block-background-color: #222;
+            --block-accent-color: #f2d12e;
+            --block-shadow-color: #555; */
+
+            background: #abcdef;
+            /* margin: 4px auto;
+            max-width: 800px;
+            color: #222;
+            --block-accent-color: #3a5ec5; */
         }
     </style>
     </head>
@@ -42,4 +54,4 @@
         <script src="storyvm.js"></script>
         <script src="app.js" type="module"></script>
     </body>
-</html>
+</html>

story-player-web/main.css

@@ -1,11 +1,6 @@
 /* Extra styles to make the demo look nicer.
  * Feel free to look around! */
 
-main {
-    margin: 4px auto;
-    max-width: 800px;
-    color: #222;
-}
 
 @media only screen and (max-width: 824px) {
     main {
@@ -52,3 +47,5 @@ a {
 input {
     border: 0;
 }
+
+