bendtherules/food-app
1
0
Fork 0
mirror of https://github.com/bendtherules/food-app.git synced 2026-08-18 13:52:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored - Working without css

Browse Source
This commit is contained in:
bendtherules
2018-11-18 20:56:16 +05:30
parent d0217cd938
commit 0b5b24aa2a
10 changed files with 94 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+33 -24
View File
@@ -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) => {
this.props.initAction(data);
constructor() {
this.data = undefined;
this.renderPromise = undefined;
this.renderPromise = (
this
.initialize()
.then(
() => this.render()
)
);
}
componentDidMount() {
const initAction = this.initAction;
initialize() {
fetch(App.recipeURL)
.then(function (response) {
return fetch(App.recipeURL)
.then((response) => {
return response.json();
})
.then(function (dataJSON) {
initAction(dataJSON);
.then((dataJSON) => {
this.data = dataJSON;
});
}
render() {
return (
`
<div className="App">
<Header />
<Categories />
<Recipes />
${
Header()
}
${
Categories({
categories: this.data.categories,
})
}
${
Recipes({
recipes: this.data.recipes,
})
}
</div>
`
);
}
}
const mapStateToProps = state => ({
data: state.data,
});
const mapDispatchToProps = dispatch => ({
initAction: (data) => dispatch(initAction(data)),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
export default (App);
src/actions/initAction.js
-6
View File
@@ -1,6 +0,0 @@
export const initAction = (data) => dispatch => {
dispatch({
type: 'INIT',
payload: data,
})
}
src/components/Categories/categories.js
+7 -12
View File
@@ -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>
`
)
}
function mapStateToProps(state) {
return {
categories: state.data.categories || [],
}
}
export default connect(mapStateToProps)(Categories);
export default (Categories);
src/components/CategoryCard/categorycard.js
+8 -8
View File
@@ -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
+11 -6
View File
@@ -1,11 +1,15 @@
import React, { Component } from 'react';
// import { connect } from 'react-redux';
import './header.css';
import headerCSS from './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
+18 -15
View File
@@ -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.data.price}`
${
`$${props.recipe.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
+8 -13
View File
@@ -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>
)
`
);
}
function mapStateToProps(state) {
return {
recipes: state.data.recipes || [],
}
}
export default connect(mapStateToProps)(Recipes);
export default (Recipes);
src/index.js
+9 -13
View File
@@ -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(
<Provider store={configureStore()}>
<App />
</Provider>,
document.getElementById('root')
);
window.addEventListener("load", function () {
const app = new App();
// Disable serviceworker for now
serviceWorker.unregister();
let elem = document.getElementById('root');
if (elem !== undefined) {
app.renderPromise.then((appHtml) => {
elem.innerHTML = appHtml;
})
}
});
src/reducers/initReducer.js
-11
View File
@@ -1,11 +0,0 @@
export default (state = {}, action) => {
switch (action.type) {
case 'INIT':
return {
...state,
...action.payload,
}
default:
return state
}
}
src/reducers/rootReducer.js
-6
View File
@@ -1,6 +0,0 @@
import { combineReducers } from 'redux';
import initReducer from './initReducer';
export default combineReducers({
data: initReducer,
});