wg/monitor-im-flur
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace redux with zustand

Browse Source
This commit is contained in:
Arif Hasanic
2025-07-25 01:03:11 +02:00
parent 5448285211
commit 3bcd2e16a2
30 changed files with 510 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.css
View File

@@ -1,42 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
padding: 2em;
}
.read-the-docs {
color: #888;
color: #888;
}

29
src/App.tsx
View File

@@ -1,25 +1,14 @@
import "./App.css";
import Timetable from "./components/Timetable/Timetable";
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";
import "@/App.css";
import Timetable from "@/components/Timetable/Timetable";
import Flatastic from "@/components/Flatastic/Flatastic";
function App() {
const dispatch = useDispatch<AppDispatch>();
// Fetch the timetable data when the app loads
useEffect(() => {
dispatch(fetchTimetable());
dispatch(fetchFlatasticChores());
}, [dispatch]);
return (
<>
<Timetable />
<Flatastic />
</>
);
return (
<>
<Timetable />
<Flatastic />
</>
);
}
export default App;

13
src/api/api.ts
View File

@@ -1,13 +0,0 @@
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`;
const data = await fetch(API_URL, {
method: "GET",
});
if (!data.ok) {
throw new Error(`HTTP error! status: ${data.status}`);
}
return data;
}
export { callApi };

92
src/api/flatastic.ts
View File

@@ -1,55 +1,55 @@
class Flatastic {
private apikey: string;
private apikey: string;
constructor(apikey: string) {
this.apikey = apikey;
}
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 });
}
}
async request(url: string, option: any) {
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",
};
const response = await fetch(url, {
...option,
headers: {
...headers,
...option.headers,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
}
getShoppingList(callback: (info: any) => void) {
this.request('https://api.flatastic-app.com/index.php/api/shoppinglist', {}, callback);
}
getShoppingList() {
return this.request(
"https://api.flatastic-app.com/index.php/api/shoppinglist",
{},
);
}
getTaskList(callback: (info: any) => void) {
this.request('https://api.flatastic-app.com/index.php/api/chores', {}, callback);
}
getTaskList() {
return this.request(
"https://api.flatastic-app.com/index.php/api/chores",
{},
);
}
getInformation(callback: (info: any) => void) {
this.request('https://api.flatastic-app.com/index.php/api/wg', {}, callback);
}
getInformation() {
this.request("https://api.flatastic-app.com/index.php/api/wg", {});
}
}
export { Flatastic };
export default Flatastic;
export default Flatastic;

13
src/api/kvv.ts Normal file
View File

@@ -0,0 +1,13 @@
async function fetchKvvDepartures(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`;
const data = await fetch(API_URL, {
method: "GET",
});
if (!data.ok) {
throw new Error(`HTTP error! status: ${data.status}`);
}
return data;
}
export { fetchKvvDepartures };

49
src/components/Flatastic/Flatastic.tsx
View File

@@ -1,21 +1,38 @@
import fetchFlatasticChores from "@/store/thunks/fetchFlatasticChores";
import { useFlatasticStore } from "@/store/flatastic";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { type AppDispatch } from "@/store/index";
import type { FlatasticChore } from "@/types/flatasticChore";
const idToNameMap: Record<number, string> = {
1836104: "Gruber",
1836101: "Darius",
1593610: "Arif",
1860060: "Rishab",
};
export default function Flatastic() {
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
const intervalID = setInterval(() => {
dispatch(fetchFlatasticChores());
}, 60000); // Fetch every 60 seconds
const fetchChores = useFlatasticStore((state) => state.fetch);
const chores = useFlatasticStore((state) => state.chores);
return () => clearInterval(intervalID);
}, []);
useEffect(() => {
fetchChores();
const interval = setInterval(() => {
fetchChores();
}, 60000);
return () => clearInterval(interval);
}, [fetchChores]);
return (
<p>
Flatastic API Key: {import.meta.env.VITE_FLATTASTIC_API_KEY || "Not set"}
</p>
)
}
return (
<div>
<h1>Flatastic Chores</h1>
<ul>
{chores.map((chore: FlatasticChore) => (
<li key={chore.id} style={{ textAlign: "left" }}>
{idToNameMap[chore.currentUser]}: {chore.title} - Points:{" "}
{chore.points}
</li>
))}
</ul>
</div>
);
}

93
src/components/Timetable/Timetable.tsx
View File

@@ -1,63 +1,56 @@
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 TimetableRow from "../TimetableRow/TimetableRow";
import _ from "lodash";
import { useKVVStore } from "@/store/kvv";
import type { DepartureType } from "@/types/departureType";
function parseTimetableData(data: DepartureList[]) {
const result = data.map((item) => {
return {
...item,
};
});
function parseTimetableData(data: DepartureType[]) {
const result = data.map((item) => {
return {
...item,
};
});
return result;
return result;
}
export default function Timetable() {
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
const intervalID = setInterval(() => {
dispatch(fetchTimetable());
}, 60000); // Fetch every 60 seconds
const fetchTimetable = useKVVStore((state) => state.fetch);
const pStreet = useKVVStore((state) => state.pStreet);
const hStreet = useKVVStore((state) => state.hStreet);
return () => clearInterval(intervalID);
}, []);
const pStreet = useSelector((state: AppState) => state.timetable.pStreet);
const hStreet = useSelector((state: AppState) => state.timetable.hStreet);
useEffect(() => {
fetchTimetable();
const interval = setInterval(() => {
fetchTimetable();
}, 60000);
return () => clearInterval(interval);
}, [fetchTimetable]);
const hStreetData = hStreet
? parseTimetableData(hStreet.departureList)
: [];
const pStreetData = pStreet
? parseTimetableData(pStreet.departureList)
: [];
const hStreetData = parseTimetableData(hStreet.departureList || []);
const pStreetData = parseTimetableData(pStreet.departureList || []);
return (
<div>
<h1>Timetable</h1>
<h2>H-Street Departures</h2>
<table>
<tbody>
{hStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} />
))}
</tbody>
</table>
<h2>P-Street Departures</h2>
<table>
<tbody>
{pStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} />
))}
</tbody>
</table>
</div>
);
return (
<div>
<h1>Timetable</h1>
<h2>H-Street Departures</h2>
<table>
<tbody>
{hStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} />
))}
</tbody>
</table>
<h2>P-Street Departures</h2>
<table>
<tbody>
{pStreetData.map((departure, index) => (
<TimetableRow key={index} departure={departure} />
))}
</tbody>
</table>
</div>
);
}

31
src/components/TimetableRow/TimetableRow.tsx
View File

@@ -1,23 +1,22 @@
import { type DepartureList } from "../../types/types";
import type { DepartureType } from "@/types/departureType";
import styles from "./style.module.css";
export default function TimetableRow({
departure,
departure,
}: {
departure: DepartureList;
departure: DepartureType;
}) {
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>
</>
);
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>
);
}

2
src/components/TimetableRow/style.module.css
View File

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

84
src/index.css
View File

@@ -1,68 +1,68 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

16
src/main.tsx
View File

@@ -1,21 +1,11 @@
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}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</StrictMode>,
<StrictMode>
<App />
</StrictMode>,
);

26
src/store/flatastic.ts Normal file
View File

@@ -0,0 +1,26 @@
import { create } from "zustand";
import Flatastic from "@/api/flatastic";
import type { FlatasticChore } from "@/types/flatasticChore";
interface FlatasticStore {
chores: FlatasticChore[];
fetch: () => Promise<void>;
}
const useFlatasticStore = create<FlatasticStore>(
(set: (state: Partial<FlatasticStore>) => void) => ({
chores: [],
fetch: 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 flatastic.getTaskList();
console.log("Flatastic chores fetched:", data);
set({ chores: data as FlatasticChore[] });
},
}),
);
export { useFlatasticStore };

43
src/store/index.ts
View File

@@ -1,43 +0,0 @@
import { configureStore } from "@reduxjs/toolkit";
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 persistedTimetableReducer = persistReducer(
persistConfig,
timetableSlice.reducer
);
const persistedFlatasticChoresReducer = persistReducer(
persistConfig,
flatasticChoresSlice.reducer
);
const store = configureStore({
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 };
export default store;
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;

25
src/store/kvv.ts Normal file
View File

@@ -0,0 +1,25 @@
import { create } from "zustand";
import { fetchKvvDepartures } from "@/api/kvv";
import type { DepartureType } from "@/types/departureType";
import { devtools } from "zustand/middleware";
const useKVVStore = create(
devtools((set) => ({
pStreet: [] as DepartureType[],
hStreet: [] as DepartureType[],
fetch: async () => {
const hStreetStopId = 7000044;
const pStreetStopId = 7000045;
const hStreetData = await fetchKvvDepartures(hStreetStopId);
const pStreetData = await fetchKvvDepartures(pStreetStopId);
const hStreetJson = await hStreetData.json();
const pStreetJson = await pStreetData.json();
set({
hStreet: hStreetJson as DepartureType[],
pStreet: pStreetJson as DepartureType[],
});
},
})),
);
export { useKVVStore };

8
src/store/persist/persistConfig.ts
View File

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

20
src/store/slices/flatastiucChoresSlice.ts
View File

@@ -1,20 +0,0 @@
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;

24
src/store/slices/timetableSlice.ts
View File

@@ -1,24 +0,0 @@
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;

22
src/store/thunks/fetchFlatasticChores.ts
View File

@@ -1,22 +0,0 @@
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;

18
src/store/thunks/fetchTimetable.ts
View File

@@ -1,18 +0,0 @@
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;

15
src/types/departureType.ts Normal file
View File

@@ -0,0 +1,15 @@
export type DepartureType = {
dateTime: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
};
servingLine: {
number: string;
name: string;
direction: string;
};
stopID: number;
};

13
src/types/flatasticChore.ts Normal file
View File

@@ -0,0 +1,13 @@
interface FlatasticChore {
id: number;
title: string;
details: string | null;
users: Array<number>;
points: number;
rotationTime: number;
currentUser: number;
lastDoneDate: string;
timeLeftNext: number;
}
export type { FlatasticChore };

14
src/types/types.ts
View File

@@ -1,14 +0,0 @@
export type DepartureList = {
dateTime: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
};
servingLine: {
number: string;
name: string;
direction: string;
};
};