diff --git a/cbv3_django_prototype/config/settings/base.py b/cbv3_django_prototype/config/settings/base.py index e78f6c24..472001be 100644 --- 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 index 7310088b..91e26028 100644 --- 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 new file mode 100644 index 00000000..e69de29b diff --git a/cbv3_django_prototype/frontend/admin.py b/cbv3_django_prototype/frontend/admin.py new file mode 100644 index 00000000..8c38f3f3 --- /dev/null +++ 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 new file mode 100644 index 00000000..33ae5caa --- /dev/null +++ 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 new file mode 100644 index 00000000..e69de29b diff --git a/cbv3_django_prototype/frontend/models.py b/cbv3_django_prototype/frontend/models.py new file mode 100644 index 00000000..71a83623 --- /dev/null +++ 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 new file mode 100644 index 00000000..3e463b78 --- /dev/null +++ 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 = () => ( + } /> +); +const wrapper = document.getElementById("app"); +wrapper ? ReactDOM.render(, wrapper) : null; diff --git a/cbv3_django_prototype/frontend/src/components/DataProvider.js b/cbv3_django_prototype/frontend/src/components/DataProvider.js new file mode 100644 index 00000000..1a0631db --- /dev/null +++ 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) :

{placeholder}

; + } +} +export default DataProvider; diff --git a/cbv3_django_prototype/frontend/src/components/Table.js b/cbv3_django_prototype/frontend/src/components/Table.js new file mode 100644 index 00000000..a1714a43 --- /dev/null +++ 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 ? ( +

Nothing to show

+ ) : ( +
+

+ Showing {data.length} items +

+
+ + + {Object.entries(data[0]).map(el => ( + + ))} + + + + {data.map(el => ( + + {Object.entries(el).map(el => ( + + ))} + + ))} + +
{el[0]}
{el[1]}
+ + ); +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 new file mode 100644 index 00000000..ea8628ff --- /dev/null +++ b/cbv3_django_prototype/frontend/templates/frontend/index.html @@ -0,0 +1,18 @@ + + + + + + + Django DRF - React : Quickstart - Valentino G. - www.valentinog.com + + +
+
+
+
+
+ +{% load static %} + + \ No newline at end of file diff --git a/cbv3_django_prototype/frontend/tests.py b/cbv3_django_prototype/frontend/tests.py new file mode 100644 index 00000000..7ce503c2 --- /dev/null +++ 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 new file mode 100644 index 00000000..f1c8c1ba --- /dev/null +++ b/cbv3_django_prototype/frontend/urls.py @@ -0,0 +1,5 @@ +from django.urls import path +from . import views +urlpatterns = [ + path('', views.index ), +] \ No newline at end of file diff --git a/cbv3_django_prototype/frontend/views.py b/cbv3_django_prototype/frontend/views.py new file mode 100644 index 00000000..88e8b880 --- /dev/null +++ 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') \ No newline at end of file