From c23176796f1f9f72c2bd859c7e63e8cbcea26509 Mon Sep 17 00:00:00 2001 From: "anthony@rabine.fr" Date: Mon, 13 Jan 2025 11:58:53 +0100 Subject: [PATCH] fetch stories list from libraryes ok --- story-player-web/app-context.js | 47 +++++++++++++++ story-player-web/app.js | 48 +++++++-------- story-player-web/components/StoriesList.js | 68 ++++++++++++++++++---- story-player-web/index.html | 14 ++++- story-player-web/main.css | 7 +-- 5 files changed, 143 insertions(+), 41 deletions(-) create mode 100644 story-player-web/app-context.js diff --git a/story-player-web/app-context.js b/story-player-web/app-context.js new file mode 100644 index 0000000..3208971 --- /dev/null +++ b/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} + + `; +}; + +export { AppProvider, AppContext }; diff --git a/story-player-web/app.js b/story-player-web/app.js index 698d9ec..dc6eaa0 100644 --- a/story-player-web/app.js +++ b/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'; - -import { render } from 'preact'; -import { createContext } from "preact"; -import { html } from 'htm/preact'; +// Components 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 DefaultContext = { - stories: [] - }; + // const { setStories } = useContext(AppContext); this.params = storage.getItem('server') || { serverUrl: '127.0.0.1', serverPort: 8081, }; - storage.setItem('server', this.params); - - // try to connect to the server - apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`); - apiClient.get('/library/list') - .then(data => { - console.log('Server is up and running', data); - eventBus.publish('server-state-changed', {connected: true}); - }) - .catch(error => { - console.log('Server is down'); - eventBus.publish('server-state-changed', {connected: false}); - }); + // The useEffect hook with an empty dependency array simulates the componentDidMount lifecycle method. + // It runs the provided function after the component is first rendered. + // This is a good place to perform data fetching or initial setup. + useEffect(() => { + console.log("App ready"); + return () => { + console.log("App unmount"); + } + }, []); + storage.setItem('server', this.params); + apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`); + return html` - + <${AppProvider}> <${TopMenu} /> <${ParametersDialog} /> @@ -48,7 +48,7 @@ export function App() { <${StoryPlayer} /> <${StoriesList} /> - + `; } diff --git a/story-player-web/components/StoriesList.js b/story-player-web/components/StoriesList.js index 27dc05e..b2ccd9e 100644 --- a/story-player-web/components/StoriesList.js +++ b/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` -
-
-
-
-

Titre de la Carte 1

-

Description de la carte 1. Voici une brève description pour cette carte.

+
+ ${state.stories.map(story => html` +
+
+
+

${story.title}

+

${story.description}

+
+ Image de la carte 1
- Image de la carte 1
-
+ `)}
`; diff --git a/story-player-web/index.html b/story-player-web/index.html index cad2e28..2d3cb84 100644 --- a/story-player-web/index.html +++ b/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; */ } @@ -42,4 +54,4 @@ - \ No newline at end of file + diff --git a/story-player-web/main.css b/story-player-web/main.css index e02e653..f0e3c88 100644 --- a/story-player-web/main.css +++ b/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; } + +