From 50f325c710d9b11fa6201ff4d48e243bdd883bf5 Mon Sep 17 00:00:00 2001
From: Tim Van Baak <tim.vanbaak@gmail.com>
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 (
         <article className={classNames} id={`${item.source}-${item.id}`}>
-            <button className="item-button" title="Deactivate">&#10005;</button>
-            <button className="item-button" title="Punt to tomorrow">&#8631;</button>
+            <button
+                className="item-button"
+                title="Deactivate"
+                onClick={() => deactivate(item.source, item.id)}>&#10005;</button>
+            <button
+                className="item-button"
+                title="Punt to tomorrow"
+                onClick={() => punt(item.source, item.id)}>&#8631;</button>
             {item.link && <a className="item-link" href="#" target="_blank">&#8663;</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>
     );
   }