Feature/1267 refactor bookmarks plugin

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

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import BaseWindowPlugin from "../BaseWindowPlugin";
 import BookmarksModel from "./BookmarksModel";
 import BookmarksView from "./BookmarksView";
+import Observer from "react-event-observer";
 import BookmarksIcon from "@mui/icons-material/Bookmarks";
 
 /**
@@ -11,58 +12,84 @@ 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 = (props) => {
+  const [state, setState] = React.useState({ title: "Bokmärken", color: null });
+  const [pluginShown, setPluginShown] = React.useState(
+    props.options.visibleAtStart ?? false
+  );
+  const [localObserver] = React.useState(Observer());
+  const [bookmarksModel] = React.useState(
+    () =>
+      new BookmarksModel({
+        app: props.app,
+        map: props.map,
+      })
+  );
+  const [bookmarks, setBookmarks] = React.useState(bookmarksModel.bookmarks);
+
+  // Read bookmarks from local storage on component mount
+  React.useEffect(() => {
+    bookmarksModel.readFromStorage();
+    setBookmarks(bookmarksModel.bookmarks);
+  }, [bookmarksModel]);
+
+  // Listen for updates to bookmarks in local storage
+  React.useEffect(() => {
+    const updateBookmarks = () => {
+      bookmarksModel.readFromStorage();
+      setBookmarks(bookmarksModel.bookmarks);
+    };
+    window.addEventListener("storage", updateBookmarks);
+    return () => window.removeEventListener("storage", updateBookmarks);
+  }, [bookmarksModel]);
+
+  // Called when the plugin is hidden
+  const onWindowHide = () => {
+    setPluginShown(false);
   };
 
-  static defaultProps = {
-    options: {},
+  // Called when the plugin is shown
+  const onWindowShow = () => {
+    setPluginShown(true);
   };
 
-  constructor(props) {
-    super(props);
-    this.bookmarksModel = new BookmarksModel({
-      app: props.app,
-      map: props.map,
-    });
-  }
+  return (
+    <BaseWindowPlugin
+      {...props}
+      type="Bookmarks"
+      custom={{
+        icon: <BookmarksIcon />,
+        title: state.title,
+        color: state.color,
+        description: "Användarens bokmärken",
+        height: 450,
+        width: 400,
+        onWindowHide: onWindowHide,
+        onWindowShow: onWindowShow,
+      }}
+    >
+      <BookmarksView
+        model={bookmarksModel}
+        bookmarks={bookmarks}
+        app={props.app}
+        localObserver={localObserver}
+        globalObserver={props.app.globalObserver}
+      />
+    </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

@@ -154,6 +154,10 @@ class BookmarksModel {
       this.writeToStorage();
     }
   }
+
+  getBookmarks() {
+    return this.bookmarks;
+  }
 }
 
 export default BookmarksModel;