Hook up the buttons and toggle
This commit is contained in:
parent
759cbb0346
commit
50f325c710
|
@ -2,15 +2,33 @@ import { StrictMode, useState, useEffect } from 'react';
|
|||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
function Item({ item }) {
|
||||
var classNames = !item.hidden ? "" : item.active ? "fade" : "strikethru fade";
|
||||
|
||||
function deactivate(source, itemid) {
|
||||
console.log(`deactivate(${source}, ${itemid})`);
|
||||
}
|
||||
|
||||
function punt(source, itemid) {
|
||||
console.log(`punt(${source}, ${itemid})`);
|
||||
}
|
||||
|
||||
function doAction(source, itemid, action) {
|
||||
console.log(`doAction(${source}, ${itemid}, ${action})`);
|
||||
};
|
||||
|
||||
let classNames = !item.hidden ? "" : item.active ? "fade" : "strikethru fade";
|
||||
return (
|
||||
<article className={classNames} id={`${item.source}-${item.id}`}>
|
||||
<button className="item-button" title="Deactivate">✕</button>
|
||||
<button className="item-button" title="Punt to tomorrow">↷</button>
|
||||
<button
|
||||
className="item-button"
|
||||
title="Deactivate"
|
||||
onClick={() => deactivate(item.source, item.id)}>✕</button>
|
||||
<button
|
||||
className="item-button"
|
||||
title="Punt to tomorrow"
|
||||
onClick={() => punt(item.source, item.id)}>↷</button>
|
||||
{item.link && <a className="item-link" href="#" target="_blank">⇗</a>}
|
||||
{/* The item title is a clickable <details> if there is body content */}
|
||||
{item.body || item.action ? (
|
||||
{(item.body || item.actions) ? (
|
||||
<details open>
|
||||
<summary><span className="item-title">{item.title || item.id}</span></summary>
|
||||
{item.body && (
|
||||
|
@ -19,7 +37,7 @@ function Item({ item }) {
|
|||
{item.actions && item.actions.map((action) => {
|
||||
return (
|
||||
<p key={`${item.source}-${item.id}-action-${action}`}>
|
||||
<button>
|
||||
<button onClick={() => doAction(item.source, item.id, action)}>
|
||||
{action}
|
||||
</button>
|
||||
</p>
|
||||
|
@ -56,11 +74,18 @@ function App() {
|
|||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
fetch("http://localhost:5000/api/v1/items")
|
||||
.then(response => response.json())
|
||||
.then(newItems => setItems(newItems.items))
|
||||
.catch(error => console.log(error));
|
||||
}, []);
|
||||
fetch(`http://localhost:5000/api/v1/items?hidden=${showHidden}`)
|
||||
.then(response => response.json())
|
||||
.then(newItems => setItems(newItems.items))
|
||||
.catch(error => console.log(error));
|
||||
}, [showHidden]);
|
||||
|
||||
// Button actions
|
||||
function bulkDeactivate(items) {
|
||||
if (confirm(`Deactivate ${items.length} items?`)) {
|
||||
console.log(`bulkDeactivate(${items})`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
|
@ -87,6 +112,12 @@ function App() {
|
|||
return <Item item={item} key={item.id}/>;
|
||||
})}
|
||||
|
||||
{items.length == 0 && (
|
||||
<article className="center">
|
||||
<span className="item-title">Feed is empty</span>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* {% if item_count > items|length %} */}
|
||||
<article className="center">
|
||||
<span className="item-title">
|
||||
|
@ -98,15 +129,9 @@ function App() {
|
|||
{/* {% endif %} */}
|
||||
|
||||
<article className="center">
|
||||
<button >Deactivate All</button>
|
||||
<button onClick={() => bulkDeactivate(items)}>Deactivate All</button>
|
||||
</article>
|
||||
|
||||
{items.length == 0 && (
|
||||
<article className="center">
|
||||
<span className="item-title">Feed is empty</span>
|
||||
</article>
|
||||
)}
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue