Refactored - Working without css

src/App.js

@@ -1,49 +1,58 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
 import Header from './components/Header/header';
 import Categories from './components/Categories';
 import Recipes from './components/Recipes';
 
-import { initAction } from './actions/initAction';
 
 import './App.css';
 
-class App extends Component {
+class App {
   static recipeURL = './recipes.json';
 
-  initAction = (data) => {
+  constructor() {
-    this.props.initAction(data);
+    this.data = undefined;
+    this.renderPromise = undefined;
+
+    this.renderPromise = (
+      this
+      .initialize()
+      .then(
+        () => this.render()
+      )
+    );
   }
 
-  componentDidMount() {
+  initialize() {
-    const initAction = this.initAction;
 
-    fetch(App.recipeURL)
+    return fetch(App.recipeURL)
-      .then(function (response) {
+      .then((response) => {
         return response.json();
       })
-      .then(function (dataJSON) {
+      .then((dataJSON) => {
-        initAction(dataJSON);
+        this.data = dataJSON;
       });
   }
 
   render() {
     return (
+      `
       <div className="App">
-        <Header />
+        ${
-        <Categories />
+          Header()
-        <Recipes />
+        }
+        ${
+          Categories({
+            categories: this.data.categories,
+          })
+        }
+        ${
+          Recipes({
+            recipes: this.data.recipes,
+          })
+        }
       </div>
+      `
     );
   }
 }
 
-const mapStateToProps = state => ({
+export default (App);
-  data: state.data,
-});
-const mapDispatchToProps = dispatch => ({
-  initAction: (data) => dispatch(initAction(data)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(App);

src/actions/initAction.js

@@ -1,6 +0,0 @@
-export const initAction = (data) => dispatch => {
-    dispatch({
-        type: 'INIT',
-        payload: data,
-    })
-}

src/components/Categories/categories.js

@@ -1,28 +1,23 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
 import CategoryCard from '../CategoryCard';
 
 import './categories.css';
 
 function Categories(props) {
     return (
+        `
         <div className="categories-wrapper">
             <div className="categories-inner">
-            {
+            ${
                 props.categories.map((category) => (
-                    <CategoryCard data={category} />
+                    CategoryCard({
+                        category,
+                    })
                 ))
             }
             </div>
         </div>
+        `
     )
 }
 
-
+export default (Categories);
-function mapStateToProps(state) {
-    return {
-        categories: state.data.categories || [],
-    }
-}
-export default connect(mapStateToProps)(Categories);

src/components/CategoryCard/categorycard.js

@@ -1,5 +1,3 @@
-import React, { Component } from 'react';
-
 import './categorycard.css';
 
 function toTitleCase(str) {
@@ -12,22 +10,24 @@ function toTitleCase(str) {
 
 export default function CategoryCard(props) {
     return (
+        `
         <div className="category-card" >
             <div className="category-card-left">
-                <img className="category-card-image" src={props.data.image} alt={props.data.name} />
+                <img className="category-card-image" src=${props.category.image} alt=${props.category.name} />
             </div>
             <div className="category-card-right">
                 <div className="category-card-title">
-                    {
+                    ${
-                        toTitleCase(props.data.name)
+                        toTitleCase(props.category.name)
                     }
                 </div>
                 <div className="category-card-subtitle">
-                    {
+                    ${
-                        `${props.data.restaurants} Resturants`
+                        `${props.category.restaurants} Resturants`
                     }
                 </div>
             </div>
         </div>
+        `
     )
-}
+}

src/components/Header/header.js

@@ -1,11 +1,15 @@
-import React, { Component } from 'react';
+import headerCSS from './header.css';
-// import { connect } from 'react-redux';
-
-
-import './header.css';
 
 export default function Header() {
+    console.log(headerCSS);
+    
     return (
+        `
+        <style type="text/css" scoped>
+            ${
+                headerCSS
+            }
+        </style>
         <div className="header-row">
             <div className="header-text">
                 What would you like to eat?
@@ -13,5 +17,6 @@ export default function Header() {
             <span className="header-icon-notification mdi mdi-bell-outline">
             </span>
         </div>
-    )
+        `
+    );
 }

src/components/RecipeCard/recipecard.js

@@ -1,5 +1,3 @@
-import React, { Component } from 'react';
-
 import './recipecard.css';
 
 function toTitleCase(str) {
@@ -12,35 +10,37 @@ function toTitleCase(str) {
 
 export default function RecipeCard(props) {
     return (
+        `
         <div className="recipe-card" >
             <div className="recipe-card-top">
-                <img className="recipe-card-image" src={props.data.image} alt={props.data.name} />
+                <img className="recipe-card-image" src=${props.recipe.image} alt=${props.recipe.name} />
             </div>
             <div className="recipe-card-bottom">
                 <div className="recipe-card-desc">
                     <div className="recipe-card-logo-wrapper">
-                        <img className="recipe-card-logo" src={props.data.icon} alt={props.data.name} />
+                        <img className="recipe-card-logo" src=${props.recipe.icon} alt=${props.recipe.name} />
                     </div>
                     <div className="recipe-card-title-container">
                         <div className="recipe-card-title">
-                            {
+                            ${
-                                toTitleCase(props.data.name)
+                                toTitleCase(props.recipe.name)
                             }
                         </div>
                         <div className="recipe-card-rating">
-                            {
+                            ${
-                                new Array(props.data.rating).map(_useless => (
+                                new Array(props.recipe.rating).map(_useless => (
+                                    `
                                     <div className="recipe-card-star">
                                     </div>
+                                    `
                                 ))
                             }
                         </div>
                     </div>
                     <div className="recipe-card-price">
                         <div className="recipe-card-price-number">
-
+                            ${
-                            {
+                                `$${props.recipe.price}`
-                                `$${props.data.price}`
                             }
                         </div>
                         <div className="recipe-card-price-suffix">
@@ -49,18 +49,21 @@ export default function RecipeCard(props) {
                     </div>
                 </div>
                 <div className="recipe-card-tags">
-                    {
+                    ${
-                        props.data.tags.map(tag => (
+                        props.recipe.tags.map(tag => (
+                            `
                             <div className="recipe-card-tag">
-                                {
+                                ${
                                     toTitleCase(tag)
                                 }
                             </div>
+                            `
                         ))
                     }
 
                 </div>
             </div>
         </div>
-    )
+        `
+    );
 }

src/components/Recipes/recipes.js

@@ -1,26 +1,21 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
 import RecipeCard from '../RecipeCard';
 
 import './recipes.css';
 
 function Recipes(props) {
     return (
+        `
         <div className="recipes-wrapper">
-            {
+            ${
                 props.recipes.map((recipe) => (
-                    <RecipeCard data={recipe} />
+                    RecipeCard({
+                        recipe,
+                    })
                 ))
             }
         </div>
-    )
+        `
+    );
 }
 
-
+export default (Recipes);
-function mapStateToProps(state) {
-    return {
-        recipes: state.data.recipes || [],
-    }
-}
-export default connect(mapStateToProps)(Recipes);

src/index.js

@@ -1,17 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux'
-import configureStore from './store';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
+window.addEventListener("load", function () {
- <Provider store={configureStore()}>
+    const app = new App();
-  <App />
- </Provider>,
- document.getElementById('root')
-);
 
-// Disable serviceworker for now
+    let elem = document.getElementById('root');
-serviceWorker.unregister();
+    if (elem !== undefined) {
+        app.renderPromise.then((appHtml) => {
+            elem.innerHTML = appHtml;
+        })
+    }
+});

src/reducers/initReducer.js

@@ -1,11 +0,0 @@
-export default (state = {}, action) => {
-  switch (action.type) {
-    case 'INIT':
-      return {
-        ...state,
-        ...action.payload,
-      }
-    default:
-      return state
-  }
-}

src/reducers/rootReducer.js

@@ -1,6 +0,0 @@
-import { combineReducers } from 'redux';
-import initReducer from './initReducer';
-
-export default combineReducers({
-    data: initReducer,
-});