Allow 'Language genetic proximity map' tool for registered users

Author: vmonakhov

src/pages/DistanceMap/index.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from "react";
 import { connect } from "react-redux";
-import { Label } from "semantic-ui-react";
+import { Message } from "semantic-ui-react";
 import { graphql } from "@apollo/client/react/hoc";
 import PropTypes from "prop-types";
 import { compose } from "recompose";
@@ -117,15 +117,20 @@ const DistanceMapC = compose(
   graphql(allFieldQuery, { name: "allField" })
 )(DistanceMap);
 
-const Wrapper = ({ user }) => {
+const Wrapper = ({ user, loading }) => {
   const getTranslation = useContext(TranslationContext);
 
-  if (!user || user.id !== 1) {
+  if (loading) {
+    return <Placeholder />;
+  }
+
+  if (!user || !user.id) {
     return (
-      <div style={{ marginTop: "1em" }}>
-        <Label>
-          {getTranslation("For the time being Distance Map functionality is available only for the administrator.")}
-        </Label>
+      <div className="background-content">
+        <Message compact>
+          <Message.Header>{getTranslation("Please sign in")}</Message.Header>
+          <p>{getTranslation("Only registered users can work with distance map.")}</p>
+        </Message>
       </div>
     );
   }

src/pages/DistanceMap/map.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from "react";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
-import { Button, Container, Label, Segment } from "semantic-ui-react";
+import { Button, Container, Segment, Message } from "semantic-ui-react";
 import { gql } from "@apollo/client";
 import { graphql, withApollo } from "@apollo/client/react/hoc";
 import L from "leaflet";
@@ -202,20 +202,25 @@ class MapAreas extends PureComponent {
   }
 
   render() {
-    const { location, user } = this.props;
+    const { location, user, loading } = this.props;
 
     const { mainDictionary } = location.state;
 
     if (!location.state) {
       return null;
     }
 
-    if (!user || user.id !== 1) {
+    if (loading) {
+      return <Placeholder />;
+    }
+
+    if (!user || !user.id) {
       return (
-        <div style={{ marginTop: "1em" }}>
-          <Label>
-            {this.context("For the time being Distance Map functionality is available only for the administrator.")}
-          </Label>
+        <div className="background-content">
+          <Message compact>
+            <Message.Header>{this.context("Please sign in")}</Message.Header>
+            <p>{this.context("Only registered users can work with distance map.")}</p>
+          </Message>
         </div>
       );
     }

src/pages/DistanceMap/selectorLangGroup.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import { Button, Container, Label } from "semantic-ui-react";
+import { Button, Container, Message } from "semantic-ui-react";
 import { withApollo } from "@apollo/client/react/hoc";
 import { fromJS } from "immutable";
 import PropTypes from "prop-types";
@@ -160,7 +160,7 @@ const SelectorLangGroup = ((props) => {
 
   /* Initializing here due to eact-hooks/rules-of-hooks, exact same hook order. */
 
-  const { actions, dataForTree, client, mainGroupDictionaresAndLanguages, selected, user } = props;
+  const { actions, dataForTree, client, mainGroupDictionaresAndLanguages, selected, user, loading } = props;
 
   const [mainGroupDictsAndLangs, setMainGroupDictsAndLangs] = useState(mainGroupDictionaresAndLanguages);
   const [mainDictionary, setMainDictionary] = useState(null);
@@ -179,16 +179,21 @@ const SelectorLangGroup = ((props) => {
       return null;
     }
 
-    if (!user || user.id !== 1) {
+    if (loading) {
+      return <Placeholder />;
+    }
+
+    if (!user || !user.id) {
       return (
-        <div style={{ marginTop: "1em" }}>
-          <Label>
-            {getTranslation("For the time being Distance Map functionality is available only for the administrator.")}
-          </Label>
+        <div className="background-content">
+          <Message compact>
+            <Message.Header>{getTranslation("Please sign in")}</Message.Header>
+            <p>{getTranslation("Only registered users can work with distance map.")}</p>
+          </Message>
         </div>
       );
     }
-    
+
     const { mainPerspectives } = location.state;
     let selectedLanguagesChecken = [];
     let rootLanguage = {};

src/pages/ToolsRoute/index.js

@@ -42,7 +42,7 @@ function ToolsRoute(props) {
               <label className="card-item__label">{getTranslation("Library of linguistic maps")}</label>
               <img className="card-item__img" src={imageStorage} />
             </a>
-            {props.user && props.user.id == 1 && (
+            {props.user && props.user.id && (
               <Link className="card-item" to="/distance_map">
                 <label className="card-item__label">{getTranslation("Language genetic proximity map")}</label>
                 <img className="card-item__img card-item__img_distance-map" src={imageDistanceMap} />