Tagging

adze-web/src/ConfigureSection.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Constants from './Constants.js'
 import { selectManifest, uploadToHub } from './state/manifestSlice.js'
 import { selectCredentials, validateCredentials } from './state/credentialsSlice.js'

adze-web/src/FeedSection.js

@@ -139,7 +139,7 @@ class ProvenanceDescription extends React.Component {
     }
 
 
-    return sharerParts.join(", ");;
+    return sharerParts.join(", ");
   }
 
   getFullShareDescription() {

adze-web/src/LinksSection.js

@@ -1,71 +1,122 @@
-import React from 'react'
-
-
+import React, { useState } from 'react'
 import Constants from './Constants.js'
+import { selectManifest, addLinkByUrl, removeLink } from './state/manifestSlice.js'
+import { selectCredentials } from './state/credentialsSlice.js'
+import { useSelector, useDispatch } from 'react-redux'
+import { ErrorMessageOrNull, ManifestStatusMessage } from './notifications.js'
 
-import { selectManifest , addLinkByUrl, removeLink } from './state/manifestSlice.js'
-import { selectCredentials  } from './state/credentialsSlice.js'
-import { useSelector, useDispatch} from 'react-redux'
+const numberOfTags = 4;
 
-import { ErrorMessageOrNull, ManifestStatusMessage} from './notifications.js'
 
-
-function SingleLinkElement({link}){
-   // upvote adze it to your own list of links
+function SingleLinkElement({ link }) {
+  // upvote adze it to your own list of links
   // gives you the option of following the peer if you aren't already
-   // downvote removes it from your feed, adze it to your list of 'no good'
+  // downvote removes it from your feed, adze it to your list of 'no good'
   // links, and gives the option of removing that peer
 
-    const dispatch = useDispatch();
-
-    const removeThisLink = () => {
-      dispatch(removeLink(link));
-    }
-
-    return (
-        <li>
-          <span onClick={removeThisLink}>&#x274C;</span>
-          <a href={link.url}> {link.title}</a>
-      </li>
-    );
+  const dispatch = useDispatch();
+
+  const removeThisLink = () => {
+    dispatch(removeLink(link));
+  }
+
+  return (
+    <li className='mb-1 box'>
+      <button class="button is-danger is-small is-light" onClick={removeThisLink}>Remove &#x274C; </button>
+      <span>{link.title}</span>
+      <div className='mb-2'><a href={link.url}> {link.url}</a></div>
+      <span>Tags: </span>
+      {link.tags && link.tags.length !== 0 && link.tags.map(tag => (
+        <span class="tag is-info is-light mr-2">
+          {tag}
+        </span>
+      ))}
+    </li>
+  );
 }
 
-function LinksSection({isActive}) {
-  const className = isActive ?  "" : "is-invisible";
+function LinksSection({ isActive }) {
+  const [inputLinkUrl, setInputLinkUrl] = useState("")
+  const [inputTags, setInputTags] = useState([...Array(numberOfTags)])
+  const className = isActive ? "" : "is-invisible";
   const styleType = isActive ? {} : Constants.invisibleStyle;
   const manifest = useSelector(selectManifest);
   const credentials = useSelector(selectCredentials);
   const dispatch = useDispatch();
 
   const linkItems = manifest.content.sites.map(site => <SingleLinkElement key={site.url} link={site} />);
 
+  const handleClear = () => {
+    setInputLinkUrl("");
+    setInputTags([...Array(numberOfTags)]);
+  }
 
-  const handleAddLink = (event) => {  
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const { inputLinkUrl } =  event.target.elements;
+  const updateInputTags = (value, i) => {
+    let updateInputTags = [...inputTags];
+    updateInputTags[i] = value;
+    setInputTags(updateInputTags);
+  }
 
-    dispatch(addLinkByUrl({credentials: credentials, link: inputLinkUrl.value}));
+  const handleAddLink = (event) => {
+    event.preventDefault();
+    console.log(inputLinkUrl);
+    let listOfTags = inputTags.filter(e => e && String(e).trim());
+    console.log(listOfTags)
+    dispatch(addLinkByUrl({
+      credentials: credentials,
+      link: inputLinkUrl,
+      tags: listOfTags
+    }));
   }
+
+
   return (
     <div className={className} id="section-links" style={styleType}>
-         <h2 className="title is-2">Adzed Links</h2>
-         <h3 className="subtitle is-3">Links you are recommending</h3>
-        <ManifestStatusMessage credentials={credentials}/>
-          <form onSubmit={handleAddLink}>
-            <div className="field has-addons">
-                    <div className="control is-expanded">
-                      <input className="input" type="text" id="inputLinkUrl" placeholder="put links to good content here"></input>
-                    </div>
-                    <div className="control">
-                      <button 
-                          className="button"
-                          type="submit"
-                          id="btn-add-link">Adze Link</button>
-                    </div>
-              </div>
-          </form>
-       <ul id="adze-link-list">{linkItems}</ul>
+      <ManifestStatusMessage credentials={credentials} />
+      <h2 className="title is-2">Adzed Links</h2>
+      <h3 className="subtitle is-3 mt-4">Add new links:</h3>
+      <form onSubmit={handleAddLink}>
+        <div className="field">
+          <label class="label">Put links to good content here:</label>
+          <div className="control is-expanded">
+            <input required label="Link:" className="input" type="text" value={inputLinkUrl} onChange={e => setInputLinkUrl(e.target.value)} placeholder="www.mozilla.org"></input>
+          </div>
+        </div>
+        <label class="label">Add tags to describe the link: </label>
+        <div class="field is-grouped is-grouped-multiline">
+          <p class="control">
+            <input className="input" type="text" value={inputTags[0]} onChange={e => updateInputTags(e.target.value, 0)} placeholder="Interesting"></input>
+          </p>
+          <p class="control">
+            <input className="input" type="text" value={inputTags[1]} onChange={e => updateInputTags(e.target.value, 1)}></input>
+          </p>
+          <p class="control">
+            <input className="input" type="text" value={inputTags[2]} onChange={e => updateInputTags(e.target.value, 2)}></input>
+          </p>
+          <p class="control">
+            <input className="input" type="text" value={inputTags[3]} onChange={e => updateInputTags(e.target.value, 3)}></input>
+          </p>
+        </div>
+        <div className="field is-grouped">
+          <div className="control">
+            <button
+              className="button is-primary"
+              type="submit"
+              id="btn-add-link">Adze Link</button>
+          </div>
+          <div className="control">
+            <button
+              className="button"
+              onClick={handleClear}
+              id="btn-clear">Clear</button>
+          </div>
+        </div>
+      </form>
+
+      <div>
+        <h3 className="subtitle is-3 mt-6 mb-3">Links you are recommending:</h3>
+      </div>
+      <ul id="adze-link-list">{linkItems}</ul>
     </div>
   )
 }

adze-web/src/PeersSection.js

@@ -1,4 +1,5 @@
-import Constants from './Constants.js'
+import React from 'react';
+import Constants from './Constants.js';
 
 import { selectManifest , addPeerByUrl, removePeer } from './state/manifestSlice.js'
 import { useSelector, useDispatch} from 'react-redux'

adze-web/src/state/feedSlice.js

@@ -36,15 +36,15 @@ async function updatePeerManifestCache(localManifest, numTimesToFollow) {
   var toVisitNext = [];
   var thisPeerOrder = 1;
   // make a plan to visit all the local peers
-  for (var peerNo in localManifest.content.peers) {
-    var peer = localManifest.content.peers[peerNo];
+  for (let peerNo in localManifest.content.peers) {
+    let peer = localManifest.content.peers[peerNo];
     peersSeenSoFar[peer.url] = true;
     toVisit.push(peer);
   }
 
   while (numTimesToFollow > 0) {
-      for (var peerNo in toVisit) {
-        var peer = toVisit[peerNo];
+      for (let peerNo in toVisit) {
+        let peer = toVisit[peerNo];
         var thisPeerManifest = await getPeerManifest(peer.url);
         peersSeenSoFar[peer.url] = true;
         thisPeerManifest.meta.order = thisPeerOrder;

adze-web/src/state/manifestSlice.js

@@ -55,6 +55,7 @@ export const addLinkByUrl = createAsyncThunk(
      title: linkDesc.title,
      url: linkDesc.url,
      timestamp_ms: new Date().getTime(),
+     tags: linkAndCreds.tags
    }
   }
 )

adze-web/src/store.js

@@ -15,7 +15,7 @@ const localStorageMiddleware = ({ getState }) => {
 const reHydrateStore = () => {
   if (localStorage.getItem('applicationState') !== null) {
     return JSON.parse(localStorage.getItem('applicationState')); // re-hydrate the store
-  };
+  }
 }