Refactor clean mode toggle
- Improve the UI of the clean mode toggle by removing the text that shifts the layout. - Disable the clean mode toggle after a successful signature post. - Remove unnecessary text from the UI.
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
@@ -24,6 +23,7 @@ const SystemView = () => {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const [cleanMode, setCleanMode] = useState(false);
|
||||
const [cleanModeUsed, setCleanModeUsed] = useState(false);
|
||||
|
||||
if (!system) {
|
||||
navigate("/");
|
||||
@@ -133,7 +133,7 @@ const SystemView = () => {
|
||||
}
|
||||
|
||||
// If clean mode is enabled, delete signatures not in the pasted list
|
||||
if (cleanMode) {
|
||||
if (cleanMode && !cleanModeUsed) {
|
||||
const existingSignatures = await pb.collection('signature').getFullList({
|
||||
filter: `system='${systemId}'`
|
||||
});
|
||||
@@ -148,6 +148,10 @@ const SystemView = () => {
|
||||
if (signaturesToDelete.length > 0) {
|
||||
console.log(`Deleted ${signaturesToDelete.length} signatures not in pasted data`);
|
||||
}
|
||||
|
||||
// Disable clean mode after use
|
||||
setCleanModeUsed(true);
|
||||
setCleanMode(false);
|
||||
}
|
||||
|
||||
// Save all new/updated signatures
|
||||
@@ -158,10 +162,9 @@ const SystemView = () => {
|
||||
// Invalidate queries to refresh the data
|
||||
queryClient.invalidateQueries({ queryKey: ['signatures', system] });
|
||||
|
||||
const cleanText = cleanMode ? ` (${cleanMode ? 'cleaned' : ''})` : '';
|
||||
toast({
|
||||
title: "Success",
|
||||
description: `${parsedSignatures.length} signatures processed${cleanText}.`
|
||||
description: `${parsedSignatures.length} signatures processed.`
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
@@ -179,7 +182,7 @@ const SystemView = () => {
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [system, cleanMode]);
|
||||
}, [system, cleanMode, cleanModeUsed]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
||||
@@ -187,15 +190,16 @@ const SystemView = () => {
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
|
||||
<div className="flex items-center justify-center gap-4 text-slate-300">
|
||||
<p>Viewing signatures and regional overview • Press Ctrl+V to paste signatures</p>
|
||||
<p>Press Ctrl+V to paste signatures</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="clean-mode"
|
||||
checked={cleanMode}
|
||||
onCheckedChange={setCleanMode}
|
||||
disabled={cleanModeUsed}
|
||||
/>
|
||||
<Label htmlFor="clean-mode" className="text-sm text-slate-300">
|
||||
Clean mode {cleanMode ? '(will delete missing signatures)' : ''}
|
||||
Clean mode
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user