update sharing

Client/src/app/components/image/image.component.html

@@ -1,13 +1,13 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent class="mapWrapper">        
-        <img style="width: 100%" src="{{imageUrl}}">
+        <img style="width: 100%" src="assets/images/tiny/covid_tract.jpg">
-        <!-- <div class="fab-buttons" >
+        <div class="fab-buttons" >
             <button mat-fab (click)="share()"><i ofbicon>share</i></button>
-        </div>   -->
+        </div>  
     </div>
     <div sideBar ofbFadeInOnScroll>
-        <!-- <div class="side-bar">
+        <div class="side-bar">
             <button style="width: 100%;" mat-stroked-button (click)="share()"><i ofbicon>share</i> Share</button>
-        </div>         -->
+        </div>        
     </div>
 </secondary-page-component>

Client/src/app/components/image/image.component.ts

@@ -13,9 +13,11 @@ import { Router, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router'
 export class ImageComponent implements OnInit {
 
   public imageUrl: string;
+  public shareName: string
 
   constructor(private dialog: MatDialog, @Inject(DOCUMENT) private document, private route: ActivatedRoute) {
     this.imageUrl = this.route.snapshot.data.imageUrl;
+    this.shareName = this.route.snapshot.data.shareName;
    }
 
   ngOnInit() {
@@ -27,18 +29,10 @@ export class ImageComponent implements OnInit {
   }
 
   public share() {
-    let port = this.document.location.port ? ":"+this.document.location.port : "";
-    let baseUrl = this.document.location.protocol +'//'+ this.document.location.hostname + port
     let opts = new MatDialogConfig;
     opts.data = {
       prefix: 'o',
-      otherData: {
+      otherName: this.shareName    
-        imageUrl: baseUrl + '/static/media/images/covid_fb_share.jpg',
-        imageWidth: 750,
-        imageHeight: 404,
-        title: 'Coronavirus Anxiety?',
-        description: 'The cure for coronavirus anxiety'
-      }      
     };
     let dialog = this.dialog.open(SharePopupComponent, opts); 
   }

Client/src/app/components/popups/share-popup/share-popup.component.ts

@@ -31,10 +31,7 @@ export class SharePopupComponent implements OnInit {
     let port = this.document.location.port ? ":"+this.document.location.port : "";
     this.shareUrl = this.document.location.protocol +'//'+ this.document.location.hostname + port + this.shareBaseUrl + data.prefix + this.id;
     if (this.data.prefix === 'o') {
-      const str = JSON.stringify(this.data.otherData);
+      this.shareUrl = this.document.location.protocol + '//' + this.document.location.hostname + port + this.shareBaseUrl + data.prefix + data.otherName;
-      const encoded = encodeURIComponent(str);
-      const shareData = encoded;
-      this.shareUrl = this.document.location.protocol + '//' + this.document.location.hostname + port + this.shareBaseUrl + data.prefix + shareData;
     }
     this.facebookIframeUrl = this.urlPartA + this.shareUrl + this.urlPartB;
     this.twitterUrl = this.twitterPartA + data.title + " - " + data.description + "&url=" + this.shareUrl;

Client/src/assets/share/covid/meta.json

@@ -0,0 +1,8 @@
+{
+    "title": "Coronavirus Anxiety?",
+    "description": "The cure for coronavirus anxiety",
+    "imageUrl": "/covid_header.jpg",
+    "imageWidth": 750,
+    "imageHeight": 404,
+    "url": "/covid"
+}

Server/src/routes/api/share.js

@@ -33,13 +33,13 @@ router.get("/:shareCode",function(req,res){
 });
 
 function getOther(req, res, param) {
-    const jsonPath = req.protocol + '://' + req.hostname + shareFolder + param + '.json';
+    const jsonPath = req.protocol + '://' + req.hostname + shareFolder + param + '/meta.json';
     http.get(jsonPath, resp => {
-        processOtherJson(req, res, JSON.parse(resp));
+        processOtherJson(req, res, JSON.parse(resp), jsonPath);
     });
 }
 
-function processOtherJson(req, res, json) {
+function processOtherJson(req, res, json, basePath) {
     var userAgent = req.headers['user-agent'];
     var userAgentOverride = req.headers['user-agent-override']; 
     var referrer = req.headers['referer'] || "";   
@@ -48,10 +48,11 @@ function processOtherJson(req, res, json) {
        userAgent === 'Facebot' ||
        userAgent.startsWith('Twitterbot') ||
        referrer.startsWith('http://opengraphcheck.com')) {
+        const imageUrl = basePath + json.imageUrl;
         getOtherMeta(req, res, json.title, json.description, json.imageUrl, json.imageWidth, json.imageHeight);
     } else {
-        var url = json.url || (req.protocol + "://" + req.hostname + req.originalUrl);
+        const redirect = req.protocol + '://' + req.hostname + json.url;
-        res.redirect(url);
+        res.redirect(redirect);
     }
 }