Drinkme#15 (#25)

* #16 레시피 보기
See: Github issue #16
---------------------------------------
### 작업파일
* action/recipeAction.js
* api -> recipeAPI.js, rootAPI.js
* reducer -> recipeReducer.js, rootReducer.js
* saga -> recipeSaga.js, rootSaga.js
* ViewRecipe.jsx,scss
---------------------------------------
### 작업내용
* axios 사용을 위한 saga, redux 세팅
* action, api, saga, reducer 생성
* 서버에서 get 방식으로 body 를 받는 형태로 구현하여 파라미터로 받는거로 변경하기 전까지 작업 중단

* #15 레시피 등록
See: Github issue #15
---------------------------------------
### 작업파일
* 등록 관련 파일들
	* action, api, saga, reducer, container 아래 등록 관련 파일들
* 레시피 보기 관련 파일들
* HTML_TEST
---------------------------------------
### 작업내용
* 레시피 등록 api 연동
* api 이슈 해결 이후 레시피 보기에 맞게 컨버팅
* 테스트용 컴포넌트 삭제

package.json

@@ -9,6 +9,7 @@
         "react": "^16.8.4",
         "react-color": "^2.17.0",
         "react-dom": "^16.8.4",
+        "react-dropzone": "^10.1.4",
         "react-redux": "^6.0.1",
         "react-router-dom": "^4.3.1",
         "react-scripts": "2.1.8",

src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Route, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
-import { MainView, Header, LoginPopup, HTML_TEST, Enrolment, ViewRecipe } from "./containers";
+import { MainView, Header, LoginPopup, Enrolment, ViewRecipe } from "./containers";
 
 const mapStateToProps = state => {
   return {};
@@ -18,8 +18,6 @@ class App extends Component {
           <Route exact path="/popup" component={LoginPopup} />
           <Route exact path="/enrolment" component={Enrolment} />
           <Route exact path="/viewRecipe" component={ViewRecipe} />
-
-          <Route exact path="/test" component={HTML_TEST} />
         </Switch>
       </div>
     );

src/action/enrolmentAction.js

@@ -0,0 +1,25 @@
+export const actions = {
+  ENROLMENT: {
+    REQUEST: "ENROLMENT_REQUEST",
+    SUCCESS: "ENROLMENT_SUCCESS",
+    FAILED: "ENROLMENT_FAILED"
+  }
+};
+
+export function enrolmentRequest(data) {
+  return {
+    type: actions.ENROLMENT.REQUEST,
+    payload: {
+      data
+    }
+  };
+}
+
+export function enrolmentSuccess(result) {
+  return {
+    type: actions.ENROLMENT.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}

src/action/recipeAction.js

@@ -0,0 +1,137 @@
+export const actions = {
+  ALL: {
+    REQUEST: "VIEW_ALL",
+    SUCCESS: "ALL_READ_SUCCESS",
+    FAILED: "ALL_READ_FAILED"
+  },
+  BYID: {
+    REQUEST: "VIEW_BY_ID",
+    SUCCESS: "BY_ID_READ_SUCCESS",
+    FAILED: "BY_ID_READ_FAILED"
+  },
+  TAGBYLATEST: {
+    REQUEST: "VIEW_BY_TAG_LATEST",
+    SUCCESS: "BY_TAG_LATEST_READ_SUCCESS",
+    FAILED: "BY_TAG_LATEST_READ_FAILED"
+  },
+  TAGBYVIEW: {
+    REQUEST: "VIEW_BY_TAG_VIEW",
+    SUCCESS: "BY_TAG_VIEW_READ_SUCCESS",
+    FAILED: "BY_TAG_VIEW_READ_FAILED"
+  },
+  STUFFBYLATEST: {
+    REQUEST: "VIEW_BY_STUFF_LATEST",
+    SUCCESS: "BY_STUFF_LATEST_READ_SUCCESS",
+    FAILED: "BY_STUFF_LATEST_READ_FAILED"
+  },
+  STUFFBYVIEW: {
+    REQUEST: "VIEW_BY_STUFF_VIEW",
+    SUCCESS: "BY_STUFF_VIEWREAD_SUCCESS",
+    FAILED: "BY_STUFF_VIEW_READ_FAILED"
+  }
+};
+
+export function recipeAllRequest() {
+  return {
+    type: actions.ALL.REQUEST
+  };
+}
+
+export function recipeAllSuccess(result) {
+  return {
+    type: actions.ALL.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}
+
+export function recipeIDRequest(id) {
+  return {
+    type: actions.BYID.REQUEST,
+    payload: {
+      id
+    }
+  };
+}
+
+export function recipeIDSuccess(result) {
+  return {
+    type: actions.BYID.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}
+
+export function recipeTagLatestRequest(tag) {
+  return {
+    type: actions.TAGBYLATEST.REQUEST,
+    payload: {
+      tag
+    }
+  };
+}
+
+export function recipeTagLatestSuccess(result) {
+  return {
+    type: actions.TAGBYLATEST.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}
+
+export function recipeTagViewRequest(tag) {
+  return {
+    type: actions.TAGBYVIEW.REQUEST,
+    payload: {
+      tag
+    }
+  };
+}
+
+export function recipeTagViewSuccess(result) {
+  return {
+    type: actions.TAGBYVIEW.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}
+
+export function recipeStuffLatestRequest(ingredient) {
+  return {
+    type: actions.STUFFBYLATEST.REQUEST,
+    payload: {
+      ingredient
+    }
+  };
+}
+
+export function recipeStuffLatestSuccess(result) {
+  return {
+    type: actions.STUFFBYLATEST.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}
+
+export function recipeStuffViewRequest(ingredient) {
+  return {
+    type: actions.STUFFBYVIEW.REQUEST,
+    payload: {
+      ingredient
+    }
+  };
+}
+
+export function recipeStuffViewSuccess(result) {
+  return {
+    type: actions.STUFFBYVIEW.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}

src/api/enrolmentAPI.js

@@ -0,0 +1,12 @@
+import * as webRequestUtil from "./rootAPI";
+
+export async function enrolmentRecipe({ data }) {
+  const url = "recipe";
+
+  console.log(data);
+  const body = {
+    data
+  };
+  const res = await webRequestUtil.post({ url, body });
+  return res.data;
+}

src/api/recipeAPI.js

@@ -0,0 +1,53 @@
+import * as webRequestUtil from "./rootAPI";
+
+export async function getRecipe() {
+  const url = "recipe";
+  const res = await webRequestUtil.get({ url });
+  return res.data;
+}
+
+export async function getRecipeByID({id}) {
+  const url = "recipe/details";
+  const body = {
+    id
+  };
+
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}
+
+export async function getTagByLatest({tag}) {
+  const url = "recipe/tag/new";
+  const body = {
+    tag
+  };
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}
+
+export async function getTagByView({tag}) {
+  const url = "recipe/tag/view";
+  const body = {
+    tag
+  };
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}
+
+export async function getStuffByLatest({ingredient}) {
+  const url = "recipe/ingredient/new";
+  const body = {
+    ingredient
+  };
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}
+
+export async function getStuffByView({ingredient}) {
+  const url = "recipe/ingredient/view";
+  const body = {
+    ingredient
+  };
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}

src/api/rootAPI.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const SERVER_END_POINT = ""; //SERVER URL
+const SERVER_END_POINT = "http://18.191.88.64:9000/"; //SERVER URL
 const basicRequest = (type, { url, headers, body }) => {
   const config = {
     method: type,
@@ -10,9 +10,11 @@ const basicRequest = (type, { url, headers, body }) => {
       "Content-Type": "application/json",
       ...headers
     },
-    data: body
   };
 
+  if (type === "GET") config.params = body;
+  else config.data = body;
+
   return axios(config)
     .then(res => {
       return res;

src/api/userAPI.js

@@ -8,6 +8,7 @@ export async function setJoin({ userid, password }) {
     password
   };
   const res = await webRequestUtil.post({ url, body });
+  console.log(res);
   return res.data;
 }
 export async function setLogin({ userid, password }) {

src/containers/Enrolment/Enrolment.jsx

@@ -9,14 +9,18 @@ import Step1 from "./Function/Step1";
 import Step2 from "./Function/Step2";
 import Step3 from "./Function/Step3";
 import Done from "./Function/Done";
+import { enrolmentRequest } from "../../action/enrolmentAction"
 
 const cx = classNames.bind(styles);
 
 const mapStateToProps = state => {
-  return state;
+  return {
+    state: state.enrolmentReducer.state,
+    result: state.enrolmentReducer.result
+  };
 };
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { enrolmentRequest };
 
 class Enrolment extends Component {
   constructor (props){
@@ -90,12 +94,6 @@ class Enrolment extends Component {
 
   };
 
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-  }
-
   onChangeStepStatus = event => {
     let stepTarget = document.querySelectorAll(".step-1, .step-2, .step-3");
     let clickText = event.target.innerText.trim();
@@ -167,27 +165,27 @@ class Enrolment extends Component {
     switch (cupText) {
       case "하이볼":
         cupTarget[0].classList.add(this.selectCup);
-        enrolmentData.info.cup = "하이볼"
+        enrolmentData.info.cup = "하이볼";
         this.setState({ enrolmentData });
         break;
       case "리큐르":
         cupTarget[1].classList.add(this.selectCup);
-        enrolmentData.info.cup = "리큐르"
+        enrolmentData.info.cup = "리큐르";
         this.setState({ enrolmentData });
         break;
       case "허리케인":
         cupTarget[2].classList.add(this.selectCup);
-        enrolmentData.info.cup = "허리케인"
+        enrolmentData.info.cup = "허리케인";
         this.setState({ enrolmentData });
         break;
       case "마가렛":
         cupTarget[3].classList.add(this.selectCup);
-        enrolmentData.info.cup = "마가렛"
+        enrolmentData.info.cup = "마가렛";
         this.setState({ enrolmentData });
         break;
       case "마티니":
         cupTarget[4].classList.add(this.selectCup);
-        enrolmentData.info.cup = "마티니"
+        enrolmentData.info.cup = "마티니";
         this.setState({ enrolmentData });
         break;
       default:
@@ -335,6 +333,38 @@ class Enrolment extends Component {
 
   onSaveRecipe = () => {
     let doneView = document.querySelector("#done-container");
+    let cup = this.state.enrolmentData.info.name;
+    if (cup === '하이볼') cup = 0;
+    else if (cup === '리큐르') cup = 1;
+    else if (cup === '허리케인') cup = 2;
+    else if (cup === '마가렛') cup = 3;
+    else cup = 4;
+
+    // let tag = this.state.enrolmentData.info.tags;
+
+    //태그 배열 형태로 나누는거 처리해야 됨
+    //재료 포멧은 정해야 될듯
+    let data = {
+      name: this.state.enrolmentData.info.name,
+      glass: cup,
+      percent: 50,
+      description: this.state.enrolmentData.info.describe,
+      tag: [],
+      ingredient: [{
+        "name" : "water",
+        "color" : "blue",
+        "ml" : 20
+        }, {
+        "name" : "hongcho",
+        "color" : "red",
+        "ml" : 10
+        }],
+      owner: '사용자'
+    }
+
+    // data.tag.push(tag);
+
+    this.props.enrolmentRequest(data);
 
     doneView.classList.toggle(this.doneClose);
   };