Ability to share a link to a place

src/App.scss

@@ -157,6 +157,20 @@ h4.place-title {
   color: darkgray;
 }
 
+.place-buttons {
+  align-self: flex-end;
+  margin: 0 0 5px 0;
+}
+
+.ant-tooltip-inner,
+.ant-tooltip-arrow::before {
+  background-color: $primary-color;
+}
+
+.ant-message-success .anticon{
+  color: $primary-color;
+}
+
 h4.suggestion-title {
   color: $text-color;
   margin-bottom: 0;

src/Components/ExtraPlaceButtons.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Button, Tooltip, message } from "antd";
+import { ShareAltOutlined } from "@ant-design/icons";
+import { LogEngagementEvent } from "../Logging";
+
+export class ExtraPlaceButtons extends React.Component {
+
+  copyToClipboard(str){
+    if(navigator.clipboard){
+      navigator.clipboard.writeText(str)
+    }
+    else{
+      const el = document.createElement('textarea');
+      el.value = str
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+    }
+    message.success('Copied');
+  }
+
+  render() {
+    var place = this.props.place;
+    return (
+      <div className="place-buttons">
+        <Tooltip title="copy">
+          <Button
+            shape="circle"
+            size="small"
+            type="default"
+            icon={<ShareAltOutlined />}
+            onClick={event => {
+              LogEngagementEvent(
+                "user-click",
+                "share",
+                place.placeID
+              );
+              this.copyToClipboard(window.location.origin + "/place/" + place.placeID)
+            }}
+          >
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }
+}

src/Components/PlaceFilterDisplay.js

@@ -4,6 +4,7 @@ import { NearbySpots } from "./NearbySpots";
 import { PlaceResultMain } from "./PlaceResultMain";
 import { PlaceAutosuggestion } from "./PlacesAutosuggestion";
 import Areas from "../CityData/Areas";
+import SFPlaces from "../CityData/Places";
 
 export class PlaceFilterDisplay extends React.Component {
   constructor(props) {
@@ -15,6 +16,16 @@ export class PlaceFilterDisplay extends React.Component {
       suggestedPlaces: null
     };
     this.elementRef = React.createRef();
+
+    const params = window.location.pathname.slice(1).split("/");
+    if(params[0] === 'place'){
+      const placeKey = params[1];
+      const currentPlace = SFPlaces.find(
+        placeKey => this.key = placeKey
+      )
+      if(currentPlace)
+        this.fetchPlaceInfo(this.elementRef, placeKey);
+    }
   }
 
   updateAreaFromPlace = place => {

src/Components/PlaceResultMain.js

@@ -3,6 +3,8 @@ import { Row, Col } from "antd";
 import { AddLinkModal } from "./AddLinkModal";
 import { CallToActionButton } from "./CallToActionButton";
 import { ExtraActionButtons } from "./ExtraActionButtons";
+import { ExtraPlaceButtons } from "./ExtraPlaceButtons";
+
 export class PlaceResultMain extends React.Component {
   constructor(props) {
     super(props);
@@ -63,6 +65,7 @@ export class PlaceResultMain extends React.Component {
               <h2 className="place-title">{place.name}</h2>
             </Col>
             <Col span={10} className="flex-vertical">
+              <ExtraPlaceButtons place={place} />
               <div style={{ textAlign: "right" }} className="place-address">
                 {place.address.split(",")[0]}
               </div>