add orders

src/index.html

@@ -21,10 +21,13 @@
         <button id="register" class="register" type="button">Register</button>
         <button id="logout" class="logout" type="button">Logout</button>
       </form>
-      <button id="categoriesBtn" class="categoriesBtn" type="button">
-        Categories
-      </button>
-      <button id="goodsBtn" class="goodsBtn" type="button">Goods</button>
+      <div id="btnWrapper" class="btnWrapper">
+        <button id="categoriesBtn" class="categoriesBtn" type="button">
+          Categories
+        </button>
+        <button id="goodsBtn" class="goodsBtn" type="button">Goods</button>
+        <button id="ordersBtn" class="ordersBtn" type="button">Orders</button>
+      </div>
     </section>
     <ul id="renderList" class="renderList"></ul>
   </body>

src/java-script/api-data/index.js

@@ -5,7 +5,7 @@ const getGQL = url => async (query, variables) => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: token ? 'Bearer ' + token : '',
+        Authorization: 'Bearer ' + token ? token : '',
       },
       body: JSON.stringify({ query, variables }),
     });
@@ -24,7 +24,7 @@ const loginGQL = async (login, password) => {
 query log($login:String, $password:String){
         login(login:$login, password:$password)
     }`,
-      { login, password },
+      JSON.stringify({ login, password }),
     );
     const token = data.login;
     if (token) localStorage.token = token;
@@ -125,6 +125,73 @@ const goodById = async _id => {
   }
 };
 
+const ordersGQL = async () => {
+  try {
+    const { data } = await gql(
+      `query orders {
+    OrderFind(query:"[{}]")
+    {
+    _id
+    createdAt 
+    total
+    orderGoods {
+      price
+      count
+      total
+      good {
+        name
+      }
+    }
+  }
+}`,
+      {},
+    );
+    return data.OrderFind;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const orderById = async _id => {
+  try {
+    const { data } = await gql(
+      `query findById($id:String){
+        OrderFindOne (query:$id){
+            _id createdAt name price description images  {
+				url
+			}
+        }
+    }`,
+      { id: JSON.stringify([{ _id }]) },
+    );
+
+    return data.OrderFindOne;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const makeOrderById = async id => {
+  try {
+    const { data } = await gql(
+      `  mutation makeOrder($id:ID){
+		OrderUpsert(order:{
+      orderGoods:[
+        {count:1,good:{_id:$id}}
+      ]
+    }){
+          _id,createdAt,total
+		}
+	}`,
+      { id },
+    );
+
+    return data.OrderUpsert;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 export {
   loginGQL,
   registerGQL,
@@ -132,4 +199,7 @@ export {
   goodsGQL,
   categoryById,
   goodById,
+  ordersGQL,
+  orderById,
+  makeOrderById,
 };

src/java-script/hw.js

@@ -9,6 +9,8 @@ import {
   asyncGetCategoryById,
 } from './redux/categories/operations';
 import { asyncGetGoods, asyncGetGoodById } from './redux/goods/operations';
+import { asyncGetOrders, asyncGetOrderById } from './redux/orders/operations';
+import { getOrders, getOrder } from './redux/orders/selector';
 import { getToken } from './redux/authorization/selector';
 import { getCategories, getCategory } from './redux/categories/selector';
 import { getGoods, getGood } from './redux/goods/selector/';
@@ -36,15 +38,13 @@ const handleAuthForm = async function (e) {
   const password = form[1].value;
   if (id === 'logout') {
     return dispatch(asyncLogout());
-  }
-  if (login === '' || password === '') return;
-  if (id === 'login') {
+  } else if (login === '' || password === '') {
+    return;
+  } else if (id === 'login') {
     dispatch(asyncLogin(login, password));
   } else if (id === 'register') {
     dispatch(asyncCreateUser(login, password));
   }
-  form[0].value = '';
-  form[1].value = '';
 };
 
 formAuthHtml.addEventListener('click', handleAuthForm);
@@ -62,6 +62,9 @@ const handleRenderListHtml = function (e) {
   } else if (name === 'good') {
     dispatch(asyncGetGoodById(id));
     subscribe(() => renderList(getGood(getState()), renderListHtml, ''));
+  } else if (name === 'order') {
+    dispatch(asyncGetOrderById(id));
+    subscribe(() => renderList(getOrder(getState()), renderListHtml, ''));
   }
 };
 
@@ -74,7 +77,7 @@ const renderList = (data, root, requestName) => {
     const id = document.createElement('span');
     id.textContent = `id : ${_id}`;
     const nameHtml = document.createElement('span');
-    nameHtml.textContent = `name : ${name}`;
+    nameHtml.textContent = `name : ${name ? name : 'missing'}`;
     const created = document.createElement('span');
     created.textContent = `createdAt : ${createdAt}`;
     const btn = document.createElement('button');
@@ -100,11 +103,11 @@ const handleList = async function (e) {
     dispatch(asyncGetGoods());
     subscribe(() => renderList(getGoods(getState()), renderListHtml, 'good'));
     renderList(data, renderListHtml);
+  } else if (id === 'ordersBtn') {
+    dispatch(asyncGetOrders());
+    subscribe(() => renderList(getOrders(getState()), renderListHtml, 'order'));
   }
 };
 
-const categoriesLinkHtml = document.getElementById('categoriesBtn');
-const goodsLinkHtml = document.getElementById('goodsBtn');
-
-categoriesLinkHtml.addEventListener('click', handleList);
-goodsLinkHtml.addEventListener('click', handleList);
+const btnWrapper = document.getElementById('btnWrapper');
+btnWrapper.addEventListener('click', handleList);

src/java-script/redux/authorization/operations/index.js

@@ -26,6 +26,7 @@ const asyncLogout = () => async dispatch => {
   try {
     dispatch(actionIsLoading(true));
     dispatch(actionLogOutSuccess());
+    localStorage.token = null;
   } catch (e) {
     dispatch(actionLogOutReject());
   } finally {

src/java-script/redux/goods/reducer/index.js

@@ -7,7 +7,7 @@ import {
   actionGoodReject,
 } from '../action';
 
-const initialState = { goods: [], good: {} };
+const initialState = { goods: [], good: [] };
 
 const reducerGoods = createReducer(initialState, {
   [actionGoodsSuccess]: (state, { payload: goods }) => {

src/java-script/redux/orders/action/index.js

@@ -0,0 +1,24 @@
+import { createAction } from '@reduxjs/toolkit';
+
+const actionOrdersSuccess = createAction('orders/success', value => ({
+  payload: value,
+}));
+
+const actionOrdersReject = createAction('orders/reject', value => ({
+  payload: value,
+}));
+
+const actionOrderSuccess = createAction('order/success', value => ({
+  payload: value,
+}));
+
+const actionOrderReject = createAction('order/reject', value => ({
+  payload: value,
+}));
+
+export {
+  actionOrdersSuccess,
+  actionOrdersReject,
+  actionOrderSuccess,
+  actionOrderReject,
+};

src/java-script/redux/orders/operations/index.js

@@ -0,0 +1,37 @@
+import { actionIsLoading } from '../../loading/action';
+
+import {
+  actionOrdersSuccess,
+  actionOrdersReject,
+  actionOrderSuccess,
+  actionOrderReject,
+} from '../action';
+
+import { ordersGQL, orderById } from '../../../api-data';
+
+const asyncGetOrders = () => async dispatch => {
+  try {
+    dispatch(actionIsLoading(true));
+    const data = await ordersGQL();
+    console.log(data, 'data');
+    dispatch(actionOrdersSuccess(data));
+  } catch (e) {
+    dispatch(actionOrdersReject());
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+const asyncGetOrderById = id => async dispatch => {
+  try {
+    dispatch(actionIsLoading(true));
+    const data = await orderById(id);
+    dispatch(actionOrderSuccess(data));
+  } catch (e) {
+    dispatch(actionOrderReject());
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+export { asyncGetOrders, asyncGetOrderById };

src/java-script/redux/orders/reducer/index.js

@@ -0,0 +1,29 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import {
+  actionOrdersSuccess,
+  actionOrdersReject,
+  actionOrderSuccess,
+  actionOrderReject,
+} from '../action';
+
+const initialState = { orders: [], order: [] };
+
+const reducerOrders = createReducer(initialState, {
+  [actionOrdersSuccess]: (state, { payload: orders }) => {
+    const order = state.order;
+    return { orders, order };
+  },
+  [actionOrdersReject]: (state, _) => {
+    return state;
+  },
+  [actionOrderSuccess]: (state, { payload: order }) => {
+    const orders = state.orders;
+    return { orders, order: [order] };
+  },
+  [actionOrderReject]: (state, _) => {
+    return state;
+  },
+});
+
+export default reducerOrders;

src/java-script/redux/orders/selector/index.js

@@ -0,0 +1,4 @@
+const getOrders = state => state.orders.orders;
+const getOrder = state => state.orders.order;
+
+export { getOrders, getOrder };

src/java-script/redux/rootReducer/index.js

@@ -4,6 +4,7 @@ import storage from 'redux-persist/lib/storage';
 
 import reducerCategories from '../categories/reducer';
 import reducerGoods from '../goods/reducer';
+import reducerOrders from '../orders/reducer';
 import reducerLoading from '../loading/reducer';
 import reducerAuthorization from '../authorization/reducer';
 
@@ -15,6 +16,7 @@ const authorizationPersistConfig = {
 export const rootReducer = combineReducers({
   categories: reducerCategories,
   goods: reducerGoods,
+  orders: reducerOrders,
   isLoading: reducerLoading,
   authorization: persistReducer(
     authorizationPersistConfig,

src/styles.css

@@ -20,7 +20,7 @@ body {
     font-size: 30px;
 }
 
-.categoriesBtn , .goodsBtn{
+.categoriesBtn , .goodsBtn , .ordersBtn{
     background-color: yellow;
     color: rgb(8, 92, 15);
     font-size: 30px;
@@ -64,4 +64,9 @@ input {
     height: 60px;
 }
 
+.btnWrapper{
+    display: flex;
+    flex-direction: column;
+}
+