Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Meik
2025-11-10 09:57:48 +01:00
parent 083c79d82e
commit 248b0bcba4
5 changed files with 317 additions and 19533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
src/App.js
View File

@@ -1,71 +1,15 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Link, useLocation, useNavigate } from 'react-router-dom';
import { DateRange } from 'react-date-range';
import { format, parseISO, isValid, startOfDay } from 'date-fns';
import { de } from 'date-fns/locale';
import { startOfDay } from 'date-fns';
import './App.css';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
import { buildSelectionRange, formatDateValue, formatRangeLabel } from './utils/dateUtils';
import useSyncProgress from './hooks/useSyncProgress';
import useNotificationSettings from './hooks/useNotificationSettings';
const TOKEN_STORAGE_KEY = 'pickupConfigToken';
const parseDateValue = (value) => {
if (!value) {
return null;
}
const parsed = parseISO(value);
return isValid(parsed) ? parsed : null;
};
const formatDateValue = (date) => {
if (!(date instanceof Date) || !isValid(date)) {
return null;
}
return format(date, 'yyyy-MM-dd');
};
const formatRangeLabel = (start, end) => {
const startDate = parseDateValue(start);
const endDate = parseDateValue(end);
if (startDate && endDate) {
const startLabel = format(startDate, 'dd.MM.yyyy', { locale: de });
const endLabel = format(endDate, 'dd.MM.yyyy', { locale: de });
if (startLabel === endLabel) {
return startLabel;
}
return `${startLabel} – ${endLabel}`;
}
if (startDate) {
return format(startDate, 'dd.MM.yyyy', { locale: de });
}
return 'Zeitraum auswählen';
};
const buildSelectionRange = (start, end, minDate) => {
const minimum = minDate || startOfDay(new Date());
let startDate = parseDateValue(start) || parseDateValue(end) || minimum;
let endDate = parseDateValue(end) || parseDateValue(start) || startDate;
if (startDate < minimum) {
startDate = minimum;
}
if (endDate < minimum) {
endDate = startDate;
}
return {
startDate,
endDate,
key: 'selection'
};
};
const defaultNotificationSettings = {
ntfy: { enabled: false, topic: '', serverUrl: '' },
telegram: { enabled: false, chatId: '' }
};
const defaultNotificationCapabilities = {
ntfy: { enabled: false, serverUrl: '', topicPrefix: '' },
telegram: { enabled: false }
};
function App() {
const [session, setSession] = useState(null);
@@ -78,13 +22,6 @@ function App() {
const [availableCollapsed, setAvailableCollapsed] = useState(true);
const [adminSettings, setAdminSettings] = useState(null);
const [adminSettingsLoading, setAdminSettingsLoading] = useState(false);
const [syncProgress, setSyncProgress] = useState({
active: false,
percent: 0,
message: '',
block: false,
etaSeconds: null
});
const [initializing, setInitializing] = useState(false);
const [isDirty, setIsDirty] = useState(false);
const [dirtyDialogOpen, setDirtyDialogOpen] = useState(false);
@@ -93,15 +30,7 @@ function App() {
const [dirtyDialogSaving, setDirtyDialogSaving] = useState(false);
const [confirmDialog, setConfirmDialog] = useState({ open: false, resolve: null });
const [activeRangePicker, setActiveRangePicker] = useState(null);
const [notificationSettings, setNotificationSettings] = useState(defaultNotificationSettings);
const [notificationCapabilities, setNotificationCapabilities] = useState(defaultNotificationCapabilities);
const [notificationDirty, setNotificationDirty] = useState(false);
const [notificationLoading, setNotificationLoading] = useState(false);
const [notificationSaving, setNotificationSaving] = useState(false);
const [notificationMessage, setNotificationMessage] = useState('');
const [notificationError, setNotificationError] = useState('');
const [notificationPanelOpen, setNotificationPanelOpen] = useState(false);
const [copyFeedback, setCopyFeedback] = useState('');
const minSelectableDate = useMemo(() => startOfDay(new Date()), []);
const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
@@ -143,57 +72,13 @@ function App() {
}, []);
const delay = useCallback((ms) => new Promise((resolve) => setTimeout(resolve, ms)), []);
const startSyncProgress = useCallback((message, percent, block = false) => {
setSyncProgress({ active: true, percent, message, block, etaSeconds: null });
}, []);
const updateSyncProgress = useCallback((message, percent, extra = {}) => {
setSyncProgress((prev) => {
if (!prev.active) {
return prev;
}
let nextPercent = prev.percent ?? 0;
if (typeof percent === 'number' && Number.isFinite(percent)) {
const bounded = Math.min(100, Math.max(percent, 0));
nextPercent = Math.max(bounded, nextPercent);
}
return {
...prev,
message: message ?? prev.message,
percent: nextPercent,
etaSeconds:
Object.prototype.hasOwnProperty.call(extra, 'etaSeconds') && extra.etaSeconds !== undefined
? extra.etaSeconds
: prev.etaSeconds ?? null
};
});
}, []);
const finishSyncProgress = useCallback(() => {
setSyncProgress((prev) => {
if (!prev.active) {
return prev;
}
return { ...prev, percent: 100, etaSeconds: null };
});
setTimeout(() => {
setSyncProgress({ active: false, percent: 0, message: '', block: false, etaSeconds: null });
}, 400);
}, []);
const nudgeSyncProgress = useCallback((message, increment = 2, ceiling = 80) => {
setSyncProgress((prev) => {
if (!prev.active) {
return prev;
}
const nextPercent = Math.min(ceiling, (prev.percent || 0) + increment);
return {
...prev,
percent: nextPercent,
message: message || prev.message
};
});
}, []);
const {
syncProgress,
startSyncProgress,
updateSyncProgress,
finishSyncProgress,
nudgeSyncProgress
} = useSyncProgress();
const normalizeAdminSettings = useCallback((raw) => {
if (!raw) {
@@ -238,13 +123,6 @@ function App() {
setAdminSettingsLoading(false);
setAvailableCollapsed(true);
setInitializing(false);
setNotificationSettings(defaultNotificationSettings);
setNotificationCapabilities(defaultNotificationCapabilities);
setNotificationDirty(false);
setNotificationError('');
setNotificationMessage('');
setNotificationLoading(false);
setNotificationSaving(false);
}, []);
const handleUnauthorized = useCallback(() => {
@@ -329,46 +207,24 @@ function App() {
[handleUnauthorized, session?.token]
);
const loadNotificationSettings = useCallback(async () => {
if (!session?.token) {
return;
}
setNotificationLoading(true);
setNotificationError('');
try {
const response = await authorizedFetch('/api/notifications/settings');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
setNotificationSettings({
ntfy: {
enabled: Boolean(data?.settings?.ntfy?.enabled),
topic: data?.settings?.ntfy?.topic || '',
serverUrl: data?.settings?.ntfy?.serverUrl || ''
},
telegram: {
enabled: Boolean(data?.settings?.telegram?.enabled),
chatId: data?.settings?.telegram?.chatId || ''
}
});
setNotificationCapabilities({
ntfy: {
enabled: Boolean(data?.capabilities?.ntfy?.enabled),
serverUrl: data?.capabilities?.ntfy?.serverUrl || '',
topicPrefix: data?.capabilities?.ntfy?.topicPrefix || ''
},
telegram: {
enabled: Boolean(data?.capabilities?.telegram?.enabled)
}
});
setNotificationDirty(false);
} catch (err) {
setNotificationError(`Benachrichtigungseinstellungen konnten nicht geladen werden: ${err.message}`);
} finally {
setNotificationLoading(false);
}
}, [authorizedFetch, session?.token]);
const {
notificationSettings,
notificationCapabilities,
notificationDirty,
notificationLoading,
notificationSaving,
notificationMessage,
notificationError,
copyFeedback,
loadNotificationSettings,
handleNotificationFieldChange,
saveNotificationSettings,
sendNotificationTest,
copyToClipboard
} = useNotificationSettings({
authorizedFetch,
sessionToken: session?.token
});
useEffect(() => {
if (!session?.token || !session.isAdmin) {
@@ -529,13 +385,6 @@ function App() {
}
}, [session?.token, authorizedFetch]);
useEffect(() => {
if (!session?.token) {
return;
}
loadNotificationSettings();
}, [session?.token, loadNotificationSettings]);
const syncStoresWithProgress = useCallback(
async ({ block = false, reason = 'manual', startJob = true, reuseOverlay = false, tokenOverride } = {}) => {
const effectiveToken = tokenOverride || session?.token;
@@ -1072,111 +921,6 @@ function App() {
);
};
const handleNotificationFieldChange = (channel, field, value) => {
if (channel === 'ntfy' && field === 'serverUrl') {
return;
}
setNotificationSettings((prev) => {
const nextChannel = {
...prev[channel],
[field]: value
};
return {
...prev,
[channel]: nextChannel
};
});
setNotificationDirty(true);
};
const saveNotificationSettings = async () => {
if (!session?.token) {
return;
}
setNotificationSaving(true);
setNotificationError('');
setNotificationMessage('');
try {
const response = await authorizedFetch('/api/notifications/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notifications: notificationSettings })
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
setNotificationSettings({
ntfy: {
enabled: Boolean(data?.ntfy?.enabled),
topic: data?.ntfy?.topic || notificationSettings.ntfy.topic,
serverUrl: data?.ntfy?.serverUrl || notificationSettings.ntfy.serverUrl
},
telegram: {
enabled: Boolean(data?.telegram?.enabled),
chatId: data?.telegram?.chatId || notificationSettings.telegram.chatId
}
});
setNotificationDirty(false);
setNotificationMessage('Benachrichtigungseinstellungen gespeichert.');
setTimeout(() => setNotificationMessage(''), 4000);
} catch (err) {
setNotificationError(`Speichern der Benachrichtigungen fehlgeschlagen: ${err.message}`);
} finally {
setNotificationSaving(false);
}
};
const sendNotificationTest = async (channel) => {
if (!session?.token) {
return;
}
setNotificationError('');
setNotificationMessage('');
try {
const response = await authorizedFetch('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channel })
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
await response.json();
setNotificationMessage('Testbenachrichtigung gesendet.');
setTimeout(() => setNotificationMessage(''), 4000);
} catch (err) {
setNotificationError(`Testbenachrichtigung fehlgeschlagen: ${err.message}`);
}
};
const copyToClipboard = async (text) => {
if (!text) {
return;
}
setCopyFeedback('');
try {
if (navigator?.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
} else {
const tempInput = document.createElement('textarea');
tempInput.value = text;
tempInput.style.position = 'fixed';
tempInput.style.top = '-9999px';
document.body.appendChild(tempInput);
tempInput.focus();
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
}
setCopyFeedback('Link kopiert!');
setTimeout(() => setCopyFeedback(''), 2000);
} catch (err) {
setCopyFeedback(`Kopieren fehlgeschlagen: ${err.message}`);
setTimeout(() => setCopyFeedback(''), 3000);
}
};
const handleAdminSettingChange = (field, value, isNumber = false) => {
setAdminSettings((prev) => {
if (!prev) {
@@ -2407,4 +2151,4 @@ function StoreSyncOverlay({ state }) {
);
}
export default App;
export default App;