From 7813d181fb0992de4d682fc4d3841290e2cb4b1c Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Nov 30 2017 10:17:15 +0000
Subject: Library widget rework


Fixes #433

---

diff --git a/hubs/static/client/app/core/utils.js b/hubs/static/client/app/core/utils.js
index 4499b04..f3ee5bd 100644
--- a/hubs/static/client/app/core/utils.js
+++ b/hubs/static/client/app/core/utils.js
@@ -3,7 +3,7 @@ import fetch from 'isomorphic-fetch';
 import universal from 'react-universal-component'
 
 
-export function backendCall(url, fetchConfig, json=false) {
+export function backendCall(url, fetchConfig) {
   console.log("Calling backend:", url, fetchConfig);
   const baseFetchConfig = {
     credentials: "same-origin",
@@ -12,10 +12,12 @@ export function backendCall(url, fetchConfig, json=false) {
   fetchConfig = Object.assign({}, baseFetchConfig, fetchConfig);
   return fetch(url, {...baseFetchConfig, ...fetchConfig}).then(
     (response) => {
-      let resultPromise = json ? response.json() : response.text();
+      const contentType = response.headers.get("content-type");
+      const isJson = (contentType && contentType.includes("application/json"))
+      let resultPromise = isJson ? response.json() : response.text();
       if (!response.ok) {
         resultPromise = resultPromise.then((content) => {
-          if (json) {
+          if (isJson) {
             // It's an object describing the error.
             throw content;
           } else {
@@ -30,11 +32,15 @@ export function backendCall(url, fetchConfig, json=false) {
 }
 
 
-export function apiCall(url, fetchConfig) {
-  return backendCall(url, fetchConfig, true).then(
+export function apiCall(url, fetchConfig, extractData=true) {
+  return backendCall(url, fetchConfig).then(
     result => {
       if (result.status === "OK") {
-        return result.data;
+        if (extractData) {
+          return result.data;
+        } else {
+          return result;
+        }
       } else {
         throw new Error(result.message);
       }
diff --git a/hubs/static/client/app/widgets/library/AddLinkDialog.js b/hubs/static/client/app/widgets/library/AddLinkDialog.js
new file mode 100644
index 0000000..f8c4c30
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/AddLinkDialog.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { apiCall } from '../../core/utils';
+import Modal from '../../components/Modal';
+import SelectLinkForm from "./SelectLinkForm";
+import EditLinkForm from "./EditLinkForm";
+
+
+export default class AddLinkDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      linkData: undefined,
+      error: null,
+      isLoading: false,
+    };
+    this.selectUrl = this.selectUrl.bind(this);
+    this.fetchLinkData = this.fetchLinkData.bind(this);
+    this.addLink = this.addLink.bind(this);
+  }
+
+  selectUrl(url) {
+    this.fetchLinkData(url);
+  }
+
+  fetchLinkData(url) {
+    const serverUrl = `${this.props.url}?url=${url}`;
+    this.setState({isLoading: true});
+    apiCall(serverUrl).then(
+      (linkData) => {
+        this.setState({
+          linkData, isLoading: false});
+      },
+      (error) => {
+        this.setState({
+          error: error.message, isLoading: false});
+      }
+    );
+  }
+
+  addLink(link) {
+    this.props.addLink(link);
+  }
+
+  render() {
+    let content = null;
+    if (!this.state.linkData) {
+      content = (
+        <SelectLinkForm
+          onSelect={this.selectUrl}
+          isLoading={this.state.isLoading}
+          error={this.state.error}
+          />
+      );
+    } else {
+      content = (
+        <EditLinkForm
+          onSubmit={this.addLink}
+          isLoading={this.isLoading}
+          error={this.props.addError}
+          link={this.state.linkData}
+          submitText="Add link"
+          />
+      );
+    }
+    return (
+      <Modal
+        title="Add a link"
+        onCloseClicked={this.props.onCloseClicked}
+        isLarge={Boolean(this.state.linkData)}
+        cssClass="AddLink"
+        >
+        {content}
+      </Modal>
+    );
+  }
+}
diff --git a/hubs/static/client/app/widgets/library/Config.js b/hubs/static/client/app/widgets/library/Config.js
new file mode 100644
index 0000000..2aca0b2
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/Config.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import SimpleWidgetConfig from '../../components/SimpleWidgetConfig';
+
+
+// Use the default configuration, but filter out the "links" parameter.
+
+export default function Config(props) {
+  const widgetParams = props.widget.params.filter((param) => (param.name !== "links"));
+  const filteredProps = {
+    ...props,
+    widget: {
+      ...props.widget,
+      params: widgetParams,
+    }
+  };
+  return (
+    <SimpleWidgetConfig {...filteredProps} />
+  );
+}
diff --git a/hubs/static/client/app/widgets/library/EditLinkDialog.js b/hubs/static/client/app/widgets/library/EditLinkDialog.js
new file mode 100644
index 0000000..cd4a990
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/EditLinkDialog.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from '../../components/Modal';
+import EditLinkForm from "./EditLinkForm";
+
+
+export default class EditLinkDialog extends React.Component {
+
+  render() {
+    if (!this.props.link) {
+      return null;
+    }
+    return (
+      <Modal
+        title="Edit link"
+        onCloseClicked={this.props.onCloseClicked}
+        isLarge={true}
+        cssClass="EditLink"
+        >
+        <EditLinkForm
+          onSubmit={this.props.editLink}
+          error={this.props.error}
+          link={this.props.link}
+          submitText="Edit link"
+          />
+      </Modal>
+    );
+  }
+}
diff --git a/hubs/static/client/app/widgets/library/EditLinkForm.js b/hubs/static/client/app/widgets/library/EditLinkForm.js
new file mode 100644
index 0000000..637d370
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/EditLinkForm.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Spinner from "../../components/Spinner";
+
+
+export default class EditLinkForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = this.props.link;
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onChange(e) {
+    const name = e.target.name;
+    const value = e.target.value;
+    this.setState({[name]: value});
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+    this.props.onSubmit(this.state);
+  }
+
+  render() {
+    return (
+      <form
+        onSubmit={this.onSubmit}
+        >
+        <div className="row">
+          <div className="col-12 text-truncate">
+            <span title={this.state.url}>
+              {this.state.url}
+            </span>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-3">
+            {this.state.image ?
+              <img
+                alt="preview"
+                src={this.state.image}
+                title="Preview"
+                className="link-preview border border-secondary mt-2"
+                />
+              :
+              <p className="text-center text-secondary">
+                <em>(no image preview)</em>
+              </p>
+            }
+          </div>
+          <div className="col-9">
+            <div className="form-group">
+              <label className="col-form-label" htmlFor="title">
+                Title
+              </label>
+              <input
+                type="text"
+                className="form-control"
+                name="title"
+                value={this.state.title}
+                onChange={this.onChange}
+                />
+            </div>
+            <div className="form-group">
+              <label className="col-form-label" htmlFor="description">
+                Description
+              </label>
+              <textarea
+                name="description"
+                className="form-control"
+                value={this.state.description}
+                rows="3"
+                onChange={this.onChange}
+                />
+            </div>
+            <div className="form-group">
+              <button
+                className="btn btn-primary"
+                type="submit"
+                disabled={this.props.isLoading}
+                >
+                {this.props.submitText}
+              </button>
+              { this.props.isLoading &&
+                <Spinner />
+              }
+            </div>
+          </div>
+        </div>
+        { this.props.error &&
+            <div className="alert alert-warning">
+              {this.props.error}
+            </div>
+        }
+      </form>
+    );
+  }
+}
diff --git a/hubs/static/client/app/widgets/library/Link.js b/hubs/static/client/app/widgets/library/Link.js
new file mode 100644
index 0000000..6294efb
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/Link.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+export default class Link extends React.Component {
+
+  render() {
+    return (
+      <li className="Link media py-2">
+        <div className="mr-2 link-preview">
+          <img
+            className="link-preview mt-2"
+            src={this.props.image}
+            />
+        </div>
+        <div className={`media-body ${this.props.showDropdown ? "pr-3" : ""}`}>
+          { this.props.showDropdown &&
+            <div
+              className="dropdown"
+              >
+              <a
+                className="text-secondary dropdown-toggle"
+                href="#"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                >
+              </a>
+              <div
+                className="dropdown-menu dropdown-menu-right"
+                aria-labelledby="dropdownMenuLink"
+                >
+                <a
+                  className="dropdown-item"
+                  href="#"
+                  onClick={this.props.onEdit}
+                  >
+                  Edit item
+                </a>
+                <a
+                  className="dropdown-item"
+                  href="#"
+                  onClick={this.props.onDelete}
+                  >
+                  Delete
+                </a>
+              </div>
+            </div>
+          }
+          <a
+            href={this.props.url}
+            className="d-block"
+            target="_blank"
+            >
+            {this.props.title}
+          </a>
+          <p className="mb-0 description">
+            <small>
+              {this.props.description}
+            </small>
+          </p>
+        </div>
+      </li>
+    );
+  }
+}
+Link.propTypes = {
+  showDropDown: PropTypes.bool,
+  url: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+}
+Link.defaultProps = {
+  showDropDown: false,
+  description: null,
+}
diff --git a/hubs/static/client/app/widgets/library/SelectLinkForm.js b/hubs/static/client/app/widgets/library/SelectLinkForm.js
new file mode 100644
index 0000000..bc7db75
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/SelectLinkForm.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Spinner from "../../components/Spinner";
+
+
+export default class SelectLinkForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: "",
+    };
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  onInputChange(e) {
+    const value = e.target.value;
+    this.setState({url: value});
+  }
+
+  onSelect(e) {
+    e.preventDefault();
+    this.props.onSelect(this.state.url);
+  }
+
+  render() {
+    return (
+      <div>
+        <form className="form-inline" onSubmit={this.onSelect}>
+          <label className="sr-only" htmlFor="url">URL</label>
+          <input
+            type="text"
+            name="url"
+            className="form-control"
+            autoFocus={true}
+            placeholder="Enter an URL..."
+            value={this.state.url}
+            onChange={this.onInputChange}
+            />
+          <button
+            className="btn btn-primary mx-3"
+            type="submit"
+            disabled={this.props.isLoading}
+            >
+            Fetch URL
+          </button>
+          { this.props.isLoading &&
+            <Spinner circle={true} />
+          }
+        </form>
+        { this.props.error &&
+          <div className="alert alert-warning mt-3">
+            {this.props.error}
+          </div>
+        }
+      </div>
+    );
+  }
+}
diff --git a/hubs/static/client/app/widgets/library/Widget.js b/hubs/static/client/app/widgets/library/Widget.js
new file mode 100644
index 0000000..dc90489
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/Widget.js
@@ -0,0 +1,244 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { apiCall } from '../../core/utils';
+import WidgetChrome from '../../components/WidgetChrome';
+import "./library.css";
+import Link from "./Link";
+import AddLinkDialog from "./AddLinkDialog";
+import EditLinkDialog from "./EditLinkDialog";
+import Pagination from "../../components/Pagination";
+
+
+class LibraryWidget extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      links: [],
+      page: null,
+      error: null,
+      isLoading: false,
+      isAddDialogOpened: false,
+      editingLink: false,
+    };
+    this.loadFromServer = this.loadFromServer.bind(this);
+    this.changePage = this.changePage.bind(this);
+    this.onAddDialogOpen = this.onAddDialogOpen.bind(this);
+    this.onAddDialogClose = this.onAddDialogClose.bind(this);
+    this.addLink = this.addLink.bind(this);
+    this.onEditDialogClose = this.onEditDialogClose.bind(this);
+    this.saveEditedLink = this.saveEditedLink.bind(this);
+    this.clearError = this.clearError.bind(this);
+  }
+
+  componentDidMount() {
+    if (!this.props.editMode) {
+      this.loadFromServer();
+    }
+  }
+
+  loadFromServer(pageNr=1) {
+    const url = `${this.props.widget.urls.data}?page=${pageNr}`;
+    apiCall(url, {}, false).then(
+      (result) => {
+        this.setState({
+          links: result.data,
+          page: result.page,
+          error: null,
+        });
+      },
+      (error) => {
+        console.log(error);
+        this.setState({
+          error: error.message
+        });
+      }
+    );
+  }
+
+  changePage(pageNr) {
+    console.log(pageNr);
+    this.loadFromServer(pageNr);
+  }
+
+  onAddDialogOpen(e) {
+    this.setState({isAddDialogOpened: true});
+  }
+
+  onAddDialogClose(e) {
+    this.setState({isAddDialogOpened: false});
+  }
+
+  addLink(link) {
+    const body = JSON.stringify(link);
+    apiCall(this.props.widget.urls.data, {method: "POST", body}).then(
+      (result) => {
+        this.setState((prevState, props) => ({
+            links: [...prevState.links, link], // Optimistic update.
+            isAddDialogOpened: false,
+            error: null,
+          })
+        );
+        this.loadFromServer();
+      },
+      (error) => {
+        console.log(error);
+        this.setState({
+          error: error.message
+        });
+      }
+    );
+  }
+
+  editLink(index, e) {
+    e.preventDefault();
+    this.setState((prevState, props) => ({
+      editingLink: prevState.links[index]
+    }));
+  }
+
+  onEditDialogClose(e) {
+    this.setState({editingLink: false});
+  }
+
+  saveEditedLink(link) {
+    const body = JSON.stringify(link);
+    apiCall(this.props.widget.urls.data, {method: "PUT", body}).then(
+      (result) => {
+        this.setState((prevState, props) => ({
+            links: prevState.links.map((l) => {
+              if (l.url === link.url) {
+                return link;
+              }
+              return l;
+            }),
+            editingLink: false,
+            error: null,
+          })
+        );
+        this.loadFromServer();
+      },
+      (error) => {
+        console.log(error);
+        this.setState({
+          error: error.message
+        });
+      }
+    );
+  }
+
+  deleteLink(index, e) {
+    e.preventDefault();
+    const link = this.state.links[index];
+    const body = JSON.stringify(link);
+    apiCall(this.props.widget.urls.data, {method: "DELETE", body}).then(
+      (result) => {
+        this.setState((prevState, props) => ({
+            links: prevState.links.filter((l) => (l.url !== link.url)),
+            editingLink: false,
+          })
+        );
+        this.loadFromServer();
+      },
+      (error) => {
+        console.log(error);
+        this.setState({
+          error: error.message
+        });
+      }
+    );
+  }
+
+  clearError(e) {
+    e.preventDefault();
+    this.setState({error: null});
+  }
+
+  render() {
+    const links = this.state.links.map((link, index) => (
+      <Link
+        key={link.url}
+        {...link}
+        onEdit={this.editLink.bind(this, index)}
+        onDelete={this.deleteLink.bind(this, index)}
+        showDropdown={this.props.currentUser.perms.config_hub}
+        />
+      )
+    );
+    return (
+      <WidgetChrome
+        widget={this.props.widget}
+        editMode={this.props.editMode}
+        >
+        <div className="widget-library p-2">
+          { this.state.error &&
+            <div className="alert alert-warning">
+              {this.state.error}
+              <button
+                type="button"
+                className="close"
+                aria-label="Close"
+                onClick={this.clearError}
+                >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          }
+          { links.length > 0 ?
+            <div>
+              <ul className="list-unstyled">
+                {links}
+              </ul>
+              { this.state.page.total_pages > 1 &&
+                <Pagination
+                  page={this.state.page}
+                  onPageChange={this.changePage}
+                  className="mt-2 justify-content-center pagination-sm"
+                  />
+              }
+            </div>
+            :
+            <p className="text-secondary">
+              <em>No links yet.</em>
+            </p>
+          }
+          {this.props.currentUser.perms.config_hub &&
+            <div>
+              <div className="text-center">
+                <button
+                  className="btn btn-secondary btn-sm"
+                  onClick={this.onAddDialogOpen}
+                  >
+                  Add a New Item
+                </button>
+              </div>
+              {this.state.isAddDialogOpened &&
+                <AddLinkDialog
+                  onCloseClicked={this.onAddDialogClose}
+                  addLink={this.addLink}
+                  addError={this.state.error}
+                  url={this.props.widget.urls.getLink}
+                  />
+              }
+            </div>
+          }
+          <EditLinkDialog
+            link={this.state.editingLink}
+            editLink={this.saveEditedLink}
+            onCloseClicked={this.onEditDialogClose}
+            error={this.props.error}
+            />
+        </div>
+      </WidgetChrome>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    currentUser: state.currentUser,
+  }
+};
+
+export default connect(mapStateToProps)(LibraryWidget);
diff --git a/hubs/static/client/app/widgets/library/library.css b/hubs/static/client/app/widgets/library/library.css
new file mode 100644
index 0000000..54dc556
--- /dev/null
+++ b/hubs/static/client/app/widgets/library/library.css
@@ -0,0 +1,21 @@
+.widget-library div.link-preview {
+  max-width: 25%;
+}
+.widget-library img.link-preview {
+  width: 100%;
+  display: inline-block;
+}
+
+
+.widget-library .Link {
+    border-bottom: 1px solid #eee;
+}
+
+.widget-library .Link .dropdown {
+    position: absolute;
+    right: .5em;
+}
+
+.widget-library .Link .description {
+    line-height: 1;
+}
diff --git a/hubs/tests/widgets/test_library.py b/hubs/tests/widgets/test_library.py
index 6cb8297..99cb9c1 100644
--- a/hubs/tests/widgets/test_library.py
+++ b/hubs/tests/widgets/test_library.py
@@ -1,26 +1,73 @@
 from __future__ import unicode_literals
 
+import json
+
+from hubs.app import app
 from hubs.tests import FakeAuthorization, widget_instance
 from . import WidgetTest
 
 
 class TestLibrary(WidgetTest):
     plugin = 'library'  # The name in hubs.widgets.registry
+    maxDiff = None
 
     def test_data_simple(self):
         widget = widget_instance('ralph', self.plugin)
         user = FakeAuthorization('ralph')
         response = self.check_url(
-            '/ralph/w/%s/%i/' % (self.plugin, widget.idx), user)
+            '/ralph/w/%s/%i/data' % (self.plugin, widget.idx), user)
         expected_dict = {
-            "urls": [
-                "<a href=\"ralph/\">ralph/</a>"
-            ],
-            'edit_mode': False,
-            'widget': widget.module,
-            'widget_instance': widget,
+            'data': [],
+            'page': {
+                'has_next': False,
+                'has_prev': False,
+                'nr': 1,
+                'total_entries': 0,
+                'total_pages': 1
+            },
+            'status': 'OK',
         }
-        self.assertDictEqual(response.context, expected_dict)
+        data = json.loads(response.get_data(as_text=True))
+        self.assertDictEqual(data, expected_dict)
 
-    def test_view_authz(self):
-        self._test_view_authz()
+    def test_props(self):
+        widget = widget_instance('ralph', self.plugin)
+        with app.test_request_context('/'):
+            props = widget.get_props()
+        self.assertDictEqual(props, {
+            'component': 'library',
+            'config': {'links': [], 'per_page': 4},
+            'cssClass': None,
+            'hiddenIfEmpty': False,
+            'idx': widget.idx,
+            'index': 51,
+            'isReact': True,
+            'isLarge': False,
+            'label': 'Library',
+            'name': 'library',
+            'params': [
+                {'default': [],
+                 'help': 'A JSON list of dicts with `url`, `title`, '
+                         '`description`, and `image` keys.',
+                 'label': 'Links',
+                 'name': 'links',
+                 'renderTag': 'input',
+                 'renderAttributes': {'type': 'text'},
+                 },
+                {'default': 4,
+                 'help': 'The number of links per page to display.',
+                 'label': 'Links per page',
+                 'name': 'per_page',
+                 'renderTag': 'input',
+                 'renderAttributes': {'type': 'text'},
+                 },
+            ],
+            'position': 'right',
+            'selfUrl': '/api/hubs/ralph/widgets/{}/'.format(widget.idx),
+            'title': 'Library',
+            'urls': {
+                'data': '/ralph/w/library/{}/data'.format(widget.idx),
+                'getLink': '/ralph/w/library/{}/get-link'.format(
+                    widget.idx),
+            }
+        })
diff --git a/hubs/utils/views.py b/hubs/utils/views.py
index c42356a..a769dc8 100644
--- a/hubs/utils/views.py
+++ b/hubs/utils/views.py
@@ -143,8 +143,10 @@ def configure_widget_instance(widget_instance, widget_config):
     for param in widget_instance.module.get_parameters():
         val = widget_config.get(param.name)
         if not val:
-            raise WidgetConfigError(
-                'You must provide a value for: %s' % param.name)
+            if param.default is None:
+                raise WidgetConfigError(
+                    'You must provide a value for: %s' % param.name)
+            val = param.default
         values[param.name] = val
     try:
         config = widget_instance.module.validate_parameters(values)
diff --git a/hubs/widgets/base.py b/hubs/widgets/base.py
index 55767bd..0155b0f 100644
--- a/hubs/widgets/base.py
+++ b/hubs/widgets/base.py
@@ -80,6 +80,7 @@ class Widget(object):
         """
         config = {}
         for param in self.get_parameters():
+            print(param.name, param.validator, values[param.name])
             config[param.name] = param.validator(values[param.name])
         return config
 
diff --git a/hubs/widgets/library/__init__.py b/hubs/widgets/library/__init__.py
index e8315d3..817de1c 100644
--- a/hubs/widgets/library/__init__.py
+++ b/hubs/widgets/library/__init__.py
@@ -1,32 +1,40 @@
 from __future__ import unicode_literals
 
-from hubs.widgets import clean_input, validators
+import flask
+
+from hubs.widgets import validators
 from hubs.widgets.base import Widget
-from hubs.widgets.view import RootWidgetView
 
 
 class Library(Widget):
 
     name = "library"
     position = "both"
-    parameters = [dict(
-        name="urls",
-        label="URLs",
-        default=None,
-        validator=validators.Text,
-        help="A comma separated list of URLs to add to the library. "
-             "External links must include the whole link "
-             "(starting with http...)."
+    parameters = [
+        dict(
+            name="links",
+            label="Links",
+            default=[],
+            help="A JSON list of dicts with `url`, `title`, `description`, "
+                 "and `image` keys."
+        ), dict(
+            name="per_page",
+            label="Links per page",
+            default=4,
+            validator=validators.Integer,
+            help="The number of links per page to display.",
         )]
+    is_react = True
+    views_module = ".views"
 
-
-class BaseView(RootWidgetView):
-
-    def get_context(self, instance, *args, **kwargs):
-        urls = [
-            clean_input.clean(
-                '<a href="{0}">{0}</a>'.format(u.strip()))
-            for u in instance.config.get('urls', '').split(',')
-            if u.strip()
-        ]
-        return dict(urls=urls)
+    def get_props(self, instance, *args, **kwargs):
+        props = super(Library, self).get_props(instance, *args, **kwargs)
+        if instance is not None:
+            hub_name = instance.hub.name
+            props["urls"] = dict(
+                data=flask.url_for(
+                    "library_data", hub=hub_name, idx=instance.idx),
+                getLink=flask.url_for(
+                    "library_get_link", hub=hub_name, idx=instance.idx),
+                )
+        return props
diff --git a/hubs/widgets/library/templates/root.html b/hubs/widgets/library/templates/root.html
deleted file mode 100644
index 4cbff48..0000000
--- a/hubs/widgets/library/templates/root.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="rules-container">
-  <div class="row">
-    <ul>
-    {% for url in urls %}
-    <li>
-      {{ url }}
-    </li>
-    {% endfor %}
-    </ul>
-  </div>
-</div>
diff --git a/hubs/widgets/library/views.py b/hubs/widgets/library/views.py
new file mode 100644
index 0000000..1b338c2
--- /dev/null
+++ b/hubs/widgets/library/views.py
@@ -0,0 +1,111 @@
+from __future__ import unicode_literals
+
+import flask
+import requests
+from bs4 import BeautifulSoup
+
+from hubs.utils.pagination import paginate
+from hubs.widgets.view import WidgetView
+from hubs.utils.views import check_hub_access
+
+
+class LinkValidationError(Exception):
+
+    def __init__(self, message):
+        self.message = message
+
+
+def validate_link(link):
+    if not link["url"]:
+        raise LinkValidationError("The link must have an URL")
+    if not link["title"]:
+        raise LinkValidationError("The link must have a title")
+
+
+class DataView(WidgetView):
+
+    name = "data"
+    url_rules = ["data"]
+    methods = ['GET', 'POST', 'PUT', 'DELETE']
+    json = True
+
+    def get_context(self, instance, *args, **kwargs):
+        if flask.request.method in ["POST", "PUT", "DELETE"]:
+            # Updating in-place is not supported, it's a class property.
+            config = instance.config.copy()
+            try:
+                if flask.request.method == "POST":
+                    check_hub_access(instance.hub, "config", json=True)
+                    new_link = flask.request.get_json()
+                    validate_link(new_link)
+                    if new_link["url"] in [l["url"] for l in config["links"]]:
+                        raise LinkValidationError(
+                            "This URL is already in the library")
+                    config["links"].append(new_link)
+                elif flask.request.method == "PUT":
+                    check_hub_access(instance.hub, "config", json=True)
+                    link = flask.request.get_json()
+                    config["links"] = list(map(
+                        lambda l: link if l["url"] == link["url"] else l,
+                        config["links"]))
+                elif flask.request.method == "DELETE":
+                    check_hub_access(instance.hub, "config", json=True)
+                    link = flask.request.get_json()
+                    config["links"] = list(filter(
+                        lambda l: l["url"] != link["url"],
+                        config["links"]))
+            except LinkValidationError as e:
+                return dict(
+                    status="ERROR",
+                    message=e.message,
+                    )
+            instance.config = config
+            flask.g.db.commit()
+            return {"status": "OK"}
+        links, page_data = paginate(
+            instance.config["links"], instance.config["per_page"])
+        return dict(status="OK", data=links, page=page_data)
+
+
+class GetLinkView(WidgetView):
+    """XXX
+    """
+
+    name = "get_link"
+    url_rules = ["get-link"]
+    json = True
+
+    def get_context(self, instance, *args, **kwargs):
+        url = flask.request.values.get("url")
+        if not url:
+            return dict(status="ERROR", message="No URL.")
+        try:
+            response = requests.get(url, timeout=10)
+        except requests.exceptions.Timeout:
+            return dict(status="ERROR", message="Connection timed out.")
+        if not response.ok:
+            return dict(
+                status="ERROR",
+                message="Could not fetch this URL: error {}.".format(
+                    response.status_code)
+                )
+        soup = BeautifulSoup(response.text, 'html.parser')
+        # Title
+        title = soup.head.find("meta", property="og:title")
+        if title is None:
+            title = soup.head.title.string
+        else:
+            title = title["content"]
+        # Description
+        desc = soup.head.find("meta", property="og:description")
+        if desc is None:
+            desc = soup.head.find("meta", name="description")
+        else:
+            desc = desc["content"]
+        # Image
+        image = soup.head.find("meta", property="og:image")
+        if image is not None:
+            image = image["content"]
+        return dict(status="OK", data=dict(
+            url=url, title=title, description=desc, image=image,
+        ))
diff --git a/requirements.txt b/requirements.txt
index 95be6f4..df9f7c8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,5 +1,6 @@
 alembic
 arrow
+beautifulsoup4
 bleach<2.0.0
 blinker
 python-dateutil