Initial Commit

🎉
* Adds Manifest for Extension
* Adds barebone messaging from extension and front-end
* Adds .env to run react app under CSP

src/App.css

@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,26 +1,61 @@
+/*global chrome*/
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+class App extends React.Component {
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  /* Open port on popup file */
+  port = chrome.runtime.connect({
+    name: "bookmarkArranger"
+  });
+
+  getBookMarks = () => {
+    this.port.postMessage({
+        code: "getBookMarks"
+    });
+  }
+
+  listenMessages = () => {
+    this.port.onMessage.addListener(message => {
+      console.log(message)
+    });
+  }
+
+  componentDidMount(){
+    this.listenMessages();
+  }
+
+  render(){
+    return (
+      <div>
+        <div className="content-section introduction">
+          <div className="feature-intro">
+            <h1>DataTable - Sort</h1>
+            <p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and
+                  used with metaKey.</p>
+          </div>
+        </div>
+  
+        <div className="content-section implementation">
+          <h3>Single Column</h3>
+          {/* <DataTable value={this.state.cars}>
+            <Column field="vin" header="Vin" sortable={true} />
+            <Column field="year" header="Year" sortable={true} />
+            <Column field="brand" header="Brand" sortable={true} />
+            <Column field="color" header="Color" sortable={true} />
+          </DataTable>
+  
+          <h3>Multiple Columns</h3>
+          <DataTable value={this.state.cars} sortMode="multiple">
+            <Column field="vin" header="Vin" sortable={true} />
+            <Column field="year" header="Year" sortable={true} />
+            <Column field="brand" header="Brand" sortable={true} />
+            <Column field="color" header="Color" sortable={true} />
+          </DataTable> */}
+        </div>
+      </div>
+    );
+  }
 }
 
 export default App;

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import 'primereact/resources/themes/nova-light/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));