sebastas/tally-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: improve drag-and-drop functionality and fix counter layout

Browse Source
This commit is contained in:
Sebastian Slettebakken
2025-11-16 00:02:28 +01:00
parent 00da4d2abc
commit 0eccf479e6
3 changed files with 228 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/App.css
View File

@@ -415,6 +415,37 @@ html, body, #root {
outline-offset: 8px;
}
/* container grid */
.counters-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
max-width: var(--max-width);
margin: 0 auto;
justify-content: center;
align-items: start;
}
/* keep each card centered in its cell and center its inner content */
.counters-grid > .counter-card {
justify-self: center;
width: 100%;
max-width: 460px;
box-sizing: border-box;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
/* ensure the actual counter element stays centered and doesn't stretch awkwardly */
.counter-card .counter {
width: 100%;
max-width: 420px;
margin: 0 auto;
display: flex;
}
/* ---------------------------
Utilities / footer
--------------------------- */

98
frontend/src/App.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback } from 'react'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Counter from './components/Counter'
import CreateCounter from './components/CreateCounter'
import { apiUrl } from './utils/api'
@@ -6,6 +6,13 @@ import './App.css'
type CounterRecord = { id: number; value: number; name?: string; imageUrl?: string; position?: number }
// small pure helper kept outside the component so it's stable
const swapInArray = (arr: CounterRecord[], i: number, j: number) => {
const copy = arr.slice()
;[copy[i], copy[j]] = [copy[j], copy[i]]
return copy
}
export default function App() {
const [counters, setCounters] = useState<CounterRecord[]>([])
const [loading, setLoading] = useState(true)
@@ -13,33 +20,46 @@ export default function App() {
const [draggingId, setDraggingId] = useState<number | null>(null)
const [dragOverId, setDragOverId] = useState<number | null>(null)
// track which modal ids are currently open (idempotent)
const [modalOpenSet, setModalOpenSet] = useState<Set<number>>(new Set())
const draggingEnabled = useMemo(() => modalOpenSet.size === 0, [modalOpenSet])
// helper: idempotently add/remove modal id
const handleEditingChange = useCallback((id: number, editing: boolean) => {
setModalOpenSet((prev) => {
const next = new Set(prev)
if (editing) next.add(id)
else next.delete(id)
return next
})
}, [])
// mounted ref to avoid setting state on unmounted component
const mountedRef = useRef(true)
useEffect(() => {
mountedRef.current = true
return () => {
mountedRef.current = false
}
}, [])
useEffect(() => {
let mounted = true
;(async () => {
try {
const res = await fetch(apiUrl('/api/counters'))
const list: CounterRecord[] = await res.json()
if (!mounted) return
if (!mountedRef.current) return
setCounters(Array.isArray(list) ? list : [])
} catch (err) {
// keep minimal logging here
console.error('failed to load counters', err)
if (mounted) setCounters([])
if (mountedRef.current) setCounters([])
} finally {
if (mounted) setLoading(false)
if (mountedRef.current) setLoading(false)
}
})()
return () => {
mounted = false
}
}, [])
// swap two items in an array (keeps array length and only swaps the two indexes)
const swapInArray = (arr: CounterRecord[], i: number, j: number) => {
const copy = arr.slice()
;[copy[i], copy[j]] = [copy[j], copy[i]]
return copy
}
const clearDragState = useCallback(() => {
setDraggingId(null)
setDragOverId(null)
@@ -121,7 +141,8 @@ export default function App() {
clearDragState()
}, [clearDragState])
const handleChange = async (id: number, next: number) => {
const handleChange = useCallback(
async (id: number, next: number) => {
// enforce non-negative values
const safeNext = Math.max(0, next)
@@ -159,14 +180,16 @@ export default function App() {
return n
})
}
}
},
[counters]
)
const handleCreated = (c: CounterRecord) => {
const handleCreated = useCallback((c: CounterRecord) => {
setCounters((prev) => [...prev, c])
}
}, [])
// onUpdate: upload file (if present), then PATCH name/imageUrl for given id
const handleUpdate = async (id: number, payload: { name?: string; file?: File | null }) => {
const handleUpdate = useCallback(
async (id: number, payload: { name?: string; file?: File | null }) => {
setSavingIds((s) => {
const n = new Set(s)
n.add(id)
@@ -219,10 +242,12 @@ export default function App() {
return n
})
}
}
},
[]
)
// added delete handler
const handleDelete = async (id: number) => {
const handleDelete = useCallback(
async (id: number) => {
setSavingIds((s) => {
const n = new Set(s)
n.add(id)
@@ -244,7 +269,9 @@ export default function App() {
return n
})
}
}
},
[]
)
if (loading) return <div className="loading">Loading counters…</div>
@@ -267,17 +294,18 @@ export default function App() {
<p>Create your first counter to begin tracking.</p>
</div>
) : (
<div className="counters-grid" style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
{counters.map((c) => (
<div className="counters-grid">
{counters.map((c) => {
return (
<div
key={c.id}
className={`counter-card card ${draggingId === c.id ? 'dragging' : ''} ${dragOverId === c.id ? 'drag-over' : ''}`}
draggable={true}
onDragStart={(e) => handleDragStart(e, c.id)}
onDragEnter={(e) => handleDragOver(e, c.id)}
onDragOver={(e) => handleDragOver(e, c.id)}
onDrop={(e) => handleDropOnCard(e, c.id)}
onDragEnd={handleDragEnd}
draggable={draggingEnabled}
onDragStart={draggingEnabled ? (e) => handleDragStart(e, c.id) : undefined}
onDragEnter={draggingEnabled ? (e) => handleDragOver(e, c.id) : undefined}
onDragOver={draggingEnabled ? (e) => handleDragOver(e, c.id) : undefined}
onDrop={draggingEnabled ? (e) => handleDropOnCard(e, c.id) : undefined}
onDragEnd={draggingEnabled ? handleDragEnd : undefined}
>
<Counter
id={String(c.id)}
@@ -289,9 +317,11 @@ export default function App() {
onChange={(next) => handleChange(c.id, next)}
onUpdate={(payload) => handleUpdate(c.id, payload)}
onDelete={() => handleDelete(c.id)}
onEditingChange={(editing: boolean) => handleEditingChange(c.id, editing)}
/>
</div>
))}
)
})}
</div>
)}
</main>

24
frontend/src/components/Counter.tsx
View File

@@ -15,6 +15,7 @@ interface CounterProps {
onUpdate?: (payload: { name?: string; file?: File | null }) => Promise<void> | void
onDelete?: () => Promise<void> | void // added delete prop
onEditingChange?: (editing: boolean) => void
}
const clamp = (v: number, min?: number, max?: number) => {
@@ -36,6 +37,7 @@ const Counter: React.FC<CounterProps> = ({
isSaving = false,
onUpdate,
onDelete,
onEditingChange,
}) => {
const setValue = useCallback(
(next: number) => {
@@ -97,23 +99,26 @@ const Counter: React.FC<CounterProps> = ({
setEditName(label ?? '')
setEditFile(null)
setEditing(true)
}, [label])
}, [label, onEditingChange])
const closeEdit = useCallback(() => {
setEditing(false)
setEditFile(null)
setPreviewUrl(null)
}, [])
}, [onEditingChange])
const handleSave = useCallback(async () => {
if (!onUpdate) {
// close and notify parent
setEditing(false)
onEditingChange?.(false)
return
}
try {
setSavingLocal(true)
await onUpdate({ name: editName || undefined, file: editFile })
setEditing(false)
onEditingChange?.(false)
} catch (err) {
console.error('update failed', err)
} finally {
@@ -128,6 +133,7 @@ const Counter: React.FC<CounterProps> = ({
await onDelete()
// close modal locally (parent will remove the card)
setEditing(false)
onEditingChange?.(false)
} catch (err) {
console.error('delete failed', err)
} finally {
@@ -135,6 +141,20 @@ const Counter: React.FC<CounterProps> = ({
}
}, [onDelete])
// Call the latest onEditingChange but only re-run when `editing` toggles.
// This avoids re-running the effect when the parent's callback identity changes.
const onEditingChangeRef = useRef(onEditingChange)
useEffect(() => {
onEditingChangeRef.current = onEditingChange
}, [onEditingChange])
useEffect(() => {
onEditingChangeRef.current?.(editing)
return () => {
if (editing) onEditingChangeRef.current?.(false)
}
}, [editing])
return (
<div
className={className ?? 'counter'}