From c0fd1b72fd1b001fcb31890bff625df17bfa78fd Mon Sep 17 00:00:00 2001
From: Zamil Majdy <z.majdy1996@gmail.com>
Date: Thu, 2 Mar 2017 13:08:07 +0700
Subject: [PATCH] #140382397  Setup Django + React Webpack

---
 .gitignore                     |  3 ++-
 README.md                      | 26 +++++++++++---------------
 assets/js/app.jsx              | 17 -----------------
 assets/js/index.js             | 22 ++++++++++++++++------
 core/templates/core/index.html |  7 ++++---
 kape/settings.py               | 17 +++++++++++++++--
 kape/urls.py                   |  6 ++++++
 kape/views/user.py             | 15 +++++++++++++++
 package.json                   |  6 ++++--
 requirements.txt               |  1 +
 webpack-stats.json             |  1 -
 webpack.config.js              |  1 +
 12 files changed, 75 insertions(+), 47 deletions(-)
 delete mode 100644 assets/js/app.jsx
 create mode 100644 kape/views/user.py
 delete mode 100644 webpack-stats.json

diff --git a/.gitignore b/.gitignore
index 9badb78b..d3e8485e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 .pyc
 venv
 assets/bundles/*
-.idea
\ No newline at end of file
+.idea
+webpack-stats.json
diff --git a/README.md b/README.md
index ef00f49a..ded51463 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,11 @@
 # How To Build
 
-##Requirements
+## Requirements
 
-* Node + Npm
-* Python + Pip
+* Node + Npm (https://nodejs.org/dist/v6.9.5/node-v6.9.5-x64.msi)
+* Python + Pip (https://www.python.org/ftp/python/3.6.0/python-3.6.0-embed-amd64.zip and https://pip.pypa.io/en/stable/installing/)
 
-
-##Installation
-
-####In two commands
-
-
-`git clone https://gitlab.com/PPL2017csui/PPLA1.git kape && cd kape && rm -drf .git && git init && npm install && pip install -r requirements.txt && npm run webpack`
-
-`python manage.py runserver`
-
-Detailed :
+## Installation
 
 * `git clone https://gitlab.com/PPL2017csui/PPLA1.git kape`
 * `cd kape`
@@ -26,10 +16,16 @@ Detailed :
 
 For Windows you need to run `npm run webpack` and `python manage.py runserver` in different terminal.
 
-###Migrate the database
+## Migrating the database
 
 `python manage.py migrate`
 
 Now go to localhost:8000 and you'll see the App running!
 
+## Database
+
+Install postgreSQL
+Run this quert `create user kape password 'kape' createdb` to create database and user.
+Run `python manage.py migrate`
+
 This project uses [Django Webpack Loader](https://github.com/owais/django-webpack-loader).
diff --git a/assets/js/app.jsx b/assets/js/app.jsx
deleted file mode 100644
index 2d8b4848..00000000
--- a/assets/js/app.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-
-function Home() {
-    return (
-      <div className="container">
-        <div className="row">
-          <div className="col-md-2"></div>
-          <div className="well col-md-8">
-            <h1 className="center">Yuk develop KaPe :)</h1>
-          </div>
-          <div className="col-md-2"></div>
-        </div>
-      </div>
-    )
-}
-
-export default Home
diff --git a/assets/js/index.js b/assets/js/index.js
index b4e124d7..ea1d1398 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,13 +1,23 @@
 import React from 'react';
-import Home  from './app';
+import Dashboard  from './dashboard';
 import ReactDOM from 'react-dom';
+import {Router, Route, browserHistory} from 'react-router';
 
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import {Segment} from 'semantic-ui-react';
 
-const App = () => (
-  <MuiThemeProvider>
-    <Home />
-  </MuiThemeProvider>
+export const Profile = () => (
+    <Segment>
+        <img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    </Segment>
+);
+
+export const App = () => (
+    <Router history={browserHistory}>
+        <Route path="/" component={Dashboard}>
+            <Route path="profile" component={Profile} />
+            <Route path="users" component={Profile} />
+        </Route>
+    </Router>
 );
 
 ReactDOM.render( <App />, document.getElementById('react-app'))
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index b4d89ec6..0edccb07 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,9 +4,10 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Django React Awesome App</title>
-    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
-    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
+    <title>Yuk Cari Tempat Kape :)</title>
+    <link rel="stylesheet" href="{% static   'css/custom.css' %}">
+    <link rel="stylesheet" href="{% static 'css/semantic-ui/semantic.min.css' %}">
+    <link rel="icon" type="image/png" href="{% static 'img/logo-sm.png'%}" sizes="32x32" />
   </head>
 
   <body>
diff --git a/kape/settings.py b/kape/settings.py
index 25848ce2..490f77b8 100644
--- a/kape/settings.py
+++ b/kape/settings.py
@@ -33,6 +33,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'webpack_loader',
     'core',
+    'rest_framework'
 ]
 
 MIDDLEWARE = [
@@ -71,8 +72,12 @@ WSGI_APPLICATION = 'kape.wsgi.application'
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+        'ENGINE': 'django.db.backends.postgresql_psycopg2',
+        'NAME': 'kape',
+        'USER': 'postgres',
+        'PASSWORD': 'hue',
+        'HOST': 'localhost',
+        'PORT': '',
     }
 }
 
@@ -114,3 +119,11 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/1.10/howto/static-files/
 
 STATIC_URL = '/static/'
+
+REST_FRAMEWORK = {
+    # Use Django's standard `django.contrib.auth` permissions,
+    # or allow read-only access for unauthenticated users.
+    'DEFAULT_PERMISSION_CLASSES': [
+        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
+    ]
+}
\ No newline at end of file
diff --git a/kape/urls.py b/kape/urls.py
index f84d5530..600d3a4d 100644
--- a/kape/urls.py
+++ b/kape/urls.py
@@ -15,9 +15,15 @@ Including another URLconf
 """
 from django.conf.urls import url, include
 from django.contrib import admin
+from rest_framework import routers
+from kape.views.user import UserViewSet
 
+router = routers.DefaultRouter()
+router.register(r'users', UserViewSet)
 
 urlpatterns = [
+    url(r"^api/", include(router.urls)),
     url(r'^admin/', admin.site.urls),
     url(r'', include('core.urls')),
+    url(r'^api/api-auth/', include('rest_framework.urls', namespace='rest_framework'))
 ]
diff --git a/kape/views/user.py b/kape/views/user.py
new file mode 100644
index 00000000..d8f82994
--- /dev/null
+++ b/kape/views/user.py
@@ -0,0 +1,15 @@
+from django.contrib.auth.models import User
+from rest_framework import serializers, viewsets
+
+
+# Serializers define the API representation.
+class UserSerializer(serializers.HyperlinkedModelSerializer):
+    class Meta:
+        model = User
+        fields = ('url', 'username', 'email', 'is_staff')
+
+
+# ViewSets define the view behavior.
+class UserViewSet(viewsets.ModelViewSet):
+    queryset = User.objects.all()
+    serializer_class = UserSerializer
diff --git a/package.json b/package.json
index 5fcf06d5..48846c4c 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,10 @@
     "axios": "^0.14.0",
     "babel-core": "^6.17.0",
     "babel-preset-react": "^6.16.0",
-    "react-tap-event-plugin": "^2.0.1",
     "material-ui": "^0.16.0",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-router": "^3.0.2",
+    "react-tap-event-plugin": "^2.0.1",
+    "semantic-ui-react": "^0.65.0"
   }
 }
diff --git a/requirements.txt b/requirements.txt
index 549b7997..bc8cadb5 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,5 +3,6 @@ Django==1.10.5
 django-webpack-loader==0.4.1
 djangorestframework==3.5.4
 packaging==16.8
+psycopg2==2.6.2
 pyparsing==2.1.10
 six==1.10.0
\ No newline at end of file
diff --git a/webpack-stats.json b/webpack-stats.json
deleted file mode 100644
index 1d540f09..00000000
--- a/webpack-stats.json
+++ /dev/null
@@ -1 +0,0 @@
-{"status":"done","chunks":{"main":[{"name":"main-9c374636943b76722727.js","path":"C:\\Users\\zmajd\\Documents\\code\\djangoreact\\assets\\bundles\\main-9c374636943b76722727.js"}]}}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index bc867650..23701902 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,6 +13,7 @@ module.exports = {
   },
 
   plugins: [
+    new webpack.HotModuleReplacementPlugin(),
     new BundleTracker({filename: './webpack-stats.json'}),
   ],
 
-- 
GitLab