codebuddies · lpatmo · Sep 19, 2019
diff --git a/cbv3_django_prototype/config/settings/base.py b/cbv3_django_prototype/config/settings/base.py
@@ -77,6 +77,7 @@
 
 LOCAL_APPS = [
     "cbv3_django_prototype.users.apps.UsersConfig",
+    'frontend',
     # Your stuff: custom apps go here
 ]
 # https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps

diff --git a/cbv3_django_prototype/config/urls.py b/cbv3_django_prototype/config/urls.py
@@ -16,6 +16,7 @@
     path("users/", include("cbv3_django_prototype.users.urls", namespace="users")),
     path("accounts/", include("allauth.urls")),
     # Your stuff: custom urls includes go here
+    path('', include('frontend.urls')),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
 if settings.DEBUG:

diff --git a/cbv3_django_prototype/frontend/__init__.py b/cbv3_django_prototype/frontend/__init__.py
diff --git a/cbv3_django_prototype/frontend/admin.py b/cbv3_django_prototype/frontend/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/cbv3_django_prototype/frontend/apps.py b/cbv3_django_prototype/frontend/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+    name = 'frontend'
diff --git a/cbv3_django_prototype/frontend/migrations/__init__.py b/cbv3_django_prototype/frontend/migrations/__init__.py
diff --git a/cbv3_django_prototype/frontend/models.py b/cbv3_django_prototype/frontend/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/cbv3_django_prototype/frontend/src/components/App.js b/cbv3_django_prototype/frontend/src/components/App.js
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import DataProvider from "./DataProvider";
+import Table from "./Table";
+const App = () => (
+  <DataProvider endpoint="api/lead/" render={data => <Table data={data} />} />
+);
+const wrapper = document.getElementById("app");
+wrapper ? ReactDOM.render(<App />, wrapper) : null;
diff --git a/cbv3_django_prototype/frontend/src/components/DataProvider.js b/cbv3_django_prototype/frontend/src/components/DataProvider.js
@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+class DataProvider extends Component {
+  static propTypes = {
+    endpoint: PropTypes.string.isRequired,
+    render: PropTypes.func.isRequired
+  };
+  state = {
+    data: [],
+    loaded: false,
+    placeholder: "Loading..."
+  };
+  componentDidMount() {
+    fetch(this.props.endpoint)
+      .then(response => {
+        if (response.status !== 200) {
+          return this.setState({ placeholder: "Something went wrong" });
+        }
+        return response.json();
+      })
+      .then(data => this.setState({ data: data, loaded: true }));
+  }
+  render() {
+    const { data, loaded, placeholder } = this.state;
+    return loaded ? this.props.render(data) : <p>{placeholder}</p>;
+  }
+}
+export default DataProvider;
diff --git a/cbv3_django_prototype/frontend/src/components/Table.js b/cbv3_django_prototype/frontend/src/components/Table.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import key from "weak-key";
+const Table = ({ data }) =>
+  !data.length ? (
+    <p>Nothing to show</p>
+  ) : (
+    <div className="column">
+      <h2 className="subtitle">
+        Showing <strong>{data.length} items</strong>
+      </h2>
+      <table className="table is-striped">
+        <thead>
+          <tr>
+            {Object.entries(data[0]).map(el => (
+              <th key={key(el)}>{el[0]}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map(el => (
+            <tr key={el.id}>
+              {Object.entries(el).map(el => (
+                <td key={key(el)}>{el[1]}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+Table.propTypes = {
+  data: PropTypes.array.isRequired
+};
+export default Table;
diff --git a/cbv3_django_prototype/frontend/templates/frontend/index.html b/cbv3_django_prototype/frontend/templates/frontend/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
+  <title>Django DRF - React : Quickstart - Valentino G. - www.valentinog.com</title>
+</head>
+<body>
+  <section class="section">
+    <div class="container">
+          <div id="app" class="columns"><!-- React --></div>
+    </div>
+  </section>
+</body>
+{% load static %}
+<script src="{% static "frontend/main.js" %}"></script>
+</html>
diff --git a/cbv3_django_prototype/frontend/tests.py b/cbv3_django_prototype/frontend/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/cbv3_django_prototype/frontend/urls.py b/cbv3_django_prototype/frontend/urls.py
@@ -0,0 +1,5 @@
+from django.urls import path
+from . import views
+urlpatterns = [
+    path('', views.index ),
+]
diff --git a/cbv3_django_prototype/frontend/views.py b/cbv3_django_prototype/frontend/views.py
@@ -0,0 +1,4 @@
+from django.shortcuts import render
+
+def index(request):
+    return render(request, 'frontend/index.html')
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.contrib import admin

		# Register your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.db import models

		# Create your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.test import TestCase

		# Create your tests here.