[redux-observable] added redux observable

package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^12.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
     "react-scripts": "4.0.2",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.0"
   },
   "scripts": {
@@ -34,5 +36,23 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "axios": "^0.21.1",
+    "graphql": "^15.5.0",
+    "history": "^4.10.1",
+    "immutable": "^4.0.0-rc.12",
+    "lodash": "^4.17.21",
+    "mui-datatables": "^3.7.6",
+    "react-bootstrap": "^1.5.0",
+    "react-image-resizer": "^1.3.0",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5",
+    "yup": "^0.32.9",
+    "redux-observable": "^1.2.0",
+    "rxjs": "^6.6.6"
   }
 }

src/App.css

@@ -26,8 +26,38 @@
 
 .App-link {
   color: #61dafb;
+  text-align: center;
+  justify-content: center;
+}
+.FoodTypeLink{
+  color: black;
+  text-align: center;
+}
+.fullPage{
+  padding: 120px 0;
+  position: relative;
+  min-height: 65vh;
+  display:flex!important;
+  margin:0;
+  border:0;
+  color:#FFF;
+  align-items: center;
+  background-size: cover;
+  background-position: center center;
+  height: 100%;
+}
+.CardImage{
+  height: 180px;
+  marginLeft: 113px;
+  paddingLeft: 56.25%;
+  paddingTop: 56.25%;
+  marginTop: 10px;
+  width: 10px;
+}
+.Images{
+  width: 150px;
+  height: 150px;
 }
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,25 +1,19 @@
-import logo from './logo.svg';
+import {NavBar} from "./core/navbar/navbar";
 import './App.css';
+import {Routes} from "./core/routes/routes";
+import {BrowserRouter as Router} from "react-router-dom";
+import {Provider} from 'react-redux'
+import {configureStore} from "./core/store/store"
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const store = configureStore()
+
+
+const App = () =>
+    <Provider store={store}>
+        <Router>
+            <NavBar />
+            <Routes />
+        </Router>
+    </Provider>
 
 export default App;

src/core/history.js

@@ -0,0 +1,2 @@
+import {createBrowserHistory as history} from 'history'
+export default history();

src/core/navbar/hooks/use-routes-on-click.jsx

@@ -0,0 +1,7 @@
+import history from "../../../core/history"
+
+export const useRoutesOnClick = link =>{
+    return () =>{
+        history.push(link)
+    }
+}

src/core/navbar/navbar-icons/navbar-icons.jsx

@@ -0,0 +1,10 @@
+import {IconButton} from "@material-ui/core";
+import {useRoutesOnClick} from "../hooks/use-routes-on-click";
+
+export const NavbarIcons = ({link, icon, edge = 'start'}) => {
+    const onClick = useRoutesOnClick(link);
+
+    return <IconButton onClick={onClick} edge={edge} aria-label='menu'>
+        {icon}
+    </IconButton>
+}

src/core/navbar/navbar-shopping-cart/navbar-shopping-cart.jsx

@@ -0,0 +1,17 @@
+import {Badge, IconButton} from "@material-ui/core";
+import {useRoutesOnClick} from "../hooks/use-routes-on-click";
+import React from "react";
+import {useSelector} from "react-redux";
+
+export const NavbarShoppingCart = ({link, icon, edge = 'start'}) => {
+    const onClick = useRoutesOnClick(link);
+    const shoppingCartData = useSelector(selector)
+
+    return <IconButton onClick={onClick} edge={edge} aria-label='menu'>
+        <Badge badgeContent={shoppingCartData ? shoppingCartData.length : 0} color='secondary'>
+            {icon}
+        </Badge>
+    </IconButton>
+}
+
+const selector = ({shoppingCartReducer}) => shoppingCartReducer.items

src/core/navbar/navbar-title/navbar-title.jsx

@@ -0,0 +1,5 @@
+import {Typography} from "@material-ui/core";
+
+export const NavbarTitle = ({text}) =><Typography variant='h6' color='inherit'>
+    {text}
+</Typography>

src/core/navbar/navbar.jsx

@@ -0,0 +1,17 @@
+import {AppBar, Toolbar} from '@material-ui/core'
+import HomeIcon from '@material-ui/icons/Home'
+import {RestaurantMenu} from "@material-ui/icons";
+import {NavbarIcons} from "./navbar-icons/navbar-icons";
+import {NavbarTitle} from "./navbar-title/navbar-title";
+import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
+import {NavbarShoppingCart} from "./navbar-shopping-cart/navbar-shopping-cart";
+
+export const NavBar = () =>
+    <AppBar position ='static'>
+        <Toolbar variant ='dense'>
+            <NavbarIcons link={'/'} icon={<HomeIcon/>} />
+            <NavbarIcons link={'/menu'} icon={<RestaurantMenu/>} />
+            <NavbarTitle text={'React Restaurant'} />
+            <NavbarShoppingCart link={'/menu/shopping-cart'} icon={<AddShoppingCartIcon/>} edge={'end'} />
+        </Toolbar>
+    </AppBar>

src/core/routes/routes.jsx

@@ -0,0 +1,16 @@
+import {Router, Route, Switch} from "react-router-dom";
+import {Home} from "../../home/home";
+import {FoodMenu} from "../../menu/containers";
+import history from '.././history';
+import {SandwichMenu} from "../../sandwich-menu/containers";
+import {ShoppingCart} from "../../shopping-cart/containers";
+
+export const Routes = () =>
+    <Router history={history}>
+        <Switch>
+            <Route path={'/'} component={Home} exact/>
+            <Route path={'/menu'} component={FoodMenu} exact/>
+            <Route path={'/menu/sandwiches'} component={SandwichMenu}/>
+            <Route path={'/menu/shopping-cart'} component={ShoppingCart} />
+        </Switch>
+    </Router>

src/core/site-error/error.jsx

@@ -0,0 +1,5 @@
+import {Box} from "@material-ui/core";
+
+export const Error = () => <Box mt={12} ml={90}>
+    <div>The site has ran into an error. Please try again shortly</div>
+</Box>

src/core/store/store.js

@@ -0,0 +1,11 @@
+import {createStore, applyMiddleware} from "redux";
+import {rootReducers} from "../../startup/reducers/index";
+import {createEpicMiddleware} from 'redux-observable'
+import {rootEpic} from "../../startup/epics";
+
+export const configureStore = () => {
+    const epicMiddleWare = createEpicMiddleware();
+    const store = createStore(rootReducers, applyMiddleware(epicMiddleWare));
+    epicMiddleWare.run(rootEpic)
+    return store;
+}

src/home/home.jsx

@@ -0,0 +1,15 @@
+import logo from '../logo.svg'
+import {Link} from "react-router-dom";
+
+export const Home = () =>
+    <div className="App">
+        <header className="App-header">
+            <img src={logo} className="App-logo" alt="logo" />
+            <p>
+                Welcome to React Restaurant
+            </p>
+            <Link className="App-link" to="/menu">
+                Go to menu
+            </Link>
+        </header>
+    </div>

src/menu/components/menu.jsx

@@ -0,0 +1,8 @@
+import background from '../../core/images/background.jpg'
+import {FoodCards} from "../containers/food-cards/food-cards";
+
+
+export const Menu = () => 
+    <div className={'fullPage'} style={{backgroundImage: `url(${background}`}}>
+        <FoodCards />
+    </div>

src/menu/containers/context.js

@@ -0,0 +1,3 @@
+import {createContext} from "react";
+
+export const MenuContext = createContext({})

src/menu/containers/food-card/body/food-card-body.jsx

@@ -0,0 +1,5 @@
+import {Typography} from "@material-ui/core";
+
+export const FoodCardBody = ({foodItem}) =><Typography variant='body2' color='textPrimary' component='p'>
+    {foodItem.description}
+</Typography>

src/menu/containers/food-card/food-card.jsx

@@ -0,0 +1,19 @@
+import {Card, CardActionArea, CardContent, CardMedia} from "@material-ui/core";
+import history from "../../../core/history";
+import {FoodCardTitle} from "./title/food-card-title";
+import {FoodCardBody} from "./body/food-card-body";
+
+export const FoodCard = ({foodItem}) => <Card>
+    <CardActionArea onClick={() => history.push(`menu/${foodItem.path}`)}>
+        <CardMedia component='img'
+                   alt={foodItem.alt}
+                   height='140'
+                   image={foodItem.img}
+                   title={foodItem.name}
+                   className={'CardImage'}/>
+    </CardActionArea>
+    <CardContent>
+        <FoodCardTitle foodItem={foodItem}/> 
+        <FoodCardBody foodItem={foodItem} />
+    </CardContent>
+</Card>

src/menu/containers/food-card/title/food-card-title.jsx

@@ -0,0 +1,5 @@
+import {Typography} from "@material-ui/core";
+
+export const FoodCardTitle = ({foodItem}) =><Typography gutterBottom variant='h5' component='h2'>
+    {foodItem.name}
+</Typography>

src/menu/containers/food-cards/food-cards.jsx

@@ -0,0 +1,13 @@
+import {Box, Grid} from "@material-ui/core";
+import {useMenuContext} from "../hooks/use-menu-context";
+import {FoodCard} from "../food-card/food-card";
+
+export const FoodCards = () =><Box mr={5} mb={2} ml={5}>
+    <Grid container direction='row' justify='space-around' spacing={8}>
+        {useMenuContext().data.map(foodItem =>
+            <Grid item xs={12} sm={12} md={12} lg={3} key={foodItem.id}>
+                <FoodCard foodItem={foodItem} />
+            </Grid>
+        )}
+    </Grid>
+</Box>

src/menu/containers/hooks/use-defaul-menu-context.js

@@ -0,0 +1,6 @@
+import {useState} from "react";
+
+export const useDefaultMenuContext = () => {
+    const [data, setData] = useState([])
+    return {data, setData}
+}

src/menu/containers/hooks/use-init.js

@@ -0,0 +1,8 @@
+import {useMenuContext} from "./use-menu-context";
+import {foodData} from '../../data/food'
+import {useEffect} from "react";
+
+export const useInit = () => {
+    const {setData} = useMenuContext()
+    useEffect(() => setData(() => foodData),[])
+}

src/menu/containers/hooks/use-menu-context.js

@@ -0,0 +1,4 @@
+import {useContext} from "react";
+import {MenuContext} from "../context";
+
+export const useMenuContext = () => useContext(MenuContext)

src/menu/containers/index.jsx

@@ -0,0 +1,10 @@
+import {MenuContext} from "./context";
+import {useDefaultMenuContext} from "./hooks/use-defaul-menu-context";
+import {InitBehaviour} from "./init-behaviour";
+import {Menu} from "../components/menu";
+
+export const FoodMenu = () =>
+    <MenuContext.Provider value={useDefaultMenuContext()}>
+        <InitBehaviour />
+        <Menu/>
+    </MenuContext.Provider>

src/menu/containers/init-behaviour.js

@@ -0,0 +1,6 @@
+import {useInit} from "./hooks/use-init";
+
+export const InitBehaviour = () => {
+    useInit()
+    return ''
+}