add flatastic api

src/App.tsx

@@ -4,16 +4,20 @@ import { useDispatch } from "react-redux";
 import { fetchTimetable } from "./store/index";
 import { useEffect } from "react";
 import { type AppDispatch } from "./store/index";
+import Flatastic from "./components/Flatastic/Flatastic";
+import fetchFlatasticChores from "./store/thunks/fetchFlatasticChores";
 
 function App() {
     const dispatch = useDispatch<AppDispatch>();
     // Fetch the timetable data when the app loads
     useEffect(() => {
         dispatch(fetchTimetable());
+        dispatch(fetchFlatasticChores());
     }, [dispatch]);
     return (
         <>
             <Timetable />
+            <Flatastic />
         </>
     );
 }

src/api/api.ts

@@ -1,9 +1,13 @@
-function callApi(stopId: number) {
-    const API_URL = `https://projekte.kvv-efa.de/sl3-alone/XSLT_DM_REQUEST?outputFormat=JSON&coordOutputFormat=WGS84[dd.ddddd]&depType=stopEvents&locationServerActive=1&mode=direct&name_dm=${stopId}&type_dm=stop&useOnlyStops=1&useRealtime=1&limit=6&line=kvv%253A22301%253AE%253AH%253As25&line=kvv%253A21012%253AE%253AH%253As25&line=kvv%253A21012%253AE%253AR%253As25&line=kvv%253A22305%253AE%253AH%253As25`;
+async function callApi(stopId: number) {
+    const API_URL = `https://projekte.kvv-efa.de/sl3-alone/XSLT_DM_REQUEST?outputFormat=JSON&coordOutputFormat=WGS84[dd.ddddd]&depType=stopEvents&locationServerActive=1&mode=direct&name_dm=${stopId}&type_dm=stop&useOnlyStops=1&useRealtime=1&limit=6&line=kvv:22301:E:H:s25&line=kvv:21012:E:H:s25&line=kvv:21012:E:R:s25&line=kvv:22305:E:H:s25`;
 
-    return fetch(API_URL, {
+    const data = await fetch(API_URL, {
         method: "GET",
     });
+    if (!data.ok) {
+        throw new Error(`HTTP error! status: ${data.status}`);
+    }
+    return data;
 }
 
 export { callApi };

src/api/flatastic.ts

@@ -0,0 +1,55 @@
+
+class Flatastic {
+    private apikey: string;
+
+    constructor(apikey: string) {
+        this.apikey = apikey;
+    }
+
+    async request(url: string, option: any, cb: (info: any) => void) {
+        const headers = {
+            "accept": "application/json, text/plain, */*",
+            "accept-language": "de-CH,de;q=0.9,en-US;q=0.8,en-CH;q=0.7,en;q=0.6,ar-JO;q=0.5,ar;q=0.4,de-DE;q=0.3",
+            // "cache-control": "no-cache",
+            // "pragma": "no-cache",
+            // "sec-fetch-dest": "empty",
+            // "sec-fetch-mode": "cors",
+            // "sec-fetch-site": "same-site",
+            "x-api-key": this.apikey,
+            "x-api-version": "2.0.0",
+            "x-client-version": "2.3.20"
+        };
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: headers
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const info = await response.json();
+            cb(info);
+        } catch (error) {
+            let message = 'Unknown error';
+            if (error instanceof Error) {
+                message = error.message;
+            }
+            cb({ error: message });
+        }
+    }
+
+    getShoppingList(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/shoppinglist', {}, callback);
+    }
+
+    getTaskList(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/chores', {}, callback);
+    }
+
+    getInformation(callback: (info: any) => void) {
+        this.request('https://api.flatastic-app.com/index.php/api/wg', {}, callback);
+    }
+}
+
+export { Flatastic };
+export default Flatastic;

src/components/Flatastic/Flatastic.tsx

@@ -0,0 +1,21 @@
+import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { type AppDispatch } from "@/store/index";
+
+export default function Flatastic() {
+    const dispatch = useDispatch<AppDispatch>();
+    useEffect(() => {
+        const intervalID = setInterval(() => {
+            dispatch(fetchFlatasticChores());
+        }, 60000); // Fetch every 60 seconds
+
+        return () => clearInterval(intervalID);
+    }, []);
+
+    return (
+        <p>
+            Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"}
+        </p>
+    )
+}

src/components/Timetable/Timetable.tsx

@@ -1,23 +1,19 @@
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchTimetable, type AppDispatch, type AppState } from "@/store/index";
-import { type DepartureList } from "@/types/types";
+import {
+    fetchTimetable,
+    type AppDispatch,
+    type AppState,
+} from "../../store/index";
+import { type DepartureList } from "../../types/types";
+import TimetableRow from "../TimetableRow/TimetableRow";
 
 import _ from "lodash";
 
 function parseTimetableData(data: DepartureList[]) {
     const result = data.map((item) => {
-        const { dateTime } = item;
-        const hour = _.padStart(_.toString(dateTime.hour), 2, "0");
-        const minute = _.padStart(_.toString(dateTime.minute), 2, "0");
-        const dateTimeString = `${hour}:${minute}`;
         return {
-            dateTimeString,
-            servingLine: {
-                number: item.servingLine.number,
-                name: item.servingLine.name,
-                direction: item.servingLine.direction,
-            },
+            ...item,
         };
     });
 
@@ -47,31 +43,21 @@ export default function Timetable() {
         <div>
             <h1>Timetable</h1>
             <h2>H-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {hStreetData.map((departure, index) => (
-                    <li key={index}>
-                        {departure.dateTimeString} -{" "}
-                        {departure.servingLine?.name || "Unknown Line"}{" "}
-                        {departure.servingLine?.number || "Unknown Number"} (
-                        {departure.servingLine?.direction ||
-                            "Unknown Direction"}
-                        )
-                    </li>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
             <h2>P-Street Departures</h2>
-            <ul style={{ textAlign: "left" }}>
+            <table>
+                <tbody>
                 {pStreetData.map((departure, index) => (
-                    <li key={index}>
-                        {departure.dateTimeString} -{" "}
-                        {departure.servingLine?.name || "Unknown Line"}{" "}
-                        {departure.servingLine?.number || "Unknown Number"} (
-                        {departure.servingLine?.direction ||
-                            "Unknown Direction"}
-                        )
-                    </li>
+                    <TimetableRow key={index} departure={departure} />
                 ))}
-            </ul>
+                </tbody>
+            </table>
         </div>
     );
 }

src/components/TimetableRow/TimetableRow.tsx

@@ -0,0 +1,23 @@
+import { type DepartureList } from "../../types/types";
+
+import styles from "./style.module.css";
+
+export default function TimetableRow({
+    departure,
+}: {
+    departure: DepartureList;
+}) {
+    const hour = String(departure.dateTime.hour).padStart(2, "0");
+    const minute = String(departure.dateTime.minute).padStart(2, "0");
+    const dateTimeString = `${hour}:${minute}`;
+    return (
+        <>
+            <tr className={styles.timetableRow}>
+                <td>{dateTimeString}</td>
+                <td>{departure.servingLine.name}</td>
+                <td>{departure.servingLine.number}</td>
+                <td>({departure.servingLine.direction})</td>
+            </tr>
+        </>
+    );
+}

src/components/TimetableRow/style.module.css

@@ -0,0 +1,3 @@
+.timetableRow {
+    text-align: left;
+}

src/main.tsx

@@ -1,14 +1,21 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { PersistGate } from 'redux-persist/integration/react'
+import { persistStore } from 'redux-persist'
+
 import "./index.css";
 import App from "./App.tsx";
 import store from "./store/index.ts";
 
+let persistor = persistStore(store)
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
         <Provider store={store}>
-            <App />
+            <PersistGate loading={null} persistor={persistor}>
+                <App />
+            </PersistGate>
         </Provider>
     </StrictMode>,
 );

src/store/index.ts

@@ -1,48 +1,38 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { createSlice } from "@reduxjs/toolkit";
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import { callApi } from "@/api/api";
-import { type DepartureList } from "@/types/types";
+import { persistReducer } from "redux-persist";
+import timetableSlice from "./slices/timetableSlice";
+import flatasticChoresSlice from "./slices/flatastiucChoresSlice";
+import fetchTimetable from "./thunks/fetchTimetable";
+import persistConfig from "./persist/persistConfig";
 
-const fetchTimetable = createAsyncThunk("timetable/phillipStreet", async () => {
-    const hStreetStopId = 7000044;
-    const pStreetStopId = 7000045;
+const persistedTimetableReducer = persistReducer(
+    persistConfig,
+    timetableSlice.reducer
+);
 
-    const hStreetData = await callApi(hStreetStopId);
-    const pStreetData = await callApi(pStreetStopId);
-
-    const hStreetJson = await hStreetData.json();
-    const pStreetJson = await pStreetData.json();
-
-    return {
-        hStreet: hStreetJson,
-        pStreet: pStreetJson,
-    };
-});
-
-const timetableSlice = createSlice({
-    name: "timetable",
-    initialState: {
-        hStreet: {
-            departureList: [] as DepartureList[],
-        },
-        pStreet: {
-            departureList: [] as DepartureList[],
-        },
-    },
-    reducers: {},
-    extraReducers: (builder) => {
-        builder.addCase(fetchTimetable.fulfilled, (state, action) => {
-            state.hStreet = action.payload.hStreet;
-            state.pStreet = action.payload.pStreet;
-        });
-    },
-});
+const persistedFlatasticChoresReducer = persistReducer(
+    persistConfig,
+    flatasticChoresSlice.reducer
+);
 
 const store = configureStore({
     reducer: {
-        timetable: timetableSlice.reducer,
+        timetable: persistedTimetableReducer,
+        flatasticChores: persistedFlatasticChoresReducer
     },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: {
+                ignoredActions: [
+                    "persist/PERSIST",
+                    "persist/REHYDRATE",
+                    "persist/PAUSE",
+                    "persist/FLUSH",
+                    "persist/REGISTER",
+                    "persist/PURGE",
+                ],
+            },
+        }),
 });
 
 export { store, fetchTimetable };
@@ -51,4 +41,3 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export type ThunkDispatch = typeof store.dispatch;
-export type fetchTimetableType = typeof fetchTimetable;

src/store/persist/persistConfig.ts

@@ -0,0 +1,8 @@
+import storage from 'redux-persist/lib/storage';
+
+const persistConfig = {
+    key: 'root',
+    storage,
+};
+
+export default persistConfig;

src/store/slices/flatastiucChoresSlice.ts

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+import fetchFlatasticChores from "../thunks/fetchFlatasticChores";
+
+const timetableSlice = createSlice({
+    name: "chores",
+    initialState: {
+        chores: [] as any[],
+    },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchFlatasticChores.fulfilled, (state, action) => {
+            // Filter out timetable-related entries
+            state.chores = Array.isArray(action.payload)
+                ? action.payload.filter((item) => item.name !== "hstreeet" && item.name !== "pstreet")
+                : [];
+        });
+    },
+});
+
+export default timetableSlice;

src/store/slices/timetableSlice.ts

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+import fetchTimetable from "@thunks/fetchTimetable";
+import { type DepartureList } from "@/types/types";
+
+const timetableSlice = createSlice({
+    name: "timetable",
+    initialState: {
+        hStreet: {
+            departureList: [] as DepartureList[],
+        },
+        pStreet: {
+            departureList: [] as DepartureList[],
+        },
+    },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchTimetable.fulfilled, (state, action) => {
+            state.hStreet = action.payload.hStreet;
+            state.pStreet = action.payload.pStreet;
+        });
+    },
+});
+
+export default timetableSlice;

src/store/thunks/fetchFlatasticChores.ts

@@ -0,0 +1,22 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { Flatastic } from "@/api/flatastic";
+
+const fetchFlatasticChores = createAsyncThunk("flatastic/chores", async () => {
+    if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
+        throw new Error("Flatastic API Key is not set");
+    }
+    const flatastic = new Flatastic(import.meta.env.VITE_FLATTASTIC_API_KEY);
+    const data = await new Promise((resolve, reject) => {
+        flatastic.getTaskList((info) => {
+            if (info.error) {
+                reject(new Error(info.error));
+            } else {
+                resolve(info);
+            }
+        });
+    });
+
+    return data;
+});
+
+export default fetchFlatasticChores;

src/store/thunks/fetchTimetable.ts

@@ -0,0 +1,18 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { callApi } from "@/api/api";
+
+const fetchTimetable = createAsyncThunk("timetable/fetchTimeTable", async () => {
+    const hStreetStopId = 7000044;
+    const pStreetStopId = 7000045;
+    const hStreetData = await callApi(hStreetStopId);
+    const pStreetData = await callApi(pStreetStopId);
+    const hStreetJson = await hStreetData.json();
+    const pStreetJson = await pStreetData.json();
+
+    return {
+        hStreet: hStreetJson,
+        pStreet: pStreetJson,
+    };
+});
+
+export default fetchTimetable;