Jaculabilis
/
intake
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Hook up the buttons and toggle

This commit is contained in:
Tim Van Baak 2023-07-27 20:47:37 -07:00
parent 759cbb0346
commit 50f325c710
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
intake-client/src/index.js
View File

@ -2,15 +2,33 @@ import { StrictMode, useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
function Item({ item }) { 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 ( return (
<article className={classNames} id={`${item.source}-${item.id}`}> <article className={classNames} id={`${item.source}-${item.id}`}>
<button className="item-button" title="Deactivate">&#10005;</button> <button
<button className="item-button" title="Punt to tomorrow">&#8631;</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>} {item.link && <a className="item-link" href="#" target="_blank">&#8663;</a>}
{/* The item title is a clickable <details> if there is body content */} {/* The item title is a clickable <details> if there is body content */}
{item.body || item.action ? ( {(item.body || item.actions) ? (
<details open> <details open>
<summary><span className="item-title">{item.title || item.id}</span></summary> <summary><span className="item-title">{item.title || item.id}</span></summary>
{item.body && ( {item.body && (
@ -19,7 +37,7 @@ function Item({ item }) {
{item.actions && item.actions.map((action) => { {item.actions && item.actions.map((action) => {
return ( return (
<p key={`${item.source}-${item.id}-action-${action}`}> <p key={`${item.source}-${item.id}-action-${action}`}>
<button> <button onClick={() => doAction(item.source, item.id, action)}>
{action} {action}
</button> </button>
</p> </p>
@ -56,11 +74,18 @@ function App() {
// Initial load // Initial load
useEffect(() => { useEffect(() => {
fetch("http://localhost:5000/api/v1/items") fetch(`http://localhost:5000/api/v1/items?hidden=${showHidden}`)
.then(response => response.json()) .then(response => response.json())
.then(newItems => setItems(newItems.items)) .then(newItems => setItems(newItems.items))
.catch(error => console.log(error)); .catch(error => console.log(error));
}, []); }, [showHidden]);
// Button actions
function bulkDeactivate(items) {
if (confirm(`Deactivate ${items.length} items?`)) {
console.log(`bulkDeactivate(${items})`);
}
}
return ( return (
<main> <main>
@ -87,6 +112,12 @@ function App() {
return <Item item={item} key={item.id}/>; 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 %} */} {/* {% if item_count > items|length %} */}
<article className="center"> <article className="center">
<span className="item-title"> <span className="item-title">
@ -98,15 +129,9 @@ function App() {
{/* {% endif %} */} {/* {% endif %} */}
<article className="center"> <article className="center">
<button >Deactivate All</button> <button onClick={() => bulkDeactivate(items)}>Deactivate All</button>
</article> </article>
{items.length == 0 && (
<article className="center">
<span className="item-title">Feed is empty</span>
</article>
)}
</main> </main>
); );
} }