Meteor + Remote DB connection finally working with publish/subscribe methods.

.meteor/packages

@@ -18,6 +18,5 @@ ecmascript@0.14.3              # Enable ECMAScript2015+ syntax in app code
 typescript@3.7.6              # Enable TypeScript syntax in .ts and .tsx modules
 shell-server@0.5.0            # Server-side component of the `meteor shell` command
 
-autopublish@1.0.7             # Publish all data to the clients (for prototyping)
 insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
 static-html

.meteor/versions

@@ -1,5 +1,4 @@
 allow-deny@1.1.0
-autopublish@1.0.7
 autoupdate@1.6.0
 babel-compiler@7.5.3
 babel-runtime@1.5.0

client/main.jsx

@@ -4,6 +4,20 @@ import ReactDOM from 'react-dom';
 import App from '../imports/ui/App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+export const PlantTypesCollection = new Meteor.Collection('plantTypes');
+
 Meteor.startup(() => {
+  if(Meteor.isServer) {
+    Meteor.publish('plantTypesCollection', function() {
+      return PlantTypesCollection.find();
+    })
+  }
+
+  if (Meteor.isClient) {
+    Meteor.subscribe('plantTypesCollection');
+  }
+
+  Meteor.setTimeout(function() {
     ReactDOM.render(<App />, document.getElementById('root'));
+  }, 500);
 });

imports/api/plantTypes.js

@@ -1,37 +1,13 @@
-import { Meteor } from 'meteor/meteor';
+import {PlantTypesCollection} from '../../client/main'
 
-const PlantTypesCollection = new Meteor.Collection('plantTypes');
+export function getAllPlantTypes() {
+    const plantTypesDocuments = PlantTypesCollection.find();
 
-var plantTypesDocuments = PlantTypesCollection.find();
+    var plantTypes = [];
 
-export var plantTypes = [];
-
-plantTypesDocuments.forEach((plantType) => {
+    plantTypesDocuments.forEach((plantType) => {
         plantTypes.push(plantType.plantType);
-});
-
-function createTypesString() {
-    var typesString = "";
-    var arrayLength = plantTypes.length;
-    var cnt = 1;
-    plantTypes.forEach((plantType) => {
-        if (cnt === arrayLength) {
-            typesString = typesString + plantType
-        } else {
-            typesString = typesString + plantType + ", "
-        }
-        cnt++;
     });
 
-    return typesString;
+    return plantTypes;
 }
-
-var types = createTypesString();
-
-console.log("TYPES: " + types);
-
-//PlantTypesCollection.insert({plantType: "BAUM"});
-
-//const plantTypeVegetables = PlantTypesCollection.findOne({dirtType: "Humus"});
-//const plantTypeCacti = PlantTypesCollection.findOne({dirtType: "Sand"});
-//const plantTypeFlowers = PlantTypesCollection.findOne({dirtType: "Loam"});

imports/ui/Settings.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Container, Row, Col} from 'react-bootstrap';
-import { plantTypes } from '/imports/api/plantTypes';
 
 import AddPlant from './AddPlant'
 import Plants from './Plants'
 import ActivatePlant from './ActivatePlant'
+import {getAllPlantTypes} from "../api/plantTypes";
 
 class Settings extends React.Component{
 
@@ -12,10 +12,18 @@ class Settings extends React.Component{
         super(props);
         this.state = {
             plants: [],
-            types: ['Chile', 'Mint'], // hardcoded for now
+            types: [],
         }
     }
 
+    componentDidMount() {
+        (async ()=>{
+            this.setState({
+                types: getAllPlantTypes(),
+            })
+        })();
+    }
+
     // pass this function to the addplant comp as a prop
     addPlant = (plant) => {
         plant.id = this.state.plants.length + 1 // TODO rework

server/main.js

@@ -1,6 +1,15 @@
 import { Meteor } from 'meteor/meteor';
-import { PlantTypesCollection } from '/imports/api/plantTypes';
+
+var PlantTypesCollection = new Meteor.Collection('plantTypes');
 
 Meteor.startup(() => {
+    if(Meteor.isServer) {
+        Meteor.publish('plantTypesCollection', function() {
+            return PlantTypesCollection.find();
+        })
+    }
 
+    if (Meteor.isClient) {
+        Meteor.subscribe('plantTypesCollection');
+    }
 });