Merge pull request #624 from AmericanWhitewater/feature/read-new-mark…

…down-fields

Feature/read new markdown fields

package.json

@@ -55,6 +55,7 @@
     "jest-transform-graphql": "^2.1.0",
     "lodash": "^4.17.20",
     "maplibre-gl": "^1.15.3",
+    "marked": "^4.3.0",
     "moment": "^2.29.4",
     "nanoid": "^3.3.4",
     "rbush-knn": "^3.0.1",

src/app/services/createReach.js

@@ -11,7 +11,6 @@ export async function createReach(data) {
             class
             county
             description
-            gaugeinfo
             geom
             id
             length

src/app/services/getRapids.js

@@ -1,40 +1,53 @@
 import http from "@/app/http"
+import { marked } from 'marked';
 
 export async function getRapids(id) {
   return http
     .post('graphql', {
       query: `
-                  query {
-                    reach(id: ${id}) {
-                      pois {
-                        approximate
-                        character
-                        description
-                        difficulty
-                        distance
-                        id
-                        name
-                        rloc
-                        photo {
-                          poi_name
-                          subject
-                          description
-                          author
-                          caption
-                          photo_date
-                          image {
-                            uri {
-                              thumb
-                              medium
-                              big
-                            }
-                          }
-                          id
-                        }
-                      }
-                    }
+        query {
+          reach(id: ${id}) {
+            pois {
+              approximate
+              character
+              description_md
+              difficulty
+              distance
+              id
+              name
+              rloc
+              photo {
+                poi_name
+                subject
+                description
+                author
+                caption
+                photo_date
+                image {
+                  uri {
+                    thumb
+                    medium
+                    big
                   }
-                `
+                }
+                id
+              }
+            }
+          }
+        }
+      `
+    })
+    .then(res => {
+      // overwrite `description` with a parsed version of the markdown database field
+      // this allows us to read and render the markdown field while leaving the edit/update
+      // code unchanged
+      // TODO: move fully to the _md fields, including with a new editor
+      if (!res.data.errors) {
+        res.data.data.reach.pois.forEach((poi) => {
+          poi.description = marked.parse(poi.description_md);
+        });
+
+      }
+      return res.data;
     })
-    .then(res => res.data)
 }

src/app/services/getReach.js

@@ -1,4 +1,5 @@
 import http from "@/app/http";
+import { marked } from 'marked';
 
 export async function getReach(id) {
   return http
@@ -11,9 +12,8 @@ export async function getReach(id) {
                   permitinfo
                   id
                   class
-                  description
+                  description_md
                   edited
-                  gaugeinfo
                   length
                   maxgradient
                   plat
@@ -59,5 +59,14 @@ export async function getReach(id) {
             
             `,
     })
-    .then((res) => res.data);
+    .then((res) => {
+      if (!res.data.errors) {
+        // overwrite `description` with a parsed version of the markdown database field
+        // this allows us to read and render the markdown field while leaving the edit/update
+        // code unchanged
+        // TODO: move fully to the _md fields, including with a new editor
+        res.data.data.reach.description = marked.parse(res.data.data.reach.description_md)
+      }
+      return res.data;
+    });
 }

src/app/services/getReachAlerts.js

@@ -10,7 +10,7 @@ export async function getReachAlerts(id) {
               data {
                 id
                 title
-                detail
+                detail_md
                 post_date
                 revision
                 post_type
@@ -34,5 +34,17 @@ export async function getReachAlerts(id) {
             }
           }`
     })
-    .then(res => res.data)
+    .then(res => {
+      if (!res.data.errors) {
+        // NOTE: we are *not* processing the _md field here because alerts are, in practice, plain text,
+        // and converting the field back from markdown to HTML adds <p> tags, but in the interest of
+        // parity with mobile app, we still want to read the _md field
+        // TODO: remodel alerts as separate from other post types
+        res.data.data.posts.data.forEach((report) => {
+          report.detail = report.detail_md;
+        });
+      }
+
+      return res.data;
+    })
 }

src/app/services/getReachGallery.js

@@ -1,4 +1,5 @@
 import http from "@/app/http"
+import { marked } from 'marked';
 
 export async function getReachGallery(id, pagination) {
   return http
@@ -15,7 +16,7 @@ export async function getReachGallery(id, pagination) {
                 id
                 author
                 caption
-                description
+                description_md
                 photo_date
                 poi_name
                 poi_id
@@ -61,5 +62,17 @@ export async function getReachGallery(id, pagination) {
           }
         }`
     })
-    .then(res => res.data)
+    .then(res => {
+      if (!res.data.errors) {
+        // overwrite `description` with a parsed version of the markdown database field
+        // this allows us to read and render the markdown field while leaving the edit/update
+        // code unchanged
+        // TODO: move fully to the _md fields, including with a new editor
+        res.data.data.reach.photos.data.forEach((photo) => {
+          photo.description = marked.parse(photo.description_md);
+        });
+      }
+
+      return res.data;
+    })
 }

src/app/services/getReachReports.js

@@ -1,4 +1,5 @@
 import http from "@/app/http"
+import { marked } from 'marked';
 
 export async function getReachReports(id, pagination) {
 
@@ -14,7 +15,7 @@ export async function getReachReports(id, pagination) {
               orderBy: {field: POST_DATE, order: DESC}
               ) {
                  data {
-                    detail
+                    detail_md
                     id
                     title
                     reading
@@ -62,5 +63,18 @@ export async function getReachReports(id, pagination) {
           }
     `
     })
-    .then(res => res.data)
+    .then(res => {
+      if (!res.data.errors) {
+        // overwrite `detail` with a parsed version of the markdown database field
+        // this allows us to read and render the markdown field while leaving the edit/update
+        // code unchanged
+        // TODO: move fully to the _md fields, including with a new editor
+        res.data.data.posts.data.forEach((report) => {
+          report.detail = marked.parse(report.detail_md);
+        });
+      }
+
+      return res.data;
+    })
+
 }

src/app/services/getReport.js

@@ -1,4 +1,5 @@
 import http from "@/app/http"
+import { marked } from 'marked';
 
 export async function getReport(id) {
 
@@ -11,7 +12,7 @@ export async function getReport(id) {
               id: "${id}"
               ) {
                  data {
-                    detail
+                    detail_md
                     id
                     title
                     reading
@@ -68,5 +69,12 @@ export async function getReport(id) {
           }
     `
     })
-    .then(res => res.data.data.posts.data[0])
+    .then(res => {
+      const post = res.data.data.posts.data[0];
+      if (post) {
+        post.detail = marked.parse(post.detail_md);
+      }
+
+      return post;
+    })
 }

src/app/services/index.js

@@ -27,7 +27,6 @@ export * from "./getReachDocuments";
 export * from "./getReachGages";
 export * from "./getReachGallery";
 export * from "./getReachGalleryIndex";
-export * from "./getReachMap";
 export * from "./getReachNews";
 export * from "./getReachProjects";
 export * from "./getReport";

src/app/views/river-detail/river-creator.vue

@@ -155,7 +155,6 @@ export default {
       class: "none",
       county: null,
       description: null,
-      gaugeinfo: null,
       geom: null,
       length: null,
       permitinfo: null,