Feature/1267 refactor bookmarks plugin

new-client/src/plugins/Bookmarks/Bookmarks.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import BaseWindowPlugin from "../BaseWindowPlugin";
 import BookmarksModel from "./BookmarksModel";
@@ -11,58 +11,52 @@ import BookmarksIcon from "@mui/icons-material/Bookmarks";
  * in localStorage. A bookmark contains the map, x,y, zoom level, visible layers etc.
  *
  * @class Bookmarks
- * @extends {React.PureComponent}
+ * @extends {React.Component}
  */
-class Bookmarks extends React.PureComponent {
-  state = {
-    title: "Bokmärken",
-    color: null,
-  };
 
-  static propTypes = {
-    app: PropTypes.object.isRequired,
-    map: PropTypes.object.isRequired,
-    options: PropTypes.object.isRequired,
-  };
+const Bookmarks = ({ app, map, options }) => {
+  const [title, setTitle] = useState("Bokmärken");
+  const [color, setColor] = useState(null);
+  const globalObserver = app.globalObserver;
+  const bookmarksModel = BookmarksModel({ app, map });
 
-  static defaultProps = {
-    options: {},
+  const updateCustomProp = (prop, value) => {
+    if (prop === "title") setTitle(value);
+    else if (prop === "color") setColor(value);
+    else console.error("Unknown prop: " + prop);
   };
 
-  constructor(props) {
-    super(props);
-    this.bookmarksModel = new BookmarksModel({
-      app: props.app,
-      map: props.map,
-    });
-  }
+  return (
+    <BaseWindowPlugin
+      {...{ app, map, options }}
+      type="Bookmarks"
+      custom={{
+        icon: <BookmarksIcon />,
+        title: title,
+        color: color,
+        description: "Användarens bokmärken",
+        height: 450,
+        width: 400,
+      }}
+    >
+      <BookmarksView
+        globalObserver={globalObserver}
+        model={bookmarksModel}
+        app={app}
+        updateCustomProp={updateCustomProp}
+      />
+    </BaseWindowPlugin>
+  );
+};
 
-  updateCustomProp = (prop, value) => {
-    this.setState({ [prop]: value });
-  };
+Bookmarks.propTypes = {
+  app: PropTypes.object.isRequired,
+  map: PropTypes.object.isRequired,
+  options: PropTypes.object,
+};
 
-  render() {
-    return (
-      <BaseWindowPlugin
-        {...this.props}
-        type="Bookmarks"
-        custom={{
-          icon: <BookmarksIcon />,
-          title: this.state.title,
-          color: this.state.color,
-          description: "Användarens bokmärken",
-          height: 450,
-          width: 400,
-        }}
-      >
-        <BookmarksView
-          model={this.bookmarksModel}
-          app={this.props.app}
-          updateCustomProp={this.updateCustomProp}
-        />
-      </BaseWindowPlugin>
-    );
-  }
-}
+Bookmarks.defaultProps = {
+  options: {},
+};
 
 export default Bookmarks;

new-client/src/plugins/Bookmarks/BookmarksModel.js

@@ -10,22 +10,23 @@
  * In future we might want to create backwardcompatibility if we add functionality.
  */
 
+import { useState, useEffect } from "react";
 import { isValidLayerId } from "../../utils/Validator";
 
 const bookmarksVersion = "1.0";
 const storageKey = `bookmarks_v${bookmarksVersion}`;
 
-class BookmarksModel {
-  constructor(settings) {
-    this.map = settings.map;
-    this.app = settings.app;
-    this.bookmarks = [];
+const BookmarksModel = (settings) => {
+  const [map] = useState(settings.map);
+  const [app] = useState(settings.app);
+  const [bookmarks, setBookmarks] = useState([]);
 
-    this.readFromStorage();
-  }
+  useEffect(() => {
+    readFromStorage();
+  }, []);
 
-  getVisibleLayers() {
-    return this.map
+  const getVisibleLayers = () => {
+    return map
       .getLayers()
       .getArray()
       .filter(
@@ -36,11 +37,11 @@ class BookmarksModel {
       )
       .map((layer) => layer.getProperties().name)
       .join(",");
-  }
+  };
 
-  setVisibleLayers(strLayers) {
+  const setVisibleLayers = (strLayers) => {
     let layers = strLayers.split(",");
-    this.map
+    map
       .getLayers()
       .getArray()
       .filter(
@@ -51,10 +52,10 @@ class BookmarksModel {
       .forEach((layer) => {
         layer.setVisible(layers.indexOf(layer.getProperties().name) > -1);
       });
-  }
+  };
 
-  getMapState() {
-    const view = this.map.getView();
+  const getMapState = () => {
+    const view = map.getView();
     const viewCenter = view.getCenter();
     const pos = {
       x: viewCenter[0],
@@ -63,97 +64,119 @@ class BookmarksModel {
     };
 
     return {
-      m: this.app.config.activeMap,
-      l: this.getVisibleLayers(),
+      m: app.config.activeMap,
+      l: getVisibleLayers(),
       ...pos,
     };
-  }
+  };
 
-  setMapStateFromBookmarkIndex(index) {
-    let bookmark = this.bookmarks[index];
+  const setMapStateFromBookmarkIndex = (index) => {
+    let bookmark = bookmarks[index];
     if (bookmark) {
-      this.setMapState(bookmark);
+      setMapState(bookmark);
     }
-  }
+  };
 
-  setMapState(bookmark) {
+  const setMapState = (bookmark) => {
     if (!bookmark) {
       return;
     }
 
-    let bm = this.getDecodedBookmark(bookmark);
-    this.setVisibleLayers(bm.settings.l);
-    let view = this.map.getView();
+    let bm = getDecodedBookmark(bookmark);
+    setVisibleLayers(bm.settings.l);
+    let view = map.getView();
     view.setCenter([bm.settings.x, bm.settings.y]);
     view.setZoom(bm.settings.z);
     bm = null;
-  }
+  };
 
-  readFromStorage() {
+  const readFromStorage = () => {
     let storedBookmarks = localStorage.getItem(storageKey);
     if (!storedBookmarks) {
       let emptyJSONArr = "[]";
       // TODO: Describe in https://github.com/hajkmap/Hajk/wiki/Cookies-in-Hajk and add the functionalOk() hook
       localStorage.setItem(storageKey, emptyJSONArr);
       storedBookmarks = emptyJSONArr;
     }
-    this.bookmarks = JSON.parse(storedBookmarks);
-  }
+    setBookmarks(JSON.parse(storedBookmarks));
+  };
 
-  writeToStorage() {
+  const writeToStorage = () => {
     // TODO: Describe in https://github.com/hajkmap/Hajk/wiki/Cookies-in-Hajk and add the functionalOk() hook
-    localStorage.setItem(storageKey, JSON.stringify(this.bookmarks));
-  }
+    localStorage.setItem(storageKey, JSON.stringify(bookmarks));
+  };
 
-  getDecodedBookmark(bookmark) {
+  const getDecodedBookmark = (bookmark) => {
     let decoded = null;
     if (bookmark) {
       decoded = { ...bookmark };
       decoded.settings = JSON.parse(atob(bookmark.settings));
     }
     return decoded;
-  }
+  };
 
-  bookmarkWithNameExists(name) {
-    return this.bookmarks.find((bookmark) => bookmark.name === name);
-  }
+  const bookmarkWithNameExists = (name) => {
+    return bookmarks.find((bookmark) => bookmark.name === name);
+  };
 
-  replaceBookmark(bookmark) {
+  const replaceBookmark = (bookmark) => {
     if (bookmark) {
-      bookmark.settings = btoa(JSON.stringify(this.getMapState()));
-      this.writeToStorage();
+      bookmark.settings = btoa(JSON.stringify(getMapState()));
+      writeToStorage();
     }
-  }
+  };
 
-  addBookmark(name, allowReplace = false) {
-    let bookmark = this.bookmarkWithNameExists(name);
+  const addBookmark = (name, allowReplace = false) => {
+    let bookmark = bookmarkWithNameExists(name);
 
     if (bookmark) {
       if (allowReplace === true) {
-        this.replaceBookmark(bookmark);
+        replaceBookmark(bookmark);
       }
       return false;
     }
 
-    let settings = this.getMapState();
-    this.bookmarks.push({
+    let settings = getMapState();
+    bookmarks.push({
       name: name,
       settings: btoa(JSON.stringify(settings)),
       sortOrder: 0,
       favorite: false,
     });
-    this.writeToStorage();
+    writeToStorage();
 
     return true;
-  }
+  };
 
-  removeBookmark(bookmark) {
-    let index = this.bookmarks.indexOf(bookmark);
+  const removeBookmark = (bookmark) => {
+    let index = bookmarks.indexOf(bookmark);
     if (index > -1) {
-      this.bookmarks.splice(index, 1);
-      this.writeToStorage();
+      bookmarks.splice(index, 1);
+      writeToStorage();
     }
-  }
-}
+  };
+
+  const getBookmarks = () => {
+    return bookmarks;
+  };
+
+  return {
+    bookmarks,
+    setBookmarks,
+    getVisibleLayers,
+    setVisibleLayers,
+    getMapState,
+    setMapStateFromBookmarkIndex,
+    setMapState,
+    readFromStorage,
+    writeToStorage,
+    getDecodedBookmark,
+    bookmarkWithNameExists,
+    replaceBookmark,
+    addBookmark,
+    removeBookmark,
+    getBookmarks,
+  };
+};
 
 export default BookmarksModel;