From 50f325c710d9b11fa6201ff4d48e243bdd883bf5 Mon Sep 17 00:00:00 2001 From: Tim Van Baak Date: Thu, 27 Jul 2023 20:47:37 -0700 Subject: [PATCH] Hook up the buttons and toggle --- intake-client/src/index.js | 59 +++++++++++++++++++++++++++----------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/intake-client/src/index.js b/intake-client/src/index.js index e9f568e..438b9a9 100644 --- a/intake-client/src/index.js +++ b/intake-client/src/index.js @@ -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 (
- - + + {item.link && } {/* The item title is a clickable
if there is body content */} - {item.body || item.action ? ( + {(item.body || item.actions) ? (
{item.title || item.id} {item.body && ( @@ -19,7 +37,7 @@ function Item({ item }) { {item.actions && item.actions.map((action) => { return (

-

@@ -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 (
@@ -87,6 +112,12 @@ function App() { return ; })} + {items.length == 0 && ( +
+ Feed is empty +
+ )} + {/* {% if item_count > items|length %} */}
@@ -98,15 +129,9 @@ function App() { {/* {% endif %} */}
- +
- {items.length == 0 && ( -
- Feed is empty -
- )} -
); }