migrated dev to databased api

package-lock.json

@@ -1192,6 +1192,22 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
@@ -2310,6 +2326,29 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   }

sarsoo/api/__init__.py

@@ -1 +1,2 @@
 from .art_api import art_api_print
+from .dev_api import dev_api_print

sarsoo/api/dev_api.py

@@ -0,0 +1,41 @@
+from flask import Blueprint, jsonify, abort
+from google.cloud import firestore, exceptions
+
+fs = firestore.Client()
+
+dev_api_print = Blueprint('devapi', __name__)
+
+
+@dev_api_print.route('/', methods=['GET'])
+def collections():
+
+    dev_collection = fs.collection(u'dev')
+
+    try:
+        tags = dev_collection.get()
+    except exceptions.NotFound:
+        abort(404)
+
+    dicts = list(map(lambda x: x.to_dict(), tags))
+
+    dev_documents = []
+
+    for dev_dict in dicts:
+        dev_documents.append({
+            'name': dev_dict['name'],
+            'description': [i for i in dev_dict['description']],
+            'url': dev_dict['url'],
+            'index': dev_dict['index']
+        })
+
+    response = {'dev': sorted(dev_documents, key=lambda k: k['index'])}
+
+    return jsonify(response)
+
+
+@dev_api_print.errorhandler(404)
+def error400(error):
+
+    errorresponse = {'error': 'collection not found'}
+
+    return jsonify(errorresponse), 404

sarsoo/sarsoo.py

@@ -5,6 +5,7 @@ import os
 from .art import art_print
 from .music import music_print
 from .api import art_api_print
+from .api import dev_api_print
 
 # Project ID is determined by the GCLOUD_PROJECT environment variable
 db = firestore.Client()
@@ -14,6 +15,7 @@ app = Flask(__name__, static_folder=os.path.join(os.path.dirname(__file__), '..'
 app.register_blueprint(art_print, url_prefix='/art')
 app.register_blueprint(music_print, url_prefix='/music')
 app.register_blueprint(art_api_print, url_prefix='/api/art')
+app.register_blueprint(dev_api_print, url_prefix='/api/dev')
 
 staticbucketurl = 'https://storage.googleapis.com/sarsooxyzstatic/'
 

sarsoo/templates/dev.html

@@ -3,19 +3,6 @@
 {% block title %}dev{% endblock %}
 
 {% block content %}	
-	<div class="row">
-		<div class="pad-6 card">	
-			<h1>fmframework</h1>
-			<p>a client for last.fm music tracking written in java</p>
-			<p>this project was important for learning how to interact with  REST APIs and implementing knowledge from my java classes at uni</p>
-			<p>using last fm tags to categorise and visualise data</p>
-			<a href="https://github.com/Sarsoo/fmframework" style="width:100%;" class="button">view source</a>
-		</div>
-		<div class="pad-6 card">	
-			<h1>spotframework</h1>
-			<p>tool for exploring and interfacing with the spotify api</p>
-			<p>currently doing backups of playlists</p>
-			<a href="https://github.com/Sarsoo/spotframework" style="width:100%;" class="button">view source</a>
-		</div>
-	</div>
+	<div id="react"></div>
+	<script src="{{ url_for('static', filename='js/dev.bundle.js') }}"></script>
 {% endblock %}

sarsoo/templates/index.html

@@ -27,5 +27,5 @@
 		<img src="{{ staticroot }}art/{{ image.file_name  }}.jpg" alt="{{ image.file_name  }}" class="pad-4">
 		{% endfor %}
 	</div>
-	<script src="{{ url_for('static', filename='js/main.js') }}"></script>
+	<script src="{{ url_for('static', filename='js/index.bundle.js') }}"></script>
 {% endblock %}

src/js/dev/DevGallery.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+const axios = require('axios');
+
+class DevGallery extends Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+          entries: [],
+          isLoading: true
+        };
+        this.getEntries();
+    }
+
+    getEntries(){
+
+        var self = this;
+        axios.get('/api/dev')
+        .then(function (response){
+            self.setState({
+                entries: response.data.dev,
+                isLoading: false
+            });
+        })
+        .catch(function (error){
+            console.log(error);
+        });
+
+    }
+
+    render(){
+
+        var arrays = [], size = 2;
+
+        var a = this.state.entries.slice()
+        while (a.length > 0)
+            arrays.push(a.splice(0, size));
+
+        const gallery = <div>{arrays.map((entry) => <Row entries={entry} />)}</div>;
+
+        const loadingMessage = <p className="center-text" >loading...</p>;
+
+        return this.state.isLoading ? loadingMessage : gallery;
+    }
+
+}
+
+function Row(props){
+
+    return (
+        <div className="row">
+            {props.entries.map((entry) => <DevEntry entry={entry} />)}
+        </div>
+
+    );
+
+}
+
+function DevEntry(props){
+    return (
+
+        <div className="pad-6 card">
+            <h1>{props.entry.name}</h1>
+
+			{props.entry.description.map((entry) => <p key={entry} >{entry}</p>)}
+
+            <a href={props.entry.url} className="button full-width">view source</a>
+        </div>
+
+    );
+}
+
+export default DevGallery;

src/js/dev/dev.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import DevGallery from "./DevGallery.js";
+
+ReactDOM.render(<DevGallery />, document.getElementById('react'));

src/scss/style.scss

@@ -29,6 +29,14 @@ p {
 	padding: 10px;
 }
 
+.center-text {
+    text-align: center;
+}
+
+.full-width {
+    width: 100%;
+}
+
 .button {
 	background-color: #505050;
 	color: black;

webpack.common.js

@@ -2,7 +2,10 @@ const path = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-	entry: './src/js/index.js',
+	entry: {
+	    index: './src/js/index/index.js',
+	    dev: './src/js/dev/dev.js'
+	    },
 	module: {
     rules: [
       {
@@ -19,7 +22,7 @@ module.exports = {
     },
     resolve: { extensions: ["*", ".js", ".jsx"] },
 	output: {
-		filename: 'main.js',
+		filename: '[name].bundle.js',
 		path: path.resolve(__dirname, 'build/js')
 	}
 };