Replace Firebase with Contentful in FPV spot submission

.config.sample.json

@@ -1,7 +1,4 @@
 {
-  "firebase": {
-    "key": ""
-  },
   "openWeatherMap": {
     "key": ""
   },

README.md

@@ -11,11 +11,11 @@
 ⭐ Watch videos and photos from FPV spots<br>
 ⭐ Live wind and weather conditions<br>
 ⭐ Submit a dictionary entry<br>
+⭐ Beginner friendly FPV dictionary<br>
+⭐ Recommended tools, upvoted by the community<br>
 
 #### Features coming later on:
 
-⭐ Beginner friendly FPV dictionary<br>
-⭐ Recommended tools, upvoted by the community<br>
 ⭐ Shopping list<br>
 ⭐ Submit an article to the blog<br>
 ⭐ Quad builder - 3D model playground

gatsby-config.js

@@ -7,9 +7,6 @@ try {
     openWeatherMap: {
       key: process.env.GATSBY_OPEN_WEATHER_MAP_KEY,
     },
-    firebase: {
-      key: process.env.GATSBY_FIREBASE_KEY,
-    },
     googleMaps: {
       key: process.env.GATSBY_GOOGLE_MAPS_KEY,
     },
@@ -24,10 +21,6 @@ try {
     throw new Error('OpenWeatherMap API key needs to be provided.')
   }
 
-  if (!config.firebase.key) {
-    throw new Error('Firebase API key needs to be provided.')
-  }
-
   if (config.googleMaps) {
     process.env.GATSBY_GOOGLE_MAPS_KEY = config.googleMaps.key
   }
@@ -40,7 +33,6 @@ try {
   }
 
   process.env.GATSBY_OPEN_WEATHER_MAP_KEY = config.openWeatherMap.key
-  process.env.GATSBY_FIREBASE_KEY = config.firebase.key
 }
 
 module.exports = {

package.json

@@ -1,32 +1,31 @@
 {
   "name": "fpvtips",
   "description": "fpvtips.com",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Georgi Yanev <georgiyanev.gy@gmail.com>",
   "dependencies": {
-    "@material-ui/core": "^3.1.0",
+    "@material-ui/core": "^3.6.2",
     "@material-ui/icons": "^3.0.1",
     "@wapps/gatsby-plugin-material-ui": "^1.1.0",
-    "babel-plugin-styled-components": "^1.9.2",
+    "babel-plugin-styled-components": "^1.9.4",
     "contentful-management": "^5.4.0",
-    "firebase": "^5.6.0",
-    "gatsby": "^2.0.63",
+    "gatsby": "^2.0.67",
     "gatsby-plugin-feed": "^2.0.11",
     "gatsby-plugin-google-analytics": "^2.0.8",
     "gatsby-plugin-google-fonts": "^0.0.4",
-    "gatsby-plugin-manifest": "^2.0.11",
+    "gatsby-plugin-manifest": "^2.0.12",
     "gatsby-plugin-netlify": "^2.0.6",
     "gatsby-plugin-react-helmet": "^3.0.4",
-    "gatsby-plugin-sharp": "^2.0.14",
+    "gatsby-plugin-sharp": "^2.0.15",
     "gatsby-plugin-sitemap": "^2.0.3",
     "gatsby-plugin-styled-components": "3.0.4",
     "gatsby-remark-copy-linked-files": "^2.0.7",
     "gatsby-remark-images": "^3.0.1",
     "gatsby-remark-prismjs": "^3.1.4",
     "gatsby-remark-responsive-iframe": "^2.0.7",
     "gatsby-remark-smartypants": "^2.0.7",
-    "gatsby-source-contentful": "^2.0.18",
-    "gatsby-source-filesystem": "^2.0.11",
+    "gatsby-source-contentful": "^2.0.20",
+    "gatsby-source-filesystem": "^2.0.12",
     "gatsby-transformer-json": "^2.1.6",
     "gatsby-transformer-remark": "^2.1.15",
     "gatsby-transformer-sharp": "^2.1.9",
@@ -41,7 +40,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.9.0",
+    "eslint": "^5.10.0",
     "eslint-plugin-react": "^7.11.1",
     "prettier": "^1.15.3"
   },

src/components/Map/Map.js

@@ -175,7 +175,7 @@ class SimpleMap extends React.Component {
         {this.state.newMarker && (
           <FormFPVSpot
             name="submit-fpv-spot"
-            fireNode="fpv-map"
+            contentfulType="mapMarkers"
             newMarker={this.state.newMarker}
           />
         )}

src/components/UI/FormFPVSpot.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import * as contentful from 'contentful-management'
 import styled from 'styled-components'
 import PaperCard from './PaperCard'
 import FAB from './FAB'
@@ -20,9 +21,77 @@ import AddBox from '@material-ui/icons/AddBox'
 import Clear from '@material-ui/icons/Clear'
 import FormControl from '@material-ui/core/FormControl'
 
-import fire from '../../utils/firebase'
 import mapLegendData from '../../data/mapLegendData'
 
+let CONTENTFUL_PERSONAL_TOKEN =
+  process.env.GATSBY_CONTENTFUL_PERSONAL_ACCESS_TOKEN
+let CONTENTFUL_SPACE = process.env.GATSBY_CONTENTFUL_SPACE_ID
+let CONTENTFUL_CONTENT_TYPE_ID = ''
+let CONTENTFUL_ENVIRONMENT = 'master'
+
+function sendToContentful({
+  title,
+  description,
+  features,
+  instagramLinks,
+  youtubeLinks,
+  author,
+  lat,
+  lng,
+}) {
+  // If any of the contentful required variables are missing return
+  if (
+    !CONTENTFUL_PERSONAL_TOKEN ||
+    !CONTENTFUL_SPACE ||
+    !CONTENTFUL_CONTENT_TYPE_ID ||
+    !CONTENTFUL_ENVIRONMENT
+  ) {
+    return
+  }
+
+  const client = contentful.createClient({
+    accessToken: CONTENTFUL_PERSONAL_TOKEN,
+  })
+
+  // Create entry
+  client
+    .getSpace(CONTENTFUL_SPACE)
+    .then(space => space.getEnvironment(CONTENTFUL_ENVIRONMENT))
+    .then(environment =>
+      environment.createEntry(CONTENTFUL_CONTENT_TYPE_ID, {
+        fields: {
+          title: {
+            'en-US': title,
+          },
+          description: {
+            'en-US': description,
+          },
+          features: {
+            'en-US': features,
+          },
+          photoLinks: {
+            'en-US': instagramLinks,
+          },
+          videoLinks: {
+            'en-US': youtubeLinks,
+          },
+          author: {
+            'en-US': author,
+          },
+          lat: {
+            'en-US': lat,
+          },
+          lng: {
+            'en-US': lng,
+          },
+        },
+      })
+    )
+    .then(entry => entry.publish())
+    .then(entry => console.log(`Entry ${entry.sys.id} published.`))
+    .catch(console.error)
+}
+
 const INSTAGRAM_LINK_REGEX = /(https?:\/\/www\.)?instagram\.com(\/p\/\w+\/?)/
 const YOUTUBE_LINK_REGEX = /^(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+$/
 
@@ -116,6 +185,8 @@ export default class SubmitFormFPVSpot extends React.Component {
         newMarker: this.props.newMarker || null,
       },
     }
+
+    CONTENTFUL_CONTENT_TYPE_ID = props.contentfulType
   }
 
   // Modal
@@ -188,11 +259,8 @@ export default class SubmitFormFPVSpot extends React.Component {
       lng,
     }
 
-    // Send data to Firebase
-    fire
-      .database()
-      .ref(this.props.fireNode)
-      .push(data)
+    // Send data to Contentful
+    sendToContentful(data)
 
     // Clear form and state and close modal
     this.setState(