feat: RSS feed and config

2025-11-02 20:36:07 +01:00
parent 9e872ea8d9
commit 77113c83e2
23 changed files with 1006 additions and 443 deletions
--- a/dist/assets/index-ByYsxaaM.js
+++ b/dist/assets/index-ByYsxaaM.js
--- a/dist/assets/index-DXaY9vUr.js
+++ b/dist/assets/index-DXaY9vUr.js
--- a/dist/assets/index-Db4VgUFq.css
+++ b/dist/assets/index-Db4VgUFq.css
@@ -1 +1 @@
-:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}import "@react-ui-org/react-ui/dist/react-ui.css";{}
+:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}
--- a/dist/index.html
+++ b/dist/index.html
@@ -5,8 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>trainhour</title>
-    <script type="module" crossorigin src="/assets/index-ByYsxaaM.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DeyVbdfU.css">
+    <script type="module" crossorigin src="/assets/index-DXaY9vUr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Db4VgUFq.css">
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@@ -12,12 +12,14 @@
  "dependencies": {
    "@chakra-ui/react": "^3.28.0",
    "@types/lodash": "^4.17.20",
+    "@uidotdev/usehooks": "^2.4.1",
    "axios": "^1.13.1",
    "lodash": "^4.17.21",
    "lucide-react": "^0.552.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-icons": "^5.5.0",
+    "rss-parser": "^3.13.0",
    "spinners-react": "^1.0.11",
    "styled-components": "^6.1.19"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
      '@types/lodash':
        specifier: ^4.17.20
        version: 4.17.20
+      '@uidotdev/usehooks':
+        specifier: ^2.4.1
+        version: 2.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
      axios:
        specifier: ^1.13.1
        version: 1.13.1
@@ -32,6 +35,9 @@ importers:
      react-icons:
        specifier: ^5.5.0
        version: 5.5.0(react@19.2.0)
+      rss-parser:
+        specifier: ^3.13.0
+        version: 3.13.0
      spinners-react:
        specifier: ^1.0.11
        version: 1.0.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -708,6 +714,13 @@ packages:
    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@uidotdev/usehooks@2.4.1':
+    resolution: {integrity: sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
  '@vitejs/plugin-react@5.1.0':
    resolution: {integrity: sha512-4LuWrg7EKWgQaMJfnN+wcmbAW+VSsCmqGohftWjuct47bv8uE4n/nPpq4XjJPsxgq00GGG5J8dvBczp8uxScew==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -1062,6 +1075,9 @@ packages:
  electron-to-chromium@1.5.240:
    resolution: {integrity: sha512-OBwbZjWgrCOH+g6uJsA2/7Twpas2OlepS9uvByJjR2datRDuKGYeD+nP8lBBks2qnB7bGJNHDUx7c/YLaT3QMQ==}

+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
  error-ex@1.3.4:
    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}

@@ -1542,9 +1558,15 @@ packages:
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true

+  rss-parser@3.13.0:
+    resolution: {integrity: sha512-7jWUBV5yGN3rqMMj7CZufl/291QAhvrrGpDNE4k/02ZchL0npisiYYqULF71jCEKoIiHvK/Q2e6IkDwPziT7+w==}
+
  run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

+  sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+
  scheduler@0.27.0:
    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}

@@ -1709,6 +1731,14 @@ packages:
    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
    engines: {node: '>=0.10.0'}

+  xml2js@0.5.0:
+    resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==}
+    engines: {node: '>=4.0.0'}
+
+  xmlbuilder@11.0.1:
+    resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==}
+    engines: {node: '>=4.0'}
+
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

@@ -2391,6 +2421,11 @@ snapshots:
      '@typescript-eslint/types': 8.46.2
      eslint-visitor-keys: 4.2.1

+  '@uidotdev/usehooks@2.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
  '@vitejs/plugin-react@5.1.0(vite@7.1.12(@types/node@24.9.1))':
    dependencies:
      '@babel/core': 7.28.5
@@ -3050,6 +3085,8 @@ snapshots:

  electron-to-chromium@1.5.240: {}

+  entities@2.2.0: {}
+
  error-ex@1.3.4:
    dependencies:
      is-arrayish: 0.2.1
@@ -3528,10 +3565,17 @@ snapshots:
      '@rollup/rollup-win32-x64-msvc': 4.52.5
      fsevents: 2.3.3

+  rss-parser@3.13.0:
+    dependencies:
+      entities: 2.2.0
+      xml2js: 0.5.0
+
  run-parallel@1.2.0:
    dependencies:
      queue-microtask: 1.2.3

+  sax@1.4.1: {}
+
  scheduler@0.27.0: {}

  semver@6.3.1: {}
@@ -3649,6 +3693,13 @@ snapshots:

  word-wrap@1.2.5: {}

+  xml2js@0.5.0:
+    dependencies:
+      sax: 1.4.1
+      xmlbuilder: 11.0.1
+
+  xmlbuilder@11.0.1: {}
+
  yallist@3.1.1: {}

  yaml@1.10.2: {}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,19 +1,20 @@
-import { useReducer, useState } from 'react'
+import { useCallback, useEffect, useReducer, useState } from 'react'

 import { useLoadTrainSchedule } from './hooks/useLoadTrainSchedule'

-import { actions, initialState, reducer } from './state'
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+import { actions, initialState, reducer, type Action, type State } from './state'

 import './App.css'
+import { IoSettingsSharp } from 'react-icons/io5';
+import styled from "styled-components";
+
 import { NewsWidget, TrainSchedule, WeatherWidget } from './containers';
-import {useGiteaApi, useNewsApi, useWeatherApi} from './hooks';
-import styled from 'styled-components';
+import {useGiteaApi, useNewsApi, useRssFeed, useWeatherApi} from './hooks';
 import {IssueWidget} from './containers/IssuesWidget';
-import {IoSettingsSharp} from 'react-icons/io5';
 import type {Station} from './types';
-//import {NativeSelectRoot} from '@chakra-ui/react';
-
-
+import {RssWidget} from './containers/RssWidget';

 const Container = styled.div`
  display: flex;
@@ -27,30 +28,172 @@ const Pane = styled.div`
 `;


+const SettingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: #1e1e2f;
+  color: #f1f1f1;
+  border-radius: 12px;
+  font-family: 'Inter', sans-serif;
+`;
+
+const FieldGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #2a2a40;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+`;
+
+const Label = styled.label`
+  font-size: 0.95rem;
+  color: #b0b0c0;
+`;
+
+const Select = styled.select`
+  background: #3a3a55;
+  color: #fff;
+  border: none;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  outline: none;
+  width: 60%;
+  cursor: pointer;
+
+  &:hover {
+    background: #4a4a6a;
+  }
+`;
+
+const Input = styled.input`
+  background: #3a3a55;
+  color: #fff;
+  border: none;
+  padding: 0.4rem 0.6rem;
+  border-radius: 6px;
+  width: 60px;
+  text-align: center;
+  outline: none;
+
+  &:focus {
+    background: #4a4a6a;
+  }
+`;
+
+const TextArea = styled.textarea`
+  background: #3a3a55;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem;
+  width: calc(100% - 2em);
+  height: 80px;
+  resize: vertical;
+  outline: none;
+
+  &:focus {
+    background: #4a4a6a;
+  }
+`;
+
+
+export const Button = styled.button`
+  background: #4a4a6a;
+  color: #fff;
+  border: none;
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: 'Inter', sans-serif;
+
+  &:hover {
+    background: #5b5b7a;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    background: #3a3a55;
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    background: #2a2a40;
+    color: #999;
+    cursor: not-allowed;
+  }
+`;
+
+// Credit to https://www.benmvp.com/blog/sync-localstorage-react-usereducer-hook/
+const usePersistReducer = () => {
+  const [savedState, saveState] = useLocalStorage(
+    'state',
+    initialState,
+  )
+
+  // wrap `reducer` with a memoized function that
+  // syncs the `newState` to `localStorage` before
+  // returning `newState`. memoizing is important!
+  const reducerLocalStorage = useCallback(
+    (state: State, action: Action) => {
+
+      const newState = reducer(state, action)
+
+      saveState(newState)
+
+      return newState
+    },
+    [saveState],
+  )
+
+  // use wrapped reducer and the saved value from
+  // `localStorage` as params to `useReducer`.
+  // this will return `[state, dispatch]`
+  return useReducer(reducerLocalStorage, savedState)
+}
+
+
 function App() {

-	const [state, dispatch] = useReducer( reducer, initialState, );
+	const [state, dispatch] = usePersistReducer();
 	const [settingOpened, setSettingOpened] = useState(false);

-
 	const { reloadTrainSchedule } = useLoadTrainSchedule(state, dispatch);
 	const { reloadNews } = useNewsApi({state, dispatch});
 	const { reloadWeather } = useWeatherApi({state, dispatch});
 	const { reloadIssues } = useGiteaApi({state, dispatch})
+	const { reloadRssFeed } = useRssFeed({state, dispatch})

 	const { selectedLocation } = state;
 	const setSelectedLocation = (location: string) => { 
 		dispatch(actions.setSelectedLocation({ location }))
+	}
+
+	useEffect(() => {
 		reloadNews();
 		reloadWeather();
 		reloadIssues();
 		reloadTrainSchedule();
-	}
+		reloadRssFeed();
+	}, [selectedLocation, state.config])

 	const mainContent = <>
 			<Pane>
 				<h2>Next trains in {state.selectedLocation}</h2>
 				<TrainSchedule {...{ state, dispatch }} />
+				{state.config.rssFollow.length > 0
+					? <>
+						<h2>RSS Feed</h2>
+						<RssWidget {...{ state, dispatch }} />
+					</>
+					: <></>
+				}
 			</Pane>
 			<Pane>
 					<h2>Weather</h2>
@@ -62,13 +205,73 @@ function App() {
 				</Pane>
 			</>

-	const settingContent = <> 
+
+	const { 
+		trainScheduleShow,
+		trainDelayCompute,
+		trainCancelCompute,
+		rssFollow,
+	} = state.config;
+
+	const setTrainScheduleShow = (value: number) => dispatch(actions.setConfig({ setting: 'trainScheduleShow', value }));
+	const setTrainDelayCompute = (value: number) =>  dispatch(actions.setConfig({ setting: 'trainDelayCompute', value }));
+	const setTrainCancelCompute = (value: number) => dispatch(actions.setConfig({ setting: 'trainCancelCompute', value }));
+
+	const setRssFollow = (value: string) => dispatch(actions.setConfig({ setting: 'rssFollow', value }));
+
+	const settingContent = (
  <Pane>
-			<select value={selectedLocation} onChange={e => setSelectedLocation(e.target.value)}>
-				{state.stations?.map((option: Station) => <option value={option.name}>{option.name}</option>)}
-			</select>
+    <SettingContainer>
+      <FieldGroup>
+        <Label>Location</Label>
+        <Select value={selectedLocation} onChange={e => setSelectedLocation(e.target.value)}>
+          {state.stations?.map((option: Station) => (
+            <option key={option.name} value={option.name}>{option.name}</option>
+          ))}
+        </Select>
+      </FieldGroup>
+
+      <FieldGroup>
+        <Label>Show Schedule</Label>
+        <Input
+          type="number"
+          value={trainScheduleShow}
+          onChange={e => setTrainScheduleShow(parseInt(e.target.value))}
+        />
+				min
+      </FieldGroup>
+
+      <FieldGroup>
+        <Label>Compute Delay</Label>
+        <Input
+          type="number"
+          value={trainDelayCompute}
+          onChange={e => setTrainDelayCompute(parseInt(e.target.value))}
+        />
+				min
+      </FieldGroup>
+
+      <FieldGroup>
+        <Label>Compute Cancellation</Label>
+        <Input
+          type="number"
+          value={trainCancelCompute}
+          onChange={e => setTrainCancelCompute(parseInt(e.target.value))}
+        />
+				min
+      </FieldGroup>
+
+      <div>
+        <Label>RSS Feed</Label>
+        <TextArea
+          value={rssFollow}
+          onChange={e => setRssFollow(e.target.value)}
+        />
+      </div>
+			<Button onClick={() => setSettingOpened(false)}>Close</Button>
+    </SettingContainer>
  </Pane>
-	</>
+	);

  return (
 		<>
--- a/src/components/Indicators.tsx
+++ b/src/components/Indicators.tsx
@@ -5,7 +5,7 @@ import {mean} from "lodash";

 import styled from "styled-components";
 import { Clock, AlertTriangle, XCircle } from "lucide-react";
-import {accentColor} from "../styles";
+import { accentColor } from "../styles";

 export const IndicatorStyled = styled.div`
  display: flex;
@@ -56,17 +56,17 @@ const formatPercent = (num?: number) => {
 };

 export const Indicator = ({ state }: { state: State }) => {
-  const inOneHour = state.departures?.filter(filterTrainHour(60));
-  const inThreeHour = state.departures?.filter(filterTrainHour(-60 * 3));
+  const delayDepartures = state.departures?.filter(filterTrainHour(state.config.trainDelayCompute));
+  const cancelledDepartures = state.departures?.filter(filterTrainHour(0, state.config.trainCancelCompute));

-  const averageDelayGeneral = mean(inOneHour?.map(d => parseInt(d.delay)));
+  const averageDelayGeneral = mean(delayDepartures?.map(d => parseInt(d.delay)));
  const averageDelayedOnly = mean(
-    inOneHour?.filter(d => parseInt(d.delay) !== 0)?.map(d => parseInt(d.delay))
+    delayDepartures?.filter(d => parseInt(d.delay) !== 0)?.map(d => parseInt(d.delay))
  );

  const cancelled =
-    (inThreeHour?.filter(d => d?.canceled === '1')?.length || 0) /
-    (inThreeHour?.length || 1);
+    (cancelledDepartures?.filter(d => d?.canceled === '1')?.length || 0) /
+    (cancelledDepartures?.length || 1);

  return (
    <IndicatorStyled>
--- a/src/components/NowTime.tsx
+++ b/src/components/NowTime.tsx
@@ -20,7 +20,6 @@ export const TimeStyled = styled.div`
  align-items: center;
 	justify-content: center;
 	padding-right: 1em;
-	width: 40vh;
 `;

 export const NowTime = () => {
--- a/src/containers/RssWidget.tsx
+++ b/src/containers/RssWidget.tsx
@@ -0,0 +1,50 @@
+import type { Dispatch } from "react"
+import type { Action, State } from "../state"
+import styled from "styled-components";
+import {accentColor} from "../styles";
+
+export const NewsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  background: #0b0c10;
+  color: #fff;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); 
+  font-family: "Inter", sans-serif;
+  max-width: 600px; 
+  margin: 1rem auto; 
+`;
+
+
+export const NewsHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+`;
+
+export const TitleLink = styled.a`
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: ${accentColor}; 
+  text-decoration: none;
+  margin-right: 1rem;
+`;
+
+const RssArticle = (article: {title: string, link: string}) => {
+
+	return <NewsContainer>
+		<NewsHeader>{article.title}</NewsHeader>
+		<a href={article.link}>Read more</a>
+	</NewsContainer>
+}
+  
+export const RssWidget = ({ state }: { state: State, dispatch: Dispatch<Action> }) => {
+
+	return <>
+		{state.rss?.map(rss => <RssArticle {...rss} />)}
+	</>
+}
--- a/src/containers/TrainSchedule.tsx
+++ b/src/containers/TrainSchedule.tsx
@@ -11,17 +11,15 @@ import { SpinnerDiamond } from 'spinners-react';
 import type { DepartureType } from '../types/liveboard';
 import { Indicator } from '../components/Indicators';

-const showTrainsMinutes = 120;
-
-export const filterTrainHour = (delay: number) => (departure: DepartureType) => {
+export const filterTrainHour = (delay: number, start: number = 0) => (departure: DepartureType) => {
 	const time = new Date(parseInt(departure.time) * 1000);
 	const now = new Date();
 	const h = time.getHours();
 	const m = time.getMinutes();
 	const nowInMinutes = (now.getHours() * 60) + now.getMinutes();
 	const minutes = h * 60 + m;
-		return (nowInMinutes + delay) > minutes;
-	}
+	return (nowInMinutes + delay) > minutes && (nowInMinutes + start ) < minutes;;
+}

 type TrainScheduleProps = {
 	dispatch: Dispatch<Action>,
@@ -30,7 +28,7 @@ type TrainScheduleProps = {

 export const TrainSchedule = ({ state } : TrainScheduleProps) => {

-	const filteredDepartures = state.departures?.filter(filterTrainHour(showTrainsMinutes)) 
+	const filteredDepartures = state.departures?.filter(filterTrainHour(state.config.trainScheduleShow)) 

 	return <>
 		<NowTime />
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -2,3 +2,4 @@ export * from './useLoadTrainSchedule';
 export * from './useNewsApi';
 export * from './useWeatherApi';
 export * from './useGiteaApi';
+export * from './useRssFeed';
--- a/src/hooks/useGiteaApi.tsx
+++ b/src/hooks/useGiteaApi.tsx
@@ -1,4 +1,4 @@
-import { useEffect, type Dispatch } from "react";
+import { type Dispatch } from "react";
 import { actions, type Action, type State } from "../state";
 import type {IssuesResponse} from "../types/issues";

@@ -23,9 +23,5 @@ export const useGiteaApi = ({ dispatch }: { state : State, dispatch: Dispatch<Ac
 		
 	})

-	useEffect(() => {
-		reloadIssues();
-	}, [])
-
 	return { reloadIssues }
 }
--- a/src/hooks/useLoadTrainSchedule.tsx
+++ b/src/hooks/useLoadTrainSchedule.tsx
@@ -1,4 +1,4 @@
-import { useEffect, type Dispatch } from "react"
+import { type Dispatch } from "react"
 import { actions, type Action, type State } from "../state"
 import { flatten, range } from 'lodash';

@@ -44,8 +44,5 @@ export const useLoadTrainSchedule = (state: State, dispatch: Dispatch<Action>) =
 			dispatch(actions.loadTrainScheduleError({ error: error as Error}))
 		}
 	})
-	useEffect(() => {
-		reloadTrainSchedule()
-	}, [])
 	return { reloadTrainSchedule }
 }
--- a/src/hooks/useNewsApi.tsx
+++ b/src/hooks/useNewsApi.tsx
@@ -1,4 +1,4 @@
-import { useEffect, type Dispatch } from "react"
+import { type Dispatch } from "react"
 import { actions, type Action, type State } from "../state"
 import type {Article} from "../types/article"

@@ -20,9 +20,5 @@ export const useNewsApi = ({dispatch}: UseNewsApiProps) => {
 			dispatch(actions.loadNewsError({ error: error as Error}));
 		}
 	})
-	useEffect(() => {
-		reloadNews()
-	}, [])
-
 	return { reloadNews } 
 }
--- a/src/hooks/useRssFeed.tsx
+++ b/src/hooks/useRssFeed.tsx
@@ -0,0 +1,60 @@
+import {flatten} from 'lodash';
+import { actions, type Action, type RSS, type State } from '../state';
+import type { Dispatch } from 'react';
+
+export async function fetchAndParseRSS(url: string): Promise<RSS[]> {
+    const response = await fetch(`https://cors-anywhere.com/${url}`);
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const xmlText = await response.text();
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlText, "application/xml");
+
+    if (xmlDoc.getElementsByTagName('parsererror').length > 0) {
+        throw new Error("Failed to parse XML content. Check for valid RSS/XML format.");
+    }
+
+    const safeText = (selector: string, context: Element): string => {
+        const el = context.querySelector(selector);
+        return el?.textContent?.trim() ?? 'No Data';
+    };
+
+    const rssItems = xmlDoc.querySelectorAll('channel > item');
+
+    if (rssItems.length > 0) {
+        return Array.from(rssItems).map((item: Element): RSS => ({
+            title: safeText('title', item),
+            link: safeText('link', item)
+        }));
+    }
+
+    const atomEntries = xmlDoc.querySelectorAll('entry');
+
+    if (atomEntries.length > 0) {
+        return Array.from(atomEntries).map((entry: Element): RSS => {
+            const linkElement = entry.querySelector('link[rel="alternate"]') || entry.querySelector('link');
+
+            return {
+                title: safeText('title', entry),
+                link: linkElement?.getAttribute('href') ?? safeText('link', entry) // Prefer 'href' attribute
+            };
+        });
+    }
+
+    // If neither RSS nor Atom format is detected
+    return [];
+}
+
+export const useRssFeed = ({ state, dispatch}: { state: State, dispatch: Dispatch<Action> }) => {
+	const reloadRssFeed = (async () => {
+		const answer = await Promise.all(
+			state.config.rssFollow.split('/n').map((url: string) => fetchAndParseRSS(url))
+		);
+		const feeds: RSS[] = flatten(answer);
+		dispatch(actions.loadRSSFeedsSuccess({ feeds }))
+	})
+	return { reloadRssFeed }
+}
--- a/src/hooks/useWeatherApi.tsx
+++ b/src/hooks/useWeatherApi.tsx
@@ -1,4 +1,4 @@
-import { useEffect, type Dispatch } from "react"
+import { type Dispatch } from "react"
 import { actions, type Action, type State } from "../state"
 import type {WeatherData} from "../types/weather";

@@ -21,8 +21,5 @@ export const useWeatherApi = ({ dispatch, state }: UseWeatherApiProps) => {
 			dispatch(actions.loadWeatherError({ error: error as Error }));
 		}
 	});
-	useEffect(() => {
-		reloadWeather();
-	}, [])
 	return { reloadWeather }
 }
--- a/src/state/actions/actions.ts
+++ b/src/state/actions/actions.ts
@@ -12,6 +12,10 @@ import {
 	loadGiteaIssueSuccess,
 	loadGiteaIssue,
 	setSelectedLocation,
+	setConfig,
+	loadRssFeeds,
+	loadRssFeedsSuccess,
+	loadRssFeedsError,
 } from './consts'

 import {
@@ -28,6 +32,10 @@ import {
 	type LoadGiteaIssueSuccess,
 	type LoadGiteaIssue,
 	type SetSelectedLocation,
+	type SetConfig,
+	type LoadRssFeeds,
+	type LoadRssFeedsSuccess,
+	type LoadRssFeedsError,
 } from './types';

 export const actions = {
@@ -83,4 +91,20 @@ export const actions = {
    type: setSelectedLocation,
    ...args
  } as SetSelectedLocation),
+  setConfig: (args: Omit<SetConfig, "type">) => ({
+    type: setConfig,
+    ...args
+  } as SetConfig),
+  loadRSSFeeds: (args: Omit<LoadRssFeeds, "type">) => ({
+    type: loadRssFeeds,
+    ...args
+  } as LoadRssFeeds),
+  loadRSSFeedsSuccess: (args: Omit<LoadRssFeedsSuccess, "type">) => ({
+    type: loadRssFeedsSuccess,
+    ...args
+  } as LoadRssFeedsSuccess),
+  loadRSSFeedsError: (args: Omit<LoadRssFeedsError, "type">) => ({
+    type: loadRssFeedsError,
+    ...args
+  } as LoadRssFeedsError),
 }
--- a/src/state/actions/consts.ts
+++ b/src/state/actions/consts.ts
@@ -17,3 +17,9 @@ export const loadGiteaIssueSuccess: ActionType  = 'loadGiteaIssueSuccess';
 export const loadGiteaIssueError: ActionType  = 'loadGiteaIssueError';

 export const setSelectedLocation: ActionType  = 'setSelectedLocation';
+
+export const setConfig: ActionType = 'setConfig';
+
+export const loadRssFeeds: ActionType  = 'RssFeeds';
+export const loadRssFeedsSuccess: ActionType  = 'RssFeedsSuccess';
+export const loadRssFeedsError: ActionType  = 'RssFeedsError';
--- a/src/state/actions/types.ts
+++ b/src/state/actions/types.ts
@@ -5,6 +5,7 @@ import type {Article} from '../../types/article';
 import type {IssuesResponse} from '../../types/issues';
 import type { DepartureType } from '../../types/liveboard';
 import type {WeatherData} from '../../types/weather';
+import type {RSS} from '../state';
 import { 
 	loadTrainSchedule, 
 	loadTrainScheduleError, 
@@ -19,6 +20,10 @@ import {
 	loadGiteaIssueError,
 	loadGiteaIssue,
 	setSelectedLocation,
+	setConfig,
+	loadRssFeeds,
+	loadRssFeedsSuccess,
+	loadRssFeedsError,
 } from './consts'

 export type Action = {
@@ -88,3 +93,22 @@ export type SetSelectedLocation = {
 	location: string,
 }

+export type SetConfig = {
+	type: typeof setConfig,
+	setting: string,
+	value: string | number,
+}
+
+export type LoadRssFeeds = {
+	type: typeof loadRssFeeds,
+}
+
+export type LoadRssFeedsSuccess = {
+	type: typeof loadRssFeedsSuccess,
+	feeds: RSS[]
+}
+
+export type LoadRssFeedsError = {
+	type: typeof loadRssFeedsError,
+	feeds: RSS[]
+}
--- a/src/state/initialState.ts
+++ b/src/state/initialState.ts
@@ -14,5 +14,14 @@ export const initialState: State = {
 	issuesError: undefined,
 	issuesLoading: false,
 	stations: undefined,
-	selectedLocation: 'Nivelles'
+	selectedLocation: 'Nivelles',
+	config: {
+		rssFollow: '',
+		trainCancelCompute: -180,
+		trainDelayCompute: 60,
+		trainScheduleShow: 120
+	},
+	rss: undefined,
+	rssLoading: false,
+	rssError: undefined
 };
--- a/src/state/reducer.ts
+++ b/src/state/reducer.ts
@@ -24,6 +24,11 @@ import {
 	type LoadGiteaIssueError,
 	setSelectedLocation,
 	type SetSelectedLocation,
+	setConfig,
+	type LoadRssFeedsSuccess,
+	type SetConfig,
+	loadRssFeeds,
+	loadRssFeedsSuccess,
 } from './actions';


@@ -108,6 +113,25 @@ export const reducerInner = (state: State, action: Action): State => {
 			issuesLoading: false,
    }
  }
+  else if(action.type === loadGiteaIssueError) {
+    return {
+      ...state,
+			issuesLoading: false,
+			issuesError: (action as LoadGiteaIssueError).error,
+    }
+  }
+	else if(action.type === loadRssFeeds) {
+    return {
+      ...state,
+			rssLoading: true,
+    }
+  }
+  else if(action.type === loadRssFeedsSuccess) {
+    return {
+      ...state,
+			rss: (action as LoadRssFeedsSuccess).feeds,
+    }
+  }
  else if(action.type === loadGiteaIssueError) {
    return {
      ...state,
@@ -121,6 +145,15 @@ export const reducerInner = (state: State, action: Action): State => {
 			selectedLocation: (action as SetSelectedLocation).location,
    }
  }
+  else if(action.type === setConfig) {
+    return {
+      ...state,
+			config: {
+				...state.config,
+				[(action as SetConfig).setting]: (action as SetConfig).value
+			}
+    }
+  }
  return state;
 }

--- a/src/state/state.ts
+++ b/src/state/state.ts
@@ -4,6 +4,18 @@ import type {IssuesResponse} from "../types/issues";
 import type { DepartureType } from "../types/liveboard";
 import type { WeatherData } from "../types/weather";

+export type RSS = {
+	title: string, 
+	link: string
+}
+
+export type Config = {
+	trainScheduleShow: number,
+	trainDelayCompute: number,
+	trainCancelCompute: number,
+	rssFollow: string,
+}
+
 export type State = { 
 	trainScheduleLoading: boolean,
 	departures: DepartureType[] | undefined,
@@ -23,4 +35,10 @@ export type State = {

 	stations: undefined | Station[],
 	selectedLocation: string,
+	config: Config,
+
+	rss: RSS[] | undefined,
+	rssLoading: boolean,
+	rssError: Error | undefined,
+
 }