Skip to content

Commit

Permalink
Updated webpack config to introduce file-loader and updated docstring…
Browse files Browse the repository at this point in the history
…/naming conventions throughout
  • Loading branch information
MBJean committed Jun 15, 2021
1 parent b853746 commit f166d36
Show file tree
Hide file tree
Showing 17 changed files with 800 additions and 79 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ node_modules
# production
build/
static/
assets/bundles/

# misc
.DS_Store
Expand Down
2 changes: 1 addition & 1 deletion .idea/misc.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion .idea/temp.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 0 additions & 32 deletions assets/bundles/index.bundle.js

This file was deleted.

21 changes: 20 additions & 1 deletion backend/app/views.py
Original file line number Diff line number Diff line change
@@ -1,5 +1,24 @@
"""
These view functions and classes implement both standard GET routes and API endpoints
These view functions and classes implement both standard GET routes and API endpoints.
GET routes produce largely empty HTML pages that expect a React component to attach to them and handle most view
concerns. You can supply a few pieces of data in the render function's context argument to support this expectation.
Of particular use are the properties: page_metadata, component_props, and component_name:
page_metadata: these values will be included in the page's <head> element. Currently, only the `title` property is used.
component_props: these can be any properties you wish to pass into your React components as its highest-level props.
component_name: this should reference the exact name of the React component you intend to load onto the page.
Example:
context = {
'page_metadata': {
'title': 'Example ID page'
},
'component_props': {
'id': example_id
},
'component_name': 'ExampleId'
}
"""

from rest_framework.decorators import api_view
Expand Down
13 changes: 0 additions & 13 deletions frontend/components/ErrorNotFound.js

This file was deleted.

18 changes: 18 additions & 0 deletions frontend/components/ErrorNotFoundComponent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from "react";

const ErrorNotFoundComponent = () => {

return (
<>
<h1>Error: No React Component found</h1>
<p>
This is likely an error in development.
<br />
Make sure that you register your component in <code>index.js</code> and reference it
by name in the relevant <code>view</code> function.
</p>
</>
);
};

export default ErrorNotFoundComponent;
2 changes: 1 addition & 1 deletion frontend/components/ExampleId.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ExampleId = ({id}) => {
<h1>This is the Example ID page.</h1>
<p>
This page demonstrates passing view parameters from Django to React
and a very simple state.
and very simple state management.
</p>
<p>View params:</p>
<ul className={STYLES.list}>
Expand Down
3 changes: 2 additions & 1 deletion frontend/components/global/Nav.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import STYLES from "./Nav.module.scss";
import DH_LOGO from "../../images/dh_logo.svg";

const Nav = () => {

Expand All @@ -9,7 +10,7 @@ const Nav = () => {
App Title
</a>
<a className={STYLES.linkLab} href="https://digitalhumanities.mit.edu/" target="_blank" rel="noreferrer">
<img className={STYLES.imageLab} src="/static/img/dh_logo.svg" />
<img className={STYLES.imageLab} src={DH_LOGO} />
</a>
</nav>
);
Expand Down
File renamed without changes
File renamed without changes
File renamed without changes
6 changes: 3 additions & 3 deletions frontend/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import ReactDOM from "react-dom";
import "./scss/index.scss";
import Base from "./components/global/Base";
import ErrorNotFound from "./components/ErrorNotFound";
import ErrorNotFoundComponent from "./components/ErrorNotFoundComponent";
import ExampleId from "./components/ExampleId";

const COMPONENT_PROPS_RAW = document.getElementById("component_props").text;
Expand All @@ -11,11 +11,11 @@ const COMPONENT_PROPS = JSON.parse(COMPONENT_PROPS_RAW);
const COMPONENT_NAME = JSON.parse(COMPONENT_NAME_RAW);

const COMPONENTS = {
ErrorNotFound,
ErrorNotFoundComponent,
ExampleId
};

const PreselectedComponent = COMPONENTS[COMPONENT_NAME || "ErrorNotFound"];
const PreselectedComponent = COMPONENTS[COMPONENT_NAME || "ErrorNotFoundComponent"];

ReactDOM.render(
<Base>
Expand Down
Loading

0 comments on commit f166d36

Please sign in to comment.