[v1.2.0]

- API connecting
  - fetching menu list from database
- added axios
- started working redux

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack-dev-server --open",
-    "build": "npx webpack",
+    "build": "npx webpack --env.mode=production",
     "storybook": "start-storybook"
   },
   "author": "cadenzah",
@@ -34,7 +34,10 @@
     "@material-ui/icons": "^4.5.1",
     "@storybook/addon-actions": "^5.2.6",
     "@storybook/addons": "^5.2.6",
+    "axios": "^0.19.0",
     "clsx": "^1.0.4",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.27",
     "react": "^16.11.0",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.3",

src/components/common/item/MenuItem/MenuItem.js

@@ -41,14 +41,14 @@ const MenuItem = (props) => {
               <Typography
                 variant="h5"
               >
-                {props.item.name}
+                {props.item.menu_name}
               </Typography>
             </Grid>
             <Grid item>
               <Typography
                 variant="subtitle1"
               >
-                {props.item.price}원
+                {props.item.menu_price}원
               </Typography>
             </Grid>
           </Grid>

src/containers/MenuContainer.js

@@ -1,13 +1,17 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { withRouter } from 'react-router-dom'
+
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import * as appActions from '../redux/modules/app'
 
 import PageWrapper from '../components/base/PageWrapper'
 import PageListWrapper from '../components/common/templates/PageListWrapper'
 import PageTitle from '../components/common/typography/PageTitle'
 import MenuItem from '../components/common/item/MenuItem'
 
+
+
 import menu from '../utils/temp/menu'
 
 // # TODOS
@@ -16,17 +20,20 @@ import menu from '../utils/temp/menu'
 //   - 메뉴 Update / Delete에 활용
 
 const MenuContainer = (props) => {
+  useEffect(() => {
+    props.appActions.getMenuList(1)
+  }, [])
   return (
     <>
       <PageWrapper>
         <PageTitle>메뉴 목록</PageTitle>
-        <PageListWrapper items={menu}>
+        <PageListWrapper items={props.menuList}>
         {
           (item) => (
             <MenuItem
               item={item}
-              key={item.name}
-              handleClick={() => props.history.push(`/menu/edit/${item.id}`)}
+              key={item.menu_name}
+              handleClick={() => props.history.push(`/menu/edit/${item.menu_id}`)}
             />
           )
         }
@@ -36,4 +43,15 @@ const MenuContainer = (props) => {
   )
 }
 
-export default withRouter(MenuContainer)
+const mapStateToProps = ({ app }) => ({
+  menuList: app.menuList
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  appActions: bindActionCreators(appActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(MenuContainer))

src/redux/modules/app.js

@@ -1,25 +1,31 @@
 import { createAction, handleActions } from 'redux-actions'
+import axios from 'axios'
 
 // action types
 const EXAMPLE_INCREASE = 'app/EXAMPLE_INCREASE'
 const EXAMPLE_DECREASE = 'app/EXAMPLE_DECREASE'
 
+const UPDATE_MENU_LIST = 'app/UPDATE_MENU_LIST'
+
 // action generator functions
 // names will be re-used with `bindActionCreators`
-export const increment = createAction(EXAMPLE_INCREASE)
-export const decrement = createAction(EXAMPLE_DECREASE, value => ({ value }))
+export const getMenuList = (store_id) => (dispatch) => {
+  axios.get(`http://visquit.ga/menu?store_id=${store_id}`)
+    .then(({ data: { results } }) => {
+      dispatch(updateMenuList({ menuList: results[0] }))
+    })
+}
+const updateMenuList = createAction(UPDATE_MENU_LIST, payload => ({ menuList: payload.menuList }))
 
 // default state for this slice state
 const initialState = {
-  value: 0
+  menuList: [],
 }
 
 // reducer for this slice state
 export default handleActions({
-  [EXAMPLE_INCREASE]: (state, action) => ({
-    value: state.value + action.payload
-  }),
-  [EXAMPLE_DECREASE]: (state, action) => ({
-    value: state.value - action.payload.value
-  }),
+  [UPDATE_MENU_LIST]: (state, action) => ({
+    ...state,
+    menuList: action.payload.menuList
+  })
 }, initialState)

webpack.config.js

@@ -5,14 +5,14 @@ const HTMLWebpackPlugin = require('html-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
-module.exports = {
+module.exports = env => ({
   entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.js"],
   output: {
     publicPath: '/',
     filename: '[name].[chunkhash].js',
     path: path.resolve(`${__dirname}/build`)
   },
-  mode: "none",
+  mode: env ? env.mode : "none",
   optimization: {
     runtimeChunk: 'single',
 
@@ -73,4 +73,4 @@ module.exports = {
     //   KEY: JSON.stringify('<VALUE>'),
     // })
   ]
-}
+})