29 | Total Items In Cart: {cart.count}
30 | Subtotal Price: {cart.subTotal}
31 |
42 | );
43 | }
44 | }
45 |
46 | interface ShoppingCartItemViewProps {
47 | cartItem: any;
48 | removeFromCart: (id: number) => void;
49 | }
50 | @observer
51 | class ShoppingCartItemView extends React.Component<
52 | ShoppingCartItemViewProps,
53 | any
54 | > {
55 | render() {
56 | const { id, name, imageUrl } = this.props.cartItem.item;
57 | const { qty, totalPrice, incQty, decQty } = this.props.cartItem;
58 | const { removeFromCart } = this.props;
59 | // const cartStore = this.props[STORE_CART] as CartStore;
60 | return (
61 | -
32 | {cartList.map((cartItem, idx) => (
33 |
-
34 |
38 |
39 | ))}
40 |
62 |
98 | );
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/src/app/components/Cart/style.css:
--------------------------------------------------------------------------------
1 | .buttonSecondary {
2 | background: rgb(66, 184, 221); /* this is a light blue */
3 | }
4 | .buttonSMALL {
5 | font-size: 85%;
6 | }
7 | .buttonXSMALL {
8 | font-size: 70%;
9 | }
10 | .buttonCardAction {
11 | padding: 0.4em 0.6em;
12 | background: #777777;
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/components/Cart/styles.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spac3unit/ecommerce-mobx-typescript/d5380b1c3bf520b810abc403adc8e29de67b1978/src/app/components/Cart/styles.scss
--------------------------------------------------------------------------------
/src/app/components/Catalog/Catalog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { inject, observer } from 'mobx-react';
3 | import { STORE_ROUTER, STORE_CATALOG, STORE_CART } from 'app/constants';
4 | import { Grid, Image, Loader } from 'semantic-ui-react';
5 | import Breadcrumbs from 'app/components/Breadcrumbs';
6 | import CatalogFilterMenu from 'app/components/Catalog/CatalogFilterMenu';
7 | import CatalogSorter from 'app/components/Catalog/CatalogSorter';
8 | @inject(STORE_CATALOG)
9 | @observer
10 | export default class Catalog extends React.Component
63 | 
64 |
65 |
66 |
97 | {name}
67 | qty: {qty}
68 | totalPrice: {totalPrice}
69 |
77 |
85 |
96 |
25 |
32 | );
33 | }
34 | }
35 |
36 | class CatalogComponent extends React.Component
44 |
46 |
47 |
49 |
50 |
53 |
54 |
55 | );
56 | }
57 | }
58 |
59 | const ProductsList = ({ items }) => {
60 | return items.map((p) => (
61 | 62 |
{p.name}
63 | {p.price}
64 | {p.brand}
65 |
66 | ));
67 | };
68 |
--------------------------------------------------------------------------------
/src/app/components/Catalog/CatalogFilterMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Menu } from 'semantic-ui-react';
3 | import { inject, observer } from 'mobx-react';
4 | import { observable, action, toJS } from 'mobx';
5 | import { STORE_CATALOG, STORE_ROUTER } from 'app/constants';
6 |
7 | interface IProps {}
8 | interface IState {
9 | activeItem: any;
10 | }
11 |
12 | @inject(STORE_CATALOG, STORE_ROUTER)
13 | export default class CatalogFilterMenu extends React.Component
44 | {/*
47 |
48 |
50 |
51 |
57 |
58 |
59 | );
60 | }
61 | }
62 |
63 | const CatalogCategories = ({ categoriesList }) => {
64 | console.log(categoriesList);
65 |
66 | return (
67 | <>
68 | {categoriesList.map((c, i) => {
69 | return c.products_in_category.map((p) => {p.name}
);
70 | })}
71 |
72 | );
73 | };
74 | const CatalogBrands = ({ brandsList }) => {
75 | return (
76 | <>{brandsList && brandsList.map((b) => {b.name}
)}
77 | );
78 | };
79 | const CategoryProducts = () => {};
80 | // class CategoriesList extends React.Component
35 |
43 | Value: {value}
44 |
52 |
53 | );
54 | }
55 | }
56 |
57 | @observer
58 | export class Counter extends React.Component<{}, {}> {
59 | @observable value = 5;
60 |
61 | @computed
62 | get canDecrement() {
63 | return this.value !== MINIMUM;
64 | }
65 |
66 | @computed
67 | get canIncrement() {
68 | return this.value !== MAXIMUM;
69 | }
70 |
71 | decrement = () => {
72 | this.value -= 1;
73 | };
74 |
75 | increment = () => {
76 | this.value += 1;
77 | };
78 |
79 | render() {
80 | return (
81 |
46 | //
50 | //
51 | // );
52 | // }
53 | // }
54 |
--------------------------------------------------------------------------------
/src/app/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { inject, observer } from 'mobx-react';
3 |
4 | import { TodoTextInput } from 'app/components/TodoTextInput';
5 | import { TodoModel } from 'app/models/TodoModel';
6 | import { RouterStore } from 'app/stores';
7 |
8 | import * as styles from './style.css';
9 | import { STORE_ROUTER, STORE_CATALOG, STORE_CART } from 'app/constants';
10 | export interface HeaderProps {
11 | addTodo?: (todo: Partial
29 |
52 | );
53 | }
54 | }
55 |
56 | export default Header;
57 |
58 | // render() {
59 | // return (
60 | //
30 | goBack()}>
31 | Go Back
32 |
33 |
51 | -
34 |
- 35 | push('/')} className="pure-menu-link"> 36 | Home 37 | 38 | 39 |
- 40 | push('/shop')} className="pure-menu-link"> 41 | Shop 42 | 43 | 44 |
- 45 | 46 | Services 47 | 48 | 49 |
Todos
62 | //
57 |
58 |
60 | CREATE
59 |