updates

.env

@@ -1,2 +1,4 @@
 REACT_APP_VERSION=$npm_package_version
+REACT_APP_PINATA_API_KEY=f705de5115120b3cabac
+REACT_APP_PINATA_API_SECRET=5cbc25412c0332187724e88b337bb239547f32be4aaad7a4cc9772af805ff0c0
 SKIP_PREFLIGHT_CHECK=true

src/constants/space.ts

@@ -9,4 +9,6 @@ export const DATA = `${SPACE_NAME}_DATA`;
 
 export const MENU = `${SPACE_NAME}_MENU`;
 
+export const ORDER_LIST = `${SPACE_NAME}_ORDER_LIST`;
+
 export const ORDER_ID = `${SPACE_NAME}_ORDER_ID`;

src/helpers/business.ts

@@ -1,5 +1,12 @@
 import { IData, IProfile, ISettings, IMenu } from "../helpers/types";
-import { openBox, openSpace, setSpacePrivate, getSpacePrivate } from "./box";
+import {
+  openBox,
+  openSpace,
+  setSpacePrivate,
+  getSpacePrivate,
+  setSpacePublic,
+  getSpacePublic
+} from "./box";
 import { DATA, MENU } from "../constants/space";
 
 import demo from "../demo";
@@ -71,12 +78,12 @@ export async function getData(): Promise<IData> {
 }
 
 export async function setMenu(menu: IMenu): Promise<IMenu> {
-  await setSpacePrivate(MENU, menu);
+  await setSpacePublic(MENU, menu);
   return menu;
 }
 
 export async function getMenu(): Promise<IMenu> {
-  const menu = await getSpacePrivate(MENU);
+  const menu = await getSpacePublic(MENU);
   return menu;
 }
 

src/helpers/order.ts

@@ -1,13 +1,13 @@
 import {
   ICheckoutDetails,
   ISettings,
-  IOrderItem,
+  IOrderDetails,
   IOrderJson
 } from "../helpers/types";
 import { getSpacePrivate, setSpacePrivate } from "./box";
 import { uuid } from "../helpers/utilities";
 import { PAYMENT_PENDING } from "../constants/paymentStatus";
-import { ORDER_ID } from "../constants/space";
+import { ORDER_ID, ORDER_LIST } from "../constants/space";
 import {
   convertStringToNumber,
   convertNumberToString,
@@ -51,14 +51,34 @@ export function formatCheckoutDetails(
   return checkout;
 }
 
+export async function setOrderList(orderList: string[]): Promise<string[]> {
+  await setSpacePrivate(ORDER_LIST, orderList);
+  return orderList;
+}
+
+export async function getOrderList(): Promise<string[]> {
+  const orderList = await getSpacePrivate(ORDER_LIST);
+  return orderList;
+}
+
+export async function updateOrderList(orderId: string): Promise<string[]> {
+  let orderList: string[] = [];
+
+  const result = await getOrderList();
+  if (result) {
+    orderList = [...result, orderId];
+  }
+
+  await setOrderList(orderList);
+
+  return orderList;
+}
+
 function formatOrderKey(orderId: string): string {
   return `${ORDER_ID}_${orderId}`;
 }
 
-export async function createOrderJson(orderDetails: {
-  items: IOrderItem[];
-  checkout: ICheckoutDetails;
-}): Promise<string> {
+function formatOrderJson(orderDetails: IOrderDetails): IOrderJson {
   const orderId = uuid();
 
   const orderJson: IOrderJson = {
@@ -71,10 +91,29 @@ export async function createOrderJson(orderDetails: {
       result: ""
     }
   };
+  return orderJson;
+}
+
+export async function setOrderJson(orderJson: IOrderJson): Promise<string> {
+  const key = formatOrderKey(orderJson.id);
+  await setSpacePrivate(key, JSON.stringify(orderJson));
+  return orderJson.id;
+}
 
+export async function getOrderJson(orderId: string): Promise<IOrderJson> {
   const key = formatOrderKey(orderId);
+  const orderJson = await getSpacePrivate(key);
+  return orderJson;
+}
 
-  await setSpacePrivate(key, JSON.stringify(orderJson));
+export async function createOrderJson(
+  orderDetails: IOrderDetails
+): Promise<string> {
+  const orderJson = formatOrderJson(orderDetails);
+
+  const orderId = await setOrderJson(orderJson);
+
+  await updateOrderList(orderId);
 
   return orderId;
 }
@@ -83,14 +122,26 @@ export async function updateOrderJson(
   orderId: string,
   updatedOrderJson: any
 ): Promise<void> {
-  const key = formatOrderKey(orderId);
-
-  const orderJson = await getSpacePrivate(key);
+  const orderJson = await getOrderJson(orderId);
 
   const newOrderJson: IOrderJson = {
     ...orderJson,
     ...updatedOrderJson
   };
 
-  await setSpacePrivate(key, JSON.stringify(newOrderJson));
+  await setOrderJson(newOrderJson);
+}
+
+export async function getAllOrders(): Promise<IOrderJson[]> {
+  const orderList = await getOrderList();
+
+  let orders: IOrderJson[] = [];
+
+  if (orderList) {
+    orders = await Promise.all(
+      orderList.map((orderId: string) => getOrderJson(orderId))
+    );
+  }
+
+  return orders;
 }

src/helpers/types.ts

@@ -107,6 +107,11 @@ export interface IPayment {
   result: any;
 }
 
+export interface IOrderDetails {
+  items: IOrderItem[];
+  checkout: ICheckoutDetails;
+}
+
 export interface IOrderJson {
   id: string;
   timestamp: number;

src/helpers/utilities.ts

@@ -323,3 +323,19 @@ export function formatItemId(name: string): string {
 export function sanitizeImgSrc(image: string): string {
   return isIpfsHash(image) ? getIpfsUrl(image) : image;
 }
+
+export function getCurrentPathname() {
+  const current =
+    typeof window !== "undefined" ? sanitizeUrl(window.location.pathname) : "";
+  return current || "/";
+}
+
+export function formatPathname(path: string, match: any) {
+  return sanitizeUrl(`${match.url}${path}`);
+}
+
+export function isActivePath(path: string, match: any) {
+  const pathname = formatPathname(path, match);
+  const current = getCurrentPathname();
+  return current === pathname;
+}

src/layouts/Dashboard/Sidebar.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 import Icon from "../../components/Icon";
 import { colors } from "../../styles";
-import { sanitizeUrl } from "../../helpers/utilities";
+import { formatPathname, isActivePath } from "../../helpers/utilities";
 import { APP_LOGO, APP_NAME } from "../../constants/appMeta";
 
 import overview from "../../assets/navigation/overview.svg";
@@ -109,12 +109,8 @@ const Sidebar = (props: any) => (
     </SAppLogo>
     <SNavigation>
       {navigation.map(item => {
-        const pathname = sanitizeUrl(`${props.match.url}${item.path}`);
-        const current =
-          typeof window !== "undefined"
-            ? sanitizeUrl(window.location.pathname)
-            : "";
-        const active = current === pathname;
+        const pathname = formatPathname(item.path, props.match);
+        const active = isActivePath(item.path, props.match);
         return (
           <Link
             key={pathname}

src/layouts/Dashboard/index.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../constants/dashboard";
 import Loader from "../../components/Loader";
 import { SCenter } from "../../components/common";
+import { isActivePath } from "../../helpers/utilities";
 
 const SWrapper = styled.div`
   position: relative;
@@ -37,6 +38,7 @@ const SContent = styled.div`
 
 interface IContentContainerStyleProps {
   show?: boolean;
+  fixedScroll?: boolean;
 }
 
 const SContentCard = styled.div<IContentContainerStyleProps>`
@@ -45,7 +47,9 @@ const SContentCard = styled.div<IContentContainerStyleProps>`
   align-items: center;
   min-height: 100%;
   border-radius: 6px;
-  padding: ${CONTENT_PADDING * 2}px ${CONTENT_PADDING}px;
+  height: ${({ fixedScroll }) => (fixedScroll ? `100%` : `initial`)};
+  padding: ${({ fixedScroll }) =>
+    fixedScroll ? `0` : `${CONTENT_PADDING * 2}px ${CONTENT_PADDING}px`};
   box-shadow: ${shadows.soft};
   background: rgb(${colors.white});
   color: rgb(${colors.dark});
@@ -71,17 +75,34 @@ const SContentLoading = styled(SCenter)<IContentContainerStyleProps>`
   pointer-events: ${({ show }) => (show ? "auto" : "none")};
 `;
 
+const FixedScrollPaths = ["/inventory", "/orders"];
+
+function isFixedScroll(match: any) {
+  let fixedScroll = false;
+  FixedScrollPaths.forEach((path: string) => {
+    if (!fixedScroll) {
+      const active = isActivePath(path, match);
+      if (active) {
+        fixedScroll = true;
+      }
+    }
+  });
+  return fixedScroll;
+}
+
 const Dashboard = (props: any) => {
-  const { children, match, loading } = props;
+  const { children, match, settings, loading } = props;
   const balance = 35245;
-  const currency = "USD";
+  const fixedScroll = isFixedScroll(match);
   return (
     <SWrapper>
       <Sidebar match={match} />
-      <Header balance={balance} currency={currency} />
+      <Header balance={balance} currency={settings.paymentCurrency} />
       <SContent>
-        <SContentCard show={!loading}>{children}</SContentCard>
-        <SContentLoading show={loading}>
+        <SContentCard fixedScroll={fixedScroll} show={!loading}>
+          {children}
+        </SContentCard>
+        <SContentLoading fixedScroll={fixedScroll} show={loading}>
           <SCenter>
             <Loader />
           </SCenter>
@@ -95,6 +116,7 @@ Dashboard.propTypes = {
   children: PropTypes.node.isRequired,
   match: PropTypes.object.isRequired,
   loading: PropTypes.bool.isRequired,
+  settings: PropTypes.object.isRequired,
   center: PropTypes.bool,
   maxWidth: PropTypes.number
 };

src/pages/Admin/Inventory.tsx

@@ -10,13 +10,21 @@ import Button from "../../components/Button";
 import { CONTENT_PADDING } from "../../constants/dashboard";
 
 const SButtonWrapper = styled.div`
-  position: absolute;
+  position: fixed;
   bottom: ${CONTENT_PADDING * 2}px;
   right: ${CONTENT_PADDING * 2}px;
 `;
 
+const SInventoryList = styled(SColumnList)`
+  padding: 0;
+`;
+
 const SListItem = styled(ListItem)`
-  margin-bottom: 10px;
+  margin: 20px;
+  margin-bottom: 0;
+  &:last-child {
+    margin-bottom: 20px;
+  }
 `;
 
 interface IInventoryProps {
@@ -27,12 +35,10 @@ interface IInventoryProps {
 
 const Inventory = (props: IInventoryProps) => {
   const { menu, settings } = props;
-  console.log("[OrderMenu] menu", menu); // tslint:disable-line
-  console.log("[OrderMenu] settings", settings); // tslint:disable-line
   return (
     <React.Fragment>
       {menu && menu.length ? (
-        <SColumnList>
+        <SInventoryList>
           {menu.map((item: IMenuItem) => (
             <SListItem
               key={`inventory-${item.name}`}
@@ -41,7 +47,7 @@ const Inventory = (props: IInventoryProps) => {
               onClick={() => props.adminShowInventoryModal(item)}
             />
           ))}
-        </SColumnList>
+        </SInventoryList>
       ) : (
         <EmptyState message={`No Inventory`} />
       )}

src/pages/Admin/Orders.tsx

@@ -1,10 +1,38 @@
 import * as React from "react";
-import { SCenter } from "../../components/common";
+import { connect } from "react-redux";
+import { adminGetAllOrders } from "../../redux/_admin";
+import { IOrderJson } from "../../helpers/types";
+import { SColumnList } from "../../components/common";
+import EmptyState from "../../components/EmptyState";
 
-const Orders = (props: any) => (
-  <SCenter>
-    <h4>{"Orders"}</h4>
-  </SCenter>
-);
+class Orders extends React.Component<any, any> {
+  public componentDidMount() {
+    this.props.adminGetAllOrders();
+  }
+  public render() {
+    const { orders } = this.props;
+    return (
+      <React.Fragment>
+        {orders && orders.length ? (
+          <SColumnList>
+            {orders.map((order: IOrderJson) => (
+              <p>{order.id}</p>
+            ))}
+          </SColumnList>
+        ) : (
+          <EmptyState message={`No Orders`} />
+        )}
+      </React.Fragment>
+    );
+  }
+}
 
-export default Orders;
+const reduxProps = (store: any) => ({
+  orders: store.admin.orders,
+  settings: store.admin.settings
+});
+
+export default connect(
+  reduxProps,
+  { adminGetAllOrders }
+)(Orders);