lot of things happend

.meteor/packages

@@ -16,7 +16,6 @@ [email protected]              # Enable ECMAScript2015+ syntax in app code
 [email protected]              # Enable TypeScript syntax in .ts and .tsx modules
 [email protected]            # Server-side component of the `meteor shell` command
 
-[email protected]             # Publish all data to the clients (for prototyping)
 [email protected]                # Allow all DB writes from clients (for prototyping)
 static-html             # Define static page content in .html files
 react-meteor-data       # React higher-order component for reactively tracking Meteor data

.meteor/versions

@@ -1,5 +1,4 @@
 [email protected]
-[email protected]
 [email protected]
 [email protected]
 [email protected]

client/main.css

@@ -1,9 +1,22 @@
 body {
-  padding: 10px;
   font-family: sans-serif;
+  background-color: #E1F3F7 !important;
 }
 
 .note {
-  background-color: gold;
-  padding: 5px 20px;
+  /* background-color: gold;
+  padding: 5px 20px; */
+  position: relative;
+  /* border-bottom: 3px solid #FCD629; */
+  border-bottom: 3px solid #fff;
+  margin-bottom: 20px;
+  /* background-color: #FCE129; */
+  background-color: #fff;
+  border-radius: 5px;
+  /* -webkit-box-shadow: 1px 2px 10px #E3CE00;
+  -moz-box-shadow: 1px 2px 10px #E3CE00;
+  box-shadow: 1px 2px 10px #E3CE00; */
+  -webkit-box-shadow: 1px 2px 10px #ccc;
+  -moz-box-shadow: 1px 2px 10px #ccc;
+  box-shadow: 1px 2px 10px #ccc;
 }

client/main.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import { render } from 'react-dom';
-import { App } from '/imports/ui/App';
+import App from '/imports/ui/App';
 
 Meteor.startup(() => {
-  render(<App/>, document.getElementById('react-target'));
+  render(<App />, document.getElementById('react-target'));
 });

imports/collections/notes.js

@@ -0,0 +1,15 @@
+import { Meteor } from "meteor/meteor";
+import { Mongo } from "meteor/mongo";
+
+const Notes = new Mongo.Collection("notes");
+
+if (Meteor.isServer) {
+  Meteor.publish("notes", () => {
+    return Notes.find();
+  });
+}
+
+// if (Meteor.isClient) {
+//   Meteor.subscribe('notes');
+// }
+export default Notes;

imports/ui/App.jsx

@@ -1,11 +1,15 @@
-import React from 'react';
-import Note from './Note';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React from "react";
+import Navbar from "./navbar";
+import InputBox from "./inputBox";
+import NoteList from "./noteList";
+import "bootstrap/dist/css/bootstrap.min.css";
 
-export const App = () => (
-  <div className="app container">
-    <Note />
-    <Note />
-    <Note />
-  </div>
+export default () => (
+  <>
+    <Navbar />
+    <div style={{ paddingTop: 50 }} className="app container">
+      <InputBox />
+      <NoteList />
+    </div>
+  </>
 );

imports/ui/inputBox.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import TextareaAutosize from 'react-autosize-textarea';
+
+import Notes from '/imports/collections/notes';
+
+// export default (props) => {
+export default class InputBox extends Component {
+
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  insertNote() {
+    if (!this.state.value) {
+      return;
+    }
+    Notes.insert({ createdAt: new Date(), value: this.state.value });
+    this.setState({ value: '' });
+  }
+
+  render() {
+    return (
+      // <div className="row">
+      <div className="form-group row">
+        <div className="offset-md-2 col-md-7">
+          <TextareaAutosize
+            value={this.state.value || ''}
+            onChange={(e) => this.setState({ value: e.target.value })}
+            placeholder="write something"
+            className="form-control"
+          />
+        </div>
+        <div className="col-md-1">
+          <button
+            onClick={() => this.insertNote()}
+            className="btn btn-success"
+          >
+            Add
+          </button>
+        </div>
+      </div>
+    )
+  }
+}

imports/ui/navbar.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default () => {
+  return <div style={{ backgroundColor: "white", height: 50 }}>Listo</div>;
+};

imports/ui/note.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+import LinesEllipsis from "react-lines-ellipsis";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+
+import NoteActions from "./noteActions";
+import NoteInfo from "./noteInfo";
+import NoteText from "./noteText";
+
+export default class Note extends Component {
+  render() {
+    const { value, createdAt, onEdit, onRemove } = this.props;
+    return (
+      <div
+        onClick={onEdit}
+        style={{
+          cursor: "pointer",
+          whiteSpace: "pre-wrap",
+          overflow: "hidden",
+          // lineBreak: "anywhere",
+        }}
+        className="note offset-md-3 col-md-6 my-3"
+      >
+        {/* <div> */}
+        <LinesEllipsis text={value} maxLine="3" ellipsis=" ..." />
+        {/* </div> */}
+        {/* <div><button onClick={() => this.props.onRemove()}>Remove</button></div> */}
+        <div>
+          <small style={{ fontSize: "xx-small" }}>
+            created on {createdAt.toLocaleString("de")}
+          </small>
+        </div>
+        <div>
+          {/* <button className="btn"> */}
+          <FontAwesomeIcon
+            onClick={onRemove}
+            icon={faTrash}
+            size="xs"
+            color="#ccc"
+          />
+          {/* </button> */}
+          {/* <button onClick={onRemove} className="btn btn-outline-danger btn-sm">
+          </button> */}
+        </div>
+        {/* <NoteActions /> */}
+      </div>
+    );
+  }
+}

imports/ui/noteList.jsx

@@ -0,0 +1,116 @@
+import { Meteor } from "meteor/meteor";
+import { withTracker } from "meteor/react-meteor-data";
+import React, { Component } from "react";
+import Modal from "react-modal";
+import TextareaAutosize from "react-autosize-textarea";
+
+import Notes from "/imports/collections/notes";
+
+import Note from "./note";
+
+class notelist extends Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  onEdit() {
+    if (!this.state.value) {
+      return;
+    }
+
+    const notes = this.props.notes;
+    const index = notes.findIndex((n) => n._id === this.state.currentNote);
+
+    notes[index].value = this.state.value;
+    Notes.update(
+      { _id: notes[index]._id },
+      { $set: { value: this.state.value, modified: new Date() } }
+    );
+    this.setState({ editModal: false, value: "" });
+  }
+
+  onRemove(e, _id) {
+    e.stopPropagation();
+    confirm("remove note?") && Notes.remove({ _id });
+  }
+
+  modal() {
+    if (!this.state.editModal) {
+      return null;
+    }
+
+    Modal.setAppElement("#react-target");
+
+    const customStyles = {
+      content: {
+        width: "40%",
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        transform: "translate(-50%, -50%)",
+      },
+    };
+
+    return (
+      <Modal
+        isOpen={this.state.editModal}
+        // onAfterOpen={afterOpenModal}
+        // onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Example Modal"
+      >
+        <TextareaAutosize
+          onChange={(e) => this.setState({ value: e.target.value })}
+          value={
+            this.state.value ||
+            this.props.notes.find((n) => n._id === this.state.currentNote).value
+          }
+          className="form-control"
+        />
+        <button onClick={() => this.onEdit()}>save</button>
+        <button
+          onClick={() => this.setState({ currentNote: null, editModal: false })}
+        >
+          close
+        </button>
+      </Modal>
+    );
+  }
+
+  render() {
+    console.log(this.props);
+    return (
+      // <div style={{ margin: '0' }}>
+      // <div className="row d-flex flex-column justify-content-center">
+      <div className="row">
+        {(this.props.notes || []).map((note) => (
+          <Note
+            key={note._id}
+            value={note.value}
+            createdAt={note.createdAt}
+            onEdit={() =>
+              this.setState({ currentNote: note._id, editModal: true })
+            }
+            onRemove={(e) => this.onRemove(e, note._id)}
+          />
+        ))}
+        {this.modal()}
+      </div>
+    );
+  }
+}
+
+const NoteList = withTracker(({}) => {
+  // Meteor.subscribe('notes');
+  const sub = Meteor.subscribe("notes");
+  const notes = Notes.find({}, { sort: { createdAt: -1 } }).fetch();
+  return {
+    loading: !sub.ready(),
+    notes,
+  };
+})(notelist);
+
+export default NoteList;