Added URL reverser for project images URLs

package.json

@@ -27,7 +27,8 @@
     "markdown": "=0.5.0",
     "normalize.css": "=3.0.3",
     "react": "=0.13.3",
-    "react-bootstrap": "=0.25.1"
+    "react-bootstrap": "=0.25.1",
+    "whatwg-fetch": "^0.10.1"
   },
   "devDependencies": {
     "babel-preset-es2015": "=6.1.18",

project/settings.py

@@ -26,6 +26,7 @@ INSTALLED_APPS = (
     'django.contrib.staticfiles',
 
     'bootstrapform',
+    'django_client_reverse',
 
     'project.pages',
     'project.common',

project/urls.py

@@ -1,9 +1,11 @@
 from django.conf.urls import include, url
 from django.contrib import admin
+from django_client_reverse import urls as reverse_urls
 from project.pages.views import Custom404View, NoJavascriptView
 
 
 urlpatterns = [
+    url(r'^reverse/$', include(reverse_urls, namespace='reverser')),
     url(r'^site-admin/', include(admin.site.urls)),
     url(r'^404/', Custom404View.as_view(), name="404"),
     url(r'^no-js/', NoJavascriptView.as_view(), name="no-js"),

requirements.txt

@@ -5,6 +5,7 @@ dj-database-url==0.3.0
 django-bootstrap-form==3.2
 git+https://github.com/RealOrangeOne/django-client-reverse
 django-flat-theme==1.1.3
+djangorestframework==3.3.2
 flake8==2.5.0
 whitenoise==2.0.6
 waitress==0.8.10

static/src/js/app.js

@@ -2,6 +2,8 @@
 
 import './events.js';
 
+import 'whatwg-fetch';
+
 import React from 'react';
 import ProjectImagesTypes from './components/index/project-images-types';
 import ProjectImagesMain from './components/index/project-images-main';

static/src/js/components/index/project-image.js

@@ -3,6 +3,37 @@ var ReactBootstrap = require('react-bootstrap');
 var Col = ReactBootstrap.Col;
 
 export default class ProjectImage extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      url: ''
+    };
+  }
+  componentDidMount() {
+    if (this.props.data.link.startsWith('#')) {
+      return;
+    }
+    fetch('/reverse/', {
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ident: this.props.data.link,
+      })
+    }).then(function (response) {
+      if (response.status === 302) {
+        this.setState({ url: response.json() });
+        return response;
+      } else {
+        var error = new Error(response.statusText);
+        error.response = response;
+        throw error;
+      }
+    }.bind(this)).catch((e) => console.log(e));
+  }
+
   render() {
     var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
     var classes = this.props.data.title.toLowerCase().replace(/ /g, '-');
@@ -15,7 +46,7 @@ export default class ProjectImage extends React.Component {
             <div className={'animated ' + animationClass}>
               <h4>{this.props.data.title}</h4>
               <p>{this.props.data.text}</p>
-              <a href={this.props.data.link} className="btn btn-default btn-small">
+              <a href={this.state.url} className="btn btn-default btn-small">
                 Find out more
               </a>
             </div>

static/src/js/components/index/project-images-main.js

@@ -7,7 +7,7 @@ const DATA = [
   {
     title: 'Custom PC',
     text: 'Without my PCs, I wouldnt be able to do anything you see here.',
-    link: '',
+    link: 'pages:about-me',
   },
   {
     title: 'BSOD-Enabler',