Frontent templates revisited, redux state redesign

frontend/generate/generate_frontend_files.py

@@ -2,6 +2,7 @@
 # This python file is used to generate js files for redux
 import os
 from django import template
+import re
 
 ############
 # Need to do this first so that Django template engine is working
@@ -30,18 +31,16 @@ if not os.path.exists(saving_dir):
 templates = [
     'action-types',
     'actions',
-    'reducers'
+    'reducers',
+    'combinedReducers'
 ]
 
 contexts = [
     {
-        'NAME': 'UNIVERSITIES',
         'name': 'universities'
     }, {
-        'NAME': 'COUNTRIES',
         'name': 'countries'
     }, {
-        'NAME': 'MAIN_CAMPUS',
         'name': 'mainCampus'
     }
 ]
@@ -57,13 +56,21 @@ def write_file(file, data):
         the_file.write(data)
 
 
+def convert(name):
+    s1 = re.sub('(.)([A-Z][a-z]+)', r'\1_\2', name)
+    return re.sub('([a-z0-9])([A-Z])', r'\1_\2', s1).upper()
+
+
+for c in contexts:
+    c['NAME'] = convert(c['name'])
+
+# print(contexts)
+
 for filename in templates:
     t = template.Template(
         read_file(os.path.join(templates_dir, filename + '.tpl')))
 
-    output = ""
-    for tmpC in contexts:
-        c = template.Context(tmpC)
-        output += t.render(c) + "\n\n"
+    c = template.Context({'data': contexts})
+    output = t.render(c)
 
     write_file(os.path.join(saving_dir, filename + '.js'), output)

frontend/generate/templates/action-types.tpl

@@ -4,7 +4,11 @@
 // MODIFY THE FILE ABOVE IF YOUR NOT SATISFIED 
 // THIS WARNING DOESN'T APPLY TO .tpl FILES...
 
-export const {{NAME}}_HAS_ERROR = '{{NAME}}_HAS_ERROR';
-export const {{NAME}}_IS_LOADING = '{{NAME}}_IS_LOADING';
-export const {{NAME}}_FETCH_DATA_SUCCESS = '{{NAME}}_FETCH_DATA_SUCCESS';
-export const {{NAME}}_INVALIDATED = '{{NAME}}_INVALIDATED';
+
+{% for obj in data %}
+export const {{obj.NAME}}_HAS_ERROR = '{{obj.NAME}}_HAS_ERROR';
+export const {{obj.NAME}}_IS_LOADING = '{{obj.NAME}}_IS_LOADING';
+export const {{obj.NAME}}_FETCH_DATA_SUCCESS = '{{obj.NAME}}_FETCH_DATA_SUCCESS';
+export const {{obj.NAME}}_INVALIDATED = '{{obj.NAME}}_INVALIDATED';
+
+{% endfor %}

frontend/generate/templates/actions.tpl

@@ -5,48 +5,50 @@
 // THIS WARNING DOESN'T APPLY TO .tpl FILES...
 
 import {
-    {{NAME}}_HAS_ERROR,
-    {{NAME}}_IS_LOADING,
-    {{NAME}}_FETCH_DATA_SUCCESS,
-    {{NAME}}_INVALIDATED
+{% for obj in data %}
+    {{obj.NAME}}_HAS_ERROR,
+    {{obj.NAME}}_IS_LOADING,
+    {{obj.NAME}}_FETCH_DATA_SUCCESS,
+    {{obj.NAME}}_INVALIDATED,
+{% endfor %}
 } from "./action-types";
 
-
-export function {{name}}HasError(bool) {
+{% for obj in data %}
+export function {{obj.name}}HasError(bool) {
     return {
-        type: {{NAME}}_HAS_ERROR,
+        type: {{obj.NAME}}_HAS_ERROR,
         hasError: bool
     };
 }
 
-export function {{name}}IsLoading(bool) {
+export function {{obj.name}}IsLoading(bool) {
     return {
-        type: {{NAME}}_IS_LOADING,
+        type: {{obj.NAME}}_IS_LOADING,
         isLoading: bool
     };
 }
 
-export function {{name}}Invalidated(bool) {
+export function {{obj.name}}Invalidated(bool) {
     return {
-        type: {{NAME}}_INVALIDATED,
+        type: {{obj.NAME}}_INVALIDATED,
         invalidated: bool
     };
 }
 
-export function {{name}}FetchDataSuccess({{name}}) {
-    {{name}}Invalidated(false)
+export function {{obj.name}}FetchDataSuccess({{obj.name}}) {
+    {{obj.name}}Invalidated(false)
 
     return {
-        type: {{NAME}}_FETCH_DATA_SUCCESS,
-        {{name}},
-        {{name}}FetchedAt: Date.now()
+        type: {{obj.NAME}}_FETCH_DATA_SUCCESS,
+        {{obj.name}},
+        {{obj.name}}FetchedAt: Date.now()
     };
 }
 
 
-export function {{name}}FetchData(url) {
+export function {{obj.name}}FetchData(url) {
     return (dispatch) => {
-        dispatch({{name}}IsLoading(true));
+        dispatch({{obj.name}}IsLoading(true));
 
         fetch(url)
             .then((response) => {
@@ -54,15 +56,16 @@ export function {{name}}FetchData(url) {
                     throw Error(response.statusText);
                 }
 
-                dispatch({{name}}IsLoading(false));
+                dispatch({{obj.name}}IsLoading(false));
 
                 return response;
             })
             .then((response) => response.json())
-            .then(({{name}}) => {
-                dispatch({{name}}Invalidated(false));
-                dispatch({{name}}FetchDataSuccess({{name}}));
+            .then(({{obj.name}}) => {
+                dispatch({{obj.name}}Invalidated(false));
+                dispatch({{obj.name}}FetchDataSuccess({{obj.name}}));
             })
-            .catch(() => dispatch({{name}}HasError(true)));
+            .catch(() => dispatch({{obj.name}}HasError(true)));
     };
-}
\ No newline at end of file
+}
+{% endfor %}
\ No newline at end of file

frontend/generate/templates/combinedReducers.tpl

+// WARNING
+// THIS FILE HAS BEEN AUTOMATICALLY GENERATED
+// WITH /frontend/generate/generate_frontend_files.js
+// MODIFY THE FILE ABOVE IF YOUR NOT SATISFIED 
+// THIS WARNING DOESN'T APPLY TO .tpl FILES...
+
+import { combineReducers } from 'redux';
+
+import {
+{% for obj in data %}
+  {{obj.name}}Fetched,
+  {{obj.name}}HasError,
+  {{obj.name}}IsLoading,
+  {{obj.name}}Invalidated,
+{% endfor %}
+} from './reducers';
+
+{% for obj in data %}
+export const {{obj.name}}Reducers = combineReducers({
+  fetched: {{obj.name}}Fetched,
+  hasError: {{obj.name}}HasError,
+  isLoading: {{obj.name}}IsLoading,
+  invalidated: {{obj.name}}Invalidated,
+})
+{% endfor %}

frontend/generate/templates/reducers.tpl

@@ -5,16 +5,18 @@
 // THIS WARNING DOESN'T APPLY TO .tpl FILES...
 
 import {
-    {{NAME}}_HAS_ERROR,
-    {{NAME}}_IS_LOADING,
-    {{NAME}}_FETCH_DATA_SUCCESS,
-    {{NAME}}_INVALIDATED
+{% for obj in data %}
+    {{obj.NAME}}_HAS_ERROR,
+    {{obj.NAME}}_IS_LOADING,
+    {{obj.NAME}}_FETCH_DATA_SUCCESS,
+    {{obj.NAME}}_INVALIDATED,
+{% endfor %}
 } from "./action-types";
 
-
-export function {{name}}HasError(state = false, action) {
+{% for obj in data %}
+export function {{obj.name}}HasError(state = false, action) {
     switch (action.type) {
-        case {{NAME}}_HAS_ERROR:
+        case {{obj.NAME}}_HAS_ERROR:
             return action.hasError;
 
         default:
@@ -22,9 +24,9 @@ export function {{name}}HasError(state = false, action) {
     }
 }
 
-export function {{name}}IsLoading(state = false, action) {
+export function {{obj.name}}IsLoading(state = false, action) {
     switch (action.type) {
-        case {{NAME}}_IS_LOADING:
+        case {{obj.NAME}}_IS_LOADING:
             return action.isLoading;
 
         default:
@@ -32,9 +34,9 @@ export function {{name}}IsLoading(state = false, action) {
     }
 }
 
-export function {{name}}Invalidated(state = false, action) {
+export function {{obj.name}}Invalidated(state = false, action) {
     switch (action.type) {
-        case {{NAME}}_INVALIDATED:
+        case {{obj.NAME}}_INVALIDATED:
             return action.invalidated;
 
         default:
@@ -42,15 +44,17 @@ export function {{name}}Invalidated(state = false, action) {
     }
 }
 
-export function {{name}}Fetched(state = { {{name}}: [], {{name}}FetchedAt: null }, action) {
+export function {{obj.name}}Fetched(state = { {{obj.name}}: [], {{obj.name}}FetchedAt: null }, action) {
     switch (action.type) {
-        case {{NAME}}_FETCH_DATA_SUCCESS:
+        case {{obj.NAME}}_FETCH_DATA_SUCCESS:
             return {
-                {{name}}: action.{{name}},
-                fetchedAt: action.{{name}}FetchedAt
+                {{obj.name}}: action.{{obj.name}},
+                fetchedAt: action.{{obj.name}}FetchedAt
             }
 
         default:
             return state;
     }
-}
\ No newline at end of file
+}
+
+{% endfor %}
\ No newline at end of file

frontend/src/components/App.js

@@ -200,11 +200,11 @@ App.propTypes = {
 const mapStateToProps = (state) => {
     return {
         countries: {
-            countries: state.countriesFetched.countries,
-            fetchedAt: state.countriesFetched.fetchedAt,
-            hasError: state.countriesHasError,
-            isLoading: state.countriesIsLoading,
-            invalidated: state.countriesInvalidated
+            countries: state.countries.fetched.countries,
+            fetchedAt: state.countries.fetched.fetchedAt,
+            hasError: state.countries.hasError,
+            isLoading: state.countries.isLoading,
+            invalidated: state.countries.invalidated
         }
     };
 };

frontend/src/components/map/UnivMap.js

@@ -122,17 +122,17 @@ class UnivMap extends Component {
 
 const mapStateToProps = (state) => {
     return {
-        universities: state.universitiesFetched.universities,
-        universitiesFetchedAt: state.universitiesFetched.fetchedAt,
-        universitiesHasError: state.universitiesHasError,
-        universitiesIsLoading: state.universitiesIsLoading,
-        universitiesInvalidated: state.universitiesInvalidated,
-
-        mainCampus: state.mainCampusFetched.mainCampus,
-        mainCampusFetchedAt: state.mainCampusFetched.fetchedAt,
-        mainCampusHasError: state.mainCampusHasError,
-        mainCampusIsLoading: state.mainCampusIsLoading,
-        mainCampusInvalidated: state.mainCampusInvalidated,
+        universities: state.universities.fetched.universities,
+        universitiesFetchedAt: state.universities.fetched.fetchedAt,
+        universitiesHasError: state.universities.hasError,
+        universitiesIsLoading: state.universities.isLoading,
+        universitiesInvalidated: state.universities.invalidated,
+
+        mainCampus: state.mainCampus.fetched.mainCampus,
+        mainCampusFetchedAt: state.mainCampus.fetched.fetchedAt,
+        mainCampusHasError: state.mainCampus.hasError,
+        mainCampusIsLoading: state.mainCampus.isLoading,
+        mainCampusInvalidated: state.mainCampus.invalidated,
     };
 };
 

frontend/src/components/map/UnivMapReloadButton.js

@@ -33,7 +33,7 @@ class UnivMapReloadButton extends Component {
 
 const mapStateToProps = (state) => {
     return {
-        invalidated: state.universitiesInvalidated
+        invalidated: state.universities.invalidated
     };
 };
 

frontend/src/reducers/index.js

 import { combineReducers } from 'redux';
 
 import {
-  universitiesFetched,
-  universitiesHasError,
-  universitiesIsLoading,
-  universitiesInvalidated,
-
-  countriesFetched,
-  countriesHasError,
-  countriesIsLoading,
-  countriesInvalidated,
-
-  mainCampusFetched,
-  mainCampusHasError,
-  mainCampusIsLoading,
-  mainCampusInvalidated,
-} from '../generated/reducers';
-
+  universitiesReducers,
+  mainCampusReducers,
+  countriesReducers
+} from '../generated/combinedReducers';
 
 const rootReducer = combineReducers({
-  universitiesFetched,
-  universitiesHasError,
-  universitiesIsLoading,
-  universitiesInvalidated,
-
-  countriesFetched,
-  countriesHasError,
-  countriesIsLoading,
-  countriesInvalidated,
-
-  mainCampusFetched,
-  mainCampusHasError,
-  mainCampusIsLoading,
-  mainCampusInvalidated,
+  universities: universitiesReducers,
+  mainCampus: mainCampusReducers,
+  countries: countriesReducers
 })
 
 export default rootReducer
-