mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-04 18:44:51 +00:00
Generated by Spark: Create Redux persistence middleware to sync state with database automatically
This commit is contained in:
GitHub
@@ -0,0 +1,251 @@
|
||||
import { useState } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { FloppyDisk, Trash, PencilSimple, CheckCircle, Clock } from '@phosphor-icons/react'
|
||||
import { useAppDispatch, useAppSelector } from '@/store'
|
||||
import { saveFile, deleteFile } from '@/store/slices/filesSlice'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function PersistenceExample() {
|
||||
const dispatch = useAppDispatch()
|
||||
const files = useAppSelector((state) => state.files.files)
|
||||
const [fileName, setFileName] = useState('')
|
||||
const [fileContent, setFileContent] = useState('')
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!fileName.trim()) {
|
||||
toast.error('File name is required')
|
||||
return
|
||||
}
|
||||
|
||||
const fileItem = {
|
||||
id: editingId || `file-${Date.now()}`,
|
||||
name: fileName,
|
||||
content: fileContent,
|
||||
language: 'javascript',
|
||||
path: `/src/${fileName}`,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
|
||||
try {
|
||||
await dispatch(saveFile(fileItem)).unwrap()
|
||||
toast.success(`File "${fileName}" saved automatically!`, {
|
||||
description: 'Synced to IndexedDB and Flask API',
|
||||
})
|
||||
setFileName('')
|
||||
setFileContent('')
|
||||
setEditingId(null)
|
||||
} catch (error: any) {
|
||||
toast.error('Failed to save file', {
|
||||
description: error,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (file: any) => {
|
||||
setEditingId(file.id)
|
||||
setFileName(file.name)
|
||||
setFileContent(file.content)
|
||||
}
|
||||
|
||||
const handleDelete = async (fileId: string, name: string) => {
|
||||
try {
|
||||
await dispatch(deleteFile(fileId)).unwrap()
|
||||
toast.success(`File "${name}" deleted`, {
|
||||
description: 'Automatically synced to storage',
|
||||
})
|
||||
} catch (error: any) {
|
||||
toast.error('Failed to delete file', {
|
||||
description: error,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setFileName('')
|
||||
setFileContent('')
|
||||
setEditingId(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">Persistence Middleware Example</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Demonstrates automatic persistence of Redux state to IndexedDB and Flask API
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="p-6 space-y-4 border-sidebar-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">
|
||||
{editingId ? 'Edit File' : 'Create File'}
|
||||
</h2>
|
||||
{editingId && (
|
||||
<Badge variant="outline" className="text-amber-500 border-amber-500">
|
||||
Editing
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="fileName">File Name</Label>
|
||||
<Input
|
||||
id="fileName"
|
||||
value={fileName}
|
||||
onChange={(e) => setFileName(e.target.value)}
|
||||
placeholder="example.js"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="fileContent">Content</Label>
|
||||
<textarea
|
||||
id="fileContent"
|
||||
value={fileContent}
|
||||
onChange={(e) => setFileContent(e.target.value)}
|
||||
placeholder="console.log('Hello, world!')"
|
||||
className="w-full h-32 px-3 py-2 border border-input rounded-md bg-background font-mono text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleSave} className="flex items-center gap-2 flex-1">
|
||||
<FloppyDisk />
|
||||
{editingId ? 'Update File' : 'Save File'}
|
||||
</Button>
|
||||
{editingId && (
|
||||
<Button onClick={handleCancel} variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-muted/50 rounded-lg space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="text-accent mt-1" weight="fill" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-foreground">Automatic Persistence</p>
|
||||
<p className="text-muted-foreground">
|
||||
Data is automatically saved to IndexedDB with 300ms debounce
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Clock className="text-primary mt-1" weight="fill" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-foreground">Flask Sync</p>
|
||||
<p className="text-muted-foreground">
|
||||
Changes are synced to Flask API backend automatically
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 space-y-4 border-sidebar-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Saved Files</h2>
|
||||
<Badge variant="secondary">{files.length} files</Badge>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-3 max-h-[500px] overflow-y-auto">
|
||||
{files.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<p>No files yet</p>
|
||||
<p className="text-sm mt-1">Create your first file to see it appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
files.map((file) => (
|
||||
<Card
|
||||
key={file.id}
|
||||
className="p-4 space-y-2 hover:bg-muted/50 transition-colors border-sidebar-border"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold truncate">{file.name}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{file.path}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="ml-2 shrink-0">
|
||||
{file.language}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{file.content && (
|
||||
<div className="bg-muted/50 p-2 rounded text-xs font-mono text-muted-foreground max-h-20 overflow-hidden">
|
||||
{file.content.substring(0, 100)}
|
||||
{file.content.length > 100 && '...'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
Updated: {new Date(file.updatedAt).toLocaleTimeString()}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleEdit(file)}
|
||||
className="h-8 flex items-center gap-1"
|
||||
>
|
||||
<PencilSimple />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => handleDelete(file.id, file.name)}
|
||||
className="h-8 flex items-center gap-1 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 space-y-4 border-primary/50 bg-primary/5">
|
||||
<h3 className="text-lg font-semibold">How It Works</h3>
|
||||
<Separator />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-primary">1. Redux Action</div>
|
||||
<p className="text-muted-foreground">
|
||||
When you save or delete a file, a Redux action is dispatched
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-primary">2. Middleware Intercepts</div>
|
||||
<p className="text-muted-foreground">
|
||||
Persistence middleware automatically intercepts the action and queues the operation
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-primary">3. Auto-Sync</div>
|
||||
<p className="text-muted-foreground">
|
||||
After 300ms debounce, data is saved to IndexedDB and synced to Flask API
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user