reactredux/webapi/ClientApp/src/store/reducers/ShopItem.ts

146 lines
3.8 KiB
TypeScript

import { Action, Reducer } from 'redux'
import { AppThunkAction } from '../'
import { GetShopItemRequestModel } from '../../models/requests'
import { GetShopItemResponseModel } from '../../models/responses'
import { Get } from '../../restClient'
export interface ShopItemState extends GetShopItemResponseModel {
isLoading: boolean
}
interface RequestAction extends GetShopItemRequestModel {
type: 'REQUEST_SHOP_ITEM'
}
interface ReceiveAction extends GetShopItemResponseModel {
type: 'RECEIVE_SHOP_ITEM'
}
type KnownAction = RequestAction | ReceiveAction
export const actionCreators = {
requestShopItem: (props: GetShopItemRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
Get<Promise<GetShopItemResponseModel>>('https://localhost:7151/api/ShopItem', props)
.then(response => response)
.then(data => {
if(data)
dispatch({ type: 'RECEIVE_SHOP_ITEM', ...data })
})
dispatch({ type: 'REQUEST_SHOP_ITEM', slug: props.slug })
}
}
const unloadedState: ShopItemState = {
id: "",
slug: "demo-post",
image: {
src: "https://dummyimage.com/600x700/dee2e6/6c757d.jpg",
alt: "..."
},
sku: "BST-498",
badges: [
"Sale"
],
title: "Shop item template",
brandName: "Brand & Name",
text: `<p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorem quidem modi. Nam sequi consequatur obcaecati excepturi alias magni, accusamus eius blanditiis delectus ipsam minima ea iste laborum vero?</p>`,
author: {
id: "",
nickName: "Admin",
image: {
src: "https://dummyimage.com/40x40/ced4da/6c757d",
alt: "..."
}
},
created: new Date().toString(),
tags: [ "react", "redux", "webapi" ],
price: 20,
newPrice: 10,
quantity: 10,
comments: [
{
author: {
id: "",
nickName: "Commenter Name 1",
image: {
src: "https://dummyimage.com/50x50/ced4da/6c757d.jpg",
alt: "..."
}
},
comment: "If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks.",
responses: [
{
author: {
id: "",
nickName: "Commenter Name 4",
image: {
src: "https://dummyimage.com/50x50/ced4da/6c757d.jpg",
alt: "..."
}
},
comment: "And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors."
},
{
author: {
id: "",
nickName: "Commenter Name 3",
image: {
src: "https://dummyimage.com/50x50/ced4da/6c757d.jpg",
alt: "..."
}
},
comment: "When you put money directly to a problem, it makes a good headline."
}
]
},
{
author: {
id: "",
nickName: "Commenter Name 2",
image: {
src: "https://dummyimage.com/50x50/ced4da/6c757d.jpg",
alt: "..."
}
},
comment: "When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence."
}
],
isLoading: false
}
export const reducer: Reducer<ShopItemState> = (state: ShopItemState | undefined, incomingAction: Action): ShopItemState => {
if (state === undefined) {
return unloadedState
}
const action = incomingAction as KnownAction
switch (action.type) {
case 'REQUEST_SHOP_ITEM':
return {
...state,
isLoading: true
}
case 'RECEIVE_SHOP_ITEM':
return {
...action,
isLoading: false
}
}
return state
}